/* ============================================================================
 * Visual identity
 * ----------------------------------------------------------------------------
 * A layer over the Bootstrap 4 theme underneath, not a replacement for it. The
 * theme keeps doing the structural work; this decides how the thing looks.
 *
 * The brief was a school platform used in Iraq, in Arabic and English, by
 * office staff at a desk and by teachers on a phone between lessons. So:
 * institutional rather than playful, calm enough to sit in front of all day,
 * and legible in both scripts at the same size.
 *
 *   Colour   The deep green of the Ghiras mark as the primary — the default
 *            Material blue reads as "software", and the logo sets the tone. One warm
 *            ochre accent, spent only where attention is genuinely wanted.
 *            Neutrals carry a slight warm bias toward that ochre so greys look
 *            chosen rather than left at the default.
 *
 *   Type     IBM Plex Sans Arabic draws both scripts in one family with matched
 *            proportions, so an Arabic label and its English counterpart sit on
 *            the same line without one looking borrowed. Pairing two unrelated
 *            faces is the usual shortcut and it always shows.
 *
 *   Shape    One shadow, used sparingly. Modest radii. The restraint is the
 *            point: a page of twenty cards should read as one surface.
 *
 * Semantic colour (good / warning / bad) is kept clear of the accent, so an
 * amber badge always means something is wrong and never just decoration.
 * ==========================================================================*/

/* ---------------------------------------------------------------- tokens -- */

:root {
    /* The green of the Ghiras mark (#0fb27c to #06835e), from the ink of the
       darkest to the wash of the lightest. It used to be a petrol that nothing
       else on the screen shared, so the logo looked borrowed. */
    --i-primary-900: #053a2a;
    --i-primary-700: #06684a;
    --i-primary: #07825c;
    --i-primary-400: #1fa878;
    --i-primary-100: #dcf1e7;

    /* The one warm note. */
    --i-accent: #c8891f;
    --i-accent-100: #f7ecd7;

    /* Semantic, deliberately separate from the accent. */
    --i-good: #2f7a52;
    --i-good-100: #e2f0e8;
    --i-warn: #9a6700;
    --i-warn-100: #f8eed6;
    --i-bad: #b3261e;
    --i-bad-100: #f8e3e1;

    /* Greys warmed a few degrees toward the ochre. */
    --i-ink: #1c1f1e;
    --i-ink-soft: #5b6360;
    --i-ink-faint: #8b918e;
    --i-line: #e3e5e3;
    --i-line-soft: #eef0ee;
    --i-surface: #ffffff;
    --i-canvas: #f5f6f4;
    --i-sidebar: #0a3d2e;
    --i-sidebar-ink: #cfe6dc;

    --i-radius: 6px;
    --i-radius-lg: 10px;
    --i-shadow: 0 1px 2px rgba(16, 30, 28, .05), 0 6px 18px -12px rgba(16, 30, 28, .28);
    --i-shadow-lift: 0 2px 4px rgba(16, 30, 28, .07), 0 12px 28px -16px rgba(16, 30, 28, .35);
}

/* The theme flips on data-theme; the tokens follow it so nothing else has to. */
[data-theme="dark"] {
    --i-primary-900: #d3efe2;
    --i-primary-700: #a3dcc2;
    --i-primary: #3fbf8d;
    --i-primary-400: #5fcf9f;
    --i-primary-100: #10362a;

    --i-accent: #e0a94a;
    --i-accent-100: #3a2e16;

    --i-good: #5fb488;
    --i-good-100: #163226;
    --i-warn: #d6a552;
    --i-warn-100: #362c15;
    --i-bad: #e08a83;
    --i-bad-100: #3a1f1d;

    --i-ink: #e6e9e7;
    --i-ink-soft: #a2aaa7;
    --i-ink-faint: #7b837f;
    --i-line: #2a302e;
    --i-line-soft: #232826;
    --i-surface: #171b1a;
    --i-canvas: #101312;
    --i-sidebar: #0c1918;
    --i-sidebar-ink: #b9cbc9;

    --i-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 22px -14px rgba(0, 0, 0, .7);
    --i-shadow-lift: 0 2px 6px rgba(0, 0, 0, .5), 0 14px 32px -18px rgba(0, 0, 0, .8);
}

/* ------------------------------------------------------------------ type -- */

body,
.navbar,
.card,
.btn,
.form-control,
.custom-select,
.dropdown-menu,
.nav-sidebar,
.table {
    font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
}

body {
    background: var(--i-canvas);
    color: var(--i-ink);
    font-size: 14px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.card-title {
    color: var(--i-ink);
    font-weight: 600;
    letter-spacing: -.005em;
}

.card-title { font-size: .95rem; }

.text-muted { color: var(--i-ink-soft) !important; }
.font-size-sm { font-size: .8125rem; }

/* Figures that sit in columns should line up. */
td, th, .counter, .card-body h1, .card-body h3, .card-body h4 {
    font-variant-numeric: tabular-nums;
}

/* A code is an identifier, not prose: give it its own voice. */
code {
    font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    background: var(--i-line-soft);
    color: var(--i-primary-700);
    border-radius: 4px;
    padding: .05rem .35rem;
    font-size: .84em;
}

/* -------------------------------------------------------------- the page -- */

.page-content { background: var(--i-canvas); }

.page-header,
.page-header-content { background: transparent; }

.breadcrumb { background: transparent; padding-inline: 0; }
.breadcrumb-item a { color: var(--i-ink-soft); }
.breadcrumb-item a:hover { color: var(--i-primary); }

/* --------------------------------------------------------------- sidebar -- */

.sidebar-main,
.sidebar-dark {
    background: var(--i-sidebar);
    border: 0;
}

.sidebar-main .sidebar-content { background: transparent; }

.sidebar-user {
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    padding-block: .35rem;
}
.sidebar-user .media-title { color: #fff; font-weight: 600; }
.sidebar-user .opacity-50 { color: var(--i-sidebar-ink); opacity: .75 !important; }

.nav-sidebar .nav-link {
    color: var(--i-sidebar-ink);
    border-radius: var(--i-radius);
    margin-inline: .5rem;
    padding-block: .55rem;
    font-size: .875rem;
    transition: background .12s ease, color .12s ease;
}

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

/* The active page is marked once, on the left edge, not shouted in a slab. */
.nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar .nav-item-open > .nav-link {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-weight: 600;
}

.nav-sidebar .nav-group-sub .nav-link {
    font-size: .84rem;
    color: rgba(207, 227, 227, .8);
}
.nav-sidebar .nav-group-sub .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.nav-sidebar .nav-link i { opacity: .85; }

/* --------------------------------------------------------------- top bar -- */

.navbar-dark,
.navbar-expand-md.navbar-dark {
    background: var(--i-primary-900);
    border: 0;
    box-shadow: none;
}

[data-theme="dark"] .navbar-dark { background: var(--i-sidebar); }

.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav-link {
    color: rgba(255, 255, 255, .88);
}
.navbar-dark .navbar-nav-link:hover { color: #fff; }

/* ----------------------------------------------------------------- cards -- */

.card {
    background: var(--i-surface);
    border: 1px solid var(--i-line);
    border-radius: var(--i-radius-lg);
    box-shadow: var(--i-shadow);
    margin-bottom: 1.25rem;
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--i-line-soft);
    padding: .9rem 1.25rem;
}

.card-body { padding: 1.25rem; }

/* The dashboard tiles are the one place colour is allowed to carry meaning
   on its own, so they get depth the ordinary cards do not. */
.card.bg-primary, .card.bg-success, .card.bg-danger, .card.bg-warning,
.card.bg-info, .card.bg-purple, .card.bg-teal, .card.bg-indigo, .card.bg-pink,
.card.bg-brown, .card.bg-blue-grey, .card.bg-orange, .card.bg-green {
    border: 0;
    box-shadow: var(--i-shadow-lift);
}

/* --------------------------------------------------------------- buttons -- */

.btn {
    border-radius: var(--i-radius);
    font-weight: 500;
    padding: .45rem 1rem;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.btn-primary {
    background: var(--i-primary);
    border-color: var(--i-primary);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--i-primary-700);
    border-color: var(--i-primary-700);
    color: #fff;
}

.btn-light {
    background: var(--i-surface);
    border-color: var(--i-line);
    color: var(--i-ink);
}
.btn-light:hover {
    background: var(--i-line-soft);
    border-color: var(--i-line);
    color: var(--i-ink);
}

.btn-danger { background: var(--i-bad); border-color: var(--i-bad); }
.btn-success { background: var(--i-good); border-color: var(--i-good); }
.btn-info { background: var(--i-primary-400); border-color: var(--i-primary-400); }

/* Keyboard focus has to be visible; a school runs on tab keys. */
.btn:focus-visible,
.form-control:focus-visible,
a:focus-visible {
    outline: 2px solid var(--i-primary-400);
    outline-offset: 2px;
    box-shadow: none;
}

/* ---------------------------------------------------------------- tables -- */

.table { color: var(--i-ink); }

.table thead th {
    background: var(--i-line-soft);
    border-bottom: 1px solid var(--i-line);
    border-top: 0;
    color: var(--i-ink-soft);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .02em;
    text-transform: none;
    padding: .7rem .85rem;
    white-space: nowrap;
}

.table td {
    border-top: 1px solid var(--i-line-soft);
    padding: .7rem .85rem;
    vertical-align: middle;
}

.table tbody tr:hover { background: var(--i-primary-100); }
[data-theme="dark"] .table tbody tr:hover { background: rgba(79, 179, 182, .08); }

/* ----------------------------------------------------------------- forms -- */

.form-control,
.custom-select {
    background: var(--i-surface);
    border: 1px solid var(--i-line);
    border-radius: var(--i-radius);
    color: var(--i-ink);
    padding: .45rem .75rem;
    height: auto;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--i-primary-400);
    box-shadow: 0 0 0 3px var(--i-primary-100);
}

.form-control::placeholder { color: var(--i-ink-faint); }

label,
.col-form-label { color: var(--i-ink); font-weight: 500; }

.form-text { color: var(--i-ink-soft); }

/* ---------------------------------------------------------------- badges -- */

.badge {
    border-radius: 999px;
    font-weight: 600;
    font-size: .7rem;
    letter-spacing: .01em;
    padding: .3em .7em;
}

/* Stated as tinted rather than solid: a table of solid badges is a fairground. */
.badge-success { background: var(--i-good-100); color: var(--i-good); }
.badge-danger { background: var(--i-bad-100); color: var(--i-bad); }
.badge-warning { background: var(--i-warn-100); color: var(--i-warn); }
.badge-info { background: var(--i-primary-100); color: var(--i-primary-700); }
.badge-secondary,
.badge-light { background: var(--i-line-soft); color: var(--i-ink-soft); }
.badge-dark { background: var(--i-primary-900); color: #fff; }

[data-theme="dark"] .badge-dark { background: var(--i-primary-100); color: var(--i-primary-700); }

/* ---------------------------------------------------------------- alerts -- */

.alert {
    border: 1px solid transparent;
    border-radius: var(--i-radius-lg);
    padding: .9rem 1.1rem;
}

.alert-success { background: var(--i-good-100); border-color: var(--i-good); color: var(--i-good); }
.alert-danger { background: var(--i-bad-100); border-color: var(--i-bad); color: var(--i-bad); }
.alert-warning { background: var(--i-warn-100); border-color: var(--i-warn); color: var(--i-warn); }
.alert-info { background: var(--i-primary-100); border-color: var(--i-primary-400); color: var(--i-primary-700); }
.alert-light { background: var(--i-line-soft); border-color: var(--i-line); color: var(--i-ink); }

/* ------------------------------------------------------------------- nav -- */

.nav-tabs {
    border-bottom: 1px solid var(--i-line);
    margin-bottom: 1.1rem;
}

.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--i-ink-soft);
    font-weight: 500;
    padding: .6rem 1rem;
}

.nav-tabs .nav-link:hover { color: var(--i-ink); border-bottom-color: var(--i-line); }

.nav-tabs .nav-link.active {
    background: transparent;
    border-bottom-color: var(--i-primary);
    color: var(--i-primary);
}

.dropdown-menu {
    border: 1px solid var(--i-line);
    border-radius: var(--i-radius-lg);
    box-shadow: var(--i-shadow-lift);
    background: var(--i-surface);
    padding: .35rem;
}

.dropdown-item {
    border-radius: var(--i-radius);
    color: var(--i-ink);
    padding: .5rem .75rem;
}
.dropdown-item:hover { background: var(--i-line-soft); color: var(--i-ink); }
.dropdown-item.active { background: var(--i-primary-100); color: var(--i-primary-700); }

.dropdown-divider { border-color: var(--i-line-soft); }

/* ------------------------------------------------------------- sign-in -- */

/* The first thing anyone sees, so it is the one screen given real composition
   rather than the theme's default card on a photograph. */
.login-cover .card {
    border: 1px solid var(--i-line);
    border-radius: 14px;
    box-shadow: var(--i-shadow-lift);
    backdrop-filter: blur(2px);
}

.login-form .card-body { padding: 1.75rem; }

.login-form .symbol-2x {
    background: var(--i-primary-100);
    border-color: var(--i-primary) !important;
    color: var(--i-primary) !important;
}

.login-form h5 { color: var(--i-primary); font-weight: 600; }

/* The access code is the credential here, so it is typed like one. */
.login-form input[name="code"] {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: .12em;
    text-align: center;
    font-size: 1.05rem;
}

/* The loading dots were drawn 9999px off to the left by box-shadows. On a
   right-to-left page that opened a ten-thousand-pixel sideways scroll; a
   plain spinner draws the same thing in its own box. */
.dot-carousel {
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--i-primary, #059669);
    border-right-color: transparent;
    background: transparent;
    color: inherit;
    box-shadow: none;
    animation: ghiras-spin .8s linear infinite;
}

@keyframes ghiras-spin { to { transform: rotate(360deg); } }

/* The hint is ordinary words: spaced out, Arabic letters stop joining. */
.login-form input[name="code"]::placeholder {
    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: normal;
    text-transform: none;
    font-size: .95rem;
}

/* ------------------------------------------------------------ the print -- */

/* Statements of marks are the one thing here that leaves the building. */
@media print {
    .navbar, .sidebar-main, .breadcrumb, .page-header, .card-header .header-elements {
        display: none !important;
    }
    .card { border: 0; box-shadow: none; }
    body { background: #fff; }
}