/*
 * Dajn design system — shared by every layout:
 *   storefront + buyer account  (syaanah::layouts.style)
 *   supplier dashboard          (syaanah::layouts.supplier)
 *   admin dashboard             (core::layouts.admin)
 *
 * The vendored Bootstrap is v5.0.2, which compiles colours as literal hex
 * values, so the stock component classes are re-themed here with explicit
 * overrides. Colours go through --dajn-* tokens so the admin dark mode
 * (public/css/tokens.css, [data-bs-theme="dark"]) keeps working.
 */

/* ===================================================================
   1. Tokens
   =================================================================== */
:root {
    --dajn-primary-dark: #33193f;
    --dajn-accent: #D9E6FF;
    --dajn-ink: #2A1640;
    --dajn-muted: #6B6B80;
    --dajn-bg-soft: #F5F8FF;
    --dajn-border: #E7EBF5;

    --dajn-success: #1B7F3B;
    --dajn-success-soft: #E6F6EA;
    --dajn-warning: #B26A00;
    --dajn-warning-soft: #FFF4E0;
    --dajn-danger: #C0392B;
    --dajn-danger-soft: #FDECEA;
    --dajn-info: #1D5FA8;
    --dajn-info-soft: #E5F0FB;

    --dajn-radius: 14px;
    --dajn-radius-sm: 10px;
    --dajn-shadow: 0 1px 2px rgba(51,25,63, .04), 0 6px 18px rgba(51,25,63, .06);
    --dajn-shadow-hover: 0 10px 28px rgba(51,25,63, .12);

    --dajn-font: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Roboto, Tahoma, sans-serif;
}

/* Light-mode values only. Scoped with :not() so the dark palette in
   public/css/tokens.css ([data-bs-theme="dark"] on <html>) still applies —
   a plain :root here would win the cascade (same specificity, loaded later). */
:root:not([data-bs-theme="dark"]) {
    --dajn-primary: #75418f;
    --dajn-primary-rgb: 117, 65, 143;
    --dajn-primary-light: #936eb0;
    --dajn-primary-light-rgb: 147, 110, 176;

    /* admin/supplier chrome (consumed by public/css/admin.css) */
    --dajn-body-bg: #F6F7FB;
    --dajn-sidebar-bg: linear-gradient(180deg, #33193f 0%, #4a2a5e 100%);
    --dajn-sidebar-text: rgba(255, 255, 255, .72);
    --dajn-sidebar-text-active: #fff;
    --dajn-sidebar-active-bg: rgba(217, 230, 255, .14);
    --dajn-link-color: #4A3A5C;
    --dajn-text-muted: #6B6B80;
    --dajn-border-color: #E7EBF5;
    --dajn-card-bg: #fff;
    --dajn-text-body: #2A2A35;
}

[data-bs-theme="dark"] {
    --dajn-primary-dark: #7E5A9E;
    --dajn-accent: rgba(164, 135, 189, .18);
    --dajn-ink: #EDE6F5;
    --dajn-muted: #A9A3B6;
    --dajn-bg-soft: #1C2230;
    --dajn-border: #2A3040;
    --dajn-sidebar-bg: linear-gradient(180deg, #120A1B 0%, #1B0F28 100%);
    --dajn-success-soft: rgba(61, 214, 140, .12);
    --dajn-warning-soft: rgba(255, 205, 57, .12);
    --dajn-danger-soft: rgba(234, 134, 143, .12);
    --dajn-info-soft: rgba(110, 223, 246, .12);
}

/* ===================================================================
   2. Typography — one family for Arabic and Latin everywhere.
      !important beats syaanah/css/arabic.css, which forces a font with
      no Latin glyphs (English text was falling back to a serif).
   =================================================================== */
html body,
body .tooltip,
body .popover,
body input, body select, body textarea, body button {
    font-family: var(--dajn-font) !important;
}

body {
    color: var(--dajn-text-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .ember-bold, .fw-bold {
    font-family: var(--dajn-font) !important;
    font-weight: 700;
}

.fa, .fas, .far, .fal, .fab, .bi, [class^="fa-"], [class*=" fa-"] {
    font-family: inherit;
}
.fas, .far, .fa { font-family: 'Font Awesome 5 Free' !important; }
.fab { font-family: 'Font Awesome 5 Brands' !important; }
.bi::before { font-family: 'bootstrap-icons' !important; }

a { color: var(--dajn-primary); }
a:hover { color: var(--dajn-primary-dark); }

::selection { background: var(--dajn-accent); color: var(--dajn-primary-dark); }

/* ===================================================================
   3. Bootstrap re-theme
   =================================================================== */

/* Colour utilities */
.text-primary { color: var(--dajn-primary) !important; }
.bg-primary { background-color: var(--dajn-primary) !important; }
.border-primary { border-color: var(--dajn-primary) !important; }
.link-primary { color: var(--dajn-primary) !important; }
.text-success { color: var(--dajn-success) !important; }
.text-danger { color: var(--dajn-danger) !important; }
.text-warning { color: var(--dajn-warning) !important; }
.text-info { color: var(--dajn-info) !important; }

/* Buttons */
.btn {
    border-radius: var(--dajn-radius-sm);
    font-weight: 600;
    padding: .45rem 1rem;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn-sm { padding: .3rem .75rem; border-radius: 8px; }
.btn-lg { padding: .65rem 1.4rem; border-radius: 12px; }
.btn:focus, .btn:focus-visible { box-shadow: 0 0 0 .2rem rgba(var(--dajn-primary-rgb), .25) !important; }

.btn-primary,
.btn-info {
    background-color: var(--dajn-primary);
    border-color: var(--dajn-primary);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.btn-info:hover, .btn-info:focus, .btn-info:active {
    background-color: var(--dajn-primary-dark) !important;
    border-color: var(--dajn-primary-dark) !important;
    color: #fff !important;
}

.btn-outline-primary,
.btn-outline-info {
    color: var(--dajn-primary);
    border-color: var(--dajn-primary);
    background: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary.active,
.btn-outline-info:hover, .btn-outline-info:active {
    background-color: var(--dajn-primary) !important;
    border-color: var(--dajn-primary) !important;
    color: #fff !important;
}

.btn-success { background-color: var(--dajn-success); border-color: var(--dajn-success); }
.btn-success:hover, .btn-success:focus { background-color: #156730; border-color: #156730; }

.btn-danger { background-color: var(--dajn-danger); border-color: var(--dajn-danger); }
.btn-danger:hover, .btn-danger:focus { background-color: #A1301F; border-color: #A1301F; }

.btn-secondary,
.btn-light {
    background-color: var(--dajn-bg-soft);
    border-color: var(--dajn-border);
    color: var(--dajn-ink);
}
.btn-secondary:hover, .btn-light:hover {
    background-color: var(--dajn-accent);
    border-color: var(--dajn-accent);
    color: var(--dajn-primary-dark);
}
.btn-outline-secondary { color: var(--dajn-muted); border-color: var(--dajn-border); }
.btn-outline-secondary:hover { background: var(--dajn-bg-soft); color: var(--dajn-ink); border-color: var(--dajn-border); }

.btn-link { color: var(--dajn-primary); font-weight: 600; }

/* Cards */
.card {
    border: 1px solid var(--dajn-border);
    border-radius: var(--dajn-radius);
    box-shadow: var(--dajn-shadow);
    background-color: var(--dajn-card-bg);
}
.card.shadow, .card.shadow-sm, .card.shadow-lg { box-shadow: var(--dajn-shadow) !important; }
.card > .card-header:first-child { border-radius: var(--dajn-radius) var(--dajn-radius) 0 0; }
.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--dajn-border);
    font-weight: 700;
    color: var(--dajn-ink);
    padding: .9rem 1.25rem;
}
.card-footer { background-color: transparent; border-top: 1px solid var(--dajn-border); }

/* Tables */
.table { color: var(--dajn-text-body); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .75rem 1rem; border-bottom-color: var(--dajn-border); vertical-align: middle; }
.table > thead > tr > th,
.table thead th {
    background-color: var(--dajn-bg-soft);
    color: var(--dajn-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
    white-space: nowrap;
    border-bottom: 1px solid var(--dajn-border);
}
.table > :not(:first-child) { border-top: 0; }
.table-hover > tbody > tr:hover > * { background-color: rgba(var(--dajn-primary-rgb), .035); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(var(--dajn-primary-rgb), .025); }

/* Forms */
.form-control, .form-select {
    border: 1px solid var(--dajn-border) !important;
    border-radius: var(--dajn-radius-sm);
    min-height: 40px;
    color: var(--dajn-text-body);
    background-color: var(--dajn-card-bg);
}
textarea.form-control { min-height: 80px; }
.form-control-sm, .form-select-sm { min-height: 32px; border-radius: 8px; }
.form-control:focus, .form-select:focus {
    border-color: var(--dajn-primary) !important;
    box-shadow: 0 0 0 .2rem rgba(var(--dajn-primary-rgb), .15) !important;
    outline: 0;
}
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--dajn-danger) !important; }
.form-label, label { color: var(--dajn-ink); font-weight: 600; }
.form-check-input:checked { background-color: var(--dajn-primary); border-color: var(--dajn-primary); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(var(--dajn-primary-rgb), .2); border-color: var(--dajn-primary); }
.form-switch .form-check-input:focus { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23B9A3CC'/%3e%3c/svg%3e"); }
.input-group-text { background: var(--dajn-bg-soft); border-color: var(--dajn-border); border-radius: var(--dajn-radius-sm); }

/* select2 (admin) */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--dajn-border) !important;
    border-radius: var(--dajn-radius-sm) !important;
    min-height: 40px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--dajn-primary); }

/* Badges */
.badge { font-weight: 600; border-radius: 999px; padding: .38em .75em; }
.badge.bg-primary { background-color: var(--dajn-accent) !important; color: var(--dajn-primary) !important; }
.badge.bg-success { background-color: var(--dajn-success-soft) !important; color: var(--dajn-success) !important; }
.badge.bg-danger { background-color: var(--dajn-danger-soft) !important; color: var(--dajn-danger) !important; }
.badge.bg-warning { background-color: var(--dajn-warning-soft) !important; color: var(--dajn-warning) !important; }
.badge.bg-info { background-color: var(--dajn-info-soft) !important; color: var(--dajn-info) !important; }
.badge.bg-secondary { background-color: var(--dajn-bg-soft) !important; color: var(--dajn-muted) !important; }

/* Alerts */
.alert { border-radius: var(--dajn-radius-sm); border: 0; }
.alert-success { background: var(--dajn-success-soft); color: var(--dajn-success); }
.alert-danger { background: var(--dajn-danger-soft); color: var(--dajn-danger); }
.alert-warning { background: var(--dajn-warning-soft); color: var(--dajn-warning); }
.alert-info, .alert-primary { background: var(--dajn-accent); color: var(--dajn-primary-dark); }

/* Nav pills / tabs */
.nav-pills .nav-link { border-radius: var(--dajn-radius-sm); color: var(--dajn-ink); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--dajn-primary);
    color: #fff !important;
}
.nav-tabs { border-bottom-color: var(--dajn-border); }
.nav-tabs .nav-link { color: var(--dajn-muted); border: 0; border-bottom: 2px solid transparent; font-weight: 600; }
.nav-tabs .nav-link:hover { color: var(--dajn-primary); }
.nav-tabs .nav-link.active { color: var(--dajn-primary); border-bottom-color: var(--dajn-primary); background: transparent; }

/* Pagination */
.pagination { gap: 4px; flex-wrap: wrap; }
.page-link {
    border-radius: 8px !important;
    border: 1px solid var(--dajn-border);
    color: var(--dajn-primary);
    min-width: 36px;
    text-align: center;
}
.page-link:hover { background: var(--dajn-accent); border-color: var(--dajn-accent); color: var(--dajn-primary-dark); }
.page-link:focus { box-shadow: 0 0 0 .2rem rgba(var(--dajn-primary-rgb), .2); }
.page-item.active .page-link { background-color: var(--dajn-primary); border-color: var(--dajn-primary); color: #fff; }

/* Dropdowns, modals, progress, list groups */
.dropdown-menu {
    border: 1px solid var(--dajn-border);
    border-radius: 12px;
    box-shadow: var(--dajn-shadow-hover);
    padding: 6px;
}
.dropdown-item { border-radius: 8px; padding: .5rem .8rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--dajn-bg-soft); color: var(--dajn-primary); }
.dropdown-item.active, .dropdown-item:active { background: var(--dajn-primary); color: #fff; }

.modal-content { border: 0; border-radius: var(--dajn-radius); box-shadow: var(--dajn-shadow-hover); }
.modal-header, .modal-footer { border-color: var(--dajn-border); }

.progress { border-radius: 999px; background: var(--dajn-bg-soft); }
.progress-bar { background-color: var(--dajn-primary); }

.list-group-item { border-color: var(--dajn-border); }
.list-group-item.active { background-color: var(--dajn-primary); border-color: var(--dajn-primary); }

/* toastr */
#toast-container > .toast-success { background-color: var(--dajn-success); }
#toast-container > .toast-error { background-color: var(--dajn-danger); }
#toast-container > div { border-radius: 12px; box-shadow: var(--dajn-shadow-hover); opacity: 1; }

/* ===================================================================
   4. Admin & supplier dashboard chrome (#main-sidebar, #top-header)
   =================================================================== */
#main-sidebar { background: var(--dajn-sidebar-bg) !important; }
#main-sidebar .hr-line { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .1); }
#main-sidebar .nav-category-divider {
    font-size: 11px;
    letter-spacing: .04em;
    color: rgba(217, 230, 255, .55) !important;
    margin-top: 10px;
}
#main-sidebar .nav li a { border-radius: 10px; }
#main-sidebar .nav li a:hover { background: rgba(217, 230, 255, .08); color: #fff !important; }
#main-sidebar .nav .active,
#main-sidebar .nav li a.active {
    background: var(--dajn-sidebar-active-bg) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--dajn-accent);
}
#rtl #main-sidebar .nav .active,
#rtl #main-sidebar .nav li a.active { box-shadow: inset -3px 0 0 var(--dajn-accent); }
#main-sidebar .nav li i { color: rgba(217, 230, 255, .75); }

#top-header {
    background: var(--dajn-card-bg) !important;
    border-bottom: 1px solid var(--dajn-border);
    box-shadow: none !important;
}

/* Dashboard home (core/home/index) */
.dajn-dash .card.bg-light {
    background: var(--dajn-card-bg) !important;
    border: 1px solid var(--dajn-border);
    box-shadow: var(--dajn-shadow) !important;
    transition: transform .15s ease, box-shadow .15s ease;
}
.dajn-dash a > .card.bg-light:hover { transform: translateY(-2px); box-shadow: var(--dajn-shadow-hover) !important; }
.dajn-dash a { text-decoration: none; }
.dajn-dash .fa-2x {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: var(--dajn-accent);
    color: var(--dajn-primary) !important;
}
.dajn-dash .text-value-lg { font-size: 22px; font-weight: 800; }
.dajn-dash .card.bg-light .text-dark,
.dajn-dash .card.text-dark { color: var(--dajn-ink) !important; }
[data-bs-theme="dark"] .dajn-dash .fa-2x { color: #fff !important; }
[data-bs-theme="dark"] #top-header .btn-light { background: var(--dajn-bg-soft); color: var(--dajn-ink); }

/* ===================================================================
   5. Storefront header (theme/asoug/layouts/header.blade.php) — one bar:
      logo | links | actions. Lives here, not in the partial: the header
      renders inside Vue's #app, and Vue strips <style> tags from templates.
   =================================================================== */
.dajn-header .main-menu {
    /* subtle vertical gradient: a touch lighter at the top */
    background: linear-gradient(180deg, #2f1a3c 0%, #24122e 100%);
    border-bottom: 1px solid rgba(44, 196, 212, .35);   /* Samak aqua sea line */
    box-shadow: 0 4px 18px rgba(51,25,63, .12), 0 1px 3px rgba(51,25,63, .08);
    position: relative;
    z-index: 10;
}
.dajn-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 72px;
}
.dajn-header .navbar-brand.logo { margin: 0; padding: 0; flex: 0 0 auto; }
/* the settings logo is a square image with wide transparent padding, so it is sized up and pulled into the bar with negative margins */
.dajn-header .navbar-brand.logo img { height: 48px; max-height: none; width: auto; margin: 0; }

.dajn-nav-links {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    gap: 2px;
}
.dajn-nav-links a {
    display: block;
    color: rgba(255, 255, 255, .82);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 8px;
    white-space: nowrap;
    transition: color .15s ease, background .15s ease;
}
.dajn-nav-links a:hover,
.dajn-nav-links li.active a { color: #fff; background: rgba(217, 230, 255, .12); }

.dajn-nav-actions {
    list-style: none;
    margin: 0;
    margin-inline-start: auto;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.dajn-nav-links + .dajn-nav-actions { margin-inline-start: 0; }
.dajn-header .default-language { color: #fff; }

.dajn-header .dajn-open-store-btn {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    background: var(--dajn-accent);
    color: var(--dajn-primary) !important;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    padding: 9px 16px;
    border-radius: 999px;
    transition: background .15s ease;
}
.dajn-header .dajn-open-store-btn:hover { background: #fff; }

.dajn-header .toggle-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: rgba(217, 230, 255, .12);
    color: #fff;
}

/* eight main-menu links: compact between 1200-1399, hamburger below 1200 */
@media (max-width: 1399px) {
    .dajn-nav { gap: 12px; }
    .dajn-nav-links a { padding: 8px 7px; font-size: 13px; }
}
@media (max-width: 1199px) {
    .dajn-nav { justify-content: space-between; }
    .dajn-nav-links + .dajn-nav-actions { margin-inline-start: auto; }
}
@media (max-width: 991px) {
    /* logo at one edge, icons at the other (the hidden links list would
       otherwise cancel the actions' auto margin) */
    .dajn-nav { min-height: 60px; justify-content: space-between; }
    .dajn-nav-links + .dajn-nav-actions { margin-inline-start: auto; }
    .dajn-nav-actions { gap: 10px; }
    .dajn-header .cart-btn, .dajn-header .toggle-bar { width: 42px; height: 42px; }
    .dajn-header .navbar-brand.logo img { height: 38px; margin: 0; }
}

/* ===================================================================
   6. Storefront: buyer account area (syaanah::layouts.buyer)
   =================================================================== */
.dajn-account-nav { padding: 14px 12px; }
.dajn-account-nav-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--dajn-muted);
    padding: 0 10px;
    margin: 14px 0 6px;
}
.dajn-account-nav-title:first-child { margin-top: 2px; }
.dajn-account-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dajn-account-nav a,
.dajn-account-nav-logout button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 10px;
    color: var(--dajn-ink);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    background: transparent;
    border: 0;
    transition: background .15s ease, color .15s ease;
}
.dajn-account-nav a i,
.dajn-account-nav-logout button i {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: rgba(var(--dajn-primary-rgb, 117, 65, 143), .08);
    color: var(--dajn-primary);
}
.dajn-account-nav a:hover { background: var(--dajn-bg-soft); color: var(--dajn-primary); }
.dajn-account-nav a.active { background: var(--dajn-accent); color: var(--dajn-primary); font-weight: 700; }
.dajn-account-nav a.active i { background: var(--dajn-primary); color: #fff; }

.dajn-account-nav-logout { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--dajn-border); }
.dajn-account-nav-logout button { color: var(--dajn-danger); cursor: pointer; }
.dajn-account-nav-logout button i { background: var(--dajn-danger-soft); color: var(--dajn-danger); }
.dajn-account-nav-logout button:hover { background: var(--dajn-danger-soft); }

/* ===================================================================
   7. Global responsive guards
   =================================================================== */
html, body { max-width: 100%; overflow-x: hidden; }
img, video { max-width: 100%; }
.table-responsive { -webkit-overflow-scrolling: touch; }

/* Mobile bottom bar (theme/asoug/layouts/footer.blade.php): its .row has no
   container, so the row's negative gutters pushed the page wider than the
   viewport on phones. */
#bottom-menu {
    background: var(--dajn-primary-dark);
    border-top: 1px solid rgba(217, 230, 255, .12);
    box-shadow: 0 -6px 20px rgba(51,25,63, .18);
    padding-bottom: env(safe-area-inset-bottom);
}
#bottom-menu .row { margin-left: 0; margin-right: 0; }
#bottom-menu a { text-decoration: none; display: block; }
#bottom-menu small { font-size: 11px; }

/* Admin top bar "Visit Website" pill (core/layouts/admin.blade.php) */
#top-header .nav-link.btn.rounded-pill {
    color: var(--dajn-primary) !important;
    border-color: var(--dajn-border) !important;
    font-weight: 600;
    padding: .3rem .9rem;
}
#top-header .nav-link.btn.rounded-pill:hover { background: var(--dajn-accent); }

/* Dark mode: hard-coded light utility backgrounds in older views */
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .card-header.bg-white { background-color: var(--dajn-card-bg) !important; }
[data-bs-theme="dark"] .text-dark { color: var(--dajn-text-body) !important; }
[data-bs-theme="dark"] .table > thead > tr > th { background-color: var(--dajn-bg-soft); }

/* Storefront footer bottom row (theme/asoug/layouts/footer.blade.php) */
.dajn-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    color: rgba(255, 255, 255, .75);
    font-size: 13px;
}
.dajn-footer-payments { max-height: 26px; width: auto; }
.dajn-footer-legal { display: flex; flex-wrap: wrap; gap: 18px; }
.dajn-footer-legal a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.dajn-footer-legal a:hover { color: #fff; }
@media (max-width: 767px) {
    .dajn-footer-bottom { flex-direction: column; text-align: center; }
    .footer-section { padding-bottom: 80px; } /* clear the fixed mobile bottom bar */
}

/* ===================================================================
   8. Admin auth pages (core/auth/*): same purple hero as the storefront,
      logo on top, white card in the middle.
   =================================================================== */
body.dajn-auth {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 15% 10%, rgba(217, 230, 255, .12), transparent 40%),
        linear-gradient(135deg, #33193f 0%, #75418f 100%) fixed !important;
    color: var(--dajn-text-body);
}
body.dajn-auth #app,
body.dajn-auth .app {
    min-height: 100vh;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center;
    padding: 32px 16px;
    background: transparent !important;
}
body.dajn-auth .container,
body.dajn-auth .row,
body.dajn-auth .h-100 { height: auto !important; width: 100%; }
body.dajn-auth .container { max-width: 440px; padding: 0; }
body.dajn-auth .row { margin: 0; }
body.dajn-auth [class*="col-"] { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; margin: 0 !important; }
body.dajn-auth .card.my-5 { margin: 0 !important; }
body.dajn-auth .card > h4 { font-size: 20px; color: var(--dajn-ink); }

.dajn-auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, .85) !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}
.dajn-auth-brand img { height: 64px; width: auto; margin: 0 0 8px; }

body.dajn-auth .card {
    border: 0;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(10, 0, 32, .35);
    overflow: hidden;
}
body.dajn-auth .card-header {
    background: transparent;
    border-bottom: 1px solid var(--dajn-border);
    text-align: center;
    font-size: 18px;
    padding: 1.1rem 1.5rem;
}
body.dajn-auth .card-body { padding: 1.75rem; }
body.dajn-auth .dajn-auth-title { font-size: 22px; color: var(--dajn-ink); margin-bottom: 4px; text-align: center; }
body.dajn-auth .dajn-auth-sub { color: var(--dajn-muted); font-size: 14px; text-align: center; margin-bottom: 22px; }
body.dajn-auth .btn-primary { width: 100%; padding: .65rem 1rem; font-size: 15px; border-radius: 12px; }
body.dajn-auth label { margin-bottom: 6px; font-size: 13.5px; }
body.dajn-auth .form-control { min-height: 46px; }
body.dajn-auth a.text-danger,
body.dajn-auth .dajn-auth-link { color: var(--dajn-primary) !important; font-weight: 600; font-size: 13.5px; text-decoration: none; }
body.dajn-auth .password-eye { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: 14px; color: var(--dajn-muted); }
body.dajn-auth .password-eye ~ * , body.dajn-auth .position-relative > .form-control { padding-inline-end: 42px; }

.dajn-auth-lang { position: fixed; top: 16px; inset-inline-end: 20px; z-index: 5; }
.dajn-auth-lang, .dajn-auth-lang a, .dajn-auth-lang .default-language { color: #fff !important; }
.dajn-auth-foot { margin-top: 18px; color: rgba(255, 255, 255, .6); font-size: 12.5px; text-align: center; }

/* ===================================================================
   9. Admin & supplier dashboard pages (#main-content)
   =================================================================== */

/* Page canvas */
#main-content > .container-fluid { padding: 24px 24px 40px; }
@media (max-width: 767px) { #main-content > .container-fluid { padding: 16px 12px 32px; } }
#main-content .card + .card,
#main-content .card + .row,
#main-content .row + .card { margin-top: 16px; }

/* Card header = page header: title on one side, actions on the other */
#main-content .card > .card-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 58px;
    font-size: 15.5px;
}

/* Most list pages render their "Create …" button in its own row above the
   card (`.row > .col > a.btn`, nothing else in it). Pull that row into the
   card's header line so title and primary action read as one page header. */
#main-content .container-fluid > .row:has(+ .card):has(.btn):not(:has(input, select, textarea, table, .card, .alert, h1, h2, h3, h4, h5)) {
    position: relative;
    height: 0;
    margin: 0 !important;
    z-index: 3;
}
#main-content .container-fluid > .row:has(+ .card):has(.btn):not(:has(input, select, textarea, table, .card, .alert, h1, h2, h3, h4, h5)) > * {
    position: absolute;
    top: 11px;
    inset-inline-end: 18px;
    width: auto;
    padding: 0;
    display: flex;
    gap: 8px;
}
#main-content .container-fluid > .row:has(+ .card):has(.btn):not(:has(input, select, textarea, table, .card, .alert, h1, h2, h3, h4, h5)) + .card > .card-header {
    padding-inline-end: 220px;
}

/* Primary "create" actions: brand colour instead of Bootstrap green */
#main-content .container-fluid > .row:first-child .btn-success,
#main-content .container-fluid > div:first-child .btn-success,
#main-content .card-header .btn-success {
    background-color: var(--dajn-primary);
    border-color: var(--dajn-primary);
}
#main-content .container-fluid > .row:first-child .btn-success:hover,
#main-content .container-fluid > div:first-child .btn-success:hover,
#main-content .card-header .btn-success:hover {
    background-color: var(--dajn-primary-dark);
    border-color: var(--dajn-primary-dark);
}
#main-content .container-fluid > .row:first-child .btn-success::before,
#main-content .container-fluid > div:first-child .btn-success::before {
    content: '\f067';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 11px;
    margin-inline-end: 6px;
}

/* Row actions in tables: soft, compact, on one line */
#main-content .table td:has(.btn) { white-space: nowrap; }
#main-content .table td form { display: inline-block; margin: 0; }
#main-content .table td .btn {
    padding: .28rem .65rem;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    margin: 2px;
    border-color: transparent;
    box-shadow: none;
}
#main-content .table td .btn-primary,
#main-content .table td .btn-info,
#main-content .table td .btn-secondary,
#main-content .table td .btn-dark,
#main-content .table td .btn-light {
    background: var(--dajn-accent);
    color: var(--dajn-primary) !important;
}
#main-content .table td .btn-primary:hover,
#main-content .table td .btn-info:hover,
#main-content .table td .btn-secondary:hover,
#main-content .table td .btn-dark:hover,
#main-content .table td .btn-light:hover {
    background: var(--dajn-primary) !important;
    color: #fff !important;
}
#main-content .table td .btn-danger { background: var(--dajn-danger-soft); color: var(--dajn-danger) !important; }
#main-content .table td .btn-danger:hover { background: var(--dajn-danger) !important; color: #fff !important; }
#main-content .table td .btn-success { background: var(--dajn-success-soft); color: var(--dajn-success) !important; }
#main-content .table td .btn-success:hover { background: var(--dajn-success) !important; color: #fff !important; }
#main-content .table td .btn-warning { background: var(--dajn-warning-soft); color: var(--dajn-warning) !important; }
#main-content .table td .btn-warning:hover { background: var(--dajn-warning) !important; color: #fff !important; }

/* Tables inside cards: flush to the card edges */
#main-content .card-body.p-0 .table > :not(caption) > * > *:first-child,
#main-content .card > .table-responsive .table > :not(caption) > * > *:first-child { padding-inline-start: 1.25rem; }
#main-content .card-body.p-0 .table > :not(caption) > * > *:last-child,
#main-content .card > .table-responsive .table > :not(caption) > * > *:last-child { padding-inline-end: 1.25rem; }
#main-content .table tbody tr:last-child > * { border-bottom: 0; }
#main-content .table img { border-radius: 8px; }

/* Empty tables: say so instead of showing a bare header row.
   (:has() can't be nested inside :has(), so the "no rows" test sits in :not().) */
#main-content .table-responsive:has(> table):not(:has(tbody tr))::after,
#main-content .card-body:has(> table):not(:has(tbody tr))::after {
    content: 'No records yet.';
    display: block;
    padding: 36px 16px;
    text-align: center;
    color: var(--dajn-muted);
    font-size: 14px;
}
html:lang(ar) #main-content .table-responsive:has(> table):not(:has(tbody tr))::after,
html:lang(ar) #main-content .card-body:has(> table):not(:has(tbody tr))::after { content: 'لا توجد بيانات بعد.'; }

/* Search / filter bars above lists */
#main-content .container-fluid > .row:first-child .form-control,
#main-content .container-fluid > div:first-child .form-control { background: var(--dajn-card-bg); }

/* Forms (create / edit / settings pages) */
#main-content .card-body .form-control,
#main-content .card-body .form-select { background-color: var(--dajn-card-bg); }
#main-content .card-body label { font-size: 13px; color: var(--dajn-ink); margin-bottom: 6px; }
#main-content .card-body .mb-3, #main-content .card-body .form-group { margin-bottom: 1.1rem !important; }
#main-content form .btn[type="submit"]:not(.input-group .btn):not(.table .btn) { min-width: 140px; }

/* Sidebar: section headings vs. links */
#main-sidebar .nav-item > span.nav-link {
    color: rgba(217, 230, 255, .62) !important;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    padding-top: 18px !important;
    padding-bottom: 6px !important;
    cursor: default;
}
#main-sidebar .nav li a { font-size: 13.5px; padding-top: 9px !important; padding-bottom: 9px !important; }
#main-sidebar .list-group { background: transparent; }
#main-sidebar .list-group .nav-link { padding-inline-start: 2.2rem !important; font-size: 13px; }
#main-sidebar .list-group .fa-circle.invisible { display: none; }

/* Top bar */
#top-header .navbar { min-height: 60px; }
#top-header .btn-light { border: 1px solid var(--dajn-border); }

/* ===================================================================
   10. Dark mode polish (admin & supplier)
   =================================================================== */
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .card-header { color: var(--dajn-text-body) !important; }

[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item),
[data-bs-theme="dark"] .text-primary { color: #C9B3E0 !important; }

[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-info,
[data-bs-theme="dark"] #main-content .container-fluid > .row:first-child .btn-success,
[data-bs-theme="dark"] #main-content .container-fluid > div:first-child .btn-success {
    background-color: #75418f !important;
    border-color: #75418f !important;
    color: #fff !important;
}
[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-info:hover { background-color: #8a58ab !important; border-color: #8a58ab !important; }

[data-bs-theme="dark"] #main-content .table td .btn-primary,
[data-bs-theme="dark"] #main-content .table td .btn-info,
[data-bs-theme="dark"] #main-content .table td .btn-secondary,
[data-bs-theme="dark"] #main-content .table td .btn-dark,
[data-bs-theme="dark"] #main-content .table td .btn-light {
    background: rgba(164, 135, 189, .16) !important;
    color: #D8C6EC !important;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text,
[data-bs-theme="dark"] .select2-container--default .select2-selection--single {
    border-color: #3A4256 !important;
    background-color: #161B26 !important;
    color: var(--dajn-text-body) !important;
}
[data-bs-theme="dark"] .form-control::placeholder { color: #7F889A; }
[data-bs-theme="dark"] .dropdown-menu { background: var(--dajn-card-bg); border-color: var(--dajn-border); }
[data-bs-theme="dark"] .dropdown-item { color: var(--dajn-text-body); }
[data-bs-theme="dark"] .modal-content { background: var(--dajn-card-bg); color: var(--dajn-text-body); }
[data-bs-theme="dark"] .table { color: var(--dajn-text-body); }
[data-bs-theme="dark"] .alert-info, [data-bs-theme="dark"] .alert-primary { background: rgba(164, 135, 189, .14); color: #D8C6EC; }
[data-bs-theme="dark"] .text-muted { color: var(--dajn-muted) !important; }

/* ===================================================================
   11. Supplier sidebar (theme/syaanah/layouts/supplier.blade.php)
       Larger, grouped links with icon tiles.
   =================================================================== */
#main-sidebar .dajn-side-nav { padding: 6px 12px 24px; }
.dajn-side-nav-title {
    color: rgba(217, 230, 255, .55);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 0 10px;
    margin: 18px 0 8px;
}
.dajn-side-nav-title:first-child { margin-top: 8px; }
.dajn-side-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }

#main-sidebar .dajn-side-nav a,
.dajn-side-nav-logout button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 10px !important;
    border-radius: 12px;
    color: rgba(255, 255, 255, .82) !important;
    font-size: 15px !important;
    font-weight: 500;
    text-decoration: none;
    background: transparent;
    border: 0;
    white-space: nowrap;
    box-shadow: none !important;
    transition: background .15s ease, color .15s ease;
}
#main-sidebar .dajn-side-nav a > i:first-child,
.dajn-side-nav-logout button i {
    width: 36px !important;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background: rgba(217, 230, 255, .1);
    color: #fff !important;
    text-align: center;
}
#main-sidebar .dajn-side-nav a:hover { background: rgba(217, 230, 255, .08) !important; color: #fff !important; }
#main-sidebar .dajn-side-nav a.active { background: rgba(217, 230, 255, .16) !important; color: #fff !important; font-weight: 700; }
#main-sidebar .dajn-side-nav a.active > i:first-child { background: var(--dajn-accent); color: var(--dajn-primary-dark) !important; }

.dajn-side-nav-caret { margin-inline-start: auto; font-size: 11px; opacity: .7; transition: transform .2s ease; }
.dajn-side-nav-toggle[aria-expanded="true"] .dajn-side-nav-caret { transform: rotate(180deg); }
#main-sidebar .dajn-side-nav-sub { padding: 4px 0 6px; padding-inline-start: 58px; gap: 2px; }
#main-sidebar .dajn-side-nav-sub a { font-size: 14px !important; padding: 7px 10px !important; color: rgba(255, 255, 255, .7) !important; }

.dajn-side-nav-logout { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(217, 230, 255, .12); }
.dajn-side-nav-logout button { cursor: pointer; color: #FFB4AB !important; }
.dajn-side-nav-logout button i { background: rgba(255, 120, 100, .14); color: #FFB4AB !important; }
.dajn-side-nav-logout button:hover { background: rgba(255, 120, 100, .1); }

/* ===================================================================
   Samak footer: deep-sea colours with a wave rising into the page above.
   Lives here (not the asoug partial) because the footer shows on every
   storefront page, including the syaanah-rendered product/cart pages.
   =================================================================== */
.footer-section {
    position: relative;
    background:
        radial-gradient(circle at 92% 0%, rgba(44, 196, 212, .16), transparent 35%),
        linear-gradient(180deg, #2f1a3c 0%, #160A26 100%);
}
.footer-section::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -35px;
    height: 36px;
    background: #2f1a3c;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 46 C 180 78 360 14 560 34 S 900 76 1100 44 S 1340 18 1440 36 L1440 80 L0 80 Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 46 C 180 78 360 14 560 34 S 900 76 1100 44 S 1340 18 1440 36 L1440 80 L0 80 Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    pointer-events: none;
}
.footer-section h4::after { background: #2CC4D4 !important; }
.footer-section a.info-content:hover { color: #2CC4D4 !important; }

/* ===================================================================
   Samak language & currency menu (theme/asoug/components/query-lang-selector).
   Opens on hover and on keyboard focus; the menu's top padding bridges the
   gap so the pointer can travel from the button into the card.
   =================================================================== */
.samak-lang { position: relative; }
.samak-lang-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
    color: #fff; font-weight: 600; font-size: 13.5px;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
.samak-lang-toggle img { width: 22px; height: 15px; object-fit: cover; border-radius: 3px; }
.samak-lang-caret { font-size: 10px; opacity: .8; transition: transform .2s ease; }
.samak-lang:hover .samak-lang-toggle,
.samak-lang:focus-within .samak-lang-toggle { background: rgba(255, 255, 255, .16); border-color: rgba(44, 196, 212, .6); }
.samak-lang:hover .samak-lang-caret,
.samak-lang:focus-within .samak-lang-caret { transform: rotate(180deg); }

.samak-lang-menu {
    position: absolute; top: 100%; inset-inline-end: 0;
    padding-top: 12px; width: 230px; z-index: 1050;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.samak-lang:hover .samak-lang-menu,
.samak-lang:focus-within .samak-lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.samak-lang-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--dajn-border, #E7EBF5);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 18px 40px rgba(30, 13, 51, .18);
}
.samak-lang-card::before { /* pointer towards the button */
    content: ""; position: absolute; top: -7px; inset-inline-end: 26px;
    width: 12px; height: 12px; background: #fff;
    border-top: 1px solid var(--dajn-border, #E7EBF5); border-inline-start: 1px solid var(--dajn-border, #E7EBF5);
    transform: rotate(45deg);
}
[dir="rtl"] .samak-lang-card::before { transform: rotate(-45deg); }
.samak-lang-card h6,
.samak-lang-card label {
    display: block; margin: 0 0 8px;
    font-size: 12px; font-weight: 700; letter-spacing: .3px;
    color: var(--dajn-muted, #6B6B80);
}
.samak-lang-card ul { list-style: none; margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--dajn-border, #E7EBF5); }
.samak-lang-card li + li { margin-top: 4px; }
.samak-lang-card li a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 10px;
    color: var(--dajn-ink, #2A2A35); font-weight: 600; font-size: 14px;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.samak-lang-card li a img { width: 22px; height: 15px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.samak-lang-card li a:hover { background: var(--dajn-bg-soft, #F5F8FF); color: var(--dajn-primary); }
.samak-lang-card li a.active { background: #E4F7F9; color: #0B7380; }
.samak-lang-card li a .fa-check { margin-inline-start: auto; font-size: 12px; }
.samak-lang-card .form-select {
    border-radius: 10px; font-size: 13px;
    border-color: var(--dajn-border, #E7EBF5);
    background-color: var(--dajn-bg-soft, #F5F8FF);
}
.samak-lang-card .form-select:focus { border-color: #2CC4D4; box-shadow: 0 0 0 .2rem rgba(44, 196, 212, .18); }

/* ===================================================================
   RTL logical spacing. The bundled Bootstrap 5.0 is the LTR build, so
   me-*/ms-* (and pe-*/ps-*) stay physical: in Arabic an icon's `me-2` gap
   lands on the wrong side and the icon touches its text. Flip them the
   way bootstrap.rtl.css would.
   =================================================================== */
[dir="rtl"] .me-0 { margin-right: 0 !important; margin-left: 0 !important; }
[dir="rtl"] .ms-0 { margin-left: 0 !important; margin-right: 0 !important; }
[dir="rtl"] .pe-0 { padding-right: 0 !important; padding-left: 0 !important; }
[dir="rtl"] .ps-0 { padding-left: 0 !important; padding-right: 0 !important; }
[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: .25rem !important; }
[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: .25rem !important; }
[dir="rtl"] .pe-1 { padding-right: 0 !important; padding-left: .25rem !important; }
[dir="rtl"] .ps-1 { padding-left: 0 !important; padding-right: .25rem !important; }
[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: .5rem !important; }
[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: .5rem !important; }
[dir="rtl"] .pe-2 { padding-right: 0 !important; padding-left: .5rem !important; }
[dir="rtl"] .ps-2 { padding-left: 0 !important; padding-right: .5rem !important; }
[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }
[dir="rtl"] .pe-3 { padding-right: 0 !important; padding-left: 1rem !important; }
[dir="rtl"] .ps-3 { padding-left: 0 !important; padding-right: 1rem !important; }
[dir="rtl"] .me-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
[dir="rtl"] .ms-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }
[dir="rtl"] .pe-4 { padding-right: 0 !important; padding-left: 1.5rem !important; }
[dir="rtl"] .ps-4 { padding-left: 0 !important; padding-right: 1.5rem !important; }
[dir="rtl"] .me-5 { margin-right: 0 !important; margin-left: 3rem !important; }
[dir="rtl"] .ms-5 { margin-left: 0 !important; margin-right: 3rem !important; }
[dir="rtl"] .pe-5 { padding-right: 0 !important; padding-left: 3rem !important; }
[dir="rtl"] .ps-5 { padding-left: 0 !important; padding-right: 3rem !important; }
[dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; }
[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }