:root {
    --border: #eaeaea;
    --card: #ffffff;
    --primary: #0074FF;
    --line: #eaeaea;
}

body, h1, h2, h3, h4, h5, h6, .btn, input, select, textarea, table {
    font-family: "Cairo", sans-serif !important;
}

.brand-title .brand-text {
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    white-space: nowrap;
}

.content-body {
    direction: rtl;
    text-align: right;
}

html[dir="ltr"] .content-body {
    direction: ltr;
    text-align: left;
}

html[dir="ltr"] .ic-sidenav,
html[dir="ltr"] .header,
html[dir="ltr"] .nav-header {
    direction: ltr;
    text-align: left;
}

.lang-switch {
    display: flex;
    gap: 6px;
    margin-inline-end: 10px;
}
.lang-switch a {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid #d0d5dd;
    color: inherit;
    text-decoration: none;
}
.lang-switch a.active {
    background: #0074FF;
    color: #fff !important;
    border-color: #0074FF;
}

.header .dashboard_bar,
.page-head h3 {
    font-family: "Cairo", sans-serif !important;
}

.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat b, .stat .data-value { font-size: 28px; font-weight: 800; }

.form-grid, form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 700; }

.content-body input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=file]):not(.form-check-input):not(.form-control),
.content-body select:not(.form-control):not(.form-select),
.content-body textarea:not(.form-control) {
    width: 100%;
    padding: .55rem .8rem;
    border: 1px solid var(--border);
    border-radius: .6rem;
    background: var(--card);
}

.toolbar { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs a, .tabs button {
    background: var(--card);
    border: 1px solid var(--border);
    color: inherit;
    padding: 6px 12px;
    border-radius: 999px;
}
.tabs a.active, .tabs button.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.content-body .btn {
    background-color: #0074FF;
    border-color: #0074FF;
    color: #fff;
}
.content-body .btn-outline-primary,
.content-body .btn-outline-secondary,
.content-body .btn-ghost {
    background: transparent !important;
    color: #0074FF !important;
    border: 1px solid #0074FF !important;
}
.content-body .btn-danger { background: #f1416c !important; border-color: #f1416c !important; color: #fff !important; }
.content-body .btn-warn { background: #ff6a2a !important; border-color: #ff6a2a !important; color: #fff !important; }

.badge-ok { background: rgba(32, 179, 112, .12); color: #1f7a4d; }
.badge-warn { background: rgba(255, 171, 45, .15); color: #9a6b12; }
.badge-danger { background: rgba(241, 65, 108, .12); color: #a33b2b; }
.badge-info { background: rgba(0, 116, 255, .12); color: #0d6efd; }
.badge-muted { background: rgba(113, 117, 121, .12); color: #717579; }

.clock-box { max-width: 640px; margin: 10px auto 30px; text-align: center; }
.clock-time { font-size: 54px; font-weight: 800; letter-spacing: .04em; }
.clock-actions { display: flex; gap: 12px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.clock-actions .btn { min-width: 150px; }

.pager { display: flex; gap: 6px; margin-top: 14px; }
.pager a { padding: 4px 9px; border: 1px solid var(--border); border-radius: 6px; color: inherit; }
.pager a.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.muted { color: #717579; }
.print-only { display: none; }

tr.row-clickable { cursor: pointer; }
tr.row-clickable:hover { background: rgba(0, 116, 255, .07); }

.btn-print-page {
    background: #0074FF !important;
    border: 1px solid #0074FF !important;
    color: #fff !important;
    font-weight: 700;
    white-space: nowrap;
    border-radius: 8px;
    padding: 8px 14px;
}

.header .btn-print-page {
    margin-inline-end: 8px;
    font-size: 13px;
}

.print-sheet-head {
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #0074FF;
}
.print-sheet-head h2 { margin: 0 0 4px; font-size: 20px; }
.print-sheet-head h3 { margin: 0 0 8px; font-size: 16px; }
.print-sheet-head p { margin: 0; font-size: 12px; color: #444; }

.login-wrap { min-height: 100vh; }

.no-print { }

tr.row-clickable { cursor: pointer; }
tr.row-clickable:hover { background: rgba(0, 116, 255, .07); }
tr.row-clickable:hover { background: rgba(0, 116, 255, .07); }

@media print {
    @page {
        size: A4 landscape;
        margin: 12mm;
    }
    #preloader,
    .nav-header,
    .header,
    .ic-sidenav,
    .footer,
    .toolbar,
    .btn,
    .page-head,
    .no-print,
    .tabs,
    .pager,
    .alert,
    .hamburger,
    .nav-control,
    .dropdown-menu,
    .sidebar-right,
    .sidebar-right-trigger,
    .ic-theme-mode,
    .lang-switch,
    button,
    input[type="submit"],
    input[type="file"],
    input[type="hidden"] {
        display: none !important;
    }
    html, body, #main-wrapper, .content-body, .container-fluid, .card, .stat, table {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
    }
    html, body, #main-wrapper {
        height: auto !important;
        overflow: visible !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #main-wrapper,
    .content-body,
    .container-fluid {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .content-body {
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding: 0 8px !important;
    }
    .print-only,
    .print-sheet-head {
        display: block !important;
        color: #000 !important;
    }
    .print-sheet-head {
        break-after: avoid;
        border-bottom: 2px solid #0074FF !important;
        margin-bottom: 12px !important;
        padding-bottom: 8px !important;
    }
    .grid, .grid-2, .grid-3, .grid-4, .print-stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .card.stat, .stat {
        break-inside: avoid;
        border: 1px solid #bbb !important;
        padding: 8px !important;
        background: #fff !important;
    }
    .stat span, .stat b, .card, td, th, h2, h3, p, a {
        color: #000 !important;
    }
    .table-responsive {
        overflow: visible !important;
        width: 100% !important;
    }
    table {
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 11px;
    }
    th, td {
        border: 1px solid #999 !important;
        padding: 4px 6px !important;
        background: #fff !important;
    }
    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        break-inside: avoid;
    }
    a[href]::after { content: none !important; }
    input, select, textarea {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        -webkit-appearance: none;
        appearance: none;
        color: #000 !important;
        padding: 0 !important;
    }
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        box-shadow: none !important;
    }
}

@media (max-width: 1100px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
    .form-grid, .form-grid-3, form .row, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .clock-time { font-size: 40px; }
}