/* Visual identity — باص في السريع.
   Navy "road" for text and chrome, signal yellow for the main action, warm ground. Bootstrap stays the base;
   these rules only retune its variables and a few components. */
/* Fonts are self-hosted under lib/fonts (the CSP allows font-src 'self' only). SIL OFL 1.1, licences beside them. */
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("../lib/fonts/ibm-plex-sans-arabic-400-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("../lib/fonts/ibm-plex-sans-arabic-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("../lib/fonts/ibm-plex-sans-arabic-600-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("../lib/fonts/ibm-plex-sans-arabic-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Readex Pro"; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url("../lib/fonts/readex-pro-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Readex Pro"; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url("../lib/fonts/readex-pro-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }

:root {
    --bus-ink: #13233F;
    --bus-ink-2: #1E3460;
    --bus-yellow: #FFC72C;
    --bus-yellow-hover: #F2B705;
    --bus-yellow-soft: #FFF4D1;
    --bus-ground: #F6F5F0;
    --bus-line: #E4E2DB;
    --bus-muted: #5A6377;
    --bus-success: #1E7B4E;
    --bus-danger: #B3261E;
    --bus-radius: 14px;

    --bs-body-font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, "Noto Kufi Arabic", sans-serif;
    --bs-body-color: var(--bus-ink);
    --bs-body-bg: var(--bus-ground);
    --bs-secondary-color: var(--bus-muted);
    --bs-tertiary-bg: #FFFFFF;
    --bs-border-color: var(--bus-line);
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: var(--bus-radius);
    --bs-link-color: var(--bus-ink-2);
    --bs-link-color-rgb: 30, 52, 96;
    --bs-link-hover-color: var(--bus-ink);
    --bs-link-hover-color-rgb: 19, 35, 63;
    --bs-primary: var(--bus-ink);
    --bs-primary-rgb: 19, 35, 63;
    --bs-success: var(--bus-success);
    --bs-success-rgb: 30, 123, 78;
    --bs-danger: var(--bus-danger);
    --bs-danger-rgb: 179, 38, 30;
    --bs-focus-ring-color: rgba(255, 199, 44, .55);
}

body { font-family: var(--bs-body-font-family); }
h1, h2, h3, .h1, .h2, .h3, .h4, .h5, .navbar-brand { font-family: "Readex Pro", var(--bs-body-font-family); font-weight: 600; }

/* Top bar */
.app-nav { background: var(--bus-ink); }
.app-nav .navbar-brand { color: #FFFFFF; display: inline-flex; align-items: center; gap: .6rem; }
.app-nav .navbar-brand:hover { color: #FFFFFF; }
.app-nav .nav-link { color: #C9D1E2; border-radius: 8px; padding-inline: .75rem; }
.app-nav .nav-link:hover, .app-nav .nav-link:focus-visible { color: #FFFFFF; background: var(--bus-ink-2); }
.app-nav .btn-logout { color: #FFFFFF; border-color: #3A5385; }
.app-nav .btn-logout:hover { background: var(--bus-ink-2); color: #FFFFFF; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--bus-yellow); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Area sections */
.nav-pills { gap: .35rem; }
.nav-pills .nav-link { color: var(--bus-ink); background: #FFFFFF; border: 1px solid var(--bus-line); border-radius: 999px; padding: .4rem 1rem; }
.nav-pills .nav-link:hover { border-color: var(--bus-ink); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--bus-ink); border-color: var(--bus-ink); color: #FFFFFF; }

/* Buttons: yellow is the one main action, navy the secondary one */
.btn { font-weight: 600; border-radius: 10px; }
.btn-primary { --bs-btn-bg: var(--bus-yellow); --bs-btn-border-color: var(--bus-yellow); --bs-btn-color: var(--bus-ink);
    --bs-btn-hover-bg: var(--bus-yellow-hover); --bs-btn-hover-border-color: var(--bus-yellow-hover); --bs-btn-hover-color: var(--bus-ink);
    --bs-btn-active-bg: var(--bus-yellow-hover); --bs-btn-active-border-color: var(--bus-yellow-hover); --bs-btn-active-color: var(--bus-ink);
    --bs-btn-disabled-bg: #EFE8CF; --bs-btn-disabled-border-color: #EFE8CF; --bs-btn-disabled-color: #6B5A1E; }
.btn-outline-primary { --bs-btn-color: var(--bus-ink); --bs-btn-border-color: var(--bus-ink); --bs-btn-hover-bg: var(--bus-ink);
    --bs-btn-hover-border-color: var(--bus-ink); --bs-btn-active-bg: var(--bus-ink); --bs-btn-active-border-color: var(--bus-ink); }
.btn-outline-secondary { --bs-btn-color: var(--bus-ink); --bs-btn-border-color: #B9C0CC; --bs-btn-hover-bg: var(--bus-ink);
    --bs-btn-hover-border-color: var(--bus-ink); --bs-btn-hover-color: #FFFFFF; }
.btn-success { --bs-btn-bg: var(--bus-success); --bs-btn-border-color: var(--bus-success); --bs-btn-hover-bg: #17633E; --bs-btn-hover-border-color: #17633E; }

/* Surfaces */
.card { --bs-card-bg: #FFFFFF; border-color: var(--bus-line); border-radius: var(--bus-radius); }
a.card, .card a.stretched-link { transition: border-color .15s; }
a.card:hover { border-color: var(--bus-ink); }
.form-control, .form-select { border-color: var(--bus-line); background-color: #FFFFFF; }
.form-control:focus, .form-select:focus { border-color: var(--bus-ink); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
.table { --bs-table-bg: #FFFFFF; border: 1px solid var(--bus-line); border-radius: var(--bus-radius); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.table > :not(caption) > * > * { padding-inline: .75rem; border-bottom-color: var(--bus-line); }
.table > tbody > tr:last-child > * { border-bottom: 0; }
.table > thead th { color: var(--bus-muted); font-weight: 600; font-size: .875rem; background: #FBFAF7; }
.alert-success { --bs-alert-bg: #E3F1E9; --bs-alert-border-color: #A9D3BC; --bs-alert-color: #145A38; }
.alert-warning { --bs-alert-bg: var(--bus-yellow-soft); --bs-alert-border-color: #F2D27A; --bs-alert-color: #6B4E00; }
.badge.text-bg-warning { background: var(--bus-yellow-soft) !important; color: #6B4E00 !important; }

/* Sign-in pages */
.auth-body { background: var(--bus-ink); min-height: 100vh; }
.auth-body .auth-brand { color: #FFFFFF; }
.auth-body .card { border: 0; }

/* «الشاشة دى بتعمل إيه؟»: closed by default, one click away on every panel screen. */
.screen-help { background: var(--bus-yellow-soft); border: 1px solid #F2D27A; border-radius: var(--bus-radius); padding: .6rem 1rem; }
.screen-help summary { font-weight: 700; cursor: pointer; color: var(--bus-ink); }
.screen-help li { margin-bottom: .25rem; }