/* RedLime - application shell */
:root {
    --rl-primary: #c62828;
    --rl-primary-dark: #8e0000;
    --rl-lime: #7cb342;
    --rl-sidebar-bg: #1f2329;
    --rl-sidebar-fg: #c9d1d9;
    --rl-sidebar-w: 260px;
    --rl-bg: #f4f6f8;
}
@media (prefers-color-scheme: dark) {
    :root { --rl-bg: #15181c; }
}

html, body { height: 100%; }
body { background: var(--rl-bg); font-size: .925rem; }
.btn-primary { --bs-btn-bg: var(--rl-primary); --bs-btn-border-color: var(--rl-primary); --bs-btn-hover-bg: var(--rl-primary-dark); --bs-btn-hover-border-color: var(--rl-primary-dark); --bs-btn-active-bg: var(--rl-primary-dark); }
a { color: var(--rl-primary); }

/* shell */
.rl-shell { display: flex; min-height: 100vh; }
.rl-sidebar { width: var(--rl-sidebar-w); --bs-offcanvas-bg: var(--rl-sidebar-bg); --bs-offcanvas-color: var(--rl-sidebar-fg);
              background-color: var(--rl-sidebar-bg) !important; color: var(--rl-sidebar-fg); flex-shrink: 0; }
.rl-sidebar .offcanvas-header, .rl-sidebar .rl-brand { background-color: var(--rl-sidebar-bg); }
@media (min-width: 992px) {
    .rl-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
    /* hide / show the menu (top-bar button, Ctrl+\): slides out towards the start side (left in English, right in Arabic) */
    .rl-sidebar.offcanvas-lg { width: var(--rl-sidebar-w) !important; transition: margin-inline-start .2s ease !important; }
    html.rl-side-hidden .rl-sidebar.offcanvas-lg { margin-inline-start: calc(-1 * var(--rl-sidebar-w)); visibility: hidden !important;
        transition: margin-inline-start .2s ease, visibility 0s linear .2s !important; }
}
@media (prefers-reduced-motion: reduce) { .rl-sidebar.offcanvas-lg, html.rl-side-hidden .rl-sidebar.offcanvas-lg { transition: none !important; } }
.rl-side-toggle { line-height: 1; }

/* menu search (filters the side menu; Ctrl+K) */
.rl-menu-search { position: sticky; top: 0; z-index: 2; padding: .6rem .75rem .25rem; background: inherit; display: flex; align-items: center; }
.rl-sidebar .rl-menu-search { background-color: var(--rl-side-solid, var(--rl-sidebar-bg)); }
.rl-menu-search > .bi-search { position: absolute; inset-inline-start: 1.35rem; font-size: .85rem; opacity: .6; pointer-events: none; color: var(--rl-side-fg, var(--rl-sidebar-fg)); }
.rl-menu-search input { padding-inline-start: 2rem; padding-inline-end: 3.4rem; border-radius: 999px;
    background-color: var(--rl-side-hover, rgba(255,255,255,.06)); color: var(--rl-side-head, #fff); border-color: var(--rl-side-border, rgba(255,255,255,.12)); }
.rl-menu-search input::placeholder { color: var(--rl-side-muted, rgba(255,255,255,.55)); }
.rl-menu-search input:focus { background-color: var(--rl-side-hover, rgba(255,255,255,.1)); color: var(--rl-side-head, #fff); }
.rl-menu-search input::-webkit-search-cancel-button { filter: invert(.6); }
.rl-menu-search-kbd { position: absolute; inset-inline-end: 1.3rem; font-size: .65rem; padding: .1rem .35rem; opacity: .55; background: transparent;
    border: 1px solid currentColor; color: var(--rl-side-muted, rgba(255,255,255,.55)); pointer-events: none; }
.rl-menu-search input:not(:placeholder-shown) ~ .rl-menu-search-kbd { display: none !important; }
/* while searching: every group is open, only matching screens are shown */
.rl-menu.rl-filtering .collapse { display: block !important; height: auto !important; }
.rl-menu.rl-filtering .rl-menu-head .bi-chevron-down { visibility: hidden; }
.rl-menu.rl-filtering .rl-nomatch { display: none !important; }
.rl-menu-link.rl-hit { background: var(--rl-side-hover, rgba(255,255,255,.08)); }
.rl-menu-link mark { padding: 0; background: transparent; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.rl-menu-empty { padding: .75rem 1rem; font-size: .85rem; color: var(--rl-side-muted, rgba(255,255,255,.55)); }
.rl-brand { display: flex; align-items: center; padding: 1rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.rl-brand a { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.15rem; display: flex; align-items: center; gap: .5rem; }
.rl-logo { display: inline-flex; width: 30px; height: 30px; border-radius: 8px; align-items: center; justify-content: center;
           background: linear-gradient(135deg, var(--rl-primary), var(--rl-lime)); color: #fff; font-weight: 800; }
.rl-menu { padding: .5rem 0 2rem; }
.rl-menu-head { width: 100%; display: flex; align-items: center; gap: .6rem; background: none; border: 0; color: #fff; padding: .55rem 1.1rem; font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; opacity: .85; }
.rl-menu-head:hover { opacity: 1; }
.rl-menu-head.collapsed .bi-chevron-down { transform: rotate(-90deg); }
.rl-menu-link { display: flex; align-items: center; gap: .6rem; padding: .4rem 1.1rem .4rem 2.2rem; color: var(--rl-sidebar-fg); text-decoration: none; font-size: .9rem; }
.rl-menu-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.rl-menu-link.active { background: rgba(198,40,40,.25); color: #fff; border-inline-start: 3px solid var(--rl-primary); }

.rl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rl-topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem;
             background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); }
.rl-branch { max-width: 220px; }
.rl-content { padding: 1rem; }
@media (min-width: 768px) { .rl-content { padding: 1.25rem 1.5rem; } }

/* page parts */
.rl-page-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.rl-page-head h1 { font-size: 1.35rem; margin: 0; font-weight: 600; }
.rl-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .6rem; padding: 1rem; margin-bottom: 1rem; }
.rl-card > h2, .rl-card > h3 { font-size: 1rem; font-weight: 600; margin-bottom: .75rem; }
.table-rl { font-size: .875rem; }
.table-rl th { white-space: nowrap; background: var(--bs-tertiary-bg); }
.table-responsive { border-radius: .5rem; }
.form-label { font-size: .8rem; font-weight: 600; color: var(--bs-secondary-color); margin-bottom: .2rem; }
.rl-required::after { content: " *"; color: var(--rl-primary); }
.rl-days label { margin-inline-end: .5rem; font-size: .85rem; }
.rl-multi { display: flex; flex-wrap: wrap; gap: .15rem 1rem; padding: .35rem .5rem; border: 1px solid var(--bs-border-color); border-radius: .375rem; max-height: 180px; overflow: auto; }
.rl-multi .form-check { margin: 0; font-size: .85rem; }

/* KPI tiles */
.rl-kpi { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .6rem; padding: .85rem 1rem; height: 100%; }
.rl-kpi .label { font-size: .75rem; text-transform: uppercase; color: var(--bs-secondary-color); letter-spacing: .03em; }
.rl-kpi .value { font-size: 1.45rem; font-weight: 700; line-height: 1.2; margin-top: .2rem; }
.rl-kpi .sub { font-size: .8rem; color: var(--bs-secondary-color); }
.rl-kpi i { font-size: 1.4rem; opacity: .35; float: inline-end; }
.rl-chart { position: relative; height: 260px; }

/* login */
.rl-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem;
           background: linear-gradient(135deg, #2b0000 0%, #c62828 55%, #7cb342 100%); }
.rl-auth-card { width: 100%; max-width: 440px; background: var(--bs-body-bg); border-radius: 1rem; padding: 2rem; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.rl-auth-card.wide { max-width: 760px; }

/* document entry */
.rl-doc-lines td { vertical-align: middle; }
.rl-doc-lines input, .rl-doc-lines select { min-width: 70px; }
.rl-doc-lines .item-col { min-width: 240px; }
.rl-totals { max-width: 360px; margin-inline-start: auto; }
.rl-totals .row > div { padding: .15rem .5rem; }
.rl-search-results { position: absolute; z-index: 1050; max-height: 300px; overflow-y: auto; min-width: 320px; }

/* auth matrix */
.rl-auth-matrix td.lvl { width: 170px; }
.rl-auth-matrix tr.depth-0 td:first-child { font-weight: 700; }
.rl-auth-matrix tr.depth-1 td:first-child { padding-inline-start: 1.5rem; }
.rl-auth-matrix tr.depth-2 td:first-child { padding-inline-start: 3rem; }

@media print {
    .rl-sidebar, .rl-topbar, .no-print { display: none !important; }
    .rl-content { padding: 0; }
    body { background: #fff; }
}

/* ---- "Processing... Please wait" loader (Branding.Loader + Scripts/loader.js) ---- */
.rl-loader { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; padding: 16px;
             background: rgba(15, 18, 22, .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity .15s ease; cursor: progress; }
.rl-loader[hidden] { display: none; }
.rl-loader.show { opacity: 1; }
.rl-loader-card { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 220px; max-width: 90vw; padding: 26px 34px;
                  background: var(--bs-body-bg, #fff); color: var(--bs-body-color, #212529); border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .28); text-align: center; }
.rl-loader-ring { position: relative; width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; }
.rl-loader-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--bs-border-color, #dee2e6);
                          border-top-color: var(--rl-primary, #e11d48); border-inline-end-color: var(--rl-lime, #84cc16); animation: rl-loader-spin .9s linear infinite; }
.rl-loader-logo { width: 58px; height: 58px; border-radius: 12px; object-fit: contain; animation: rl-loader-pulse 1.6s ease-in-out infinite; }
span.rl-loader-logo { display: inline-flex; align-items: center; justify-content: center; font-size: 1.7rem; font-weight: 800; color: #fff;
                      background: linear-gradient(135deg, var(--rl-primary, #e11d48), var(--rl-lime, #84cc16)); }
.rl-loader-text { font-weight: 600; font-size: .95rem; }
html.rl-loading, html.rl-loading body { cursor: progress; }
@keyframes rl-loader-spin { to { transform: rotate(360deg); } }
@keyframes rl-loader-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(.92); } }
@media (prefers-reduced-motion: reduce) {
    .rl-loader-ring::before { animation-duration: 2.4s; }
    .rl-loader-logo { animation: none; }
}

/* phones / tablets: the side menu (off-canvas) scrolls; the brand stays on top */
@media (max-width: 991.98px) {
    .rl-sidebar.offcanvas-lg { display: flex; flex-direction: column; overflow: hidden; }
    .rl-sidebar .rl-brand { flex: 0 0 auto; }
    .rl-sidebar .rl-menu-search { flex: 0 0 auto; position: relative; }
    .rl-sidebar .rl-menu { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
                           padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); }
}

/* language tick lists (Owner › Branding / Company, Admin › Company settings) and the language buttons of the sign-in pages */
.rl-lang-checks { display: block; }
.rl-lang-checks input[type=checkbox] { margin-inline-end: .35rem; vertical-align: middle; }
.rl-lang-checks label { margin-inline-end: 1.5rem; vertical-align: middle; }
.rl-lang-links .btn { font-size: .8rem; }
/* cost visibility (Admin › Cost visibility): cost shown on the print only */
.rl-print-only { display: none !important; }
@media print {
    th.rl-print-only, td.rl-print-only { display: table-cell !important; }
    div.rl-print-only, span.rl-print-only { display: block !important; }
}