/* Kathmandu Metropolitan City–inspired government portal theme */

:root {
    /* Header & navigation — deep navy */
    --gov-header: #1a3a5f;
    --gov-header-dark: #152e4d;
    --gov-primary: #1e5aa0;
    --gov-primary-hover: #174a85;
    --gov-secondary: #2c5282;
    --gov-sidebar: #2c3e50;

    /* Accents — orange/gold (KMC sidebar CTAs) + national crimson */
    --gov-accent: #f39c12;
    --gov-accent-hover: #e67e22;
    --gov-crimson: #dc143c;

    --gov-success: #228b22;
    --gov-light: #f4f4f4;
    --gov-nav-bg: #ffffff;
    --gov-nav-text: #2c3e50;
    --gov-nav-border: #dee2e6;

    --text-primary: #212529;
    --text-secondary: #6c757d;
    --bg-light: #f4f4f4;
}

body {
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    background-color: var(--bg-light);
    color: var(--text-primary);
    line-height: 1.6;
}

.gov-brand-nepali,
.gov-footer-nepali {
    font-family: 'Mukta', 'Kalimati', Arial, sans-serif;
}

/* Utility bar */
.gov-top-bar {
    background-color: var(--gov-header-dark);
    color: #ffffff;
    font-size: 0.85rem;
    padding: 0.35rem 0;
}

.gov-top-bar a {
    color: #ffffff;
    text-decoration: none;
}

.gov-top-bar a:hover {
    text-decoration: underline;
}

/* Full-width public header */
.site-header-public {
    width: 100%;
}

.site-header-public .gov-nav-fluid {
    width: 100%;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 992px) {
    .site-header-public .gov-nav-fluid {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Main header */
.gov-header {
    background: linear-gradient(180deg, var(--gov-header) 0%, #1f4468 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    padding: 0.75rem 0;
    width: 100%;
}

.gov-header .navbar-brand {
    font-weight: 700;
    color: #ffffff !important;
    padding: 0;
    text-align: left;
    white-space: normal;
    word-break: normal;
}

.gov-header .navbar-collapse {
    flex-grow: 1;
}

.gov-header .navbar-nav {
    align-items: center;
}

.gov-header .btn-nav-logout {
    color: #fff !important;
    font-weight: 600;
    padding: 0.35rem 0.85rem !important;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 4px;
    background: transparent;
    line-height: 1.5;
}

.gov-header .btn-nav-logout:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
    color: #fff !important;
}

.gov-navbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}

.gov-header .navbar-auth-actions {
    flex-shrink: 0;
    z-index: 2;
}

.gov-header .navbar-user-label {
    max-width: 160px;
}

@media (max-width: 991.98px) {
    .gov-header .navbar-auth-actions {
        order: 2;
    }

    .gov-header .navbar-toggler {
        order: 3;
    }

    .gov-header .navbar-collapse {
        order: 4;
        width: 100%;
    }
}

.gov-logo {
    height: 52px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.gov-logo-municipality {
    height: 52px;
    max-height: 52px;
    width: auto;
    max-width: 52px;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
    padding: 2px;
    flex-shrink: 0;
}

.gov-brand-logos {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.gov-brand-tagline {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--gov-accent);
    line-height: 1.2;
}

.gov-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.gov-brand-nepali {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
}

.gov-brand-english {
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.9;
    color: rgba(255, 255, 255, 0.95);
}

.gov-header .nav-link {
    color: #ffffff !important;
    font-weight: 500;
    padding: 0.5rem 0.85rem !important;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.gov-header .nav-link:hover,
.gov-header .nav-link:focus {
    background-color: rgba(255, 255, 255, 0.12);
    opacity: 1;
}

.gov-header .navbar-toggler {
    border: 2px solid rgba(255, 255, 255, 0.8);
    padding: 0.4rem 0.6rem;
}

.gov-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.btn-gov-login {
    background-color: var(--gov-primary);
    border-color: var(--gov-primary);
    color: #ffffff;
    font-weight: 600;
    border-radius: 4px;
    padding: 0.4rem 1rem;
}

.btn-gov-login:hover {
    background-color: var(--gov-primary-hover);
    border-color: var(--gov-primary-hover);
    color: #ffffff;
}

/* Secondary navigation (white bar) */
.gov-secondary-nav {
    background-color: var(--gov-nav-bg);
    border-bottom: 1px solid var(--gov-nav-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.gov-secondary-nav .nav-link {
    color: var(--gov-nav-text) !important;
    font-weight: 500;
    padding: 0.85rem 1rem !important;
    border-bottom: 3px solid transparent;
    border-radius: 0;
}

.gov-secondary-nav .nav-link:hover,
.gov-secondary-nav .nav-link.active {
    color: var(--gov-primary) !important;
    border-bottom-color: var(--gov-accent);
    background-color: transparent;
}

/* GovAdmin shell */
body.gov-admin-layout {
    padding-top: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

@media (min-width: 992px) {
    body.gov-admin-layout header.site-header-public {
        display: none;
    }
}

.site-shell--admin {
    flex: 1;
    display: flex;
    width: 100%;
    align-items: stretch;
    --admin-sidebar-width: 260px;
}

.site-shell--admin.admin-sidebar-collapsed {
    --admin-sidebar-width: 76px;
}

.admin-mobile-bar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(180deg, var(--gov-header) 0%, #1f4468 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.admin-mobile-menu-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    text-decoration: none;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.admin-mobile-menu-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.admin-mobile-title {
    font-size: 0.95rem;
    font-weight: 700;
}

.admin-sidebar,
.admin-offcanvas {
    background-color: var(--gov-sidebar);
    color: #ffffff;
}

.admin-sidebar {
    width: var(--admin-sidebar-width, 260px);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    z-index: 100;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.12);
    padding: 0;
    transition: width 0.25s ease;
    overflow-x: hidden;
}

.site-main--admin {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main--admin .footer {
    width: 100%;
    flex-shrink: 0;
}

.admin-offcanvas {
    width: min(300px, 88vw);
    z-index: 1055;
}

body.gov-admin-layout .offcanvas-backdrop {
    z-index: 1050;
}

.admin-offcanvas.show {
    visibility: visible;
}

.admin-offcanvas .offcanvas-header {
    background-color: var(--gov-header);
    color: #fff;
}

.admin-offcanvas .btn-close {
    filter: invert(1);
}

.gov-sidebar-brand {
    position: relative;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

.gov-sidebar-municipality-logo {
    height: 52px;
    width: auto;
    border-radius: 50%;
    background: #fff;
    padding: 3px;
    margin-bottom: 0.5rem;
}

.admin-mobile-logo {
    height: 32px;
    width: auto;
    border-radius: 50%;
    background: #fff;
    padding: 2px;
}

.gov-footer-logo {
    display: block;
    height: 56px;
    width: auto;
    border-radius: 50%;
    background: #fff;
    padding: 3px;
}

/* Collapsed sidebar */
.site-shell--admin.admin-sidebar-collapsed .sidebar-label,
.site-shell--admin.admin-sidebar-collapsed .gov-sidebar-brand-text {
    display: none !important;
}

.site-shell--admin.admin-sidebar-collapsed .admin-sidebar-actions {
    display: none !important;
}

.site-shell--admin.admin-sidebar-collapsed .admin-sidebar-actions-collapsed {
    display: block !important;
}

.site-shell--admin.admin-sidebar-collapsed .admin-sidebar .nav-link {
    justify-content: center;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
}

.site-shell--admin.admin-sidebar-collapsed .admin-sidebar .nav-icon {
    margin-right: 0 !important;
}

.site-shell--admin.admin-sidebar-collapsed .admin-user-card {
    justify-content: center;
    margin-bottom: 0.5rem;
}

.site-shell--admin.admin-sidebar-collapsed .gov-sidebar-brand {
    padding: 0.75rem 0.5rem;
}

.site-shell--admin.admin-sidebar-collapsed .gov-sidebar-municipality-logo {
    height: 40px;
    margin-bottom: 0;
}

.admin-sidebar-actions-collapsed {
    display: none;
}

.admin-sidebar-nav {
    overflow-y: auto;
    padding: 0.5rem 0;
}

.admin-sidebar .nav-link,
.admin-offcanvas .nav-link {
    color: #ffffff !important;
    padding: 0.75rem 1.5rem;
    border-left: 3px solid transparent;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.admin-sidebar .nav-icon,
.admin-offcanvas .nav-icon {
    flex-shrink: 0;
    margin-right: 0.5rem;
}

.admin-sidebar .nav-link:hover,
.admin-offcanvas .nav-link:hover,
.admin-sidebar .nav-link.active,
.admin-offcanvas .nav-link.active {
    background-color: rgba(30, 90, 160, 0.35);
    border-left-color: var(--gov-accent);
}

.admin-sidebar-user {
    flex-shrink: 0;
    margin-top: auto;
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.12);
}

.admin-user-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.admin-user-avatar {
    font-size: 2rem;
    line-height: 1;
    color: var(--gov-accent);
    flex-shrink: 0;
}

.admin-user-details {
    min-width: 0;
    flex: 1;
}

.admin-user-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.admin-user-email {
    font-size: 0.75rem;
    opacity: 0.8;
}

.admin-role-badge {
    margin-top: 0.35rem;
    font-size: 0.65rem;
    background: rgba(30, 90, 160, 0.6) !important;
    color: #fff !important;
}

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    margin-bottom: 0;
    background: #fff;
    border-bottom: 1px solid var(--gov-nav-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.admin-offcanvas .offcanvas-body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.admin-topbar-title {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.admin-topbar-user {
    max-width: 180px;
}

@media (max-width: 991.98px) {
    body.gov-admin-layout header.site-header-public {
        display: none;
    }

    .site-shell--admin {
        flex-direction: column;
    }
}

.main-container {
    min-height: calc(100vh - 200px);
    padding: 1.5rem 0;
}

/* Footer */
.footer {
    background: linear-gradient(180deg, var(--gov-header) 0%, var(--gov-header-dark) 100%);
    color: #ffffff;
    padding: 2rem 0;
    margin-top: 3rem;
}

.footer a {
    color: #ffffff;
    text-decoration: none;
}

.footer a:hover {
    color: var(--gov-accent);
}

.footer-visitor-count {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
}

.footer-visitor-count-value {
    font-weight: 700;
    color: var(--gov-accent);
    letter-spacing: 0.02em;
}

.footer .gov-footer-emblem {
    height: 56px;
    width: auto;
    margin-bottom: 0.75rem;
}

/* Cards & buttons */
.job-card {
    transition: transform 0.2s, box-shadow 0.2s;
    border-left: 4px solid var(--gov-primary);
    height: 100%;
}

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

.btn-gov-primary {
    background-color: var(--gov-primary);
    border-color: var(--gov-primary);
    color: #ffffff;
    font-weight: 600;
    border-radius: 4px;
}

.btn-gov-primary:hover,
.btn-gov-primary:focus {
    background-color: var(--gov-primary-hover);
    border-color: var(--gov-primary-hover);
    color: #ffffff;
}

.btn-gov-secondary {
    background-color: var(--gov-success);
    border-color: var(--gov-success);
    color: #ffffff;
    font-weight: 600;
    border-radius: 4px;
}

.btn-gov-secondary:hover {
    background-color: #1a6b1a;
    border-color: #1a6b1a;
    color: #ffffff;
}

.btn-gov-accent {
    background-color: var(--gov-accent);
    border-color: var(--gov-accent);
    color: #ffffff;
    font-weight: 600;
    border-radius: 4px;
}

.btn-gov-accent:hover {
    background-color: var(--gov-accent-hover);
    border-color: var(--gov-accent-hover);
    color: #ffffff;
}

.card-header.bg-primary,
.card-header.gov-card-header {
    background: linear-gradient(135deg, var(--gov-header) 0%, var(--gov-secondary) 100%) !important;
}

.admin-mode-option {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.admin-mode-option--selected {
    border-color: var(--gov-primary) !important;
    background-color: rgba(13, 110, 253, 0.06);
}

.admin-mode-option .form-check-input {
    width: 1.15em;
    height: 1.15em;
    margin-top: 0.2em;
    flex-shrink: 0;
    border: 2px solid #6c757d;
    cursor: pointer;
    background-color: #fff;
}

.admin-mode-option .form-check-input:checked {
    background-color: var(--gov-primary);
    border-color: var(--gov-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.admin-mode-check {
    color: var(--gov-primary);
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.admin-sidebar .nav-active-check,
.admin-offcanvas .nav-active-check {
    color: var(--gov-accent);
    font-size: 1.1rem;
}

.password-input-wrap {
    position: relative;
}

.password-input-wrap > .form-control {
    padding-right: 2.75rem;
}

.form-floating.password-input-wrap .password-toggle-btn {
    top: calc((3.5rem + 2px) / 2);
}

.password-toggle-btn {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    color: #6c757d;
    padding: 0.25rem 0.5rem;
    line-height: 1;
    text-decoration: none;
    border: 0;
    background: transparent;
}

.password-toggle-btn:hover,
.password-toggle-btn:focus {
    color: var(--gov-primary);
}

.password-toggle-btn:focus-visible {
    outline: 2px solid var(--gov-primary);
    outline-offset: 2px;
}

.text-gov-accent {
    color: var(--gov-accent) !important;
}

.text-gov-primary {
    color: var(--gov-primary) !important;
}

/* Full-page public landing */
html:has(body.landing-page) {
    scroll-behavior: smooth;
}

body.landing-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #eef2f7;
}

body.landing-page .site-shell {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

body.landing-page .site-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

body.landing-page .main-container--landing {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    padding: 0;
    min-height: 0;
}

body.landing-page .main--landing {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.landing-page-root {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.hero-section--full {
    flex: 1 0 auto;
    min-height: calc(100dvh - var(--landing-header-height, 8.25rem));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    padding: 2.5rem 1rem;
    width: 100%;
}

.hero-section--full .hero-section-inner {
    width: 100%;
}

.hero-section--full .hero-emblem {
    border-radius: 50%;
    background: #fff;
    padding: 6px;
}

.landing-scroll-hint {
    opacity: 0.85;
    transition: opacity 0.2s;
}

.landing-scroll-hint:hover {
    opacity: 1;
    color: #fff !important;
}

.landing-section {
    width: 100%;
}

.landing-section--features {
    background: var(--bg-light);
    padding: 4rem 0;
}

.landing-section--steps {
    background: #ffffff;
    padding: 4rem 0 5rem;
}

.landing-step-badge {
    width: 40px;
    height: 40px;
    font-size: 1rem;
}

body.landing-page .footer {
    margin-top: 0;
    flex-shrink: 0;
}

/* Hero */
.hero-section {
    background: linear-gradient(135deg, var(--gov-header) 0%, var(--gov-secondary) 100%);
    color: #ffffff;
    padding: 3rem 0;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -5%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(243, 156, 18, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

.hero-emblem {
    height: 88px;
    max-height: 88px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    margin-bottom: 1rem;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
}

.hero-section .hero-subtitle {
    color: var(--gov-accent);
    font-weight: 600;
}

.hero-section .btn-light {
    color: var(--gov-header);
    font-weight: 600;
}

.hero-section .btn-outline-light:hover {
    background-color: var(--gov-accent);
    border-color: var(--gov-accent);
    color: #ffffff;
}

/* Feature cards on landing */
.gov-feature-card {
    border-top: 4px solid var(--gov-accent);
}

.gov-feature-card .feature-icon {
    color: var(--gov-primary);
}

/* Ward filter */
.ward-filter-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #ffffff;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
}

/* Badges */
.badge-skill-tier {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    font-weight: 700;
}

.badge-skilled {
    background-color: var(--gov-accent);
    color: #000000;
}

.badge-semi-skilled {
    background-color: #5dade2;
    color: #000000;
}

.badge-unskilled {
    background-color: var(--gov-success);
    color: #ffffff;
}

/* Focus */
a:focus,
button:focus,
input:focus,
select:focus {
    outline: 3px solid var(--gov-accent);
    outline-offset: 2px;
}

@media (max-width: 991.98px) {
    .gov-logo {
        height: 42px;
    }

    .gov-brand-nepali {
        font-size: 0.9rem;
    }

    .gov-brand-english {
        font-size: 0.72rem;
    }
}

@media (max-width: 767.98px) {
    .hero-section {
        padding: 2rem 0;
    }

    .hero-section h1 {
        font-size: 1.75rem;
    }

    .hero-emblem {
        height: 64px;
    }
}

@media print {
    .site-header-public,
    .footer,
    .ward-filter-sticky,
    .admin-sidebar {
        display: none !important;
    }
}

.employer-stat-link:hover .employer-stat-card {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-1px);
}

.employer-stat-card {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.employer-stat-link:focus-visible .employer-stat-card {
    outline: 2px solid var(--gov-primary, #0d6efd);
    outline-offset: 2px;
}

.validation-summary-valid {
    display: none;
}

/* Portal landing — merojob-inspired dashboard concept */
.portal-hero {
    background: linear-gradient(135deg, #e8f0fa 0%, #f4f8fc 45%, #ffffff 100%);
    padding: 3rem 0 3.5rem;
    border-bottom: 1px solid #dee2e6;
}

.portal-hero-kicker {
    color: var(--gov-primary);
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.portal-hero-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--gov-primary);
    line-height: 1.15;
}

.portal-hero-subtitle {
    color: var(--text-secondary);
    font-size: 1.05rem;
    max-width: 36rem;
}

.portal-stat-circle {
    background: #fff;
    border-radius: 1rem;
    padding: 1rem 0.5rem;
    text-align: center;
    box-shadow: 0 4px 14px rgba(30, 90, 160, 0.1);
    border: 1px solid rgba(30, 90, 160, 0.08);
    height: 100%;
}

.portal-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--gov-primary);
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 0.35rem;
}

.portal-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--gov-header);
    line-height: 1.1;
}

.portal-stat-label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.portal-search-bar {
    display: flex;
    gap: 0.5rem;
    background: #fff;
    padding: 0.35rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border: 1px solid #dee2e6;
}

.portal-search-input {
    border: none;
    box-shadow: none !important;
    flex: 1;
}

.portal-search-btn {
    white-space: nowrap;
    border-radius: 0.35rem !important;
}

.portal-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.portal-pill {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--gov-primary);
    color: var(--gov-primary);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.portal-pill:hover,
.portal-pill.active {
    background: var(--gov-primary);
    color: #fff;
}

.portal-hero-visual {
    background: linear-gradient(145deg, var(--gov-header) 0%, var(--gov-secondary) 100%);
    border-radius: 1.25rem;
    padding: 2rem 1.5rem;
    box-shadow: 0 12px 32px rgba(26, 58, 95, 0.25);
}

.portal-hero-emblem {
    width: 100px;
    height: 100px;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
    padding: 8px;
    margin-bottom: 1rem;
}

.portal-hero-visual-text {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.portal-section-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--gov-header);
}

.portal-section--employers {
    background: #fff;
    padding: 2.5rem 0 1.5rem;
}

.portal-section--jobs {
    background: var(--bg-light);
    padding: 1.5rem 0 3rem;
}

.portal-employer-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.portal-employer-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.85rem;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gov-nav-text);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portal-job-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    padding: 1rem 1rem 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.15s, transform 0.15s;
}

.portal-job-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.portal-job-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid #f0f0f0;
}

.portal-job-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.35rem;
    background: rgba(30, 90, 160, 0.1);
    color: var(--gov-primary);
    flex-shrink: 0;
}

.portal-job-card-company {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gov-header);
    margin: 0;
    line-height: 1.3;
}

.portal-job-list {
    list-style: none;
    padding: 0;
}

.portal-job-list li {
    padding: 0.35rem 0;
    border-bottom: 1px dashed #f0f0f0;
}

.portal-job-list li:last-child {
    border-bottom: none;
}

.portal-job-list a {
    color: var(--gov-primary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
}

.portal-job-list a:hover {
    text-decoration: underline;
}

/* Job listings page — compact toolbar + home-style cards */
.job-listings-page {
    margin-top: -0.5rem;
}

.job-listings-toolbar {
    background: linear-gradient(135deg, #e8f0fa 0%, #f8fafc 100%);
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
}

.job-listings-location-panel {
    margin-top: 0.35rem;
}

.job-listings-location-toggle {
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gov-primary);
    list-style: none;
    user-select: none;
}

.job-listings-location-toggle::-webkit-details-marker {
    display: none;
}

.job-listings-location-toggle::before {
    content: '\F285';
    font-family: 'bootstrap-icons';
    display: inline-block;
    margin-right: 0.25rem;
    transition: transform 0.15s;
}

.job-listings-location-panel[open] .job-listings-location-toggle::before {
    transform: rotate(90deg);
}

.job-listings-location-body {
    padding-top: 0.75rem;
}

.job-listings-section {
    margin-bottom: 1.5rem;
}

.job-listings-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gov-header);
    margin-bottom: 0.85rem;
}

.portal-job-card {
    position: relative;
    display: flex;
    flex-direction: column;
}

.portal-job-card--recommended {
    border-color: rgba(25, 135, 84, 0.35);
    box-shadow: 0 2px 10px rgba(25, 135, 84, 0.08);
}

.portal-job-match-badge,
.portal-job-applied-badge {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
}

.portal-job-match-badge {
    background: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.portal-job-applied-badge {
    background: rgba(25, 135, 84, 0.9);
    color: #fff;
}

.portal-job-card--recommended .portal-job-card-company,
.portal-job-card:has(.portal-job-applied-badge) .portal-job-card-company {
    padding-right: 4.5rem;
}

.portal-job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.portal-job-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    background: rgba(30, 90, 160, 0.1);
    color: var(--gov-primary);
}

.portal-job-tag--unskilled {
    background: rgba(25, 135, 84, 0.12);
    color: #157347;
}

.portal-job-tag--semiskilled {
    background: rgba(93, 173, 226, 0.2);
    color: #1a5276;
}

.portal-job-tag--skilled {
    background: rgba(243, 156, 18, 0.2);
    color: #9a5b00;
}

.portal-job-tag--muted {
    background: #f1f3f5;
    color: #6c757d;
}

.portal-job-details {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.portal-job-match-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.portal-job-match-labels span {
    font-size: 0.68rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    color: #495057;
}

.portal-job-view-link {
    margin-top: auto;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gov-primary);
    text-decoration: none;
    padding-top: 0.35rem;
}

.portal-job-view-link:hover {
    text-decoration: underline;
}

/* Admin dashboard stat circles */
.admin-stat-circle {
    background: #fff;
    border-radius: 1rem;
    padding: 1.25rem 1rem;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    border: 1px solid #e9ecef;
    height: 100%;
}

.admin-stat-circle .portal-stat-icon {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.2rem;
}

.admin-stat-circle .portal-stat-value {
    font-size: 1.75rem;
}

@media (max-width: 767.98px) {
    .portal-hero {
        padding: 2rem 0;
    }

    .portal-search-bar {
        flex-direction: column;
    }

    .portal-search-btn {
        width: 100%;
    }
}

/* Shram Sansar–inspired landing (ss-*) */
.ss-landing {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.ss-hero {
    position: relative;
    margin: 0 1rem;
    margin-top: 0.75rem;
    border-radius: 1.25rem 1.25rem 0 0;
    overflow: hidden;
    min-height: 280px;
    background:
        linear-gradient(125deg, rgba(20, 46, 77, 0.94) 0%, rgba(30, 90, 160, 0.88) 55%, rgba(44, 82, 130, 0.9) 100%),
        radial-gradient(circle at 85% 20%, rgba(243, 156, 18, 0.25) 0%, transparent 45%),
        radial-gradient(circle at 10% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 40%);
    color: #fff;
    padding: 2.5rem 0 4.5rem;
}

.ss-hero-overlay {
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.ss-hero-kicker {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.85);
}

.ss-hero-title {
    font-size: clamp(1.85rem, 4.5vw, 2.85rem);
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
}

.ss-hero-highlight {
    display: inline-block;
    color: var(--gov-accent);
    transition: opacity 0.2s ease;
}

.ss-hero-lead {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 34rem;
    line-height: 1.55;
}

.ss-hero-tags li {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.8rem;
    font-weight: 600;
}

.ss-hero-emblem-wrap {
    text-align: center;
    padding: 1rem;
}

.ss-hero-emblem {
    width: 96px;
    height: 96px;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.ss-hero-emblem-text {
    margin-top: 0.65rem;
    font-size: 1rem;
    color: #fff;
}

.ss-search-wrap {
    margin-top: -2.75rem;
    position: relative;
    z-index: 2;
    padding-bottom: 1.5rem;
}

.ss-search-card {
    background: #fff;
    border-radius: 1rem;
    padding: 1.35rem 1.5rem;
    box-shadow: 0 12px 40px rgba(26, 58, 95, 0.12);
    border: 1px solid #e3e8ef;
}

.ss-search-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gov-primary);
    margin: 0;
}

.ss-search-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: stretch;
}

.ss-search-field {
    min-width: 0;
}

.ss-search-field--grow {
    flex: 1 1 220px;
    min-width: 220px;
}

.ss-search-field .form-control,
.ss-search-field .form-select {
    min-height: 46px;
    height: 46px;
    border-color: #ced4da;
    border-radius: 0.5rem;
}

.ss-search-submit {
    min-height: 46px;
    padding-left: 1.35rem;
    padding-right: 1.35rem;
    border-radius: 0.5rem !important;
    font-weight: 700;
    white-space: nowrap;
}

.btn-ss-primary {
    background: var(--gov-header);
    border-color: var(--gov-header);
    color: #fff;
    font-weight: 600;
}

.btn-ss-primary:hover,
.btn-ss-primary:focus {
    background: var(--gov-header-dark);
    border-color: var(--gov-header-dark);
    color: #fff;
}

.btn-outline-ss {
    border: 1.5px solid var(--gov-primary);
    color: var(--gov-primary);
    font-weight: 600;
    background: #fff;
}

.btn-outline-ss:hover {
    background: var(--gov-primary);
    color: #fff;
    border-color: var(--gov-primary);
}

.ss-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eef1f5;
}

.ss-filter-row-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.ss-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    flex: 1;
}

.ss-pill {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    border: 1px solid #c5d3e3;
    background: #f8fafc;
    color: var(--gov-primary);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ss-pill:hover,
.ss-pill--active {
    background: var(--gov-primary);
    border-color: var(--gov-primary);
    color: #fff;
}

.ss-view-all-link {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gov-primary);
    text-decoration: none;
    white-space: nowrap;
}

.ss-view-all-link:hover {
    text-decoration: underline;
}

.ss-stats {
    padding: 0.5rem 0 2.5rem;
}

.ss-stats-meta {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.ss-stat-card {
    background: #fff;
    border-radius: 0.85rem;
    padding: 1.15rem 1rem;
    text-align: center;
    border: 1px solid #e3e8ef;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    height: 100%;
}

.ss-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(30, 90, 160, 0.1);
    color: var(--gov-primary);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.ss-stat-value {
    font-size: clamp(1.35rem, 3vw, 1.85rem);
    font-weight: 800;
    color: var(--gov-header);
    line-height: 1.1;
}

.ss-stat-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

.ss-categories,
.ss-jobs,
.ss-employers,
.ss-cta,
.ss-steps {
    padding: 2.5rem 0;
}

.ss-categories {
    background: #fff;
}

.ss-jobs {
    background: #eef2f7;
}

.ss-employers {
    background: #fff;
    padding-top: 1.5rem;
}

.ss-cta {
    background: #eef2f7;
}

.ss-steps {
    background: #fff;
    padding-bottom: 3.5rem;
}

.ss-section-head {
    margin-bottom: 1.5rem;
}

.ss-section-head--row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}

.ss-section-kicker {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--gov-primary);
    margin-bottom: 0.25rem;
}

.ss-section-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--gov-header);
    margin: 0;
}

.ss-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.65rem;
}

.ss-category-chip {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.75rem 0.85rem;
    background: #f8fafc;
    border: 1px solid #e3e8ef;
    border-radius: 0.65rem;
    color: var(--gov-nav-text);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.ss-category-chip i {
    color: var(--gov-primary);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.ss-category-chip:hover {
    background: #fff;
    border-color: var(--gov-primary);
    color: var(--gov-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 90, 160, 0.1);
}

.ss-job-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 0.85rem;
    padding: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.15s, transform 0.15s;
}

.ss-job-card:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.ss-job-card-top {
    display: flex;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.ss-job-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.45rem;
    background: rgba(30, 90, 160, 0.1);
    color: var(--gov-primary);
    flex-shrink: 0;
}

.ss-job-card-company {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0 0 0.15rem;
    line-height: 1.3;
}

.ss-job-card-title {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gov-header);
    text-decoration: none;
    line-height: 1.35;
}

.ss-job-card-title:hover {
    color: var(--gov-primary);
    text-decoration: underline;
}

.ss-job-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.65rem;
}

.ss-job-card-tags span {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: #eef2f7;
    color: #495057;
}

.ss-job-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 0.65rem;
}

.ss-job-card-link {
    margin-top: auto;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gov-primary);
    text-decoration: none;
}

.ss-job-card-link:hover {
    text-decoration: underline;
}

.ss-employer-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.ss-employer-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.9rem;
    background: #f8fafc;
    border: 1px solid #e3e8ef;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gov-nav-text);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    gap: 0.45rem;
}

.ss-employer-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
    background: #fff;
    border: 1px solid #e3e8ef;
    flex-shrink: 0;
}

.ss-job-card-logo {
    width: 2.25rem;
    height: 2.25rem;
    object-fit: contain;
    border-radius: 0.45rem;
    background: #fff;
    border: 1px solid #e3e8ef;
    flex-shrink: 0;
}

.employer-logo-preview {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 0.5rem;
    background: #fff;
    border: 1px solid #dee2e6;
    padding: 4px;
}

.profile-photo-preview {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #dee2e6;
    padding: 2px;
}

.ss-cta-card {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 1rem;
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.ss-cta-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: rgba(30, 90, 160, 0.1);
    color: var(--gov-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.ss-cta-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--gov-header);
    margin-bottom: 0.5rem;
}

.ss-cta-card p {
    color: var(--text-secondary);
    font-size: 0.92rem;
    flex: 1;
    margin-bottom: 1rem;
}

.ss-steps-card {
    background: #f8fafc;
    border: 1px solid #e3e8ef;
    border-radius: 1rem;
    padding: 2rem 1.5rem;
}

.ss-step {
    text-align: center;
}

.ss-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--gov-primary);
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.ss-step h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gov-header);
    margin-bottom: 0.35rem;
}

.ss-step p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

@media (max-width: 991.98px) {
    .ss-hero {
        margin: 0;
        border-radius: 0;
        padding: 2rem 0 3.5rem;
    }

    .ss-search-wrap {
        margin-top: -2rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

@media (max-width: 767.98px) {
    .ss-search-fields {
        flex-direction: column;
        align-items: stretch;
    }

    .ss-search-field,
    .ss-search-field--grow {
        flex: none;
        width: 100%;
        min-width: 0;
    }

    .ss-search-field .form-control,
    .ss-search-field .form-select {
        height: 46px;
        min-height: 46px;
    }

    .ss-search-submit {
        width: 100%;
    }

    .ss-filter-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .ss-view-all-link {
        align-self: flex-end;
    }

    .ss-category-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ss-category-chip span {
        font-size: 0.72rem;
    }
}