/* ATN Admin — a professional theme layered over Bootstrap 5.3.
   The palette derives from the "Airport Transport Network" logo navy. The aim is
   a calm, precise review tool: quiet surfaces, data-legible identifiers, and
   soft-tint status pills rather than saturated default badges. */

:root {
    /* Brand + neutrals */
    --brand:      #1f3a5f;   /* logo navy */
    --brand-600:  #274a76;
    --brand-700:  #172c48;
    --ink:        #1b2431;   /* body text */
    --muted:      #66707e;   /* secondary text */
    --canvas:     #f1f4f8;   /* page background */
    --surface:    #ffffff;   /* cards */
    --line:       #e2e8f0;   /* borders */
    --line-soft:  #eef2f7;   /* header fills, hairlines */

    /* Status pill tints: soft background + confident text */
    --ok-fg:#146c46;   --ok-bg:#e6f4ec;   /* Approved  */
    --no-fg:#b0362e;   --no-bg:#fbe9e6;   /* Rejected  */
    --warn-fg:#8a5e08; --warn-bg:#fbf0d4; /* Action required */
    --info-fg:#1f3a5f; --info-bg:#e8eef6; /* Submitted */
    --rev-fg:#475467;  --rev-bg:#e9edf3;  /* Under review */
    --mut-fg:#586173;  --mut-bg:#eef1f5;  /* Draft / other */

    /* Bootstrap variable overrides (broad strokes) */
    --bs-body-font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--canvas);
    --bs-border-color: var(--line);
    --bs-border-radius: .625rem;
    --bs-border-radius-sm: .45rem;
    --bs-border-radius-lg: .85rem;
    --bs-link-color: var(--brand-600);
    --bs-link-hover-color: var(--brand-700);
    --bs-emphasis-color: var(--ink);
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5, h6 { color: var(--ink); font-weight: 600; letter-spacing: -0.02em; }

/* Identifiers — reference numbers, registrations, licence numbers — are data,
   so set them in the mono utility face. */
code, .mono {
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .84em;
    color: var(--brand);
    background: var(--info-bg);
    padding: .1em .42em;
    border-radius: .3rem;
}

/* ── Navbar ─────────────────────────────────────────────────────────── */
.app-navbar {
    background: var(--brand-700);
    border-bottom: 3px solid var(--brand);
}
.app-navbar .navbar-brand {
    color: #fff;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.app-navbar .navbar-brand img {
    background: #fff;
    padding: 2px;
}
.app-navbar .nav-link {
    color: rgba(255, 255, 255, .72);
    font-weight: 500;
    padding-inline: .9rem;
    border-radius: .45rem;
    transition: color .15s ease, background-color .15s ease;
}
.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus {
    color: #fff;
    background: rgba(255, 255, 255, .09);
}

main.container-xl { padding-top: .25rem; padding-bottom: 3rem; }

/* ── Cards ──────────────────────────────────────────────────────────── */
.card {
    border: 1px solid var(--line);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .03);
}
.card-header {
    background: var(--line-soft);
    border-bottom: 1px solid var(--line);
    padding-block: .7rem;
    color: var(--ink);
}

/* Definition lists in the detail cards: quiet labels, solid values. */
dl dt { font-weight: 500; color: var(--muted); }
dl dd { color: var(--ink); }

/* ── Tables ─────────────────────────────────────────────────────────── */
.table { --bs-table-bg: transparent; color: var(--ink); }
.table > thead th {
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: .06em;
    font-weight: 600;
    color: var(--muted);
    background: transparent;
    border-bottom: 1.5px solid var(--line);
    padding-block: .7rem;
}
.table > tbody > tr { border-color: var(--line-soft); }
.table > tbody > tr > td { padding-block: .8rem; vertical-align: middle; }
.table-hover > tbody > tr:hover > * { --bs-table-hover-bg: #eaf0f7; }

/* ── Status pills (restyled badges) ─────────────────────────────────── */
.badge {
    font-weight: 600;
    font-size: .7rem;
    letter-spacing: .02em;
    padding: .42em .72em;
    border-radius: 999px;
    vertical-align: baseline;
}
.badge.bg-success   { background: var(--ok-bg)   !important; color: var(--ok-fg)   !important; }
.badge.bg-danger    { background: var(--no-bg)   !important; color: var(--no-fg)   !important; }
.badge.bg-warning   { background: var(--warn-bg) !important; color: var(--warn-fg) !important; }
.badge.bg-primary   { background: var(--info-bg) !important; color: var(--info-fg) !important; }
.badge.bg-info      { background: var(--rev-bg)  !important; color: var(--rev-fg)  !important; }
.badge.bg-secondary { background: var(--mut-bg)  !important; color: var(--mut-fg)  !important; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn { font-weight: 500; letter-spacing: -0.005em; }
.btn-primary {
    --bs-btn-bg: var(--brand);            --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-600);  --bs-btn-hover-border-color: var(--brand-600);
    --bs-btn-active-bg: var(--brand-700); --bs-btn-active-border-color: var(--brand-700);
    --bs-btn-disabled-bg: var(--brand);   --bs-btn-disabled-border-color: var(--brand);
}
.btn-outline-primary {
    --bs-btn-color: var(--brand-600);     --bs-btn-border-color: #c4d0e0;
    --bs-btn-hover-bg: var(--brand);      --bs-btn-hover-border-color: var(--brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--brand-700); --bs-btn-active-border-color: var(--brand-700);
}
.btn-outline-secondary {
    --bs-btn-color: var(--muted);         --bs-btn-border-color: var(--line);
    --bs-btn-hover-bg: #eef2f7;           --bs-btn-hover-border-color: #cdd6e2;  --bs-btn-hover-color: var(--ink);
    --bs-btn-active-bg: #e5ebf3;          --bs-btn-active-border-color: #cdd6e2; --bs-btn-active-color: var(--ink);
}

/* ── Forms ──────────────────────────────────────────────────────────── */
.form-control, .form-select { border-color: var(--line); color: var(--ink); }
.form-control:focus, .form-select:focus {
    border-color: var(--brand-600);
    box-shadow: 0 0 0 .2rem rgba(31, 58, 95, .15);
}
.form-label { font-weight: 500; color: var(--ink); }

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

/* ── Login ──────────────────────────────────────────────────────────── */
.login-card { border-top: 4px solid var(--brand); }