/*//////////////////////////////////////////////////////////////////
[ FONT ]*/

@font-face {
    font-family: 'IRANYekanX';
    src: url('../fonts/IRANYekanX/IRANYekanX-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IRANYekanX';
    src: url('../fonts/IRANYekanX/IRANYekanX-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IRANYekanX';
    src: url('../fonts/IRANYekanX/IRANYekanX-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/*---------------------------------- End of fonts ---------------------------------- */

body {
    font-family: 'IRANYekanX', sans-serif; /* Add a generic fallback font */
}

.ltr {
    direction: ltr;
}

ul {
    padding-inline-start: 0px;
}

table th {
    font-size: 15px;
}


/* my external styles */

.just-margin-top {
    margin-top: 60px;
}

.battery-color {
    background-color: #16c46d !important
}

.light-color {
    background-color: #f3cf31 !important
}

.rhe-color {
    background-color: #1895ca !important
}

.ground-temp-color {
    background-color: #912525 !important
}

.rh-color {
    background-color: #46d4ff !important
}

.ec-color {
    background-color: #26d8bd !important
}

.tempurture-color {
    background-color: #e90042 !important
}

.just-space {
    margin-inline-end: 20px;
}

.just-space-2 {
    margin-inline-end: 2px;
}

.breadcrumb-item+.breadcrumb-item::before {
    padding-inline-start: .5rem;
}


/*------------------------- Form ----------------------------*/


.nav {
    padding-inline-start: 0px !important;
}


/*---------------------------------- Persian Date Picker ---------------------------------- */

.datepicker-plot-area {
    font-family: 'IRANYekanX', sans-serif;
}

/* ============================================================
   v2.0.0028 — Logical RTL/LTR + theme-token corrections.
   Additive rules using CSS logical properties so they are correct
   in BOTH directions (fa/ar = RTL, en = LTR) and BOTH color modes.
   ============================================================ */

/* Form-error containers read from the inline-start edge in both
   directions. Fixes the password-validator messages / alert sticking
   to the box edge in RTL (the container, not Django's messages). */
.invalid-feedback,
.alert,
.form-text {
    text-align: start;
}

ul.errorlist {
    margin: 0 0 .5rem;
    padding-inline-start: 1.25rem;
    list-style-position: outside;
    text-align: start;
}

/* v2.0.0030 (Feature 29) — Password-validator help lists render inside
   .form-text. The global `ul { padding-inline-start: 0 }` above strips their
   indent, so bullets stick to the inline-start edge in RTL. Restore a logical
   inline-start padding (equivalent to ps-3) so bullets read correctly in BOTH
   directions without a hardcoded dir. */
.form-text ul {
    margin-block: .25rem 0;
    padding-inline-start: 1rem;
    list-style-position: outside;
    text-align: start;
}

/* Modals follow page direction (BS5.3 already flips the close button and
   footer button order via [dir]; this keeps body/header text logical). */
.modal-header,
.modal-body,
.modal-footer {
    text-align: start;
}

/* Dropdown item text/icons align to the inline-start in both directions. */
.dropdown-menu {
    text-align: start;
}

/* Use theme tokens (not hardcoded colors) so cards/boxes stay readable in
   dark + light. The widget status colors above keep white text on saturated
   backgrounds, which is readable in both modes. */
.small-box .inner,
.info-box-content {
    color: inherit;
}

/* ─── Global content spacing ─────────────────────────────────────────────────
   Many pages (e.g. User Management, Add Device, Reporting) do not define a
   {% block content_header %}, so their content rendered flush against the top
   navbar. Give .app-content a top gap by default, and remove it right after an
   .app-content-header so headered pages don't get double spacing. */
.app-main > .app-content {
    padding-top: 1.5rem;
}
.app-main > .app-content-header + .app-content {
    padding-top: 0;
}

/* ─── Unified notification toaster (Pillar 1) ────────────────────────────────
   One non-intrusive surface for all flash/command notifications. Floats in the
   bottom corner over empty margin so it never covers the header, content, widget
   controls, or modals. The container is click-through (pointer-events:none); only
   the toasts themselves capture clicks. Direction-aware and safe-area aware. */
.idash-toasts {
    position: fixed;
    z-index: 1090;                 /* above content & sticky bars, below nothing critical */
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    inset-inline-end: calc(1rem + env(safe-area-inset-right, 0px));
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: min(360px, calc(100vw - 2rem));
    pointer-events: none;          /* empty space never blocks clicks beneath */
}
.idash-toast {
    pointer-events: auto;          /* the toast itself is interactive */
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem .85rem;
    border-radius: .5rem;
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .18);
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    border-inline-start: 4px solid var(--bs-secondary, #6c757d);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease;
    font-size: .9rem;
    line-height: 1.35;
}
.idash-toast--in  { opacity: 1; transform: translateY(0); }
.idash-toast--out { opacity: 0; transform: translateY(12px); }
.idash-toast__icon { margin-top: .1rem; font-size: 1.05rem; }
.idash-toast__body { flex: 1 1 auto; word-break: break-word; }
.idash-toast__close {
    border: 0; background: transparent; color: inherit; opacity: .55;
    font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0 .15rem;
}
.idash-toast__close:hover { opacity: 1; }
.idash-toast--success { border-inline-start-color: var(--bs-success, #198754); }
.idash-toast--success .idash-toast__icon { color: var(--bs-success, #198754); }
.idash-toast--info    { border-inline-start-color: var(--bs-info, #0dcaf0); }
.idash-toast--info .idash-toast__icon    { color: var(--bs-info, #0dcaf0); }
.idash-toast--warning { border-inline-start-color: var(--bs-warning, #ffc107); }
.idash-toast--warning .idash-toast__icon { color: var(--bs-warning, #ffc107); }
.idash-toast--error   { border-inline-start-color: var(--bs-danger, #dc3545); }
.idash-toast--error .idash-toast__icon   { color: var(--bs-danger, #dc3545); }

/* Phones: span the bottom comfortably (still clear of the very edges & safe areas),
   centered, never covering the top header or any bottom控件. */
@media (max-width: 575.98px) {
    .idash-toasts {
        inset-inline: .75rem;
        width: auto;
        bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
    }
}
@media (prefers-reduced-motion: reduce) {
    .idash-toast { transition: opacity .2s ease; transform: none; }
    .idash-toast--in, .idash-toast--out { transform: none; }
}

/* ─── Responsive safety net (Pillar 2) ───────────────────────────────────────
   Shared guards so a single rule protects every page rather than per-page patches.
   Media, code blocks, and embeds never force horizontal scroll; long words wrap;
   the main content never overflows its column on small screens. */
.app-content img,
.app-content svg,
.app-content video,
.app-content canvas,
.app-content pre,
.app-content table { max-width: 100%; }
.app-content pre { overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
.app-main, .app-content > .container-fluid { min-width: 0; }
@media (max-width: 575.98px) {
    /* Comfortable touch targets and no edge-to-edge cramping on phones. */
    .app-content > .container-fluid { padding-inline: .75rem; }
    .btn { min-height: 38px; }
    .table-responsive { -webkit-overflow-scrolling: touch; }
}