@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --sidebar-width: 260px;
    --topbar-height: 60px;
    --brand-color: #0d6efd;
    --brand-dark: #0b5ed7;
    --brand-glow: rgba(13, 110, 253, .25);
    --ink: #1c2433;
    --muted: #6b7280;
    --surface: #ffffff;
    --surface-2: #f6f8fb;
    --border-soft: #e7eaf0;
    --radius-lg: .9rem;
    --radius-md: .65rem;
    --radius-sm: .45rem;
    --shadow-sm: 0 1px 2px rgba(17, 24, 39, .05), 0 1px 3px rgba(17, 24, 39, .06);
    --shadow-md: 0 4px 14px rgba(17, 24, 39, .08), 0 2px 6px rgba(17, 24, 39, .04);
    --shadow-lg: 0 14px 34px rgba(17, 24, 39, .12), 0 4px 10px rgba(17, 24, 39, .06);
    --sidebar-from: #131a2a;
    --sidebar-to: #1e2b45;
}

* { scrollbar-width: thin; scrollbar-color: #c3cbd8 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #c3cbd8; border-radius: 10px; }
*::-webkit-scrollbar-thumb:hover { background: #a7b1c2; }

body {
    background:
        radial-gradient(1100px 520px at 8% -6%, rgba(13, 110, 253, .06), transparent 60%),
        radial-gradient(900px 480px at 108% 8%, rgba(32, 201, 151, .05), transparent 55%),
        var(--surface-2);
    font-family: 'Tajawal', 'Inter', 'Segoe UI', Tahoma, Arial, sans-serif;
    color: var(--ink);
}

h1, h2, h3, h4, h5, h6, .fw-bold, .fw-700 {
    letter-spacing: -.01em;
}

/* ---------- Topbar ---------- */
.topbar {
    height: var(--topbar-height);
    background: rgba(255, 255, 255, .85);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 2px 10px rgba(17, 24, 39, .03);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    position: sticky;
    top: 0;
    z-index: 1030;
}
.topbar-title {
    font-weight: 700;
    color: var(--ink);
}
.topbar-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
}

/* ---------- Layout ---------- */
.app-wrapper {
    display: flex;
    min-height: calc(100vh - var(--topbar-height));
}

/* ---------- Sidebar (logical properties = automatic RTL/LTR) ---------- */
.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--sidebar-from), var(--sidebar-to) 65%, var(--sidebar-from));
    color: #cfd8e3;
    padding-block: 1rem;
    overflow-y: auto;
    box-shadow: 2px 0 18px rgba(10, 14, 25, .18);
    position: relative;
    z-index: 1;
}
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-inline: 1.25rem;
    padding-block-end: 1rem;
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    border-block-end: 1px solid rgba(255, 255, 255, .08);
    margin-block-end: .6rem;
}
.sidebar-brand img {
    border-radius: .35rem;
    background: rgba(255, 255, 255, .06);
    padding: 2px;
}
.sidebar-heading {
    padding: 1rem 1.25rem .35rem;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #7c8aa0;
}
.sidebar-nav {
    padding-inline: .6rem;
}
.sidebar-nav .nav-link {
    color: #cfd8e3;
    padding: .55rem .75rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    border-radius: .55rem;
    font-size: .92rem;
    margin-block-end: .1rem;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.sidebar-nav .nav-link i {
    font-size: 1.02rem;
    width: 1.2rem;
    text-align: center;
    flex-shrink: 0;
}
.sidebar-nav .nav-link:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
    transform: translateX(2px);
}
[dir="rtl"] .sidebar-nav .nav-link:hover {
    transform: translateX(-2px);
}
.sidebar-nav .nav-link.active {
    background: linear-gradient(90deg, var(--brand-color), var(--brand-dark));
    color: #fff;
    box-shadow: 0 4px 12px rgba(13, 110, 253, .35);
}

/* ---------- Content ---------- */
.content {
    flex: 1;
    padding: 1.5rem;
    padding-block-end: 3rem;
    min-width: 0;
}

/* ---------- Footer (fixed, single line) ---------- */
.app-footer {
    position: fixed;
    inset-block-end: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(8px);
    border-block-start: 1px solid var(--border-soft);
    padding: .5rem 1.25rem;
    font-size: .78rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1020;
}
.app-footer-sep {
    margin-inline: .5rem;
}
@media (min-width: 992px) {
    .app-footer {
        inset-inline-start: var(--sidebar-width);
    }
}
@media print {
    .app-footer { display: none; }
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-end: 1.25rem;
    flex-wrap: wrap;
    gap: .5rem;
}
.page-header h4 {
    font-weight: 800;
}

/* ---------- Stat cards ---------- */
.stat-card {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-sm);
    border-inline-start: 4px solid var(--brand-color);
    transition: transform .18s ease, box-shadow .18s ease;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.stat-card .stat-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--ink);
}
.stat-card .stat-label {
    color: var(--muted);
    font-size: .85rem;
}

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .18s ease, transform .18s ease;
}
.card-header {
    border-top-left-radius: var(--radius-lg) !important;
    border-top-right-radius: var(--radius-lg) !important;
    border-bottom: 1px solid var(--border-soft);
    font-weight: 700;
}
a:hover > .card,
a:hover .card {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

/* ---------- Tables ---------- */
table.table thead th {
    background: var(--surface-2);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #55617a;
    border-bottom: 1px solid var(--border-soft);
}
table.table.table-hover tbody tr {
    transition: background-color .12s ease;
}
table.table.table-hover tbody tr:hover {
    background-color: rgba(13, 110, 253, .035);
}

.low-stock-row {
    background-color: #fff3f3 !important;
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:active {
    transform: translateY(1px);
}
.btn-primary {
    background: linear-gradient(180deg, var(--brand-color), var(--brand-dark));
    border-color: var(--brand-dark);
    box-shadow: 0 2px 8px var(--brand-glow);
}
.btn-primary:hover, .btn-primary:focus {
    filter: brightness(1.06);
    box-shadow: 0 4px 14px var(--brand-glow);
}
.btn-success, .btn-warning, .btn-danger, .btn-info {
    box-shadow: var(--shadow-sm);
}
.btn-sm {
    border-radius: .4rem;
}

/* ---------- Forms ---------- */
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border-color: var(--border-soft);
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 .2rem var(--brand-glow);
}

/* ---------- Searchable selects (Tom Select) ---------- */
.ts-wrapper .ts-control {
    border-radius: var(--radius-sm);
    border-color: var(--border-soft);
}
.ts-wrapper.focus .ts-control {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 .2rem var(--brand-glow);
}
.ts-dropdown {
    border-radius: var(--radius-sm);
    z-index: 2000;
}
.ts-dropdown .active {
    background-color: var(--brand-color);
    color: #fff;
}
.form-label {
    font-weight: 600;
    font-size: .86rem;
    color: #3a4356;
}

/* ---------- Badges ---------- */
.badge {
    font-weight: 600;
    letter-spacing: .01em;
    padding: .42em .65em;
    border-radius: .4rem;
}

/* ---------- Modals ---------- */
.modal-content {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.modal-header {
    border-bottom: 1px solid var(--border-soft);
}
.modal-footer {
    border-top: 1px solid var(--border-soft);
}

@media (max-width: 991.98px) {
    .sidebar {
        position: fixed;
        inset-block: var(--topbar-height) 0;
        inset-inline-start: 0;
        z-index: 1040;
        transform: translateX(-100%);
        transition: transform .2s ease-in-out;
    }
    [dir="rtl"] .sidebar {
        transform: translateX(100%);
    }
    .sidebar.show {
        transform: translateX(0);
    }
}