/* =========================================================================
   MGSH ID Verification System
   Custom design system layered on top of Bootstrap 5 / AdminLTE 4.
   Professional government/judicial aesthetic: navy + gold, generous
   whitespace, restrained shadows, precise typography.
   ========================================================================= */

:root {
    --mgsh-primary: #0b2e6b;
    --mgsh-primary-dark: #071c44;
    --mgsh-primary-light: #14428f;
    --mgsh-accent: #c8971f;
    --mgsh-accent-light: #e0b23f;
    --mgsh-ink: #1c2430;
    --mgsh-muted: #64748b;
    --mgsh-border: #e2e6ed;
    --mgsh-surface: #f4f6fa;
    --mgsh-radius: 12px;
    --mgsh-radius-sm: 8px;
    --mgsh-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --mgsh-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    --mgsh-shadow-lg: 0 20px 50px rgba(7, 28, 68, 0.35);
}

* {
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Tahoma, Arial, sans-serif;
    color: var(--mgsh-ink);
    background: var(--mgsh-surface) !important;
    letter-spacing: 0.1px;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--mgsh-ink);
    letter-spacing: 0.1px;
}

a {
    color: var(--mgsh-primary);
}

::selection {
    background: var(--mgsh-accent);
    color: #fff;
}

/* ---------------- Mobile sidebar toggle ----------------
   AdminLTE 4's built-in sidebar-open toggle proved unreliable on mobile in
   testing (footer.php drives this instead with a plain click handler and
   this dedicated class, which AdminLTE's own CSS/JS never touches). */
@media (max-width: 991.98px) {
    .app-sidebar {
        margin-left: calc(var(--lte-sidebar-width, 250px) * -1) !important;
        transition: margin-left 0.25s ease-in-out;
    }

    .app-sidebar.mgsh-sidebar-visible {
        margin-left: 0 !important;
    }

    .mgsh-sidebar-visible::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(7, 15, 35, 0.45);
        z-index: 1037;
        backdrop-filter: blur(1px);
    }
}

/* =========================================================================
   Auth pages (login)
   ========================================================================= */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
    background:
        radial-gradient(circle at 15% 15%, rgba(200, 151, 31, 0.18) 0%, transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(20, 66, 143, 0.35) 0%, transparent 50%),
        linear-gradient(160deg, var(--mgsh-primary) 0%, var(--mgsh-primary-dark) 100%);
    overflow: hidden;
}

.auth-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 42px 42px;
    pointer-events: none;
}

/* Scoped to .auth-wrapper (2-class specificity) rather than bare .auth-card
   (1-class) so this reliably beats the generic .card rule defined later in
   this file — equal-specificity, later-source-wins otherwise silently
   dropped the custom radius/shadow here in testing. */
.auth-wrapper .auth-card {
    width: 100%;
    max-width: 430px;
    border: none;
    border-radius: 18px;
    box-shadow: var(--mgsh-shadow-lg);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.auth-card .card-header {
    background: #ffffff;
    text-align: center;
    padding: 36px 24px 16px;
    border-bottom: none;
    position: relative;
}

.auth-card .card-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--mgsh-accent), var(--mgsh-accent-light));
}

.auth-logo {
    height: 76px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
    margin-bottom: 12px;
}

.auth-logo-fallback {
    height: 72px;
    width: 72px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--mgsh-primary), var(--mgsh-primary-light));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 12px;
    box-shadow: var(--mgsh-shadow);
}

.auth-title {
    font-weight: 800;
    font-size: 15px;
    color: var(--mgsh-primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 4px;
}

.auth-subtitle {
    font-size: 12.5px;
    color: var(--mgsh-muted);
    letter-spacing: 0.2px;
}

.auth-card .card-body {
    padding: 28px 32px 34px;
}

.auth-card .form-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--mgsh-ink);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.auth-card .input-group-text {
    background: var(--mgsh-surface);
    border-color: var(--mgsh-border);
    color: var(--mgsh-muted);
}

.auth-card .form-control {
    border-color: var(--mgsh-border);
    padding-top: 10px;
    padding-bottom: 10px;
}

.auth-card .form-control:focus {
    border-color: var(--mgsh-primary-light);
    box-shadow: 0 0 0 0.2rem rgba(11, 46, 107, 0.15);
}

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
    border-radius: var(--mgsh-radius-sm);
    font-weight: 600;
    letter-spacing: 0.2px;
}

.btn-mgsh {
    background: linear-gradient(135deg, var(--mgsh-primary-light), var(--mgsh-primary));
    border-color: var(--mgsh-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(11, 46, 107, 0.28);
}

.btn-mgsh:hover,
.btn-mgsh:focus {
    background: linear-gradient(135deg, var(--mgsh-primary), var(--mgsh-primary-dark));
    border-color: var(--mgsh-primary-dark);
    color: #fff;
    box-shadow: 0 4px 14px rgba(11, 46, 107, 0.38);
}

.btn-mgsh-outline {
    background: transparent;
    border: 1.5px solid var(--mgsh-primary);
    color: var(--mgsh-primary);
}

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

.btn-gold {
    background: linear-gradient(135deg, var(--mgsh-accent-light), var(--mgsh-accent));
    border-color: var(--mgsh-accent);
    color: #fff;
}

.btn-gold:hover {
    filter: brightness(0.94);
    color: #fff;
}

/* =========================================================================
   Admin shell: navbar, sidebar, brand
   ========================================================================= */
.app-header.navbar {
    background: #ffffff !important;
    border-bottom: 1px solid var(--mgsh-border);
    box-shadow: var(--mgsh-shadow-sm);
}

.app-header .nav-link {
    color: var(--mgsh-ink);
}

.app-header .navbar-institution-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--mgsh-primary);
    letter-spacing: 0.2px;
}

.app-header .dropdown-menu {
    border: none;
    border-radius: var(--mgsh-radius-sm);
    box-shadow: var(--mgsh-shadow);
    padding: 8px;
}

.app-header .dropdown-item {
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13.5px;
}

.app-header .dropdown-item:hover {
    background: var(--mgsh-surface);
}

.app-sidebar {
    background: linear-gradient(195deg, var(--mgsh-primary-dark) 0%, var(--mgsh-primary) 100%) !important;
    border-right: none;
}

.sidebar-brand {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.12);
}

.brand-link {
    padding: 16px 18px !important;
    display: flex;
    align-items: center;
}

.brand-link .brand-image-mgsh {
    height: 34px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    margin-right: 10px;
    background: #fff;
    border-radius: 6px;
    padding: 3px 5px;
}

.brand-text {
    color: #fff !important;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.3px;
}

.app-sidebar .sidebar-menu .nav-link {
    color: rgba(255, 255, 255, 0.78);
    border-radius: var(--mgsh-radius-sm);
    margin: 2px 10px;
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.app-sidebar .sidebar-menu .nav-link .nav-icon {
    color: rgba(255, 255, 255, 0.55);
    width: 22px;
    margin-right: 8px;
    transition: color 0.15s ease;
}

.app-sidebar .sidebar-menu .nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.app-sidebar .sidebar-menu .nav-link:hover .nav-icon {
    color: var(--mgsh-accent-light);
}

.app-sidebar .sidebar-menu .nav-link.active {
    background: rgba(200, 151, 31, 0.16);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--mgsh-accent);
}

.app-sidebar .sidebar-menu .nav-link.active .nav-icon {
    color: var(--mgsh-accent-light);
}

.app-footer {
    background: #fff;
    border-top: 1px solid var(--mgsh-border);
    color: var(--mgsh-muted);
    font-size: 12.5px;
    padding: 14px 20px;
}

.app-content-header h3 {
    font-weight: 800;
    font-size: 22px;
    color: var(--mgsh-primary-dark);
}

.breadcrumb-item a {
    color: var(--mgsh-muted);
    text-decoration: none;
}

.breadcrumb-item.active {
    color: var(--mgsh-ink);
    font-weight: 600;
}

/* =========================================================================
   Cards
   ========================================================================= */
.card {
    border: 1px solid var(--mgsh-border);
    border-radius: var(--mgsh-radius);
    box-shadow: var(--mgsh-shadow-sm);
}

.card-header {
    background: #fff;
    border-bottom: 1px solid var(--mgsh-border);
    border-radius: var(--mgsh-radius) var(--mgsh-radius) 0 0 !important;
    padding: 16px 20px;
}

.card-header .card-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--mgsh-primary-dark);
}

.card-body {
    padding: 20px;
}

.card-footer {
    background: #fff;
    border-top: 1px solid var(--mgsh-border);
}

/* =========================================================================
   Dashboard stat cards
   ========================================================================= */
.stat-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--mgsh-border);
    border-radius: var(--mgsh-radius);
    background: #fff;
    padding: 20px;
    box-shadow: var(--mgsh-shadow-sm);
    height: 100%;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

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

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--stat-color, var(--mgsh-primary));
}

.stat-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: var(--stat-color, var(--mgsh-primary));
    background: rgba(11, 46, 107, 0.1);
    background: color-mix(in srgb, var(--stat-color, var(--mgsh-primary)) 12%, transparent);
    margin-bottom: 12px;
}

.stat-card-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--mgsh-ink);
    line-height: 1.1;
}

.stat-card-label {
    font-size: 12.5px;
    color: var(--mgsh-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

.stat-card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--stat-color, var(--mgsh-primary));
    text-decoration: none;
    margin-top: 12px;
}

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

/* =========================================================================
   Tables
   ========================================================================= */
.table {
    --bs-table-hover-bg: var(--mgsh-surface);
    margin-bottom: 0;
}

.table thead th {
    background: var(--mgsh-surface);
    color: var(--mgsh-muted);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--mgsh-border);
    padding: 12px 16px;
    white-space: nowrap;
}

.table tbody td {
    padding: 12px 16px;
    vertical-align: middle;
    font-size: 13.5px;
    border-bottom: 1px solid var(--mgsh-border);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* =========================================================================
   Forms
   ========================================================================= */
.form-label {
    font-weight: 600;
    font-size: 13px;
    color: var(--mgsh-ink);
}

.form-control,
.form-select {
    border-color: var(--mgsh-border);
    border-radius: var(--mgsh-radius-sm);
    font-size: 13.5px;
    padding: 8px 12px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--mgsh-primary-light);
    box-shadow: 0 0 0 0.2rem rgba(11, 46, 107, 0.12);
}

.form-text {
    font-size: 12px;
}

/* =========================================================================
   Badges / status pills
   ========================================================================= */
.badge {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.3px;
    padding: 5px 10px;
    border-radius: 999px;
}

/* =========================================================================
   Pagination
   ========================================================================= */
.pagination .page-link {
    border-color: var(--mgsh-border);
    color: var(--mgsh-primary);
    font-size: 13px;
}

.pagination .page-item.active .page-link {
    background: var(--mgsh-primary);
    border-color: var(--mgsh-primary);
}

/* =========================================================================
   Alerts
   ========================================================================= */
.alert {
    border: none;
    border-radius: var(--mgsh-radius-sm);
    border-left: 4px solid transparent;
    font-size: 13.5px;
}

.alert-success { border-left-color: #198754; }
.alert-danger { border-left-color: #b02a37; }
.alert-warning { border-left-color: #b8860b; }
.alert-info { border-left-color: var(--mgsh-primary); }

/* =========================================================================
   Public verification page
   ========================================================================= */
.verify-page-body {
    background: var(--mgsh-surface);
    min-height: 100vh;
}

/* ---------------- Hero banner ----------------
   Dark navy gradient header with the crest on a white badge and a large
   "ID Verification" title — the page's brand moment, echoing the tinted
   panel language used lower down in the certificate-style card. */
.verify-hero {
    background: linear-gradient(135deg, var(--mgsh-primary-dark) 0%, var(--mgsh-primary) 55%, var(--mgsh-primary-light) 100%);
    padding: 40px 20px 64px;
    text-align: center;
    position: relative;
    overflow: hidden;
    color: #fff;
}

.verify-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: 0.6;
}

.verify-hero-badge {
    position: relative;
    display: inline-block;
    background: #fff;
    border-radius: 16px;
    padding: 14px 22px;
    box-shadow: var(--mgsh-shadow-lg);
    margin-bottom: 20px;
}

.verify-hero-badge img {
    height: 60px;
    max-width: 220px;
    width: auto;
    object-fit: contain;
    display: block;
}

.verify-hero h1 {
    position: relative;
    color: #fff;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: 0.4px;
    margin: 0 0 6px;
}

.verify-hero p {
    position: relative;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    padding: 0 12px;
}

@media (max-width: 380px) {
    .verify-hero {
        padding: 32px 16px 56px;
    }

    .verify-hero-badge img {
        height: 50px;
        max-width: 190px;
    }

    .verify-hero h1 {
        font-size: 23px;
    }
}

.verify-wrapper {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 16px 48px;
}

/* Scoped to .verify-wrapper for the same reason as .auth-wrapper .auth-card
   above — beats the generic .card rule regardless of source order. The
   card is pulled up over the hero's bottom edge so it reads as one
   continuous composition rather than two stacked blocks. */
.verify-wrapper .verify-cert-card {
    border-radius: var(--mgsh-radius);
    overflow: hidden;
    box-shadow: var(--mgsh-shadow-lg);
    border: none;
    margin-top: -40px;
    position: relative;
    z-index: 2;
}

.verify-status-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
    font-weight: 800;
    font-size: 14.5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.verify-status-strip i {
    font-size: 19px;
}

.verify-cert-title {
    text-align: center;
    padding: 16px 16px 2px;
}

.verify-cert-title .en {
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--mgsh-accent);
}

/* ---------------- Certificate-style panels (verify.php) ----------------
   Same gold/green/blue tinted-panel language as the printed certificate
   (assets/css/certificate.css), rebuilt in px/flex for a mobile-first
   screen layout instead of the PDF's mm/A4 sizing. */
.vcert-panel {
    margin: 14px 16px;
    border-radius: 10px;
    padding: 14px 16px 16px;
}

.vcert-panel-gold {
    background: #fbf4e2;
    border: 1px solid #e8d6a0;
}

.vcert-panel-green {
    background: #eaf6ee;
    border: 1px solid #bfe0c9;
}

.vcert-panel-blue {
    background: #eaf1fb;
    border: 1px solid #c3d3ec;
}

.vcert-top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.vcert-photo-col {
    flex: 0 0 84px;
    text-align: center;
}

.vcert-photo {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border: 2px solid var(--mgsh-primary);
    border-radius: 10px;
    display: block;
}

.vcert-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef1f5;
    color: #94a3b8;
    font-size: 22px;
}

.vcert-status-tag {
    margin-top: 8px;
    display: inline-block;
    padding: 3px 9px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border-radius: 20px;
    color: #fff;
}

.vcert-id-rows {
    flex: 1;
    min-width: 0;
}

.vcert-id-row {
    margin-bottom: 9px;
}

.vcert-id-row:last-child {
    margin-bottom: 0;
}

.vcert-id-label {
    font-size: 10.5px;
    font-weight: 700;
    color: #8a6d2f;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 3px;
}

.vcert-id-value {
    background: #fff;
    border: 1px solid #e0cf9c;
    border-radius: 7px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--mgsh-primary);
    word-break: break-word;
}

.vcert-field-block {
    margin-bottom: 12px;
}

.vcert-field-block-last {
    margin-bottom: 0;
}

.vcert-field-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 800;
    color: #14532d;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 5px;
}

.vcert-panel-blue .vcert-field-title {
    color: var(--mgsh-primary-dark);
}

.vcert-field-num {
    color: var(--mgsh-primary);
    font-weight: 800;
}

.vcert-field-box {
    background: #fff;
    border: 1px solid #c7ddcd;
    border-radius: 7px;
    padding: 9px 12px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--mgsh-ink);
    word-break: break-word;
}

.vcert-box-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vcert-panel-blue .vcert-box-row {
    gap: 10px;
}

.vcert-box {
    flex: 1 1 100px;
    background: #fff;
    border: 1px solid #c7ddcd;
    border-radius: 7px;
    padding: 7px 10px;
}

.vcert-panel-blue .vcert-box {
    border-color: #c3d3ec;
}

.vcert-box-label {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--mgsh-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 3px;
}

.vcert-box-value {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--mgsh-ink);
    word-break: break-word;
}

@media (max-width: 380px) {
    .verify-wrapper {
        padding: 0 10px 40px;
    }

    .vcert-panel {
        margin: 12px 10px;
        padding: 12px 12px 14px;
    }

    .vcert-photo-col {
        flex-basis: 72px;
    }

    .vcert-photo,
    .vcert-photo-placeholder {
        width: 72px;
        height: 72px;
    }

    .vcert-id-value {
        font-size: 12px;
    }
}

/* =========================================================================
   Certificate preview page chrome (not printed) —
   scoped to body.certificate-preview-body, a class ONLY the browser
   preview page (view.php) uses — the PDF-generation wrapper never
   includes it, so Dompdf's screen-media emulation never sees these
   rules regardless of @media, keeping the PDF's box model unaffected.
   ========================================================================= */
body.certificate-preview-body .certificate-page {
    min-height: 297mm;
    box-shadow: var(--mgsh-shadow-lg);
}

@media screen {
    body.certificate-preview-body {
        background: linear-gradient(160deg, #2b3648 0%, #10151f 100%);
        padding: 24px 0 60px;
    }
}