/* ===================================================================
   Qalam Live — RTL + Arabic typography refinements.
   Loaded on top of bootstrap.rtl.min.css. Kept small on purpose:
   Bootstrap's RTL build already mirrors the layout, so this file only
   handles the Arabic font, the text logo, icon direction and mobile.
   =================================================================== */

:root {
    --qalam-font: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}

body {
    font-family: var(--qalam-font);
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6,
.btn, .nav-link, .form-label, label,
th, .modal-title, .card-title {
    font-weight: 600;
}

/* ---- Text wordmark (used instead of the upstream English SVG logo) ---- */
.qalam-wordmark {
    font-family: var(--qalam-font);
    font-weight: 700;
    color: #0d6efd;
    letter-spacing: -0.5px;
    line-height: 1.2;
    text-decoration: none;
    display: inline-block;
}
.qalam-wordmark--lg { font-size: 2rem; }
.qalam-wordmark--sm { font-size: 1.35rem; }
.qalam-wordmark .qalam-wordmark__dot { color: #20c997; }

/* ---- Directional icons -------------------------------------------------
   Bootstrap Icons are glyphs, so a "back arrow" does not auto-mirror in
   RTL like layout does. Flip the ones whose meaning is directional. */
.bi-box-arrow-right,
.bi-arrow-left,
.bi-arrow-right,
.bi-chevron-left,
.bi-chevron-right,
.bi-arrow-bar-left,
.bi-arrow-bar-right {
    display: inline-block;
    transform: scaleX(-1);
}

/* Vertical chevrons must NOT be flipped horizontally — undo any inherit. */
.bi-chevron-down, .bi-chevron-up { transform: none; }

/* ---- Numbers stay LTR inside Arabic sentences ------------------------- */
.qalam-ltr,
code, kbd, pre, samp,
input[type="email"], input[type="password"], input[type="url"],
.text-monospace, .font-monospace {
    direction: ltr;
    text-align: start;
    unicode-bidi: plaintext;
}

/* Floating-label inputs: label must sit on the right in RTL. */
.form-floating > label {
    right: 0;
    left: auto;
    transform-origin: 100% 0;
}

/* ---- Tables ---- */
table th, table td { text-align: start; }

/* ---- Sidebar / mobile ------------------------------------------------- */
.sidebar { top: 0; z-index: 100; }

/* Prevent horizontal scrolling on small screens (explicit requirement). */
html, body { overflow-x: hidden; max-width: 100%; }

@media (max-width: 767.98px) {
    /* Upstream pins the sidebar with position-fixed, which overlaps content
       and forces sideways scrolling on phones. On mobile let it flow
       normally as a stacked block above the content. */
    .sidebar {
        position: static !important;
        min-height: auto !important;
        height: auto !important;
        border-inline-end: none;
        border-bottom: 1px solid #dee2e6;
    }
    .sidebar .d-flex.flex-column.h-100 { height: auto !important; }
    /* The upstream spacer column is pointless once the sidebar is static. */
    .qalam-sidebar-spacer { display: none !important; }

    .container, .container-fluid { padding-inline: 0.75rem; }

    /* Wide tables scroll inside their own box, not the whole page. */
    .table-responsive, .qalam-scroll-x {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Comfortable tap targets. */
    .btn { padding-block: 0.5rem; }
    .sidebar .nav-link { padding-block: 0.65rem; }
}

/* Toasts/alerts read right-to-left */
.alert, .toast { text-align: start; }