/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f8f9fa; color: #212529; line-height: 1.5; }

/* Layout */
.layout { display: flex; flex-direction: column; min-height: 100vh; background: #fff; }

/* Top Bar */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; background: linear-gradient(135deg, #1a3a5c 0%, #2c5282 100%); color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.topbar .brand { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.5px; }
.topbar nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.topbar nav a { color: #fff; text-decoration: none; padding: 8px 12px; border-radius: 6px; transition: background 0.2s; font-size: 0.9rem; }
.topbar nav a:hover { background: rgba(255,255,255,0.15); text-decoration: none; }
.topbar .sep { width: 1px; height: 24px; background: rgba(255,255,255,0.25); margin: 0 8px; }

/* Main Content */
.content { flex: 1; padding: 32px 24px; max-width: 1200px; margin: 0 auto; width: 100%; }

/* Footer */
.footer { text-align: center; padding: 20px; background: #f1f3f5; color: #666; font-size: 0.85rem; border-top: 1px solid #e9ecef; }

/* Typography */
h1 { font-size: 2rem; color: #1a3a5c; margin: 0 0 16px 0; font-weight: 700; }
h2 { font-size: 1.5rem; color: #1a3a5c; margin: 0 0 20px 0; font-weight: 600; }
h3 { font-size: 1.25rem; color: #1a3a5c; margin: 0 0 12px 0; font-weight: 600; }
p { margin: 0 0 12px 0; }

/* Links */
a { color: #0b5ed7; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Card */
.card { max-width: 720px; border: 1px solid #e9ecef; border-radius: 12px; padding: 20px; margin: 16px 0; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.card h3 { margin-top: 0; }
.card ul { margin: 8px 0; padding-left: 20px; }
.card li { margin: 6px 0; }

/* Role Banner */
.role-banner { background: linear-gradient(135deg, #e8f4fd 0%, #f0f7ff 100%); border: 1px solid #b6d4f8; border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; display: flex; gap: 24px; flex-wrap: wrap; }
.role-banner b { color: #1a3a5c; }

/* Form Elements */
label { display: block; margin-top: 14px; margin-bottom: 6px; font-weight: 500; color: #495057; font-size: 0.9rem; }
input, select, textarea { width: 100%; padding: 10px 14px; border: 1px solid #ced4da; border-radius: 8px; font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s; background: #fff; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #0b5ed7; box-shadow: 0 0 0 3px rgba(11,94,215,0.12); }
input::placeholder { color: #adb5bd; }

/* Buttons */
button, .btn { display: inline-block; padding: 10px 20px; border: 1px solid #ced4da; border-radius: 8px; background: #fff; cursor: pointer; font-size: 0.95rem; font-weight: 500; transition: all 0.2s; color: #495057; margin-top: 14px; }
button:hover, .btn:hover { background: #f8f9fa; border-color: #adb5bd; }
button.primary, .btn-primary { background: #0b5ed7; color: #fff; border-color: #0b5ed7; }
button.primary:hover, .btn-primary:hover { background: #0a4fc2; border-color: #0a4fc2; }
button.success, .btn-success { background: #198754; color: #fff; border-color: #198754; }
button.success:hover, .btn-success:hover { background: #157347; border-color: #157347; }
button.danger, .btn-danger { background: #dc3545; color: #fff; border-color: #dc3545; }
button.danger:hover, .btn-danger:hover { background: #bb2d3b; border-color: #bb2d3b; }

/* Table */
.table { border-collapse: collapse; width: 100%; margin: 16px 0; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.table th, .table td { border: 1px solid #e9ecef; padding: 12px 14px; text-align: left; }
.table th { background: #f8f9fa; font-weight: 600; color: #495057; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }
.table tbody tr:hover { background: #f8f9fa; }
.table tbody tr:nth-child(even) { background: #fafbfc; }

/* Status Badges */
.badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 500; }
.badge-success { background: #d1f2eb; color: #0d6e4f; }
.badge-warning { background: #fff3cd; color: #856404; }
.badge-danger { background: #f8d7da; color: #842029; }
.badge-info { background: #cff4fc; color: #055160; }
.badge-secondary { background: #e9ecef; color: #495057; }

/* Alerts */
.alert { padding: 14px 18px; border-radius: 8px; margin: 16px 0; font-size: 0.95rem; }
.alert-danger { background: #f8d7da; color: #842029; border: 1px solid #f5c2c7; }
.alert-success { background: #d1e7dd; color: #0f5132; border: 1px solid #badbcc; }
.alert-warning { background: #fff3cd; color: #664d03; border: 1px solid #ffecb5; }
.alert-info { background: #cff4fc; color: #055160; border: 1px solid #b6effb; }

/* Loading State */
.loading { display: flex; align-items: center; gap: 10px; color: #6c757d; padding: 20px 0; }
.loading::before { content: ''; width: 20px; height: 20px; border: 2px solid #e9ecef; border-top-color: #0b5ed7; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Empty State */
.empty-state { text-align: center; padding: 40px 20px; color: #6c757d; }
.empty-state p { margin: 0; }

/* Utility Classes */
.text-muted { color: #6c757d; }
.text-success { color: #198754; }
.text-danger { color: #dc3545; }
.text-warning { color: #ffc107; }
.text-info { color: #0dcaf0; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }

/* Action Links */
.action-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: #f8f9fa; border-radius: 6px; color: #0b5ed7; font-weight: 500; transition: background 0.2s; }
.action-link:hover { background: #e9ecef; text-decoration: none; }