/* SEC Ghana Recruitment Portal - Main Styles */

/* Import Color Scheme */
@import url('color-scheme.css');

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: var(--line-height-base);
    color: var(--text-primary);
    background-color: var(--bg-body);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-sm);
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

h1 { font-size: var(--font-size-xxl); font-size: 2.5rem; }
h2 { font-size: var(--font-size-xl); font-size: 2rem; }
h3 { font-size: var(--font-size-lg); font-size: 1.75rem; }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-base); }
h6 { font-size: var(--font-size-sm); }

p {
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition-color);
}

a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.container-fluid {
    width: 100%;
    padding: 0 var(--spacing-lg);
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--spacing-sm));
}

.col {
    flex: 1;
    padding: 0 var(--spacing-sm);
}

.col-1 { flex: 0 0 8.333333%; }
.col-2 { flex: 0 0 16.666667%; }
.col-3 { flex: 0 0 25%; }
.col-4 { flex: 0 0 33.333333%; }
.col-6 { flex: 0 0 50%; }
.col-8 { flex: 0 0 66.666667%; }
.col-9 { flex: 0 0 75%; }
.col-12 { flex: 0 0 100%; }

/* Header */
.header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--text-white);
    box-shadow: var(--box-shadow);
    position: sticky;
    top: 0;
    z-index: var(--z-index-sticky);
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
}

.logo {
    display: flex;
    align-items: center;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-white);
    text-decoration: none;
}

.logo img {
    height: 40px;
    margin-right: var(--spacing-sm);
}

.nav {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav li {
    margin-left: var(--spacing-lg);
}

.nav a {
    color: var(--text-white);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    transition: var(--transition-background);
}

.nav a:hover,
.nav a.active {
    background-color: var(--primary-lighter);
    text-decoration: none;
}

/* Mobile navigation */
.mobile-nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-white);
    font-size: var(--font-size-xl);
    cursor: pointer;
    transition: var(--transition-color);
}

.mobile-nav-toggle:hover {
    color: var(--primary-lighter);
}

/* Main content */
.main-content {
    min-height: calc(100vh - 140px);
    padding: var(--spacing-xl) 0;
    background-color: var(--bg-secondary);
}

/* Cards */
.card {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: var(--spacing-xl);
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.card-header {
    background-color: var(--bg-tertiary);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.card-body {
    padding: var(--spacing-lg);
}

.card-footer {
    background-color: var(--light-color);
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
}

/* Forms */
.form-group {
    margin-bottom: 1.5rem;
}

.form-label,
label.form-label,
form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.9rem;
}

.form-label.required::after {
    content: " *";
    color: var(--danger-color, #c0392b);
}

.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 1rem;
    transition: var(--transition);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);
}

.form-control.is-invalid {
    border-color: var(--danger-color);
}

.form-control.is-valid {
    border-color: var(--success-color);
}

.form-text {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.invalid-feedback {
    color: var(--danger-color);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.valid-feedback {
    color: var(--success-color);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    background: none;
    white-space: nowrap;
}

.btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--box-shadow);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-white);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--text-white);
}

.btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #ffffff !important;
}

.btn-secondary:hover {
    background-color: var(--secondary-hover);
    border-color: var(--secondary-hover);
    color: #ffffff !important;
}

.btn-outline {
    background-color: var(--text-muted);
    border-color: var(--text-muted);
    color: var(--text-white);
}

.btn-success {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: var(--text-white);
}

.btn-success:hover {
    background-color: var(--success-hover);
    border-color: var(--success-hover);
    color: var(--text-white);
}

.btn-danger {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: var(--text-white);
}

.btn-danger:hover {
    background-color: var(--danger-hover);
    border-color: var(--danger-hover);
    color: var(--text-white);
}

.btn-warning {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    color: var(--text-dark);
}

.btn-warning:hover {
    background-color: var(--warning-hover);
    border-color: var(--warning-hover);
    color: var(--text-dark);
}

.btn-info {
    background-color: var(--info-color);
    border-color: var(--info-color);
    color: var(--text-white);
}

.btn-info:hover {
    background-color: var(--info-hover);
    border-color: var(--info-hover);
    color: var(--text-white);
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

.btn-block {
    width: 100%;
}

/* Alerts */
.alert {
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    position: relative;
}

.alert-success {
    background-color: var(--success-light);
    border-color: var(--success-color);
    color: var(--text-primary);
}

.alert-danger {
    background-color: var(--danger-light);
    border-color: var(--danger-color);
    color: var(--text-primary);
}

.alert-warning {
    background-color: var(--warning-light);
    border-color: var(--warning-color);
    color: var(--text-primary);
}

.alert-info {
    background-color: var(--info-light);
    border-color: var(--info-color);
    color: var(--text-primary);
}

.alert-dismissible {
    padding-right: 4rem;
}

.alert-dismissible .close {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--spacing-md) var(--spacing-lg);
    background: none;
    border: none;
    font-size: var(--font-size-lg);
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
}

.alert-dismissible .close:hover {
    opacity: 1;
}

/* Tables */
.table {
    width: 100%;
    margin-bottom: 1rem;
    background-color: var(--white);
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 0.75rem;
    border-top: 1px solid var(--border-color);
    text-align: left;
}

.table thead th {
    background-color: var(--light-color);
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.table-responsive {
    overflow-x: auto;
}

/* Badges */
.badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--border-radius-sm);
}

.badge-primary { background-color: var(--primary-color); color: var(--text-white); }
.badge-success { background-color: var(--success-color); color: var(--text-white); }
.badge-danger { background-color: var(--danger-color); color: var(--text-white); }
.badge-warning { background-color: var(--warning-color); color: var(--text-dark); }
.badge-info { background-color: var(--info-color); color: var(--text-white); }
.badge-secondary { background-color: var(--secondary-color); color: var(--text-white); }

/* Pagination */
.pagination {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
}

.pagination li {
    margin: 0 0.25rem;
}

.pagination a,
.pagination span {
    display: block;
    padding: 0.5rem 0.75rem;
    color: var(--primary-color);
    text-decoration: none;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.pagination a:hover {
    background-color: var(--light-color);
    border-color: var(--primary-color);
}

.pagination .active span {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

/* Job listings */
.job-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: var(--transition);
}

.job-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.job-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.job-meta span {
    display: flex;
    align-items: center;
}

.job-meta i {
    margin-right: 0.5rem;
}

.job-description {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.job-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.job-tag {
    background-color: var(--light-color);
    color: var(--text-color);
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.8rem;
}

.job-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Dashboard styles */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.stat-card {
    background: var(--bg-primary);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    display: flex;
    align-items: center;
    border: 1px solid var(--border-light);
    transition: var(--transition);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-lg);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    margin-right: var(--spacing-md);
}

.stat-icon.primary { background-color: var(--primary-lighter); color: var(--primary-color); }
.stat-icon.success { background-color: var(--success-lighter); color: var(--success-color); }
.stat-icon.warning { background-color: var(--warning-lighter); color: var(--warning-color); }
.stat-icon.danger { background-color: var(--danger-lighter); color: var(--danger-color); }
.stat-icon.info { background-color: var(--info-lighter); color: var(--info-color); }
.stat-icon.secondary { background-color: var(--secondary-lighter); color: var(--secondary-color); }

.stat-content h3 {
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
}

.stat-content p {
    color: var(--text-muted);
    margin: 0;
    font-size: var(--font-size-sm);
}

.stat-link {
    font-size: var(--font-size-xs);
    color: var(--primary-color);
    text-decoration: none;
    margin-top: var(--spacing-xs);
    display: inline-block;
    transition: var(--transition-color);
}

.stat-link:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* Footer */
.footer {
    background-color: var(--secondary-dark);
    color: var(--text-white);
    padding: var(--spacing-xl) 0;
    margin-top: auto;
    border-top: 3px solid var(--primary-color);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-xl);
}

.footer-section h4 {
    margin-bottom: 1rem;
}

.footer-section p,
.footer-section a {
    color: rgba(255, 255, 255, 0.8);
}

.footer-section a:hover {
    color: var(--white);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    margin-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

/* Utility classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-muted { color: var(--text-muted); }
.text-primary { color: var(--primary-color); }
.text-success { color: var(--success-color); }
.text-danger { color: var(--danger-color); }
.text-warning { color: var(--warning-color); }

.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.p-0 { padding: 0; }
.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.p-4 { padding: 2rem; }

/* Responsive design */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    
    .header .container {
        flex-direction: column;
        gap: 1rem;
    }
    
    .nav {
        flex-direction: column;
        width: 100%;
    }
    
    .nav li {
        margin: 0;
        margin-bottom: 0.5rem;
    }
    
    .mobile-nav-toggle {
        display: block;
    }
    
    .nav {
        display: none;
    }
    
    .nav.active {
        display: flex;
    }
    
    .row {
        margin: 0 -10px;
    }
    
    .col {
        padding: 0 10px;
    }
    
    .col-sm-12 { flex: 0 0 100%; }
    
    .dashboard-stats {
        grid-template-columns: 1fr;
    }
    
    .job-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .job-actions {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .table-responsive {
        font-size: 0.875rem;
    }
    
    .btn {
        padding: 0.6rem 1.2rem;
    }
    
    .btn-block {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 10px;
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    
    .card-body {
        padding: 1rem;
    }
    
    .job-card {
        padding: 1rem;
    }
    
    .stat-card {
        padding: 1rem;
    }
    
    .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    .stat-content h3 {
        font-size: 1.5rem;
    }
}

/* Print styles */
@media print {
    .header,
    .footer,
    .nav,
    .btn,
    .alert {
        display: none !important;
    }
    
    .main-content {
        margin: 0;
        padding: 0;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1a1a1a;
        --card-bg: #2d2d2d;
        --text-color: #e0e0e0;
        --border-color: #404040;
    }
    
    body.dark-mode {
        background-color: var(--bg-color);
        color: var(--text-color);
    }
    
    .dark-mode .card {
        background-color: var(--card-bg);
        border-color: var(--border-color);
    }
    
    .dark-mode .form-control {
        background-color: var(--bg-secondary);
        border-color: var(--border-color);
        color: var(--text-primary);
    }
    
    .dark-mode .table {
        background-color: var(--bg-primary);
        color: var(--text-primary);
    }
}

/* SEC Ghana Brand Utility Classes */
.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-success { color: var(--success-color) !important; }
.text-danger { color: var(--danger-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-info { color: var(--info-color) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-white { color: var(--text-white) !important; }

.bg-primary { background-color: var(--primary-color) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; }
.bg-success { background-color: var(--success-color) !important; }
.bg-danger { background-color: var(--danger-color) !important; }
.bg-warning { background-color: var(--warning-color) !important; }
.bg-info { background-color: var(--info-color) !important; }
.bg-light { background-color: var(--bg-secondary) !important; }
.bg-white { background-color: var(--bg-primary) !important; }

.border-primary { border-color: var(--primary-color) !important; }
.border-secondary { border-color: var(--secondary-color) !important; }
.border-light { border-color: var(--border-light) !important; }

/* Enhanced Visual Effects */
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-lg);
    transition: var(--transition);
}

.brand-gradient {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--text-white);
}

.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-center { align-items: center !important; }

.mt-1 { margin-top: var(--spacing-xs) !important; }
.mt-2 { margin-top: var(--spacing-sm) !important; }
.mt-3 { margin-top: var(--spacing-md) !important; }
.mt-4 { margin-top: var(--spacing-lg) !important; }
.mt-5 { margin-top: var(--spacing-xl) !important; }

.mb-1 { margin-bottom: var(--spacing-xs) !important; }
.mb-2 { margin-bottom: var(--spacing-sm) !important; }
.mb-3 { margin-bottom: var(--spacing-md) !important; }
.mb-4 { margin-bottom: var(--spacing-lg) !important; }
.mb-5 { margin-bottom: var(--spacing-xl) !important; }

.p-1 { padding: var(--spacing-xs) !important; }
.p-2 { padding: var(--spacing-sm) !important; }
.p-3 { padding: var(--spacing-md) !important; }
.p-4 { padding: var(--spacing-lg) !important; }
.p-5 { padding: var(--spacing-xl) !important; }

/* ============================================================
   THEME EXTENSIONS — Risk-Register Look & Feel (scoped/safe)
   - Affects only:
       body.auth-shell             -> auth pages (login, etc.)
       body[data-layout="sidebar"] -> admin pages with sidebar
   - Does NOT alter public pages styling.
   ============================================================ */

/* ---------- AUTH SHELL (login / forgot / reset / change) ---------- */
body.auth-shell {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
    color: #2c3e50;
    padding: 16px;
    font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body.auth-shell .auth-container { width: 100%; max-width: 440px; padding: 16px; }
body.auth-shell .auth-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    border-top: 4px solid #d3a304;
}
body.auth-shell .auth-header { text-align: center; margin-bottom: 28px; }
body.auth-shell .auth-logo {
    width: 80px; height: 80px;
    background: linear-gradient(135deg, #d3a304 0%, #9a8103 100%);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px;
    box-shadow: 0 4px 14px rgba(211, 163, 4, 0.35);
}
body.auth-shell .auth-logo i { font-size: 2.4rem; color: #ffffff; }
body.auth-shell .auth-header h1,
body.auth-shell .auth-header h2 {
    color: #2c3e50; font-size: 1.5rem; margin: 0 0 6px; font-weight: 700;
}
body.auth-shell .auth-header p { color: #6c757d; font-size: 0.9rem; margin: 0; }
body.auth-shell .form-group { margin-bottom: 16px; }
body.auth-shell .form-label {
    display: block; margin-bottom: 6px; font-weight: 500; color: #2c3e50; font-size: 0.9rem;
}
body.auth-shell .input-group-icon { position: relative; }
body.auth-shell .input-group-icon > i {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: #6c757d; pointer-events: none;
}
body.auth-shell .input-group-icon .form-control { padding-left: 42px; }
body.auth-shell .form-control {
    width: 100%; padding: 12px 14px;
    border: 2px solid #dee2e6; border-radius: 6px;
    font-size: 1rem; background: #ffffff; transition: all 0.3s ease;
}
body.auth-shell .form-control:focus {
    outline: none; border-color: #d3a304;
    box-shadow: 0 0 0 3px rgba(211, 163, 4, 0.15);
}
body.auth-shell .password-input-wrapper { position: relative; }
body.auth-shell .password-input-wrapper .password-toggle {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #6c757d; cursor: pointer; padding: 6px 8px;
}
body.auth-shell .btn-auth {
    width: 100%; padding: 13px;
    background: linear-gradient(135deg, #d3a304 0%, #9a8103 100%);
    color: #ffffff; border: none; border-radius: 6px;
    font-size: 1rem; font-weight: 600; cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(211, 163, 4, 0.3);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    text-decoration: none;
}
body.auth-shell .btn-auth:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(211, 163, 4, 0.4);
    color: #ffffff;
}
body.auth-shell .auth-footer-links {
    text-align: center; margin-top: 22px; padding-top: 18px;
    border-top: 1px solid #e9ecef; color: #6c757d; font-size: 0.875rem;
}
body.auth-shell .auth-footer-links a { color: #d3a304; font-weight: 500; }
body.auth-shell .auth-footer-links a:hover { color: #b8910a; text-decoration: underline; }
body.auth-shell .alert {
    padding: 12px 14px; border-radius: 6px; margin-bottom: 16px;
    font-size: 0.9rem; border-left: 4px solid;
}
body.auth-shell .alert i { margin-right: 6px; }
body.auth-shell .alert-danger,
body.auth-shell .alert-error { background: #f8d7da; color: #721c24; border-color: #dc3545; }
body.auth-shell .alert-success { background: #d4edda; color: #155724; border-color: #28a745; }
body.auth-shell .alert-warning { background: #fff3cd; color: #856404; border-color: #ffc107; }
body.auth-shell .auth-tagline {
    text-align: center; color: rgba(255, 255, 255, 0.65);
    font-size: 0.8rem; margin-top: 18px;
}

/* ---------- SIDEBAR ADMIN LAYOUT ---------- */
body[data-layout="sidebar"] {
    margin: 0;
    background: #f4f6f9;
    font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Hide legacy elements when sidebar is active (high specificity + !important) */
body[data-layout="sidebar"] > header.header,
body[data-layout="sidebar"] header.header,
html body[data-layout="sidebar"] .header { display: none !important; }
body[data-layout="sidebar"] .footer,
body[data-layout="sidebar"] .back-to-top,
body[data-layout="sidebar"] .mobile-nav-toggle { display: none !important; }

/* The legacy public-flash-message container that lives between header.php's
   conditional sidebar block and its <main>. It would otherwise sit above the
   sidebar shell. Hide it; flash messages re-render inside .sb-content. */
body[data-layout="sidebar"] > .container { display: none !important; }

/* Sidebar shell */
body[data-layout="sidebar"] .sb-wrapper { display: block; min-height: 100vh; }

body[data-layout="sidebar"] .sb-sidebar {
    width: 260px;
    background: linear-gradient(180deg, #2c3e50 0%, #1a252f 100%);
    color: #ffffff;
    position: fixed; top: 0; left: 0; height: 100vh;
    z-index: 1000;
    display: flex; flex-direction: column;
    overflow-y: auto;
    transition: transform 0.3s ease;
}

body[data-layout="sidebar"] .sb-sidebar-header {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex; align-items: center; gap: 10px;
    flex-shrink: 0;
}
body[data-layout="sidebar"] .sb-sidebar-header img {
    height: 36px; width: auto; flex-shrink: 0;
}
body[data-layout="sidebar"] .sb-sidebar-header .sb-brand {
    font-size: 0.95rem; font-weight: 700; color: #ffffff; line-height: 1.25;
}
body[data-layout="sidebar"] .sb-sidebar-header .sb-brand small {
    display: block; font-size: 0.7rem; font-weight: 400; opacity: 0.7; margin-top: 2px;
}

body[data-layout="sidebar"] .sb-menu {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    flex: 1;
}
body[data-layout="sidebar"] .sb-menu > li { margin: 0; padding: 0; list-style: none; }

body[data-layout="sidebar"] .sb-menu > li > a {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 22px;
    color: #ffffff !important;
    opacity: 0.92;
    text-decoration: none !important;
    border-left: 3px solid transparent;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.3;
    transition: background-color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
}
body[data-layout="sidebar"] .sb-menu > li > a > span,
body[data-layout="sidebar"] .sb-menu > li > a > i {
    color: #ffffff !important;
}
body[data-layout="sidebar"] .sb-menu > li > a:hover {
    background: rgba(255, 255, 255, 0.06);
    opacity: 1;
    color: #ffffff !important;
    text-decoration: none !important;
}
body[data-layout="sidebar"] .sb-menu > li.active > a {
    background: rgba(255, 255, 255, 0.10);
    opacity: 1;
    color: #ffffff !important;
    border-left-color: #d3a304;
    text-decoration: none !important;
}
body[data-layout="sidebar"] .sb-menu > li > a > i {
    width: 20px; text-align: center; font-size: 1rem; flex-shrink: 0;
    color: #ffffff !important;
}
body[data-layout="sidebar"] .sb-menu .sb-menu-label {
    padding: 14px 20px 6px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 600;
}
body[data-layout="sidebar"] .sb-menu .sb-menu-divider {
    height: 1px; background: rgba(255, 255, 255, 0.08); margin: 10px 18px;
    list-style: none; padding: 0;
}

body[data-layout="sidebar"] .sb-sidebar-footer {
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    flex-shrink: 0;
}
body[data-layout="sidebar"] .sb-sidebar-footer p { margin: 0; color: inherit; }

/* Main column to the right of the sidebar */
body[data-layout="sidebar"] .sb-main {
    margin-left: 260px;
    min-height: 100vh;
    display: flex; flex-direction: column;
    background: #f4f6f9;
}

/* Top bar */
body[data-layout="sidebar"] .sb-topbar {
    background: #ffffff;
    height: 60px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 25px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    position: sticky; top: 0; z-index: 100;
}
body[data-layout="sidebar"] .sb-topbar-left { display: flex; align-items: center; gap: 14px; }
body[data-layout="sidebar"] .sb-topbar-right { display: flex; align-items: center; gap: 22px; }

body[data-layout="sidebar"] .sb-toggle {
    background: none; border: none; font-size: 1.15rem;
    color: #2c3e50; cursor: pointer; padding: 8px 10px;
    border-radius: 6px; transition: background-color 0.2s ease;
}
body[data-layout="sidebar"] .sb-toggle:hover { background: #f4f6f9; }

body[data-layout="sidebar"] .sb-page-title {
    font-size: 1.15rem; font-weight: 600; color: #2c3e50; margin: 0;
}

body[data-layout="sidebar"] .sb-date {
    color: #6c757d; display: flex; align-items: center; gap: 8px; font-size: 0.875rem;
}

body[data-layout="sidebar"] .sb-user { position: relative; }
body[data-layout="sidebar"] .sb-user-btn {
    display: flex; align-items: center; gap: 8px;
    background: none; border: none; cursor: pointer;
    padding: 6px 10px; border-radius: 6px;
    color: #2c3e50; font-size: 0.9rem;
    transition: background-color 0.2s ease;
}
body[data-layout="sidebar"] .sb-user-btn:hover { background: #f4f6f9; }
body[data-layout="sidebar"] .sb-user-btn > i:first-child {
    font-size: 1.5rem; color: #d3a304;
}
body[data-layout="sidebar"] .sb-user-dropdown {
    position: absolute; right: 0; top: calc(100% + 6px);
    background: #ffffff; border-radius: 6px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    display: none; overflow: hidden; z-index: 1010;
}
body[data-layout="sidebar"] .sb-user-dropdown.show { display: block; }
body[data-layout="sidebar"] .sb-user-dropdown a {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; color: #2c3e50; font-size: 0.9rem;
    text-decoration: none; border-bottom: 1px solid #e9ecef;
}
body[data-layout="sidebar"] .sb-user-dropdown a:last-child { border-bottom: none; }
body[data-layout="sidebar"] .sb-user-dropdown a:hover { background: #f4f6f9; color: #d3a304; }

/* Content area — keep Bootstrap container behavior intact, just add room */
body[data-layout="sidebar"] .sb-content {
    padding: 22px 25px;
    flex: 1;
}

/* Let Bootstrap containers expand to fill the sb-content area
   (Bootstrap's max-widths assume full window; we already have a sidebar). */
body[data-layout="sidebar"] .sb-content .container,
body[data-layout="sidebar"] .sb-content .container-fluid,
body[data-layout="sidebar"] .sb-content .container-sm,
body[data-layout="sidebar"] .sb-content .container-md,
body[data-layout="sidebar"] .sb-content .container-lg,
body[data-layout="sidebar"] .sb-content .container-xl {
    max-width: 100% !important;
    width: 100%;
    /* keep Bootstrap default horizontal padding so row/col gutters stay sane */
}

/* Reset the legacy <main class="main-content"> nesting that header.php opens.
   We do NOT change its inner content — only neutralize the heavy
   background/padding that was meant for full-page layout. */
body[data-layout="sidebar"] main.main-content {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    display: block;
}

/* Page-level hero banners shouldn't appear on admin pages either */
body[data-layout="sidebar"] .hero-section { display: none !important; }

/* Mobile: collapse sidebar */
@media (max-width: 992px) {
    body[data-layout="sidebar"] .sb-sidebar {
        transform: translateX(-100%);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
    }
    body[data-layout="sidebar"].sb-open .sb-sidebar { transform: translateX(0); }
    body[data-layout="sidebar"] .sb-main { margin-left: 0; }
    body[data-layout="sidebar"] .sb-topbar { padding: 0 16px; }
    body[data-layout="sidebar"] .sb-content { padding: 16px; }
    body[data-layout="sidebar"] .sb-date { display: none; }
}

/* ==========================================================
   RR-* COMPONENTS — Risk-register-style cards / forms / tables
   Used by: admin/users.php, admin/user-create.php
   Scoped to admin sidebar layout to avoid global leakage.
   ========================================================== */

body[data-layout="sidebar"] .rr-page-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 22px;
}
body[data-layout="sidebar"] .rr-page-head h2 {
    margin: 0; font-size: 1.85rem; font-weight: 700; color: #1a1f2e;
    display: flex; align-items: center; gap: 12px;
}
body[data-layout="sidebar"] .rr-page-head h2 i { color: #1a1f2e; }
body[data-layout="sidebar"] .rr-page-head .rr-subtitle {
    margin: 4px 0 0; color: #6c757d; font-size: 0.9rem;
}

/* Unified admin page-header (h1 + breadcrumb pattern, matches Settings page) */
body[data-layout="sidebar"] .page-header {
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin-bottom: 22px;
}
body[data-layout="sidebar"] .page-header h1,
body[data-layout="sidebar"] .page-header .page-title {
    margin: 0;
    font-size: 1.85rem;
    font-weight: 700;
    color: #1a1f2e;
    display: flex;
    align-items: center;
    gap: 12px;
}
body[data-layout="sidebar"] .page-header h1 i,
body[data-layout="sidebar"] .page-header .page-title i {
    color: #1a1f2e;
}
body[data-layout="sidebar"] .page-header .breadcrumb {
    margin: 8px 0 0;
    padding: 0;
    background: transparent;
    font-size: 0.875rem;
}
body[data-layout="sidebar"] .page-header .breadcrumb-item,
body[data-layout="sidebar"] .page-header .breadcrumb-item a {
    color: #6c757d;
    text-decoration: none;
}
body[data-layout="sidebar"] .page-header .breadcrumb-item.active {
    color: #6c757d;
}

body[data-layout="sidebar"] .rr-section {
    background: #ffffff;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 22px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    border: 1px solid #eef0f3;
}
body[data-layout="sidebar"] .rr-section-title {
    margin: 0 0 18px; font-size: 1.05rem; font-weight: 600; color: #2c3e50;
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 12px; border-bottom: 1px solid #eef0f3;
}
body[data-layout="sidebar"] .rr-section-title i { color: #d3a304; }

body[data-layout="sidebar"] .rr-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}
body[data-layout="sidebar"] .rr-stat {
    background: #ffffff;
    border-radius: 8px;
    padding: 18px 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    border: 1px solid #eef0f3;
    border-left: 4px solid #d3a304;
    display: flex; align-items: center; gap: 14px;
}
body[data-layout="sidebar"] .rr-stat-icon {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(211,163,4,0.12); color: #d3a304;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
}
body[data-layout="sidebar"] .rr-stat-icon.danger { background: rgba(220,53,69,0.12); color: #dc3545; }
body[data-layout="sidebar"] .rr-stat-icon.warning { background: rgba(255,193,7,0.15); color: #b88a00; }
body[data-layout="sidebar"] .rr-stat-icon.success { background: rgba(40,167,69,0.12); color: #28a745; }
body[data-layout="sidebar"] .rr-stat-icon.info { background: rgba(23,162,184,0.12); color: #17a2b8; }
body[data-layout="sidebar"] .rr-stat-body h3 {
    margin: 0; font-size: 1.5rem; font-weight: 700; color: #2c3e50; line-height: 1;
}
body[data-layout="sidebar"] .rr-stat-body p {
    margin: 4px 0 0; font-size: 0.8rem; color: #6c757d;
}
body[data-layout="sidebar"] .rr-stat.danger { border-left-color: #dc3545; }
body[data-layout="sidebar"] .rr-stat.warning { border-left-color: #ffc107; }
body[data-layout="sidebar"] .rr-stat.success { border-left-color: #28a745; }
body[data-layout="sidebar"] .rr-stat.info { border-left-color: #17a2b8; }

/* Forms */
body[data-layout="sidebar"] .rr-form-row {
    display: flex; flex-wrap: wrap; margin: 0 -10px;
}
body[data-layout="sidebar"] .rr-form-group {
    flex: 0 0 50%; max-width: 50%;
    padding: 0 10px; margin-bottom: 16px;
}
body[data-layout="sidebar"] .rr-form-group.full { flex: 0 0 100%; max-width: 100%; }
body[data-layout="sidebar"] .rr-form-label {
    display: block; margin-bottom: 6px;
    font-weight: 500; color: #2c3e50; font-size: 0.9rem;
}
body[data-layout="sidebar"] .rr-form-label .required { color: #dc3545; }
body[data-layout="sidebar"] .rr-form-control {
    width: 100%; padding: 10px 12px;
    border: 1px solid #d8dde3; border-radius: 6px;
    background: #ffffff; color: #2c3e50;
    font-size: 0.9rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body[data-layout="sidebar"] .rr-form-control:focus {
    outline: none;
    border-color: #d3a304;
    box-shadow: 0 0 0 3px rgba(211,163,4,0.15);
}
body[data-layout="sidebar"] .rr-form-help {
    display: block; margin-top: 5px; font-size: 0.78rem; color: #6c757d;
}
body[data-layout="sidebar"] .rr-input-group {
    position: relative; display: flex;
}
body[data-layout="sidebar"] .rr-input-group .rr-form-control { flex: 1; padding-right: 44px; }
body[data-layout="sidebar"] .rr-input-group .rr-input-btn {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #6c757d;
    padding: 6px 10px; cursor: pointer; border-radius: 4px;
}
body[data-layout="sidebar"] .rr-input-group .rr-input-btn:hover { color: #d3a304; background: #f4f6f9; }

body[data-layout="sidebar"] .rr-form-actions {
    display: flex; justify-content: flex-end; gap: 12px;
    margin-top: 18px; padding-top: 16px; border-top: 1px solid #eef0f3;
}
body[data-layout="sidebar"] .rr-form-actions.spread { justify-content: space-between; }

body[data-layout="sidebar"] .rr-checkbox {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 0;
}
body[data-layout="sidebar"] .rr-checkbox input[type="checkbox"] {
    margin-top: 3px; width: 16px; height: 16px;
    accent-color: #d3a304; cursor: pointer;
}
body[data-layout="sidebar"] .rr-checkbox label { margin: 0; cursor: pointer; }

/* Buttons */
body[data-layout="sidebar"] .rr-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px;
    border: 1px solid transparent; border-radius: 6px;
    font-size: 0.88rem; font-weight: 500;
    cursor: pointer; text-decoration: none !important;
    transition: all 0.2s ease;
    line-height: 1.2;
}
body[data-layout="sidebar"] .rr-btn-primary {
    background: linear-gradient(135deg, #d3a304 0%, #9a8103 100%);
    color: #ffffff !important;
    border-color: #9a8103;
    box-shadow: 0 2px 6px rgba(211,163,4,0.25);
}
body[data-layout="sidebar"] .rr-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(211,163,4,0.35);
    color: #ffffff !important;
}
body[data-layout="sidebar"] .rr-btn-secondary {
    background: #ffffff; color: #2c3e50 !important;
    border-color: #d8dde3;
}
body[data-layout="sidebar"] .rr-btn-secondary:hover {
    background: #f4f6f9;
    color: #2c3e50 !important;
}
body[data-layout="sidebar"] .rr-btn-danger {
    background: #dc3545; color: #ffffff !important; border-color: #dc3545;
}
body[data-layout="sidebar"] .rr-btn-danger:hover { background: #c82333; border-color: #bd2130; color: #ffffff !important; }

/* Filter bar */
body[data-layout="sidebar"] .rr-filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) auto;
    gap: 12px; align-items: end;
}
body[data-layout="sidebar"] .rr-filter-bar .rr-filter-actions { display: flex; gap: 8px; }

/* Data table */
body[data-layout="sidebar"] .rr-table-wrap {
    background: #ffffff; border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    border: 1px solid #eef0f3;
    overflow: hidden;
}
body[data-layout="sidebar"] .rr-table-head {
    padding: 16px 20px;
    border-bottom: 1px solid #eef0f3;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
body[data-layout="sidebar"] .rr-table-head h3 {
    margin: 0; font-size: 1rem; font-weight: 600; color: #2c3e50;
    display: flex; align-items: center; gap: 8px;
}
body[data-layout="sidebar"] .rr-table-head h3 i { color: #d3a304; }
body[data-layout="sidebar"] .rr-table-scroll { width: 100%; overflow-x: auto; }
body[data-layout="sidebar"] .rr-data-table {
    width: 100%; border-collapse: collapse; margin: 0;
}
body[data-layout="sidebar"] .rr-data-table th,
body[data-layout="sidebar"] .rr-data-table td {
    padding: 12px 16px; text-align: left;
    border-bottom: 1px solid #eef0f3;
    font-size: 0.875rem; color: #2c3e50;
    vertical-align: middle;
}
body[data-layout="sidebar"] .rr-data-table th {
    background: #f8f9fb;
    font-weight: 600; color: #495057;
    text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.05em;
    border-bottom: 1px solid #e3e6eb;
}
body[data-layout="sidebar"] .rr-data-table tbody tr:hover { background: #fbfaf3; }
body[data-layout="sidebar"] .rr-data-table tbody tr:last-child td { border-bottom: none; }

body[data-layout="sidebar"] .rr-empty {
    text-align: center; padding: 50px 20px; color: #6c757d;
}
body[data-layout="sidebar"] .rr-empty i { font-size: 2.5rem; color: #c8ccd2; margin-bottom: 12px; }
body[data-layout="sidebar"] .rr-empty h4 { color: #495057; margin: 8px 0 4px; }

/* Badges */
body[data-layout="sidebar"] .rr-badge {
    display: inline-block; padding: 4px 10px;
    border-radius: 999px; font-size: 0.72rem;
    font-weight: 600; line-height: 1.4;
    text-transform: uppercase; letter-spacing: 0.04em;
}
body[data-layout="sidebar"] .rr-role-admin { background: #fbe2e6; color: #a01726; }
body[data-layout="sidebar"] .rr-role-hr { background: #fff3cd; color: #856404; }
body[data-layout="sidebar"] .rr-role-applicant { background: #e3edff; color: #1d4ed8; }
body[data-layout="sidebar"] .rr-status-active { background: #d4edda; color: #155724; }
body[data-layout="sidebar"] .rr-status-inactive { background: #e9ecef; color: #495057; }
body[data-layout="sidebar"] .rr-status-pending { background: #fff3cd; color: #856404; }

/* Icon-only action buttons */
body[data-layout="sidebar"] .rr-actions { display: inline-flex; gap: 6px; align-items: center; }
body[data-layout="sidebar"] .rr-icon-btn {
    width: 32px; height: 32px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f4f6f9; color: #495057;
    border: 1px solid transparent; cursor: pointer;
    font-size: 0.85rem; padding: 0; text-decoration: none !important;
    transition: all 0.2s ease;
}
body[data-layout="sidebar"] .rr-icon-btn:hover {
    background: #e9ecef; color: #2c3e50;
}
body[data-layout="sidebar"] .rr-icon-btn.primary { background: rgba(211,163,4,0.12); color: #9a8103; }
body[data-layout="sidebar"] .rr-icon-btn.primary:hover { background: rgba(211,163,4,0.22); color: #d3a304; }
body[data-layout="sidebar"] .rr-icon-btn.success { background: rgba(40,167,69,0.12); color: #1e7e34; }
body[data-layout="sidebar"] .rr-icon-btn.success:hover { background: rgba(40,167,69,0.22); color: #28a745; }
body[data-layout="sidebar"] .rr-icon-btn.warning { background: rgba(255,193,7,0.18); color: #997404; }
body[data-layout="sidebar"] .rr-icon-btn.warning:hover { background: rgba(255,193,7,0.30); color: #b88a00; }
body[data-layout="sidebar"] .rr-icon-btn.danger { background: rgba(220,53,69,0.12); color: #c82333; }
body[data-layout="sidebar"] .rr-icon-btn.danger:hover { background: rgba(220,53,69,0.22); color: #dc3545; }

/* Inline dropdown for role change */
body[data-layout="sidebar"] .rr-dropdown { position: relative; display: inline-block; }
body[data-layout="sidebar"] .rr-dropdown-menu {
    display: none; position: absolute; right: 0; top: calc(100% + 4px);
    background: #ffffff; min-width: 170px;
    border: 1px solid #e3e6eb; border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    z-index: 50; padding: 4px 0;
}
body[data-layout="sidebar"] .rr-dropdown.open .rr-dropdown-menu { display: block; }
body[data-layout="sidebar"] .rr-dropdown-menu button {
    display: block; width: 100%; text-align: left;
    background: none; border: none;
    padding: 8px 14px; font-size: 0.85rem; color: #2c3e50;
    cursor: pointer;
}
body[data-layout="sidebar"] .rr-dropdown-menu button:hover { background: #f4f6f9; color: #d3a304; }

/* Alerts */
body[data-layout="sidebar"] .rr-alert {
    padding: 12px 16px; border-radius: 6px;
    margin-bottom: 18px;
    display: flex; align-items: flex-start; gap: 10px;
    border-left: 4px solid;
    font-size: 0.9rem;
}
body[data-layout="sidebar"] .rr-alert i { margin-top: 2px; }
body[data-layout="sidebar"] .rr-alert-success { background: #d4edda; color: #155724; border-left-color: #28a745; }
body[data-layout="sidebar"] .rr-alert-danger,
body[data-layout="sidebar"] .rr-alert-error { background: #f8d7da; color: #721c24; border-left-color: #dc3545; }
body[data-layout="sidebar"] .rr-alert-warning { background: #fff3cd; color: #856404; border-left-color: #ffc107; }
body[data-layout="sidebar"] .rr-alert-info { background: #d1ecf1; color: #0c5460; border-left-color: #17a2b8; }

/* Responsive form rows */
@media (max-width: 768px) {
    body[data-layout="sidebar"] .rr-form-group { flex: 0 0 100%; max-width: 100%; }
    body[data-layout="sidebar"] .rr-form-actions { flex-direction: column; }
    body[data-layout="sidebar"] .rr-form-actions .rr-btn { width: 100%; justify-content: center; }
}


/* =====================================================
   PUBLIC PAGE FACELIFT (RR-style for index.php / apply.php / job_details.php)
   Scoped to body.pub-page – preserves existing class names, restyles them
   to match the SEC Risk Register clean card look (gold #d3a304 + navy #2c3e50).
   ===================================================== */
body.pub-page {
    background: #f4f6f9 !important;
    color: #2c3e50;
}

body.pub-page .main-content {
    background: #f4f6f9;
    padding: 28px 0 60px;
}

/* Page header banner */
body.pub-page .page-header {
    background: linear-gradient(135deg, #ffffff 0%, #fbf6e6 100%) !important;
    border: 1px solid #ecd98a;
    border-radius: 10px;
    padding: 32px 28px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.05);
    position: relative;
    overflow: hidden;
}
body.pub-page .page-header::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 5px;
    
}
body.pub-page .page-header h1 {
    color: #2c3e50;
    font-weight: 700;
    margin: 0 0 8px;
    font-size: 1.75rem;
}
body.pub-page .page-header .lead,
body.pub-page .page-header p {
    color: #5b6b7a;
    margin: 0;
    font-size: 1rem;
}

/* Generic cards */
body.pub-page .card {
    border: 1px solid #e3e7ed !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(44, 62, 80, 0.04) !important;
    background: #ffffff !important;
}
body.pub-page .card-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e3e7ed !important;
    padding: 14px 18px !important;
    font-weight: 600;
    color: #2c3e50;
}
body.pub-page .card-body { padding: 18px !important; }

/* Forms */
body.pub-page .form-control,
body.pub-page .form-select,
body.pub-page select.form-control {
    border: 1px solid #d6dde5 !important;
    border-radius: 6px !important;
    padding: 9px 12px !important;
    font-size: 0.9rem !important;
    color: #2c3e50;
    background: #ffffff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
body.pub-page .form-control:focus,
body.pub-page .form-select:focus {
    border-color: #d3a304 !important;
    box-shadow: 0 0 0 3px rgba(211, 163, 4, 0.15) !important;
    outline: none;
}
body.pub-page .form-label,
body.pub-page label {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.85rem;
    margin-bottom: 6px;
}

/* Buttons */
body.pub-page .btn {
    border-radius: 6px;
    padding: 9px 18px;
    font-weight: 600;
    font-size: 0.88rem;
    transition: all 0.15s;
    border: 1px solid transparent;
}
body.pub-page .btn-primary,
body.pub-page .btn.btn-primary {
    background: linear-gradient(135deg, #d3a304, #b8901e) !important;
    border-color: #b8901e !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(184, 144, 30, 0.25);
}
body.pub-page .btn-primary:hover {
    background: linear-gradient(135deg, #b8901e, #9a7818) !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(184, 144, 30, 0.35);
}
body.pub-page .btn-outline-primary {
    border: 1px solid #d3a304 !important;
    color: #b8901e !important;
    background: #ffffff !important;
}
body.pub-page .btn-outline-primary:hover {
    background: #d3a304 !important;
    color: #ffffff !important;
}
body.pub-page .btn-secondary {
    background: #ffffff !important;
    border: 1px solid #d6dde5 !important;
    color: #2c3e50 !important;
}
body.pub-page .btn-secondary:hover {
    background: #f4f6f9 !important;
    border-color: #b8c2cf !important;
}
body.pub-page .btn-success {
    background: #1e8449 !important;
    border-color: #1e8449 !important;
    color: #ffffff !important;
}

/* Job listing cards */
body.pub-page .jobs-list { gap: 16px !important; }

body.pub-page .job-card {
    background: #ffffff !important;
    border: 1px solid #e3e7ed !important;

    border-radius: 10px !important;
    padding: 20px 22px !important;
    box-shadow: 0 1px 3px rgba(44, 62, 80, 0.04);
    transition: all 0.18s ease !important;
}
body.pub-page .job-card:hover {
    box-shadow: 0 6px 18px rgba(44, 62, 80, 0.10) !important;
    transform: translateY(-2px) !important;
   
}

body.pub-page .job-title {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
    color: #2c3e50;
}
body.pub-page .job-title a {
    color: #2c3e50 !important;
}
body.pub-page .job-title a:hover {
    color: #b8901e !important;
    text-decoration: none !important;
}

body.pub-page .job-badges .badge,
body.pub-page .badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
body.pub-page .badge.bg-primary,
body.pub-page .badge-primary {
    background: #fbf6e6 !important;
    color: #b8901e !important;
    border: 1px solid #ecd98a;
}
body.pub-page .badge.bg-success { background: #d4edda !important; color: #1e8449 !important; }
body.pub-page .badge.bg-info { background: #d1ecf1 !important; color: #0c5460 !important; }
body.pub-page .badge.bg-warning { background: #fff3cd !important; color: #856404 !important; }
body.pub-page .badge.bg-secondary { background: #e9ecef !important; color: #495057 !important; }

body.pub-page .job-meta {
    color: #6b7785 !important;
    font-size: 0.86rem !important;
    gap: 16px !important;
    margin-bottom: 12px !important;
}
body.pub-page .job-meta i {
    color: #d3a304;
    margin-right: 6px !important;
}

body.pub-page .job-description {
    color: #4a5868;
    font-size: 0.92rem;
    line-height: 1.6 !important;
    margin-bottom: 14px !important;
}

body.pub-page .job-salary {
    color: #1e8449 !important;
    background: #f0f9f4;
    border: 1px solid #c3e6cb;
    border-radius: 6px;
    padding: 6px 12px;
    display: inline-flex !important;
    width: auto;
    font-size: 0.88rem;
    margin-bottom: 12px !important;
}

body.pub-page .job-actions {
    border-top: 1px solid #f0f3f7;
    padding-top: 12px;
    margin-top: 6px;
}
body.pub-page .job-info {
    color: #8a96a3 !important;
    font-size: 0.82rem !important;
}

/* Search summary line */
body.pub-page .search-summary {
    border-top: 1px solid #e3e7ed !important;
    color: #6b7785;
    font-size: 0.88rem;
}

/* Pagination */
body.pub-page .pagination-nav { margin-top: 24px; }
body.pub-page .pagination-nav .pagination,
body.pub-page .pagination {
    gap: 4px;
    margin: 0;
}
body.pub-page .pagination li a,
body.pub-page .pagination li span {
    border: 1px solid #d6dde5;
    background: #ffffff;
    color: #2c3e50;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    text-decoration: none;
    display: inline-block;
}
body.pub-page .pagination li a:hover {
    background: #fbf6e6;
    color: #b8901e;
    border-color: #ecd98a;
}
body.pub-page .pagination li.active a,
body.pub-page .pagination li.active span {
    background: linear-gradient(135deg, #d3a304, #b8901e);
    border-color: #b8901e;
    color: #ffffff;
}

/* Empty state */
body.pub-page .empty-state,
body.pub-page .no-results {
    background: #ffffff;
    border: 1px dashed #d6dde5;
    border-radius: 10px;
    padding: 48px 24px;
    text-align: center;
    color: #6b7785;
}
body.pub-page .empty-state i,
body.pub-page .no-results i {
    color: #d3a304;
    font-size: 2.5rem;
    margin-bottom: 12px;
}

/* Alerts */
body.pub-page .alert {
    border-radius: 8px;
    border-width: 0;
    border-left: 4px solid;
    padding: 12px 16px;
    font-size: 0.9rem;
}
body.pub-page .alert-success { background: #f0f9f4; border-left-color: #1e8449; color: #1e5631; }
body.pub-page .alert-danger { background: #fdecea; border-left-color: #c0392b; color: #842029; }
body.pub-page .alert-warning { background: #fff8e1; border-left-color: #d3a304; color: #856404; }
body.pub-page .alert-info { background: #e7f4f8; border-left-color: #17a2b8; color: #0c5460; }

/* =====================================================
   APPLY PAGE — multistep form facelift
   ===================================================== */
body.pub-page .application-form,
body.pub-page .form-section,
body.pub-page .step-content {
    background: #ffffff;
    border: 1px solid #e3e7ed;
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 18px;
    box-shadow: 0 1px 3px rgba(44, 62, 80, 0.04);
}

body.pub-page .form-section h3,
body.pub-page .section-title,
body.pub-page .step-title {
    color: #2c3e50;
    font-size: 1.1rem;
    font-weight: 700;
    padding-bottom: 10px;
    margin-bottom: 16px;
    border-bottom: 2px solid #fbf6e6;
    position: relative;
}
body.pub-page .form-section h3::after,
body.pub-page .section-title::after,
body.pub-page .step-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 60px; height: 2px;
    background: #d3a304;
}

/* Progress bar / step indicator */
body.pub-page .progress {
    height: 8px;
    border-radius: 4px;
    background: #e9ecef;
    overflow: hidden;
}
body.pub-page .progress-bar {
    background: linear-gradient(90deg, #d3a304, #b8901e) !important;
}

body.pub-page .step-indicator,
body.pub-page .steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 8px;
}
body.pub-page .step,
body.pub-page .step-item {
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid #e3e7ed;
    color: #6b7785;
    font-size: 0.82rem;
    font-weight: 600;
    position: relative;
}
body.pub-page .step.active,
body.pub-page .step-item.active {
    background: linear-gradient(135deg, #d3a304, #b8901e);
    color: #ffffff;
    border-color: #b8901e;
}
body.pub-page .step.completed,
body.pub-page .step-item.completed {
    background: #f0f9f4;
    color: #1e8449;
    border-color: #c3e6cb;
}

/* File upload areas */
body.pub-page .file-upload,
body.pub-page .upload-area,
body.pub-page .form-file {
    border: 2px dashed #d6dde5;
    border-radius: 8px;
    padding: 18px;
    background: #fafbfc;
    text-align: center;
    transition: all 0.15s;
}
body.pub-page .file-upload:hover,
body.pub-page .upload-area:hover {
    border-color: #d3a304;
    background: #fbf6e6;
}

/* Required indicator */
body.pub-page .required,
body.pub-page label .required,
body.pub-page label.required::after {
    color: #c0392b;
}

/* Form action buttons row */
body.pub-page .form-actions,
body.pub-page .step-actions,
body.pub-page .button-group {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-top: 18px;
    margin-top: 18px;
    border-top: 1px solid #f0f3f7;
}

/* Job details sidebar (job_details.php) */
body.pub-page .job-info-card,
body.pub-page .sidebar-card {
    background: #ffffff;
    border: 1px solid #e3e7ed;
    border-top: 4px solid #d3a304;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(44, 62, 80, 0.04);
}

@media (max-width: 768px) {
    body.pub-page .page-header { padding: 24px 18px !important; }
    body.pub-page .page-header h1 { font-size: 1.4rem; }
    body.pub-page .job-card { padding: 16px !important; }
    body.pub-page .step-indicator,
    body.pub-page .steps { flex-wrap: wrap; }
}