/*
 * RTL layout for the Control panel.
 *
 * AdminLTE 3 is built on Bootstrap 4, which has no RTL build — Bootstrap only
 * gained one in v5. Without this file the panel renders left-to-right, which
 * does not merely look mirrored: Persian paragraphs get their sentence-final
 * punctuation pushed to the wrong end and wrap in the wrong order, because the
 * bidi algorithm takes its base direction from the container.
 *
 * Approved as a standalone static file (Control/AGENTS.md: custom CSS needs the
 * necessity stated and explicit approval first), same shape as assets/map.css —
 * no build step, no bundler, no generated artifact.
 *
 * Scope: layout direction only. It overrides positions, margins and alignment;
 * it does not restyle AdminLTE components or invent new ones.
 */

/* ---- base direction -------------------------------------------------------
 * This is the line that fixes the punctuation and wrapping, independently of
 * where the sidebar sits. Everything below is layout mirroring.
 */
html {
    direction: rtl;
}

body {
    text-align: right;
}

/* ---- sidebar: fixed to the right ---------------------------------------- */
.main-sidebar {
    left: auto;
    right: 0;
}

/* AdminLTE slides the sidebar out by translating it left; go the other way. */
.sidebar-collapse .main-sidebar,
.sidebar-closed.sidebar-collapse .main-sidebar {
    margin-left: 0;
    margin-right: -250px;
}

.sidebar-mini.sidebar-collapse .main-sidebar {
    margin-right: 0;
}

/* ---- the three regions that sit beside the sidebar ----------------------
 * AdminLTE sets these from
 *   body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper
 * which is specificity 0-4-1. Rather than restate that selector in three
 * places and have it drift when the package updates, the direction layer
 * asserts the margin it owns. This is the only place !important is used for
 * layout, and it is used because the property is exactly what RTL must flip.
 */
.content-wrapper,
.main-header,
.main-footer {
    margin-left: 0 !important;
    margin-right: 250px !important;
}

.sidebar-collapse .content-wrapper,
.sidebar-collapse .main-header,
.sidebar-collapse .main-footer {
    margin-right: 4.6rem !important;
}

@media (max-width: 767.98px) {
    .content-wrapper,
    .main-header,
    .main-footer {
        margin-right: 0 !important;
    }
}

/* ---- sidebar internals --------------------------------------------------- */
.nav-sidebar .nav-link > .nav-icon {
    margin-right: 0;
    margin-left: .5rem;
}

.nav-sidebar .nav-link > p > .right,
.nav-sidebar .nav-link > .right {
    right: auto;
    left: 1rem;
}

.nav-sidebar .nav-treeview {
    padding-right: 1rem;
    padding-left: 0;
}

.brand-link .brand-image {
    margin-right: 0;
    margin-left: .5rem;
}

/* ---- navbar -------------------------------------------------------------- */
.main-header .navbar-nav.ml-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* ---- tables -------------------------------------------------------------- */
.table th,
.table td {
    text-align: right;
}

/* Numeric and identifier columns stay left-to-right where the markup says so. */
.table [dir="ltr"] {
    text-align: left;
}

/* A cell holding only a timestamp has no strong character, so in an RTL
 * paragraph the bidi algorithm orders its number runs right-to-left and
 * "2026-08-07 13:53" reads as "13:53 2026-08-07". plaintext takes each cell's
 * base direction from its own first strong character: timestamps fall back to
 * LTR and read correctly, Persian cells stay RTL. This covers the twenty date
 * columns without marking each one up. */
.table td,
.table th {
    unicode-bidi: plaintext;
}

/* ---- forms ---------------------------------------------------------------
 * The panel uses both Bootstrap checkbox patterns: .form-check (platform
 * settings) and .custom-control (the blog publish switch). Both hang the box
 * in the container's left padding, so both need flipping — covering only one
 * leaves the box sitting on top of its own label.
 */
.form-check {
    padding-left: 0;
    padding-right: 1.25rem;
}

.form-check-input {
    margin-left: 0;
    margin-right: -1.25rem;
}

.custom-control {
    padding-left: 0;
    padding-right: 1.5rem;
}

.custom-control-label::before,
.custom-control-label::after {
    left: auto;
    right: -1.5rem;
}

.custom-switch .custom-control-label::after {
    left: auto;
    right: calc(-1.5rem + 2px);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(-.75rem);
}

.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text {
    border-radius: .25rem 0 0 .25rem;
}

.input-group > .form-control:not(:last-child) {
    border-radius: 0 .25rem .25rem 0;
}

/* ---- spacing utilities --------------------------------------------------- */
/* Bootstrap 4's ml-*/mr-* are physical, not logical. Swap the ones the panel
   actually uses rather than every step of the scale. */
.ml-1 { margin-left: 0 !important; margin-right: .25rem !important; }
.ml-2 { margin-left: 0 !important; margin-right: .5rem !important; }
.ml-3 { margin-left: 0 !important; margin-right: 1rem !important; }
.mr-1 { margin-right: 0 !important; margin-left: .25rem !important; }
.mr-2 { margin-right: 0 !important; margin-left: .5rem !important; }
.mr-3 { margin-right: 0 !important; margin-left: 1rem !important; }

.float-left  { float: right !important; }
.float-right { float: left  !important; }

.text-left  { text-align: right !important; }
.text-right { text-align: left  !important; }

/* ---- small-box tiles (dashboard) ---------------------------------------- */
.small-box > .inner {
    text-align: right;
}

.small-box .icon {
    right: auto;
    left: 10px;
}

.small-box:hover .icon {
    left: 5px;
    right: auto;
}

/* The footer arrow points the way the eye travels, which is now leftwards. */
.small-box-footer .fa-arrow-circle-right {
    transform: rotate(180deg);
}

/* ---- misc ---------------------------------------------------------------- */
.dropdown-menu-right {
    right: auto !important;
    left: 0 !important;
}

.close {
    float: left;
}

.breadcrumb {
    padding-right: 0;
}