/*
 * iBraille admin theme — brand layer over AdminLTE 3 (Bootstrap 4).
 * Navy + orange from the mobile app, Atkinson Hyperlegible type.
 */
:root {
    --ib-navy: #0d2746;
    --ib-navy-700: #0a1f38;
    --ib-navy-600: #143559;
    --ib-orange: #c2713a;
    --ib-orange-600: #a95f2f;
    --ib-orange-50: #fbf1ea;
    --ib-ink: #191c1d;
    --ib-muted: #5f6673;
    --ib-subtle: #8a919e;
    --ib-canvas: #f5f6f8;
    --ib-surface: #ffffff;
    --ib-border: #e5e8ee;
    --ib-link: #1c4f86;
    --ib-success: #15803d;
    --ib-warning: #b45309;
    --ib-danger: #c62828;
    --ib-info: #1d4ed8;
    --ib-radius: 12px;
    --ib-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08);
    --ib-font: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Base ─────────────────────────────────────────────────── */
body, .main-header, .main-sidebar, .content-wrapper, .btn, .form-control, .card-title, h1, h2, h3, h4, h5 {
    font-family: var(--ib-font);
}
body { color: var(--ib-ink); }
.content-wrapper { background: var(--ib-canvas); }
a { color: var(--ib-link); }
a:hover { color: var(--ib-navy); }
code { color: #9a3d12; background: var(--ib-orange-50); padding: .05rem .35rem; border-radius: 4px; }
:focus-visible { outline: 3px solid rgba(194, 113, 58, .45); outline-offset: 2px; }

/* ── Top navbar ───────────────────────────────────────────── */
.main-header.navbar {
    border-bottom: 1px solid var(--ib-border);
    box-shadow: none;
    min-height: 60px;
}
.main-header .nav-link { color: var(--ib-muted); }
.main-header .nav-link:hover { color: var(--ib-navy); }
.main-header .user-menu .nav-link { font-weight: 700; color: var(--ib-ink); }
.user-header.bg-ib, .user-menu .user-header { background: var(--ib-navy) !important; }

/* ── Sidebar ──────────────────────────────────────────────── */
.main-sidebar, .main-sidebar::before { background: var(--ib-navy) !important; }
.main-sidebar .brand-link, [class*="sidebar-dark"] .brand-link {
    background: var(--ib-navy-700) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    height: 60px;
    display: flex;
    align-items: center;
}
.main-sidebar .brand-link .brand-image {
    background: #fff;
    border-radius: 8px;
    padding: 2px;
    max-height: 34px;
    box-shadow: none !important;
    margin-top: 0;
}
.main-sidebar .brand-text { color: #fff !important; letter-spacing: .01em; }
.main-sidebar .brand-text b { color: var(--ib-orange); font-weight: 700; }
.sidebar .nav-header {
    color: rgba(255, 255, 255, .45) !important;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    padding: 1.2rem 1rem .4rem !important;
}
.sidebar .nav-sidebar .nav-link {
    color: rgba(255, 255, 255, .78) !important;
    border-radius: 8px;
    margin: 1px 0;
    border-left: 3px solid transparent;
}
.sidebar .nav-sidebar .nav-link .nav-icon { color: rgba(255, 255, 255, .55); }
.sidebar .nav-sidebar .nav-link:hover {
    background: rgba(255, 255, 255, .06) !important;
    color: #fff !important;
}
.sidebar .nav-sidebar > .nav-item > .nav-link.active {
    background: rgba(194, 113, 58, .18) !important;
    color: #fff !important;
    border-left-color: var(--ib-orange);
    box-shadow: none !important;
}
.sidebar .nav-sidebar > .nav-item > .nav-link.active .nav-icon { color: var(--ib-orange); }
.sidebar-footer-note {
    color: rgba(255, 255, 255, .4);
    font-size: .75rem;
    padding: 1rem;
}

/* ── Page header ──────────────────────────────────────────── */
.content-header { padding: 1.4rem .5rem .8rem; }
.content-header h1 { font-size: 1.65rem; font-weight: 700; color: var(--ib-ink); letter-spacing: -.01em; }
.content-header h1 small { font-size: 1rem; font-weight: 400; }
.page-subtitle { color: var(--ib-muted); margin: .2rem 0 0; }
.back-link { color: var(--ib-muted); font-size: .9rem; }
.back-link:hover { color: var(--ib-navy); }

/* ── Cards ────────────────────────────────────────────────── */
.card {
    border: 1px solid var(--ib-border);
    border-radius: var(--ib-radius);
    box-shadow: var(--ib-shadow);
}
.card.card-outline { border-top: 1px solid var(--ib-border); }
.card.card-outline.card-danger { border-top: 3px solid var(--ib-danger); }
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--ib-border);
    padding: .9rem 1.25rem;
}
.card-header > .card-title, .card-title { font-weight: 700; font-size: 1rem; color: var(--ib-ink); }
.card-header .card-title i { color: var(--ib-orange); }
.card-footer { background: #fafbfc; border-top: 1px solid var(--ib-border); border-radius: 0 0 var(--ib-radius) var(--ib-radius) !important; }
.card-body.p-0 .table { border-radius: 0 0 var(--ib-radius) var(--ib-radius); }

/* Stat cards (dashboard) */
.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--ib-surface);
    border: 1px solid var(--ib-border);
    border-radius: var(--ib-radius);
    box-shadow: var(--ib-shadow);
    padding: 1.15rem 1.25rem;
    margin-bottom: 1rem;
    color: var(--ib-ink) !important;
    transition: box-shadow .15s ease, transform .15s ease;
    height: calc(100% - 1rem);
}
a.stat-card:hover { box-shadow: 0 6px 16px rgba(16, 24, 40, .1); transform: translateY(-1px); text-decoration: none; }
.stat-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0;
}
.stat-icon.tone-navy { background: #e8edf5; color: var(--ib-navy); }
.stat-icon.tone-orange { background: var(--ib-orange-50); color: var(--ib-orange); }
.stat-icon.tone-green { background: #e7f5ec; color: var(--ib-success); }
.stat-icon.tone-blue { background: #e8effd; color: var(--ib-info); }
.stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.stat-value small { font-size: .95rem; color: var(--ib-subtle); font-weight: 400; }
.stat-title { color: var(--ib-muted); font-size: .9rem; }
.stat-hint { color: var(--ib-subtle); font-size: .8rem; margin-top: .15rem; }

/* ── Tables ───────────────────────────────────────────────── */
.table { color: var(--ib-ink); }
.table thead th {
    background: #fafbfc;
    border-top: 0;
    border-bottom: 1px solid var(--ib-border);
    color: var(--ib-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding-top: .7rem;
    padding-bottom: .7rem;
}
.table td { border-top: 1px solid #eef0f4; }
.table-hover tbody tr:hover { background: #f8f9fb; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn { border-radius: 8px; font-weight: 600; }
.btn-primary { background: var(--ib-orange); border-color: var(--ib-orange); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active {
    background: var(--ib-orange-600); border-color: var(--ib-orange-600);
}
.btn-secondary { background: var(--ib-navy); border-color: var(--ib-navy); }
.btn-secondary:hover, .btn-secondary:focus { background: var(--ib-navy-600); border-color: var(--ib-navy-600); }
.btn-outline-primary { color: var(--ib-navy); border-color: #c9d1dd; }
.btn-outline-primary:hover { background: var(--ib-navy); border-color: var(--ib-navy); color: #fff; }
.btn-outline-secondary { color: var(--ib-muted); border-color: #d5dae2; }
.btn-outline-secondary:hover { background: #eef1f5; color: var(--ib-ink); border-color: #c9d0da; }
.btn-warning { background: var(--ib-navy); border-color: var(--ib-navy); color: #fff; }
.btn-warning:hover, .btn-warning:focus { background: var(--ib-navy-600); border-color: var(--ib-navy-600); color: #fff; }
.btn-link { color: var(--ib-link); }

/* ── Forms ────────────────────────────────────────────────── */
.form-control { border-radius: 8px; border-color: #d5dae2; height: calc(2.35rem + 2px); }
textarea.form-control { height: auto; }
.form-control:focus { border-color: var(--ib-orange); box-shadow: 0 0 0 .2rem rgba(194, 113, 58, .18); }
label:not(.custom-control-label) { font-weight: 600; color: var(--ib-ink); }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--ib-orange); border-color: var(--ib-orange); }

/* ── Badges (soft pills) ──────────────────────────────────── */
.badge { border-radius: 999px; padding: .32em .7em; font-weight: 700; font-size: .72rem; letter-spacing: .01em; }
.badge-success { background: #e7f5ec; color: var(--ib-success); }
.badge-danger { background: #fdeaea; color: var(--ib-danger); }
.badge-warning { background: #fdf1e5; color: var(--ib-warning); }
.badge-info { background: #e8effd; color: var(--ib-info); }
.badge-secondary { background: #eef1f5; color: #4b5563; }
.badge-light { background: #f3f4f6; color: var(--ib-muted); border: 1px solid var(--ib-border); }
.badge-dark { background: var(--ib-navy); color: #fff; }
.badge.bg-orange { background: #fff0e6 !important; color: #c2410c !important; }

/* ── Tabs, pagination, progress, alerts ───────────────────── */
.card-outline-tabs .card-header .nav-link { color: var(--ib-muted); border: 0; border-bottom: 3px solid transparent; font-weight: 600; }
.card-outline-tabs .card-header .nav-link.active {
    color: var(--ib-navy); border-bottom-color: var(--ib-orange); background: transparent;
}
.card.card-outline-tabs { border-top: 1px solid var(--ib-border); }
.page-item.active .page-link { background: var(--ib-navy); border-color: var(--ib-navy); }
.page-link { color: var(--ib-navy); border-radius: 6px; margin: 0 2px; }
.progress { border-radius: 999px; background: #eef1f5; }
.progress-bar { border-radius: 999px; }
.progress-bar.bg-warning { background: var(--ib-orange) !important; }
.alert { border-radius: 10px; border: 0; }
.alert-success { background: #e7f5ec; color: #14532d; }
.alert-danger { background: #fdeaea; color: #7f1d1d; }
.callout.callout-info { border-left-color: var(--ib-orange); border-radius: 10px; box-shadow: var(--ib-shadow); }

/* ── Profile card (user detail) ───────────────────────────── */
.box-profile .profile-username { font-weight: 700; }
.list-group-unbordered > .list-group-item { border-color: #eef0f4; }

/* ── Login and other auth pages ───────────────────────────── */
body.login-page, body.register-page {
    background: radial-gradient(1200px 600px at 10% -10%, #1c3f63 0%, transparent 60%), var(--ib-navy);
}
.login-page .login-logo a, .register-page .register-logo a { color: #fff; font-weight: 700; }
.login-page .login-logo img, .register-page .register-logo img {
    background: #fff; border-radius: 12px; padding: 8px 12px; height: auto !important; width: 150px !important;
}
.login-box .card, .register-box .card { border: 0; border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); overflow: hidden; }
.login-box .card-header, .register-box .card-header { border-bottom: 0; padding-top: 1.5rem; }
.login-card-body, .register-card-body { padding: 1.75rem; }

/* ── Footer ───────────────────────────────────────────────── */
.main-footer { background: transparent; border-top: 1px solid var(--ib-border); color: var(--ib-subtle); font-size: .85rem; }

/* Login logo: the image already carries the wordmark, so stack it with a
   small caption instead of the configured text (done in CSS because the
   auth template is customised on the server). */
.login-page .login-logo a, .register-page .register-logo a {
    font-size: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.login-page .login-logo a::after, .register-page .register-logo a::after {
    content: "Admin panel";
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
    margin-top: .9rem;
}
.login-page .login-box-msg { font-weight: 700; color: var(--ib-ink); }