:root {
    --primary: #0a192f; /* Dark Navy */
    --accent: #d32f2f; /* US Red */
    --light: #f1f1f1;
    --gold: #ffc107;
}

body { font-family: 'Segoe UI', sans-serif; background: var(--light); margin: 0; color: #333; }

/* Header & Overlapping Logo */
header {
    background: linear-gradient(180deg, var(--primary) 0%, #152c4d 100%);
    color: white;
    padding: 80px 20px 40px; /* Extra top padding */
    text-align: center;
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
    height: 300px;
}

.logo-container {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    background: white;
    border-radius: 50%;
    border: 5px solid var(--accent);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 10;
    overflow: hidden;
}

.logo-container img { width: 100%; height: 100%; object-fit: cover; }

nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 120px; /* Push nav down below logo */
}

nav a { color: white; text-decoration: none; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }
nav a:hover { color: var(--accent); }

/* Main Container */
.container { max-width: 1000px; margin: 0 auto; padding: 40px 20px; }

/* Forms */
.form-box { background: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); max-width: 500px; margin: 0 auto; }
input, textarea, select { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 4px; }
button { background: var(--primary); color: white; border: none; padding: 10px 20px; cursor: pointer; font-weight: bold; }
button:hover { background: var(--accent); }

/* Dashboard Tables */
table { width: 100%; border-collapse: collapse; margin-top: 20px; background: white; }
th, td { padding: 12px; border-bottom: 1px solid #ddd; text-align: left; }
th { background: var(--primary); color: white; }
.badge-pending { background: orange; color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.8em; }
.badge-active { background: green; color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.8em; }