/* ================================================================
   Kottab App — Brand design system for authenticated pages
   ================================================================ */

@font-face {
    font-family: "Avenir Arabic";
    src: url("../fonts/AvenirRegular.77ce85fec67e.ttf") format("truetype");
    font-weight: 400;
}
@font-face {
    font-family: "DG Heaven";
    src: url("../fonts/ArbFONTS-DG-Heaven-Bold.f3e2c1fed3fd.ttf") format("truetype");
    font-weight: 800;
}

/* ── Tokens (light) ── */
:root {
    --k-bg:            #F6F2EC;
    --k-card:          #ffffff;
    --k-panel:         #F3EAD7;
    --k-border:        #e5e7eb;
    --k-text:          #141414;
    --k-muted:         #6b7280;
    --k-grad:          linear-gradient(90deg,#FFB400 0%,#E30613 100%);
    --k-accent:        #E30613;
    --k-header-bg:     #ffffff;
    --k-footer-bg:     #1a1a1a;
    --k-footer-txt:    #d7d7d7;
    --k-shadow:        0 4px 20px rgba(15,23,42,.08);
    --k-shadow-lg:     0 8px 32px rgba(15,23,42,.14);
    --k-radius:        16px;
    --k-font-head:     "DG Heaven", system-ui, sans-serif;
    --k-font-body:     "Avenir Arabic", system-ui, sans-serif;
}

/* ── Tokens (dark) ── */
[data-theme="dark"] {
    --k-bg:            #0f0f0f;
    --k-card:          #1a1a1a;
    --k-panel:         #1f1b13;
    --k-border:        #2e2e2e;
    --k-text:          #f0ece4;
    --k-muted:         #9ca3af;
    --k-header-bg:     #141414;
    --k-footer-bg:     #0a0a0a;
    --k-footer-txt:    #9ca3af;
    --k-shadow:        0 4px 20px rgba(0,0,0,.4);
    --k-shadow-lg:     0 8px 32px rgba(0,0,0,.55);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Body ── */
.kottab-app {
    background:   var(--k-bg);
    font-family:  var(--k-font-body);
    color:        var(--k-text);
    min-height:   100vh;
    display:      flex;
    flex-direction: column;
    transition:   background .3s, color .3s;
}

/* ════════════════════════════════
   HEADER
   ════════════════════════════════ */
.k-header {
    background:    var(--k-header-bg);
    border-bottom: 1px solid var(--k-border);
    position:      sticky;
    top:           0;
    z-index:       900;
    transition:    background .3s, border-color .3s;
}
.k-header::after {
    content:    "";
    display:    block;
    height:     3px;
    background: var(--k-grad);
}
.k-header-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         11px 28px;
    max-width:       1320px;
    margin:          0 auto;
    width:           100%;
    gap:             12px;
}

/* Brand */
.k-brand {
    display:         flex;
    align-items:     center;
    gap:             10px;
    text-decoration: none;
    flex-shrink:     0;
}
.k-brand img {
    height:     34px;
    width:      auto;
    transition: filter .3s;
}
/* Light mode: show logo_light (white→black), Dark mode: show logo_color (original) */
.k-brand img { filter: none; }
.k-brand .logo-dark  { display: none; }
[data-theme="dark"] .k-brand .logo-light { display: none; }
[data-theme="dark"] .k-brand .logo-dark  { display: block; }
.k-brand-name {
    font-family: var(--k-font-head);
    font-size:   1.05rem;
    color:       var(--k-text);
    white-space: nowrap;
}

/* Nav */
.k-nav {
    display:         flex;
    align-items:     center;
    gap:             2px;
    flex-wrap:       wrap;
    flex:            1;
    justify-content: flex-end;
}
.k-nav .nav-link {
    color:       var(--k-muted);
    font-size:   .875rem;
    padding:     6px 11px;
    border-radius: 8px;
    transition:  color .2s, background .2s;
    white-space: nowrap;
}
.k-nav .nav-link:hover {
    color:       var(--k-text);
    background:  var(--k-panel);
}

/* User dropdown */
.k-user-drop .dropdown-toggle {
    font-size:    .875rem;
    color:        var(--k-muted);
    padding:      6px 12px;
    border-radius: 8px;
    cursor:       pointer;
    white-space:  nowrap;
    transition:   color .2s, background .2s;
    text-decoration: none;
}
.k-user-drop .dropdown-toggle:hover { color: var(--k-text); background: var(--k-panel); }
.k-user-drop .dropdown-menu {
    background:    var(--k-card);
    border:        1px solid var(--k-border);
    border-radius: 12px;
    box-shadow:    var(--k-shadow-lg);
    padding:       8px;
    min-width:     175px;
}
.k-user-drop .dropdown-item {
    color:         var(--k-text);
    font-size:     .85rem;
    border-radius: 8px;
    padding:       7px 12px;
    transition:    background .15s;
    background:    none;
    border:        none;
    width:         100%;
    text-align:    left;
    cursor:        pointer;
}
.k-user-drop .dropdown-item:hover { background: var(--k-panel); color: var(--k-text); }
.k-user-drop .dropdown-divider { border-color: var(--k-border); margin: 6px 8px; }

/* Dark toggle */
.k-dark-btn {
    width:        36px;
    height:       36px;
    border-radius: 50%;
    border:        1px solid var(--k-border);
    background:    var(--k-panel);
    color:         var(--k-text);
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    cursor:        pointer;
    font-size:     15px;
    flex-shrink:   0;
    transition:    background .2s;
    line-height:   1;
}
.k-dark-btn:hover { background: var(--k-border); }

/* Nav CTA ("ابدأ الآن" gradient pill) */
.k-cta {
    background:      var(--k-grad);
    color:           #fff !important;
    border-radius:   999px;
    padding:         7px 16px;
    font-weight:     700;
    font-size:       .8rem;
    white-space:     nowrap;
    transition:      opacity .2s, transform .15s;
    text-decoration: none;
}
.k-cta:hover { opacity: .88; color: #fff !important; background: var(--k-grad); transform: translateY(-1px); }

/* Impersonation banner */
.k-impersonate {
    background:    #fffbeb;
    border-bottom: 1px solid #fde68a;
    color:         #92400e;
    font-size:     .8rem;
    text-align:    center;
    padding:       7px 16px;
}
[data-theme="dark"] .k-impersonate {
    background: #2d2000; border-color: #4d3800; color: #fcd34d;
}

/* ════════════════════════════════
   MAIN
   ════════════════════════════════ */
.k-main { flex: 1; padding: 36px 0 52px; }

/* ════════════════════════════════
   LOADER
   ════════════════════════════════ */
#k-loader {
    display:         none;
    position:        fixed;
    inset:           0;
    background:      rgba(246,242,236,.7);
    justify-content: center;
    align-items:     center;
    z-index:         2000;
    transition:      background .3s;
}
[data-theme="dark"] #k-loader { background: rgba(15,15,15,.75); }
.k-loader-ring {
    width:      44px;
    height:     44px;
    border:     3px solid var(--k-border);
    border-top-color: #FFB400;
    border-radius: 50%;
    animation:  k-spin .7s linear infinite;
}
@keyframes k-spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════
   CARDS (Bootstrap overrides)
   ════════════════════════════════ */
.card {
    background:    var(--k-card) !important;
    border:        1px solid var(--k-border) !important;
    border-radius: var(--k-radius) !important;
    box-shadow:    var(--k-shadow) !important;
    transition:    box-shadow .2s !important;
}
.card:hover {
    box-shadow: var(--k-shadow-lg) !important;
}
.card-body h2, .card-body h3, .card-body h4, .card-body h5 {
    font-family: var(--k-font-head);
    color:       var(--k-text);
}

/* ── Typography overrides ── */
.text-muted    { color: var(--k-muted)   !important; }
.text-dark     { color: var(--k-text)    !important; }
.font-serif-title { font-family: var(--k-font-head); }

/* ── Bootstrap button overrides ── */
.btn-primary {
    background:    var(--k-grad) !important;
    border:        none         !important;
    border-radius: 999px        !important;
    font-weight:   700          !important;
    transition:    opacity .2s  !important;
}
.btn-primary:hover,
.btn-primary:focus { opacity: .88 !important; box-shadow: none !important; }

/* ── Dropdown backgrounds ── */
.dropdown-menu {
    background:    var(--k-card);
    border:        1px solid var(--k-border);
    border-radius: 12px;
    box-shadow:    var(--k-shadow-lg);
}
.dropdown-item {
    color:         var(--k-text);
    border-radius: 8px;
    font-size:     .875rem;
}
.dropdown-item:hover { background: var(--k-panel); color: var(--k-text); }
.dropdown-divider   { border-color: var(--k-border); }

/* ════════════════════════════════
   FOOTER
   ════════════════════════════════ */
.k-footer {
    background: var(--k-footer-bg);
    color:      var(--k-footer-txt);
    padding:    26px 28px;
    transition: background .3s;
}
.k-footer-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    max-width:       1320px;
    margin:          0 auto;
    flex-wrap:       wrap;
    gap:             14px;
}
.k-fcopy { font-size: .8rem; opacity: .8; }
.k-footer-links {
    display:     flex;
    gap:         18px;
    align-items: center;
}
.k-footer-links a {
    color:           var(--k-footer-txt);
    font-size:       .8rem;
    text-decoration: none;
    opacity:         .65;
    transition:      opacity .2s;
}
.k-footer-links a:hover { opacity: 1; }
.k-footer-logo img { height: 26px; width: auto; opacity: .8; }

/* ════════════════════════════════
   DARK MODE — Bootstrap utility & component overrides
   ════════════════════════════════ */
[data-theme="dark"] body,
[data-theme="dark"] .kottab-app { background: var(--k-bg); color: var(--k-text); }

/* Utility backgrounds */
[data-theme="dark"] .bg-white  { background-color: var(--k-card)  !important; color: var(--k-text) !important; }
[data-theme="dark"] .bg-light  { background-color: var(--k-panel) !important; color: var(--k-text) !important; }
[data-theme="dark"] .bg-body   { background-color: var(--k-bg)    !important; color: var(--k-text) !important; }

/* Utility text */
[data-theme="dark"] .text-dark, [data-theme="dark"] .text-black { color: var(--k-text) !important; }
[data-theme="dark"] .text-body  { color: var(--k-text)  !important; }
[data-theme="dark"] .text-primary { color: #6ea8ff !important; }
[data-theme="dark"] .text-secondary { color: var(--k-muted) !important; }

/* Headings — never black in dark mode */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--k-text); }

/* List groups */
[data-theme="dark"] .list-group-item {
    background-color: var(--k-card);
    color: var(--k-text);
    border-color: var(--k-border);
}
[data-theme="dark"] .list-group-item-action:hover,
[data-theme="dark"] .list-group-item-action:focus { background-color: var(--k-panel); color: var(--k-text); }

/* Cards already handled via var(--k-card) in base .card rules — ensure text */
[data-theme="dark"] .card { color: var(--k-text); }
[data-theme="dark"] .card-header, [data-theme="dark"] .card-footer {
    background-color: var(--k-panel);
    border-color: var(--k-border);
    color: var(--k-text);
}

/* Form controls */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea.form-control {
    background-color: var(--k-panel);
    color: var(--k-text);
    border-color: var(--k-border);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--k-panel);
    color: var(--k-text);
    border-color: #FFB400;
    box-shadow: 0 0 0 3px rgba(255,180,0,.18);
}
[data-theme="dark"] .form-control::placeholder { color: var(--k-muted); }
[data-theme="dark"] .form-label, [data-theme="dark"] .form-check-label { color: var(--k-text); }
[data-theme="dark"] .form-text { color: var(--k-muted); }
[data-theme="dark"] .input-group-text { background-color: var(--k-panel); color: var(--k-text); border-color: var(--k-border); }

/* Modals */
[data-theme="dark"] .modal-content {
    background-color: var(--k-card);
    color: var(--k-text);
    border-color: var(--k-border);
}
[data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--k-border); }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Tables */
[data-theme="dark"] .table {
    --bs-table-bg: var(--k-card);
    --bs-table-color: var(--k-text);
    --bs-table-border-color: var(--k-border);
    --bs-table-striped-bg: var(--k-panel);
    --bs-table-striped-color: var(--k-text);
    --bs-table-hover-bg: var(--k-panel);
    --bs-table-hover-color: var(--k-text);
    color: var(--k-text);
    border-color: var(--k-border);
}
[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: var(--bs-table-bg);
    color: var(--bs-table-color);
    border-color: var(--k-border);
}

/* Nav tabs & pills */
[data-theme="dark"] .nav-tabs { border-color: var(--k-border); }
[data-theme="dark"] .nav-tabs .nav-link { color: var(--k-muted); }
[data-theme="dark"] .nav-tabs .nav-link:hover { border-color: var(--k-border); color: var(--k-text); }
[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--k-card);
    color: var(--k-text);
    border-color: var(--k-border) var(--k-border) var(--k-card);
}
[data-theme="dark"] .nav-pills .nav-link { color: var(--k-muted); }
[data-theme="dark"] .nav-pills .nav-link.active { background-color: var(--k-accent); color: #fff; }

/* Alerts — dark tones */
[data-theme="dark"] .alert-warning { background-color: #2d2000; color: #fcd34d; border-color: #4d3800; }
[data-theme="dark"] .alert-info    { background-color: #072a45; color: #7dd3fc; border-color: #0c4a6e; }
[data-theme="dark"] .alert-success { background-color: #052e16; color: #86efac; border-color: #14532d; }
[data-theme="dark"] .alert-danger  { background-color: #2d1111; color: #fca5a5; border-color: #7f1d1d; }
[data-theme="dark"] .alert-primary { background-color: #1e1b3a; color: #a5b4fc; border-color: #312e81; }
[data-theme="dark"] .alert-secondary { background-color: var(--k-panel); color: var(--k-text); border-color: var(--k-border); }

/* Accordion */
[data-theme="dark"] .accordion-item { background-color: var(--k-card); border-color: var(--k-border); }
[data-theme="dark"] .accordion-button {
    background-color: var(--k-card);
    color: var(--k-text);
}
[data-theme="dark"] .accordion-button:not(.collapsed) { background-color: var(--k-panel); color: var(--k-text); }
[data-theme="dark"] .accordion-button::after { filter: invert(1); }

/* Borders */
[data-theme="dark"] .border { border-color: var(--k-border) !important; }
[data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start, [data-theme="dark"] .border-end { border-color: var(--k-border) !important; }

/* Breadcrumb */
[data-theme="dark"] .breadcrumb { background-color: transparent; }
[data-theme="dark"] .breadcrumb-item { color: var(--k-muted); }
[data-theme="dark"] .breadcrumb-item.active { color: var(--k-text); }

/* Page background safety nets */
[data-theme="dark"] .bg-light-subtle, [data-theme="dark"] .bg-white-subtle { background-color: var(--k-panel) !important; }

/* ════════════════════════════════
   RESPONSIVE
   ════════════════════════════════ */

/* Prevent horizontal scroll on any page */
html, body { max-width: 100%; }
.kottab-app { overflow-x: hidden; }

/* Tablet */
@media (max-width: 900px) {
    .k-header-inner { padding: 10px 18px; gap: 10px; }
    .k-main         { padding: 28px 0 42px; }
}

/* Phone */
@media (max-width: 768px) {
    .k-header-inner  { padding: 10px 14px; gap: 8px; }
    .k-brand img     { height: 30px; }
    .k-brand-name    { display: none; }
    .k-nav           { gap: 4px; }
    .k-nav .nav-link { padding: 6px 9px; font-size: .78rem; }
    .k-cta           { padding: 6px 12px; font-size: .74rem; }
    .k-main          { padding: 22px 0 36px; }
    .k-footer        { padding: 22px 18px; }
    .k-footer-inner  { flex-direction: column; text-align: center; gap: 12px; }
    .k-footer-links  { justify-content: center; flex-wrap: wrap; gap: 12px; }
    .k-impersonate   { font-size: .72rem; padding: 6px 10px; }
}

/* Small phone */
@media (max-width: 480px) {
    .k-header-inner  { padding: 8px 10px; gap: 4px; }
    .k-brand img     { height: 26px; }
    .k-nav           { gap: 2px; }
    .k-nav .nav-link { padding: 5px 7px; font-size: .72rem; }
    .k-cta           { display: none; }
    .k-dark-btn      { width: 32px; height: 32px; font-size: 13px; }
    .k-footer        { padding: 18px 14px; }
    .k-footer-links  { gap: 10px; font-size: .72rem; }
    .k-footer-logo img { height: 22px; }
}