/*
 * ARAA Graphite Operations theme
 * Dark and light tokens, the app frame (rail, topbar, footer), shared
 * components, the operations home, and the legacy page bridges.
 */

/* Design tokens live in araa-themes.css (loaded first) */

/* Base */
html[data-araa-theme] {
    background: var(--araa-bg) !important;
}

body.araa-app-shell {
    margin: 0;
    background: var(--araa-bg) !important;
    color: var(--araa-text);
    font-family: var(--araa-font) !important;
}

.araa-app-shell .thetop {
    min-height: 100vh;
    background: transparent;
}

.araa-app-main {
    min-width: 0;
    background: transparent !important;
}

.araa-app-shell #scrollable-container {
    background: transparent;
    scrollbar-color: var(--araa-border-strong) transparent;
    scrollbar-width: thin;
}

/* Fixed app frame: rail, topbar and footer stay put, only the page scrolls.
   The POS screen (body.lockscreen) keeps its own layout. */
@media screen {
    body.araa-app-shell:not(.lockscreen) .thetop {
        height: 100vh;
        min-height: 0;
    }

    body.araa-app-shell:not(.lockscreen) .araa-app-main {
        height: 100vh;
        min-height: 0;
    }

    body.araa-app-shell:not(.lockscreen) #scrollable-container {
        min-height: 0;
        overflow-y: auto;
        scroll-behavior: smooth;
    }
}

.araa-app-shell #scrollable-container::-webkit-scrollbar,
.araa-nav-flyout::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.araa-app-shell #scrollable-container::-webkit-scrollbar-thumb,
.araa-nav-flyout::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--araa-border-strong);
}

.araa-app-shell :focus-visible {
    outline: 2px solid var(--araa-accent);
    outline-offset: 2px;
}

.araa-app-shell ::selection {
    background: var(--araa-accent-soft);
    color: var(--araa-text);
}

/* Sidebar rail */
.araa-sidebar {
    width: var(--araa-rail-width) !important;
    min-width: var(--araa-rail-width);
    height: 100vh;
    position: sticky;
    top: 0;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--araa-rail) !important;
    background-image: var(--araa-rail-pattern) !important;
    background-size: 56px 56px;
    border-inline-end: 1px solid var(--araa-rail-border);
    z-index: 45;
}

.araa-brand {
    position: relative;
    height: 136px;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 10px 12px;
    border-bottom: 1px solid var(--araa-rail-border);
    color: var(--araa-rail-text-strong) !important;
    text-decoration: none !important;
}

.araa-brand__mark {
    width: 58px;
    height: 58px;
    border-radius: 0;
    object-fit: contain;
    transition: transform 180ms ease;
}

.araa-brand:hover .araa-brand__mark {
    transform: translateY(-1px) scale(1.03);
}

.araa-brand__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.araa-brand__copy strong {
    color: var(--araa-rail-text-strong);
    font-family: var(--araa-font-latin);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.araa-brand__copy strong { font-family: var(--araa-font-latin), Georgia, serif; font-size: 20px; letter-spacing: 1px; }
.araa-brand__copy strong span { color: var(--araa-accent); }
.araa-brand__copy strong sup { position: relative; top: -.15em; margin-inline-start: 1px; font-size: .48em; }
.araa-brand__wordmark { display: block; width: 112px; height: auto; max-height: 42px; object-fit: contain; }

.araa-brand__copy small {
    margin-top: 5px;
    color: var(--araa-rail-muted) !important;
    font-family: var(--araa-font-latin);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3.5px;
}

.araa-online-dot {
    width: 7px;
    height: 7px;
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    border-radius: 50%;
    background: var(--araa-success);
    box-shadow: 0 0 0 3px var(--araa-success-soft);
}

.araa-sidebar .araa-nav {
    min-height: 0 !important;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    margin: 0 !important;
    padding: 8px 0 14px !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0 !important;
    scrollbar-width: none;
}

.araa-sidebar .araa-nav::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.araa-sidebar .araa-nav > * {
    margin: 0 !important;
}

.araa-sidebar .araa-nav-group {
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* .araa-app-shell keeps this above the generic tw-bg-gray-100 / tw-text-gray-900 overrides
   that the links' hover: classes also match (otherwise light themes paint the rail sand) */
.araa-app-shell .araa-sidebar .araa-nav-link {
    position: relative;
    min-height: 74px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px !important;
    margin: 0 !important;
    padding: 10px 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--araa-rail-muted) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.35;
    text-align: center;
    text-decoration: none !important;
    white-space: normal !important;
    transition: color 150ms ease, background-color 150ms ease !important;
}

.araa-sidebar .araa-nav-link > .tw-truncate {
    width: 100%;
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.araa-nav-icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: inherit;
    transition: transform 160ms ease;
}

.araa-nav-icon > svg,
.araa-nav-icon > i {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor !important;
    font-size: 19px;
}

.araa-sidebar .araa-nav-link:hover,
.araa-sidebar .araa-nav-link:focus-visible {
    background: var(--araa-rail-hover) !important;
    color: var(--araa-rail-text) !important;
}

.araa-sidebar .araa-nav-link:hover .araa-nav-icon {
    transform: translateY(-1px);
}

.araa-sidebar .araa-nav-link.is-active,
.araa-sidebar .araa-nav-group.is-active > .araa-nav-link,
.araa-sidebar .araa-nav-group.is-open > .araa-nav-link {
    background: var(--araa-rail-active-bg) !important;
    color: var(--araa-rail-active-text) !important;
}

.araa-sidebar .araa-nav-link.is-active::after,
.araa-sidebar .araa-nav-group.is-active > .araa-nav-link::after {
    width: 3px;
    position: absolute;
    inset-block: 10px;
    inset-inline-end: 0;
    border-radius: 3px;
    background: var(--araa-rail-indicator);
    box-shadow: 0 0 14px var(--araa-rail-indicator);
    content: "";
}

.araa-sidebar .araa-nav-group.is-open:not(.is-active) > .araa-nav-link::after {
    width: 3px;
    position: absolute;
    inset-block: 18px;
    inset-inline-end: 0;
    border-radius: 3px;
    background: color-mix(in srgb, var(--araa-rail-indicator) 45%, transparent);
    content: "";
}

.araa-sidebar .araa-nav-chevron {
    display: none !important;
}

/* Desktop: sub-menus live in the flyout, not inline */
@media (min-width: 1024px) {
    :root { --araa-topnav-height: 76px; }

    .araa-sidebar .araa-nav-children {
        display: none !important;
    }

    .araa-sidebar .araa-nav-group > .araa-nav-link::before {
        width: 5px;
        height: 5px;
        position: absolute;
        top: 14px;
        inset-inline-end: 12px;
        border-radius: 50%;
        background: currentColor;
        content: "";
        opacity: 0.35;
    }
}

/* Top navigation (html[data-araa-nav="top"], the default on desktop): the rail becomes a bar
   above the topbar. Items that do not fit move into "More" (araa-operations.js, initTopNav). */
.araa-nav-more {
    display: none;
}

@media (min-width: 1024px) {
    html[data-araa-nav="top"] body.araa-app-shell .thetop {
        flex-direction: column;
    }

    html[data-araa-nav="top"] body.araa-app-shell:not(.lockscreen) .araa-app-main {
        height: calc(100vh - var(--araa-topnav-height, 58px));
    }

    html[data-araa-nav="top"] .araa-sidebar {
        width: 100% !important;
        min-width: 0;
        height: var(--araa-topnav-height, 58px);
        flex-direction: row !important;
        flex: 0 0 auto;
        align-items: stretch;
        overflow: visible;
        border-inline-end: 0;
        border-bottom: 1px solid var(--araa-rail-border);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
        z-index: 46;
    }

    html[data-araa-nav="top"] .araa-sidebar .araa-brand {
        height: 100%;
        min-width: 132px;
        flex-direction: column;
        justify-content: center;
        gap: 0;
        padding: 2px 12px;
        border-bottom: 0;
        border-inline-end: 1px solid var(--araa-rail-border);
    }

    html[data-araa-nav="top"] .araa-sidebar .araa-brand__mark {
        width: 30px;
        height: 30px;
        border-radius: 10px;
    }

    html[data-araa-nav="top"] .araa-sidebar .araa-brand__copy {
        align-items: center;
    }

    html[data-araa-nav="top"] .araa-sidebar .araa-brand__wordmark {
        width: 96px;
        max-height: 34px;
    }

    html[data-araa-nav="top"] .araa-sidebar .araa-brand__copy strong {
        font-size: 16px;
        letter-spacing: 2px;
    }

    html[data-araa-nav="top"] .araa-sidebar .araa-brand__copy small {
        margin-top: 3px;
        font-size: 8px;
        letter-spacing: 3px;
    }

    html[data-araa-nav="top"] .araa-sidebar .araa-online-dot {
        top: 9px;
        inset-inline-start: 9px;
    }

    html[data-araa-nav="top"] .araa-sidebar .araa-nav {
        min-width: 0;
        flex-direction: row;
        align-items: stretch;
        gap: 2px;
        padding: 0 8px !important;
        overflow: hidden;
    }

    html[data-araa-nav="top"] .araa-sidebar .araa-nav > * {
        flex: 0 0 auto;
    }

    html[data-araa-nav="top"] .araa-sidebar .araa-nav > .is-overflow {
        display: none !important;
    }

    html[data-araa-nav="top"] .araa-sidebar .araa-nav-group {
        display: flex;
    }

    html[data-araa-nav="top"] .araa-app-shell .araa-sidebar .araa-nav-link,
    html[data-araa-nav="top"] body.araa-app-shell .araa-sidebar .araa-nav-link {
        min-height: 0;
        height: 100%;
        flex-direction: row;
        gap: 8px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    html[data-araa-nav="top"] .araa-sidebar .araa-nav-link > .tw-truncate {
        width: auto;
        max-width: 170px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html[data-araa-nav="top"] .araa-sidebar .araa-nav-icon {
        width: 20px;
        height: 20px;
    }

    html[data-araa-nav="top"] .araa-sidebar .araa-nav-icon > svg,
    html[data-araa-nav="top"] .araa-sidebar .araa-nav-icon > i {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        font-size: 15px;
    }

    html[data-araa-nav="top"] .araa-sidebar .araa-nav-link:hover .araa-nav-icon {
        transform: none;
    }

    /* Groups get a small caret after the label instead of the corner dot */
    html[data-araa-nav="top"] .araa-sidebar .araa-nav-group > .araa-nav-link::before,
    html[data-araa-nav="top"] .araa-sidebar .araa-nav-more__toggle::before {
        width: 6px;
        height: 6px;
        position: static;
        order: 9;
        margin: -3px 2px 0 0;
        border: solid currentColor;
        border-width: 0 1.5px 1.5px 0;
        border-radius: 0;
        background: none;
        content: "";
        opacity: 0.6;
        transform: rotate(45deg);
    }

    /* Active and open items: a gold bar along the bottom edge */
    html[data-araa-nav="top"] .araa-sidebar .araa-nav-link.is-active::after,
    html[data-araa-nav="top"] .araa-sidebar .araa-nav-group.is-active > .araa-nav-link::after,
    html[data-araa-nav="top"] .araa-sidebar .araa-nav-group.is-open:not(.is-active) > .araa-nav-link::after,
    html[data-araa-nav="top"] .araa-sidebar .araa-nav-more.is-active > .araa-nav-link::after,
    html[data-araa-nav="top"] .araa-sidebar .araa-nav-more.is-open > .araa-nav-link::after {
        width: auto;
        height: 3px;
        inset-block: auto 0;
        inset-inline: 10px;
        border-radius: 3px 3px 0 0;
    }

    html[data-araa-nav="top"] .araa-sidebar .araa-nav-more.is-active > .araa-nav-link::after {
        position: absolute;
        background: var(--araa-rail-indicator);
        content: "";
    }

    html[data-araa-nav="top"] .araa-sidebar .araa-nav-more.is-open > .araa-nav-link::after {
        position: absolute;
        background: color-mix(in srgb, var(--araa-rail-indicator) 45%, transparent);
        content: "";
    }

    html[data-araa-nav="top"] .araa-sidebar .araa-nav-more:not([hidden]) {
        display: flex;
        margin-inline-start: auto !important;
    }

    html[data-araa-nav="top"] .araa-sidebar .araa-nav-more.is-open > .araa-nav-link {
        background: var(--araa-rail-active-bg) !important;
        color: var(--araa-rail-active-text) !important;
    }

    .araa-nav-more__toggle {
        cursor: pointer;
    }

    .araa-nav-more__count {
        min-width: 20px;
        height: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 6px;
        border-radius: 999px;
        background: var(--araa-rail-active-bg);
        color: var(--araa-rail-text-strong);
        font-family: var(--araa-font-latin);
        font-size: 10.5px;
        font-weight: 700;
    }

    /* Collapsing the rail has no meaning for a bar */
    html[data-araa-nav="top"] .araa-topbar .side-bar-collapse {
        display: none !important;
    }

    /* Sub-menus drop below their item; long ones spread into columns */
    html[data-araa-nav="top"] .araa-nav-flyout {
        transform: translateY(-6px);
    }

    html[data-araa-nav="top"] .araa-nav-flyout.is-open {
        transform: none;
    }

    .araa-nav-flyout.is-wide {
        width: 480px;
    }

    .araa-nav-flyout.is-wider {
        width: 690px;
    }

    .araa-nav-flyout.is-wide .araa-nav-flyout__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 6px;
    }

    .araa-nav-flyout.is-wider .araa-nav-flyout__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* "More" panel: the modules that did not fit in the bar, with their sub-pages */
.araa-nav-mega {
    max-height: calc(100vh - var(--araa-topnav-height, 58px) - 28px);
    position: fixed;
    inset-inline: 16px;
    top: 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--araa-border-strong);
    border-radius: 16px;
    background: var(--araa-surface-raised);
    box-shadow: var(--araa-shadow);
    color: var(--araa-text);
    font-family: var(--araa-font);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    visibility: hidden;
    transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}

.araa-nav-mega.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
    transition-delay: 0s;
}

.araa-nav-mega__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--araa-border);
}

.araa-nav-mega__head strong {
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

.araa-nav-mega__search {
    width: min(340px, 100%);
    height: 38px;
    margin-inline-start: auto;
    padding: 0 14px;
    border: 1px solid var(--araa-border-strong);
    border-radius: 10px;
    background: var(--araa-surface);
    color: var(--araa-text);
    font-family: var(--araa-font);
    font-size: 13px;
}

.araa-nav-mega__search:focus {
    border-color: var(--araa-accent);
    box-shadow: 0 0 0 3px var(--araa-accent-soft);
    outline: none;
}

/* The panel focuses the search on open; a global rule hides placeholders on focus */
.araa-nav-mega__search::placeholder,
.araa-nav-mega__search:focus::placeholder {
    color: var(--araa-muted) !important;
    opacity: 1;
}

.araa-nav-mega__grid {
    overflow-y: auto;
    padding: 16px 18px 20px;
    columns: 4 220px;
    column-gap: 14px;
}

.araa-nav-mega__card {
    display: block;
    margin: 0 0 14px;
    padding: 12px;
    border: 1px solid var(--araa-border);
    border-radius: 12px;
    background: var(--araa-surface);
    break-inside: avoid;
}

.araa-nav-mega__card[hidden] {
    display: none;
}

.araa-app-shell .araa-nav-mega__title,
.araa-nav-mega__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--araa-text) !important;
    font-size: 13.5px;
    font-weight: 800;
    text-decoration: none !important;
}

a.araa-nav-mega__title:hover {
    color: var(--araa-accent) !important;
}

.araa-nav-mega__title .araa-nav-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--araa-accent-soft);
    color: var(--araa-accent);
}

.araa-nav-mega__title .araa-nav-icon > svg,
.araa-nav-mega__title .araa-nav-icon > i {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    font-size: 14px;
}

.araa-nav-mega__links {
    display: grid;
    gap: 1px;
    margin: 10px 0 0;
    padding: 8px 0 0;
    border-top: 1px dashed var(--araa-border);
}

.araa-app-shell .araa-nav-mega__links a,
.araa-nav-mega__links a {
    display: block;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--araa-text-soft) !important;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    text-decoration: none !important;
}

.araa-nav-mega__links a:hover,
.araa-nav-mega__links a:focus-visible {
    background: var(--araa-accent-soft);
    color: var(--araa-text) !important;
}

.araa-nav-mega__links a.is-active {
    color: var(--araa-accent) !important;
}

.araa-nav-mega__links a[hidden] {
    display: none;
}

.araa-nav-mega__empty {
    padding: 26px;
    color: var(--araa-muted);
    font-size: 13px;
    text-align: center;
}

.araa-nav-flyout {
    width: 256px;
    max-height: calc(100vh - 24px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--araa-border-strong);
    border-radius: 14px;
    background: var(--araa-surface-raised);
    box-shadow: var(--araa-shadow);
    color: var(--araa-text);
    font-family: var(--araa-font);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-6px);
    visibility: hidden;
    transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
}

[dir="rtl"] .araa-nav-flyout {
    transform: translateX(6px);
}

.araa-nav-flyout.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
    transition-delay: 0s;
}

.araa-nav-flyout__title {
    margin: 0 0 6px;
    padding: 9px 10px 11px;
    border-bottom: 1px solid var(--araa-border);
    color: var(--araa-text);
    font-size: 13.5px;
    font-weight: 800;
}

.araa-nav-flyout__list {
    display: grid;
    gap: 2px;
}

.araa-nav-flyout .araa-nav-child-link {
    min-height: 38px;
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 8px 10px !important;
    border-radius: 9px;
    color: var(--araa-text-soft) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4;
    text-decoration: none !important;
    white-space: normal !important;
    transition: background-color 120ms ease, color 120ms ease;
}

.araa-nav-flyout .araa-nav-child-link:hover,
.araa-nav-flyout .araa-nav-child-link:focus-visible {
    background: var(--araa-accent-soft) !important;
    color: var(--araa-text) !important;
    outline: none;
}

.araa-nav-flyout .araa-nav-child-link.is-active {
    background: var(--araa-accent-soft) !important;
    color: var(--araa-accent) !important;
}

.araa-nav-flyout .araa-nav-child-link > i {
    display: none;
}

.araa-app-shell .araa-nav-child-link::before,
.araa-nav-flyout .araa-nav-child-link::before {
    display: none !important;
    content: none !important;
}

.araa-nav-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border: 1px solid var(--araa-border-strong);
    border-radius: 50%;
    background: transparent;
    transition: 120ms ease;
}

.araa-nav-child-link:hover .araa-nav-dot,
.araa-nav-child-link.is-active .araa-nav-dot {
    border-color: var(--araa-accent);
    background: var(--araa-accent);
    box-shadow: 0 0 0 3px var(--araa-accent-soft);
}

/* Topbar */
.araa-topbar {
    position: relative;
    z-index: 40;
    flex: 0 0 auto;
    background: var(--araa-bg) !important;
    border-bottom: 1px solid var(--araa-border);
}

.araa-topbar__inner {
    min-height: var(--araa-topbar-height);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 28px;
}

.araa-topbar__start {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.araa-topbar__business {
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    line-height: 1.3;
}

.erp-business-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; flex-shrink: 0; }
@media (max-width: 600px) { .araa-topbar__business strong { max-width: 22vw; } .erp-business-logo { width: 30px; height: 30px; } }

.araa-topbar__business strong {
    max-width: 38vw;
    overflow: hidden;
    color: var(--araa-text);
    font-size: 16px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.araa-topbar__business span {
    color: var(--araa-muted);
    font-family: var(--araa-font-latin);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.4px;
}

.araa-topbar__alerts {
    display: flex;
    align-items: center;
    gap: 8px;
}

.araa-topbar__alerts:empty {
    display: none;
}

.araa-alert-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
}

.araa-alert-chip--danger {
    border-color: color-mix(in srgb, var(--araa-danger) 35%, transparent);
    background: var(--araa-danger-soft);
    color: var(--araa-danger) !important;
}

.araa-topbar__end {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: auto;
}

.araa-topbar__date {
    align-items: center;
    gap: 9px;
    color: var(--araa-text);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.araa-topbar__date svg {
    width: 21px;
    height: 21px;
    color: var(--araa-text-soft);
}

.araa-topbar__dates {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.araa-app-shell .araa-topbar__hijri {
    color: var(--araa-gold-ink) !important;
    font-size: 11.5px;
    font-weight: 600;
}

.araa-topbar__day {
    align-items: center;
    padding-inline-start: 14px;
    color: var(--araa-text-soft);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.araa-topbar__divider {
    width: 1px;
    height: 26px;
    margin-inline: 4px;
    background: var(--araa-border-strong);
}

.araa-icon-btn {
    width: 38px;
    height: 38px;
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--araa-text-soft) !important;
    cursor: pointer;
    text-decoration: none !important;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.araa-icon-btn.tw-hidden {
    display: none;
}

.araa-icon-btn svg {
    width: 21px;
    height: 21px;
}

.araa-icon-btn i {
    font-size: 16px;
}

.araa-icon-btn:hover,
.araa-icon-btn:focus-visible,
.araa-notifications.open > .araa-icon-btn {
    border-color: var(--araa-border);
    background: var(--araa-surface-raised);
    color: var(--araa-text) !important;
}

.araa-icon-btn--accent {
    color: var(--araa-accent) !important;
}

.araa-theme-toggle i {
    color: var(--araa-gold);
}

@media (min-width: 640px) {
    .araa-icon-btn.sm\:tw-inline-flex {
        display: inline-flex;
    }
}

@media (min-width: 1024px) {
    .araa-icon-btn.lg\:tw-inline-flex {
        display: inline-flex;
    }

    .araa-icon-btn.lg\:tw-hidden {
        display: none;
    }
}

.araa-lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--araa-border-strong);
    border-radius: 10px;
    background: var(--araa-bg-soft);
}

.araa-lang-switch a,
.araa-lang-switch button {
    display: inline-block;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
    padding: 6px 13px;
    border-radius: 7px;
    color: var(--araa-text-soft) !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none !important;
    transition: background-color 150ms ease, color 150ms ease;
}

.araa-lang-switch a[lang="en"],
.araa-lang-switch button[lang="en"] {
    font-family: var(--araa-font-latin);
}

.araa-lang-switch a:hover,
.araa-lang-switch button:hover {
    color: var(--araa-text) !important;
}

.araa-lang-switch a.is-active,
.araa-lang-switch button.is-active {
    background: var(--araa-accent-soft);
    color: var(--araa-accent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--araa-accent) 35%, transparent);
}

.araa-notifications {
    position: relative;
}

.araa-notifications .notifications_count {
    min-width: 17px;
    height: 17px;
    position: absolute;
    top: 3px;
    inset-inline-end: 3px;
    padding: 0 4px !important;
    border: 2px solid var(--araa-bg);
    border-radius: 999px !important;
    background: var(--araa-danger) !important;
    color: #fff !important;
    font-family: var(--araa-font-latin);
    font-size: 9.5px !important;
    line-height: 13px !important;
}

.araa-notifications .notifications_count:empty {
    display: none;
}

.araa-app-shell .araa-notifications__panel {
    width: 340px;
    max-height: 70vh;
    top: calc(100% + 10px) !important;
    margin: 0 !important;
    padding: 8px !important;
    overflow-y: auto;
    border-radius: 12px !important;
}

[dir="rtl"] .araa-app-shell .araa-notifications__panel {
    left: 0 !important;
    right: auto !important;
}

[dir="ltr"] .araa-app-shell .araa-notifications__panel {
    left: auto !important;
    right: 0 !important;
}

.araa-notifications__panel .menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.araa-notifications__panel .menu a,
.araa-notifications__panel .load_more_li a {
    display: block;
    padding: 9px 10px;
    border-radius: 9px;
    color: var(--araa-text-soft) !important;
    white-space: normal;
}

.araa-notifications__panel .menu a:hover {
    background: var(--araa-accent-soft);
    color: var(--araa-text) !important;
}

.araa-user-menu {
    padding-inline-start: 12px;
    border-inline-start: 1px solid var(--araa-border);
}

.araa-user-menu > summary {
    list-style: none;
}

.araa-user-menu > summary::-webkit-details-marker {
    display: none;
}

.araa-user-chip {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 11px;
    padding: 4px;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.araa-user-chip:hover,
.araa-user-menu[open] > .araa-user-chip {
    background: var(--araa-surface-raised);
}

.araa-user-chip__avatar {
    width: 40px;
    height: 40px;
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--araa-border-strong);
    border-radius: 50%;
    background: linear-gradient(145deg, var(--araa-surface-muted), var(--araa-surface));
    color: var(--araa-text);
    font-family: var(--araa-font-latin);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.araa-user-chip__text {
    min-width: 0;
    flex-direction: column;
    line-height: 1.3;
}

.araa-user-chip__text strong {
    max-width: 160px;
    overflow: hidden;
    color: var(--araa-text);
    font-size: 13.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.araa-user-chip__text small {
    color: var(--araa-muted) !important;
    font-size: 11.5px;
}

.araa-app-shell .araa-user-menu__panel {
    width: 230px;
    position: absolute;
    top: calc(100% + 10px);
    left: auto;
    right: auto;
    inset-inline-end: 0;
    z-index: 60;
    margin: 0;
    padding: 6px !important;
    list-style: none;
    border-radius: 12px !important;
}

.araa-user-menu__who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 4px;
    padding: 9px 10px 11px;
    border-bottom: 1px solid var(--araa-border);
}

.araa-user-menu__who strong {
    overflow: hidden;
    color: var(--araa-text);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.araa-user-menu__panel a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 9px;
    color: var(--araa-text-soft) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
}

.araa-user-menu__panel a svg {
    width: 19px;
    height: 19px;
}

.araa-user-menu__panel a:hover {
    background: var(--araa-accent-soft);
    color: var(--araa-text) !important;
}

.araa-user-menu__panel a.araa-user-menu__danger:hover {
    background: var(--araa-danger-soft);
    color: var(--araa-danger) !important;
}

/* Footer */
.araa-footer {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 28px;
    border-top: 1px solid var(--araa-border);
    background: var(--araa-bg);
}

.araa-footer p {
    margin: 0;
    color: var(--araa-muted) !important;
    font-size: 11.5px;
    font-weight: 600;
}

.araa-footer a {
    color: var(--araa-text-soft) !important;
    font-family: var(--araa-font-latin);
    text-decoration: none !important;
}

.araa-footer a:hover {
    color: var(--araa-accent) !important;
}

.araa-footer__sep {
    margin-inline: 8px;
    opacity: 0.5;
}

.araa-footer__version {
    font-family: var(--araa-font-latin);
    letter-spacing: 0.3px;
}

.araa-offline-banner {
    padding: 8px 16px;
    background: var(--araa-danger);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.araa-app-shell .scrolltop {
    width: auto;
    right: auto;
    bottom: 58px;
    inset-inline-end: 24px;
    z-index: 30;
}

.araa-app-shell .scrolltop.is-visible {
    display: block !important;
}

.araa-app-shell .scrolltop .scroll {
    width: 42px;
    height: 42px;
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--araa-border-strong);
    border-radius: 12px;
    background: var(--araa-surface-raised) !important;
    color: var(--araa-accent) !important;
    box-shadow: var(--araa-shadow);
}

.araa-app-shell .scrolltop .scroll .fas {
    margin: 0;
    font-size: 20px;
}

.araa-app-shell .scrolltop .scroll:hover {
    border-color: var(--araa-accent);
}

/* Generic page header (all non-home pages) */
.araa-app-shell .content-header > h1 small,
.araa-app-shell .content-header h1 small {
    margin-inline-start: 8px;
    color: var(--araa-muted) !important;
    font-size: 13px;
    font-weight: 600;
}

/* Shared surfaces */
.araa-app-shell .content-header {
    padding: 24px 28px 10px;
}

.araa-app-shell .content-header > h1,
.araa-app-shell .content-header h1,
.araa-app-shell .content-header h2,
.araa-app-shell h1,
.araa-app-shell h2,
.araa-app-shell h3,
.araa-app-shell h4 {
    color: var(--araa-text);
}

.araa-app-shell .content-header > h1 {
    font-size: 24px;
    font-weight: 850;
    letter-spacing: -0.3px;
}

.araa-app-shell .content {
    padding: 12px 28px 30px;
}

.araa-app-shell .box,
.araa-app-shell .card,
.araa-app-shell .panel,
.araa-app-shell .well,
.araa-app-shell .modal-content,
.araa-app-shell [class*="tw-bg-white"][class*="tw-rounded"] {
    border: 1px solid var(--araa-border) !important;
    border-radius: 11px !important;
    background: var(--araa-surface) !important;
    box-shadow: var(--araa-shadow-soft) !important;
    color: var(--araa-text);
}

.araa-app-shell .box-header,
.araa-app-shell .card-header,
.araa-app-shell .panel-heading,
.araa-app-shell .modal-header {
    border-color: var(--araa-border) !important;
    background: transparent !important;
    color: var(--araa-text) !important;
}

.araa-app-shell .box-header {
    padding: 16px 18px;
}

.araa-app-shell .box-title,
.araa-app-shell .panel-title {
    color: var(--araa-text) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}

.araa-app-shell .box-body,
.araa-app-shell .panel-body,
.araa-app-shell .modal-body {
    color: var(--araa-text-soft);
}

.araa-app-shell .box-footer,
.araa-app-shell .modal-footer,
.araa-app-shell .panel-footer {
    border-color: var(--araa-border) !important;
    background: var(--araa-surface-raised) !important;
}

.araa-app-shell [class*="tw-bg-gray-50"],
.araa-app-shell [class*="tw-bg-gray-100"] {
    background-color: var(--araa-surface-raised) !important;
}

.araa-app-shell [class*="tw-ring-gray-"],
.araa-app-shell [class*="tw-border-gray-"] {
    --tw-ring-color: var(--araa-border) !important;
    border-color: var(--araa-border) !important;
}

.araa-app-shell [class*="tw-text-gray-900"],
.araa-app-shell [class*="tw-text-slate-900"] {
    color: var(--araa-text) !important;
}

.araa-app-shell [class*="tw-text-gray-8"],
.araa-app-shell [class*="tw-text-gray-7"],
.araa-app-shell [class*="tw-text-gray-6"] {
    color: var(--araa-text-soft) !important;
}

.araa-app-shell [class*="tw-text-gray-5"],
.araa-app-shell [class*="tw-text-gray-4"],
.araa-app-shell .text-muted,
.araa-app-shell small {
    color: var(--araa-muted) !important;
}

.araa-app-shell a {
    color: var(--araa-accent);
}

.araa-app-shell hr {
    border-color: var(--araa-border);
}

/* Forms */
.araa-app-shell .form-control,
.araa-app-shell input[type="text"],
.araa-app-shell input[type="number"],
.araa-app-shell input[type="email"],
.araa-app-shell input[type="password"],
.araa-app-shell input[type="date"],
.araa-app-shell input[type="search"],
.araa-app-shell textarea,
.araa-app-shell select,
.araa-app-shell .select2-container .select2-selection--single,
.araa-app-shell .select2-container .select2-selection--multiple {
    min-height: 38px;
    border: 1px solid var(--araa-border-strong) !important;
    border-radius: 8px !important;
    background: var(--araa-surface-raised) !important;
    color: var(--araa-text) !important;
    box-shadow: none !important;
}

.araa-app-shell .form-control:focus,
.araa-app-shell input:focus,
.araa-app-shell textarea:focus,
.araa-app-shell select:focus,
.araa-app-shell .select2-container--focus .select2-selection {
    border-color: var(--araa-accent) !important;
    box-shadow: 0 0 0 3px var(--araa-accent-soft) !important;
    outline: none;
}

.araa-app-shell .select2-container .select2-selection__rendered,
.araa-app-shell .select2-container .select2-selection__choice,
.araa-app-shell .select2-results__option,
.araa-app-shell .select2-search__field {
    color: var(--araa-text) !important;
}

.araa-app-shell .select2-dropdown,
.araa-app-shell .dropdown-menu,
.araa-app-shell details > ul {
    border: 1px solid var(--araa-border) !important;
    border-radius: 9px !important;
    background: var(--araa-surface-raised) !important;
    box-shadow: var(--araa-shadow) !important;
    color: var(--araa-text) !important;
}

.araa-app-shell .select2-results__option--highlighted,
.araa-app-shell .dropdown-menu > li > a:hover,
.araa-app-shell details > ul a:hover {
    background: var(--araa-accent-soft) !important;
    color: var(--araa-accent) !important;
}

.araa-app-shell label,
.araa-app-shell .control-label {
    color: var(--araa-text-soft);
    font-size: 12px;
    font-weight: 750;
}

.araa-app-shell .input-group-addon {
    border-color: var(--araa-border-strong) !important;
    background: var(--araa-surface-muted) !important;
    color: var(--araa-muted) !important;
}

/* Buttons */
.araa-app-shell .btn,
.araa-app-shell .tw-dw-btn {
    min-height: 35px;
    border-radius: 8px !important;
    font-weight: 750;
    box-shadow: none !important;
    transition: transform 140ms ease, filter 140ms ease, border-color 140ms ease;
}

.araa-app-shell .btn:hover,
.araa-app-shell .tw-dw-btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.araa-app-shell .btn-primary,
.araa-app-shell .tw-dw-btn-primary,
.araa-app-shell .bg-blue,
.araa-app-shell .btn-info {
    border-color: var(--araa-accent-strong) !important;
    background: linear-gradient(135deg, var(--araa-accent), var(--araa-accent-strong)) !important;
    color: var(--araa-accent-ink) !important;
}

.araa-app-shell .btn-success,
.araa-app-shell .tw-dw-btn-success {
    border-color: var(--araa-success) !important;
    background: var(--araa-success) !important;
    color: #071a11 !important;
}

.araa-app-shell .btn-default,
.araa-app-shell .tw-dw-btn-outline {
    border-color: var(--araa-border-strong) !important;
    background: var(--araa-surface-raised) !important;
    color: var(--araa-text) !important;
}

.araa-app-shell .btn-danger {
    border-color: var(--araa-danger) !important;
    background: var(--araa-danger) !important;
    color: #fff !important;
}

/* Tables and DataTables */
.araa-app-shell .table-responsive,
.araa-app-shell .dataTables_scroll,
.araa-app-shell .dataTables_wrapper {
    border-radius: 9px;
}

.araa-app-shell table.table,
.araa-app-shell table.dataTable {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0;
    background: transparent !important;
    color: var(--araa-text-soft);
}

.araa-app-shell table.table > thead > tr > th,
.araa-app-shell table.dataTable > thead > tr > th,
.araa-app-shell table > thead > tr > th {
    padding: 12px 13px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--araa-border-strong) !important;
    background: var(--araa-surface-muted) !important;
    color: var(--araa-text) !important;
    font-size: 11px;
    font-weight: 850;
    text-align: start;
    vertical-align: middle;
    white-space: nowrap;
}

.araa-app-shell table.table > tbody > tr > td,
.araa-app-shell table.dataTable > tbody > tr > td {
    padding: 11px 13px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--araa-border) !important;
    background: transparent !important;
    color: var(--araa-text-soft) !important;
    font-size: 11.5px;
    font-family: var(--araa-font) !important;
    vertical-align: middle;
}

.araa-app-shell .font-saudi-symbol,
.araa-app-shell .display_currency,
.araa-app-shell .total_sell,
.araa-app-shell .purchase_due,
.araa-app-shell .invoice_due,
.araa-app-shell .total_expense,
.araa-app-shell .total_sell_return {
    font-family: "SaudiRiyalSymbol", var(--araa-font) !important;
}

.araa-app-shell table.table-striped > tbody > tr:nth-of-type(odd),
.araa-app-shell table.dataTable.stripe > tbody > tr.odd {
    background: rgba(255, 255, 255, 0.018) !important;
}

html[data-araa-mode="light"] .araa-app-shell table.table-striped > tbody > tr:nth-of-type(odd),
html[data-araa-mode="light"] .araa-app-shell table.dataTable.stripe > tbody > tr.odd {
    background: rgba(18, 67, 92, 0.025) !important;
}

.araa-app-shell table.table > tbody > tr:hover,
.araa-app-shell table.dataTable > tbody > tr:hover {
    background: var(--araa-accent-soft) !important;
}

.araa-app-shell table.table > tfoot > tr > th,
.araa-app-shell table.table > tfoot > tr > td,
.araa-app-shell table.dataTable > tfoot > tr > th,
.araa-app-shell table.dataTable > tfoot > tr > td {
    padding: 11px 13px !important;
    border-color: var(--araa-border-strong) !important;
    background: var(--araa-surface-muted) !important;
    color: var(--araa-text) !important;
    font-weight: 850;
}

.araa-app-shell .dataTables_wrapper .dataTables_filter input,
.araa-app-shell .dataTables_wrapper .dataTables_length select {
    min-height: 34px;
    border-color: var(--araa-border-strong) !important;
    background: var(--araa-surface-raised) !important;
    color: var(--araa-text) !important;
}

.araa-app-shell .dataTables_wrapper .dataTables_info,
.araa-app-shell .dataTables_wrapper .dataTables_length,
.araa-app-shell .dataTables_wrapper .dataTables_filter {
    padding-block: 10px;
    color: var(--araa-muted) !important;
    font-size: 11px;
}

.araa-app-shell .pagination > li > a,
.araa-app-shell .pagination > li > span {
    border-color: var(--araa-border) !important;
    background: var(--araa-surface-raised) !important;
    color: var(--araa-text-soft) !important;
}

.araa-app-shell .pagination > .active > a,
.araa-app-shell .pagination > .active > span {
    border-color: var(--araa-accent) !important;
    background: var(--araa-accent) !important;
    color: var(--araa-accent-ink) !important;
}

.araa-app-shell .label-success,
.araa-app-shell .badge-success {
    background: var(--araa-success-soft) !important;
    color: var(--araa-success) !important;
}

.araa-app-shell .label-warning,
.araa-app-shell .badge-warning {
    background: var(--araa-warning-soft) !important;
    color: var(--araa-warning) !important;
}

.araa-app-shell .label-danger,
.araa-app-shell .badge-danger {
    background: var(--araa-danger-soft) !important;
    color: var(--araa-danger) !important;
}

/* Reports */
.araa-report-page .content > .row:first-child .box,
.araa-report-page .content .box.box-solid:first-child {
    background: var(--araa-surface-raised) !important;
}

.araa-report-page .nav-tabs-custom,
.araa-report-page .nav-tabs-custom > .tab-content {
    border-color: var(--araa-border) !important;
    background: var(--araa-surface) !important;
    color: var(--araa-text-soft) !important;
}

.araa-report-page .nav-tabs-custom > .nav-tabs {
    border-color: var(--araa-border) !important;
}

.araa-report-page .nav-tabs-custom > .nav-tabs > li > a {
    color: var(--araa-muted) !important;
}

.araa-report-page .nav-tabs-custom > .nav-tabs > li.active > a {
    border-color: var(--araa-border) !important;
    border-top-color: var(--araa-accent) !important;
    background: var(--araa-surface) !important;
    color: var(--araa-accent) !important;
}

.araa-report-print-header {
    display: none;
}

/* Accounting module theme bridge */
body.araa-app-shell .accounting-nav-wrap {
    overflow: hidden;
    border: 1px solid var(--araa-border) !important;
    border-radius: 12px !important;
    background: var(--araa-surface) !important;
    box-shadow: var(--araa-shadow-soft) !important;
}

body.araa-app-shell .accounting-nav-wrap .navbar {
    background: transparent !important;
}

body.araa-app-shell .accounting-nav-wrap .navbar-brand,
body.araa-app-shell .accounting-nav-wrap .navbar-nav > li > a {
    color: var(--araa-text-soft) !important;
}

body.araa-app-shell .accounting-nav-wrap .navbar-brand {
    color: var(--araa-text) !important;
}

body.araa-app-shell .accounting-nav-wrap .navbar-nav > li > a i,
body.araa-app-shell .accounting-nav-wrap .navbar-brand i {
    color: var(--araa-accent) !important;
}

body.araa-app-shell .accounting-nav-wrap .navbar-nav > li.active > a,
body.araa-app-shell .accounting-nav-wrap .navbar-nav > li > a:hover,
body.araa-app-shell .accounting-nav-wrap .navbar-nav > li > a:focus {
    background: var(--araa-accent-soft) !important;
    color: var(--araa-accent) !important;
}

body.araa-app-shell .accounting-shell,
body.araa-app-shell .accounting-shell .acc-page-title,
body.araa-app-shell .accounting-shell .acc-report-title,
body.araa-app-shell .accounting-shell .acc-metric-value {
    color: var(--araa-text) !important;
}

body.araa-app-shell .accounting-shell .acc-page-subtitle,
body.araa-app-shell .accounting-shell .acc-report-text,
body.araa-app-shell .accounting-shell .acc-metric-label,
body.araa-app-shell .accounting-shell .acc-help-list {
    color: var(--araa-muted) !important;
}

body.araa-app-shell .accounting-shell .acc-report-grid {
    gap: 16px !important;
}

body.araa-app-shell .accounting-shell .acc-report-card,
body.araa-app-shell .accounting-shell .acc-metric,
body.araa-app-shell .accounting-shell .acc-metric-card,
body.araa-app-shell .accounting-shell .acc-filter-panel,
body.araa-app-shell .accounting-shell .acc-section,
body.araa-app-shell .accounting-shell .acc-table-wrap {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--araa-border) !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, var(--araa-surface-raised), var(--araa-surface)) !important;
    box-shadow: var(--araa-shadow-soft) !important;
    color: var(--araa-text) !important;
}

body.araa-app-shell .accounting-shell .acc-report-card {
    min-height: 205px !important;
    border-top: 1px solid var(--araa-border) !important;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body.araa-app-shell .accounting-shell .acc-report-card::before {
    width: 4px;
    position: absolute;
    inset-block: 15px;
    inset-inline-start: 0;
    border-radius: 99px;
    background: var(--araa-accent);
    box-shadow: 0 0 18px rgba(76, 201, 234, 0.32);
    content: "";
}

body.araa-app-shell .accounting-shell .acc-report-card::after {
    width: 90px;
    height: 90px;
    position: absolute;
    inset-block-start: -48px;
    inset-inline-end: -35px;
    border: 1px solid rgba(76, 201, 234, 0.15);
    border-radius: 50%;
    background: repeating-radial-gradient(circle, transparent 0 7px, rgba(76, 201, 234, 0.04) 8px 9px);
    content: "";
    pointer-events: none;
}

body.araa-app-shell .accounting-shell .acc-report-card:hover {
    border-color: rgba(76, 201, 234, 0.3) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(-3px);
}

body.araa-app-shell .accounting-shell .acc-report-body {
    padding: 20px !important;
}

body.araa-app-shell .accounting-shell .acc-report-icon,
body.araa-app-shell .accounting-shell .acc-metric-icon {
    width: 45px !important;
    height: 45px !important;
    border: 1px solid rgba(76, 201, 234, 0.24);
    border-radius: 12px !important;
    background: var(--araa-accent-soft) !important;
    color: var(--araa-accent) !important;
}

body.araa-app-shell .accounting-shell .acc-report-title {
    margin-bottom: 9px !important;
    font-size: 16px !important;
    line-height: 1.45;
}

body.araa-app-shell .accounting-shell .acc-report-text {
    min-height: 66px !important;
}

body.araa-app-shell .accounting-shell .acc-btn-primary {
    border: 1px solid rgba(76, 201, 234, 0.35) !important;
    border-radius: 8px !important;
    background: var(--araa-accent-soft) !important;
    color: var(--araa-accent) !important;
    box-shadow: none !important;
}

body.araa-app-shell .accounting-shell .acc-btn-primary:hover,
body.araa-app-shell .accounting-shell .acc-btn-primary:focus {
    background: var(--araa-accent) !important;
    color: var(--araa-accent-ink) !important;
}

body.araa-app-shell .accounting-shell .table > thead > tr > th {
    border-color: var(--araa-border-strong) !important;
    background: var(--araa-surface-muted) !important;
    color: var(--araa-text) !important;
}

body.araa-app-shell .accounting-shell .table > tbody > tr > td,
body.araa-app-shell .accounting-shell .table > tfoot > tr > th,
body.araa-app-shell .accounting-shell .table > tfoot > tr > td {
    border-color: var(--araa-border) !important;
    background: transparent !important;
    color: var(--araa-text-soft) !important;
}

body.araa-app-shell .accounting-shell .box {
    border: 1px solid var(--araa-border) !important;
    border-top-width: 1px !important;
    border-radius: 12px !important;
    background: var(--araa-surface) !important;
    box-shadow: var(--araa-shadow-soft) !important;
}

/* Graphite system coherence */
.araa-app-shell .bg-white,
.araa-app-shell .white-bg,
.araa-app-shell .thumbnail,
.araa-app-shell .list-group-item,
.araa-app-shell .tab-content,
.araa-app-shell .tab-pane,
.araa-app-shell .pos-tab-content,
.araa-app-shell .small-box,
.araa-app-shell .info-box,
.araa-app-shell .info-box-content,
.araa-app-shell .widget-user,
.araa-app-shell .widget-user-header {
    border-color: var(--araa-border) !important;
    background: var(--araa-surface) !important;
    color: var(--araa-text-soft) !important;
}

.araa-app-shell .list-group-item {
    margin: 0 0 6px !important;
    padding: 11px 12px !important;
    border: 1px solid var(--araa-border) !important;
    border-radius: 9px !important;
    color: var(--araa-text-soft) !important;
    font-size: 12px !important;
    transition: 150ms ease;
}

.araa-app-shell .list-group-item:hover,
.araa-app-shell .list-group-item:focus,
.araa-app-shell .list-group-item.active {
    border-color: rgba(76, 201, 234, 0.34) !important;
    background: var(--araa-accent-soft) !important;
    color: var(--araa-accent) !important;
}

.araa-app-shell .nav-tabs {
    border-color: var(--araa-border) !important;
}

.araa-app-shell .nav-tabs-custom {
    overflow: hidden;
    border: 1px solid var(--araa-border) !important;
    border-radius: 12px !important;
    background: var(--araa-surface) !important;
    box-shadow: var(--araa-shadow-soft) !important;
}

.araa-app-shell .nav-tabs-custom > .nav-tabs {
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 !important;
    padding: 8px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--araa-border) !important;
    background: var(--araa-surface-raised) !important;
}

.araa-app-shell .nav-tabs-custom > .nav-tabs > li {
    float: none !important;
    margin: 0 !important;
    border: 0 !important;
}

.araa-app-shell .nav-tabs-custom > .nav-tabs > li > a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 !important;
    padding: 8px 13px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--araa-muted) !important;
    font-weight: 700;
}

.araa-app-shell .nav-tabs-custom > .nav-tabs > li > a:hover,
.araa-app-shell .nav-tabs-custom > .nav-tabs > li > a:focus {
    border-color: var(--araa-border-strong) !important;
    background: var(--araa-accent-soft) !important;
    color: var(--araa-text) !important;
}

.araa-app-shell .nav-tabs-custom > .nav-tabs > li.active > a,
.araa-app-shell .nav-tabs-custom > .nav-tabs > li.active > a:hover,
.araa-app-shell .nav-tabs-custom > .nav-tabs > li.active > a:focus {
    border-color: rgba(76, 201, 234, 0.4) !important;
    background: var(--araa-accent-soft) !important;
    color: var(--araa-accent) !important;
}

.araa-app-shell .nav-tabs-custom > .tab-content {
    padding: 14px !important;
    border: 0 !important;
    background: var(--araa-surface) !important;
    color: var(--araa-text-soft) !important;
}

.araa-app-shell .nav-tabs > li > a {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--araa-muted) !important;
}

.araa-app-shell .nav-tabs > li.active > a,
.araa-app-shell .nav-tabs > li.active > a:hover,
.araa-app-shell .nav-tabs > li.active > a:focus {
    border-color: var(--araa-border) !important;
    border-bottom-color: var(--araa-surface) !important;
    background: var(--araa-surface) !important;
    color: var(--araa-accent) !important;
}

.araa-app-shell table.table > tbody > tr.bg-danger,
.araa-app-shell table.dataTable > tbody > tr.bg-danger {
    background: var(--araa-danger-soft) !important;
    box-shadow: inset 4px 0 0 var(--araa-danger);
}

.araa-app-shell table.table > tbody > tr.bg-danger > td,
.araa-app-shell table.dataTable > tbody > tr.bg-danger > td {
    background: transparent !important;
    color: var(--araa-text) !important;
}

.araa-products-page .araa-product-tabs {
    margin-bottom: 18px;
}

.araa-products-page .araa-stock-report-tab {
    padding: 2px !important;
}

.araa-products-page .araa-stock-report-tab .dataTables_wrapper {
    padding: 10px !important;
    border: 1px solid var(--araa-border) !important;
    border-radius: 10px;
    background: var(--araa-surface-raised) !important;
}

.araa-products-page .araa-stock-report-tab .dataTables_scroll {
    overflow: hidden;
    border: 1px solid var(--araa-border-strong);
    border-radius: 9px;
    background: var(--araa-surface);
}

.araa-products-page .araa-stock-report-tab .dataTables_scrollHead {
    border: 0 !important;
    background: var(--araa-surface-muted) !important;
}

.araa-products-page .araa-stock-report-tab .dataTables_scrollBody {
    border: 0 !important;
    background: var(--araa-surface) !important;
    scrollbar-color: var(--araa-border-strong) var(--araa-surface);
    scrollbar-width: thin;
}

.araa-products-page .araa-stock-report-tab .dataTables_scrollBody::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.araa-products-page .araa-stock-report-tab .dataTables_scrollBody::-webkit-scrollbar-track {
    background: var(--araa-surface);
}

.araa-products-page .araa-stock-report-tab .dataTables_scrollBody::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--araa-border-strong);
}

.araa-app-shell .text-red,
.araa-app-shell .text-danger {
    color: var(--araa-danger) !important;
}

.araa-app-shell .text-orange,
.araa-app-shell .text-warning {
    color: var(--araa-warning) !important;
}

.araa-app-shell .text-info,
.araa-app-shell .text-primary {
    color: var(--araa-accent) !important;
}

.araa-app-shell .input-group-btn > .btn,
.araa-app-shell .btn-file,
.araa-app-shell .file-input .btn {
    min-height: 38px;
}

.araa-app-shell .file-input,
.araa-app-shell .file-preview,
.araa-app-shell .file-caption,
.araa-app-shell .file-preview-frame,
.araa-app-shell .kv-file-content {
    border-color: var(--araa-border) !important;
    background: var(--araa-surface-raised) !important;
    color: var(--araa-text-soft) !important;
}

/* Operations home */
.araa-dashboard {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px 28px 32px;
}

.araa-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 16px;
}

.araa-page-head__title {
    min-width: 0;
    margin-inline-end: 6px;
}

.araa-page-head__title h1 {
    margin: 0;
    color: var(--araa-text) !important;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.2px;
    line-height: 1.3;
}

.araa-page-head__title p {
    margin: 3px 0 0;
    color: var(--araa-muted);
    font-size: 13px;
    font-weight: 600;
}

.araa-page-head__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.araa-page-head__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-inline-start: auto;
}

.araa-filter--location {
    width: 172px;
}

.araa-app-shell .araa-filter--location .select2-container .select2-selection--single {
    height: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    border-radius: 9px !important;
    background: var(--araa-surface) !important;
}

.araa-app-shell .araa-filter--location .select2-selection__rendered {
    padding-inline: 14px 34px !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 42px !important;
}

.araa-app-shell .araa-filter--location .select2-selection__arrow {
    height: 42px !important;
}

.araa-filter--date {
    height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid var(--araa-border-strong);
    border-radius: 9px;
    background: var(--araa-surface);
    color: var(--araa-text);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.araa-filter--date:hover,
.araa-filter--date:focus-visible {
    border-color: var(--araa-accent);
    background: var(--araa-surface-raised);
}

.araa-filter__icon {
    width: 19px;
    height: 19px;
    color: var(--araa-text-soft);
}

.araa-filter__chevron {
    width: 16px;
    height: 16px;
    margin-inline-start: 8px;
    color: var(--araa-muted);
}

.araa-btn {
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 20px;
    border: 1px solid var(--araa-border-strong);
    border-radius: 9px;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 150ms ease, filter 150ms ease, border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.araa-btn svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.araa-btn--primary {
    min-width: 220px;
    border-color: transparent;
    background: var(--araa-btn-bg);
    color: var(--araa-btn-ink) !important;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--araa-accent) 22%, transparent);
}

.araa-btn--primary:hover,
.araa-btn--primary:focus-visible {
    filter: brightness(1.07);
    transform: translateY(-1px);
}

.araa-btn--ghost {
    min-width: 172px;
    color: var(--araa-text) !important;
}

.araa-btn--ghost:hover,
.araa-btn--ghost:focus-visible {
    border-color: var(--araa-accent);
    background: var(--araa-accent-soft);
    color: var(--araa-accent) !important;
}

.araa-btn--icon {
    width: 46px;
    padding: 0;
    color: var(--araa-text-soft) !important;
}

.araa-btn--icon:hover,
.araa-btn--icon:focus-visible {
    border-color: var(--araa-accent);
    color: var(--araa-accent) !important;
}

.araa-home-page .araa-pos-apps-launcher {
    display: none;
}

/* KPI cards */
.araa-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.araa-kpi {
    --kpi: var(--araa-accent);
    min-width: 0;
    min-height: 104px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    overflow: hidden;
    border: 1px solid var(--araa-border);
    border-radius: var(--araa-radius-sm);
    background: var(--araa-surface);
    box-shadow: var(--araa-shadow-soft);
    transition: border-color 160ms ease, transform 160ms ease;
}

.araa-kpi::before {
    width: 120px;
    height: 120px;
    position: absolute;
    inset-block-end: -70px;
    inset-inline-end: -40px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--kpi) 16%, transparent), transparent 70%);
    content: "";
    pointer-events: none;
}

.araa-kpi:hover {
    border-color: color-mix(in srgb, var(--kpi) 38%, var(--araa-border));
    transform: translateY(-2px);
}

.araa-kpi--sales {
    --kpi: var(--araa-accent);
}

.araa-kpi--net {
    --kpi: var(--araa-text-soft);
}

.araa-kpi--due {
    --kpi: var(--araa-warning);
}

.araa-kpi--expense {
    --kpi: var(--araa-muted);
}

.araa-kpi__text {
    min-width: 0;
    position: relative;
}

.araa-kpi__label {
    margin: 0 0 8px;
    overflow: hidden;
    color: var(--araa-text-soft);
    font-size: 15px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.araa-kpi__label .fa-info-circle {
    font-size: 12px;
    opacity: 0.7;
}

.araa-app-shell .araa-kpi__value {
    margin: 0;
    overflow: hidden;
    color: var(--araa-text) !important;
    font-size: clamp(21px, 1.7vw, 27px) !important;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.araa-app-shell .net,
.araa-app-shell .total_purchase,
.araa-app-shell .total_purchase_return {
    font-family: "SaudiRiyalSymbol", var(--araa-font) !important;
}

.araa-kpi__spark {
    width: clamp(62px, 34%, 108px);
    height: 44px;
    position: relative;
    flex: 0 0 auto;
    color: var(--kpi);
}

.araa-kpi__spark svg {
    display: block;
    overflow: visible;
}

.araa-kpi__spark path {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.araa-kpi__spark circle {
    fill: currentColor;
}

.araa-kpi__spark circle.is-last {
    stroke: color-mix(in srgb, currentColor 30%, transparent);
    stroke-width: 5;
    paint-order: stroke;
}

.araa-kpi__spark svg.is-flat {
    opacity: 0.45;
}

.araa-minis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: -6px;
}

.araa-mini {
    --tone: var(--araa-muted);
    --tone-soft: var(--araa-surface-muted);
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border: 1px solid var(--araa-border);
    border-radius: var(--araa-radius-sm);
    background: color-mix(in srgb, var(--araa-surface) 55%, transparent);
}

.araa-mini--rose {
    --tone: var(--araa-danger);
    --tone-soft: var(--araa-danger-soft);
}

.araa-mini--violet {
    --tone: var(--araa-violet);
    --tone-soft: var(--araa-violet-soft);
}

.araa-mini--amber {
    --tone: var(--araa-warning);
    --tone-soft: var(--araa-warning-soft);
}

.araa-mini--slate {
    --tone: var(--araa-text-soft);
    --tone-soft: var(--araa-surface-muted);
}

.araa-mini__icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--tone-soft);
    color: var(--tone);
}

.araa-mini__icon svg {
    width: 19px;
    height: 19px;
}

.araa-mini__text {
    min-width: 0;
}

.araa-mini__label {
    margin: 0;
    overflow: hidden;
    color: var(--araa-muted);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.araa-mini__label .fa-info-circle {
    font-size: 11px;
    opacity: 0.7;
}

.araa-app-shell .araa-mini__value {
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--araa-text) !important;
    font-size: 16px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Panels */
.araa-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--araa-border);
    border-radius: var(--araa-radius-sm);
    background: var(--araa-surface);
    box-shadow: var(--araa-shadow-soft);
}

.araa-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 22px 16px;
}

.araa-panel__title {
    min-width: 0;
}

.araa-panel__title h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--araa-text) !important;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.35;
}

.araa-panel__title p {
    margin: 4px 0 0;
    color: var(--araa-muted);
    font-size: 12.5px;
    font-weight: 600;
}

.araa-panel__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.araa-panel__body {
    padding: 0 22px 20px;
}

.araa-panel__badge {
    width: 32px;
    height: 32px;
    display: inline-flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
}

.araa-panel__badge svg {
    width: 18px;
    height: 18px;
}

.araa-panel__badge--warning {
    background: var(--araa-warning-soft);
    color: var(--araa-warning);
}

.araa-link {
    color: var(--araa-accent) !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
}

.araa-link:hover {
    text-decoration: underline !important;
    text-underline-offset: 4px;
}

.araa-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 34px 20px;
    color: var(--araa-muted);
    font-size: 13px;
    text-align: center;
}

.araa-empty-state__icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--araa-surface-muted);
    color: var(--araa-muted);
    font-size: 18px;
}

/* Compliance center */
.araa-compliance {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 14px 20px;
    padding: 16px 18px;
    border: 1px solid var(--araa-border);
    border-radius: var(--araa-radius-sm);
    background-color: var(--araa-surface);
    background-image: var(--araa-pattern);
    background-size: 56px 56px;
    box-shadow: var(--araa-shadow-soft);
}

.araa-compliance__head {
    min-width: 210px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.araa-compliance__badge {
    width: 46px;
    height: 46px;
    display: inline-flex;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--araa-gold) 40%, transparent);
    border-radius: 13px;
    background: var(--araa-gold-soft);
    color: var(--araa-gold);
}

.araa-compliance__badge svg {
    width: 24px;
    height: 24px;
}

.araa-compliance__head h2 {
    margin: 0;
    color: var(--araa-text) !important;
    font-size: 17px;
    font-weight: 800;
}

.araa-compliance__head p {
    margin: 2px 0 0;
    color: var(--araa-muted);
    font-size: 12px;
    font-weight: 600;
}

.araa-compliance__items {
    min-width: 0;
    display: grid;
    flex: 1 1 520px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.araa-check {
    --tone: var(--araa-muted);
    --tone-soft: var(--araa-surface-muted);
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--araa-border);
    border-inline-start: 3px solid var(--tone);
    border-radius: 11px;
    background: var(--araa-surface-raised);
    color: var(--araa-text) !important;
    text-decoration: none !important;
    transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.araa-check:hover,
.araa-check:focus-visible {
    border-color: color-mix(in srgb, var(--tone) 50%, var(--araa-border));
    box-shadow: var(--araa-shadow-soft);
    transform: translateY(-1px);
}

.araa-check--ok {
    --tone: var(--araa-success);
    --tone-soft: var(--araa-success-soft);
}

.araa-check--warning {
    --tone: var(--araa-warning);
    --tone-soft: var(--araa-warning-soft);
}

.araa-check--danger {
    --tone: var(--araa-danger);
    --tone-soft: var(--araa-danger-soft);
}

.araa-check--neutral {
    --tone: var(--araa-accent);
    --tone-soft: var(--araa-accent-soft);
}

.araa-check__icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--tone-soft);
    color: var(--tone);
}

.araa-check__icon svg {
    width: 21px;
    height: 21px;
}

.araa-check__body {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1px;
}

.araa-check__label {
    overflow: hidden;
    color: var(--araa-muted);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.araa-app-shell .araa-check__value {
    overflow: hidden;
    color: var(--araa-text) !important;
    font-size: 15px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.araa-app-shell .araa-check__hint {
    overflow: hidden;
    color: var(--araa-muted) !important;
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.araa-check__go {
    color: var(--araa-muted);
    font-size: 12px;
}

[dir="ltr"] .araa-check__go i {
    transform: scaleX(-1);
}

/* Loading skeletons instead of spinners */
.araa-skeleton {
    width: 96px;
    height: 0.95em;
    display: inline-block;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--araa-surface-muted) 25%, var(--araa-surface-hover) 50%, var(--araa-surface-muted) 75%);
    background-size: 200% 100%;
    vertical-align: middle;
    animation: araa-shimmer 1.2s ease-in-out infinite;
}

.araa-kpi__value .fa-sync,
.araa-mini__value .fa-sync {
    display: none;
}

.araa-kpi__value:has(> .fa-sync)::before,
.araa-mini__value:has(> .fa-sync)::before {
    width: 120px;
    height: 0.9em;
    display: inline-block;
    border-radius: 7px;
    background: linear-gradient(90deg, var(--araa-surface-muted) 25%, var(--araa-surface-hover) 50%, var(--araa-surface-muted) 75%);
    background-size: 200% 100%;
    content: "";
    vertical-align: middle;
    animation: araa-shimmer 1.2s ease-in-out infinite;
}

.araa-mini__value:has(> .fa-sync)::before {
    width: 70px;
}

@keyframes araa-shimmer {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: -100% 0;
    }
}

/* Quick navigation (Ctrl+K) */
.araa-topbar__search {
    min-width: 0;
    height: 38px;
    display: inline-flex;
    flex: 0 1 260px;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border: 1px solid var(--araa-border-strong);
    border-radius: 10px;
    background: var(--araa-bg-soft);
    color: var(--araa-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease;
}

.araa-topbar__search:hover,
.araa-topbar__search:focus-visible {
    border-color: var(--araa-accent);
    color: var(--araa-text);
}

.araa-topbar__search svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.araa-topbar__search span {
    flex: 1;
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.araa-kbd {
    padding: 1px 6px;
    border: 1px solid var(--araa-border-strong);
    border-radius: 6px;
    background: var(--araa-surface);
    color: var(--araa-muted);
    font-family: var(--araa-font-latin);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.araa-command {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 16px;
    background: rgba(5, 12, 20, 0.55);
    backdrop-filter: blur(3px);
}

.araa-command.is-open {
    display: flex;
}

.araa-command__panel {
    width: min(620px, 100%);
    overflow: hidden;
    border: 1px solid var(--araa-border-strong);
    border-radius: 16px;
    background: var(--araa-surface-raised);
    box-shadow: var(--araa-shadow);
    color: var(--araa-text);
    font-family: var(--araa-font);
    animation: araa-pop-in 160ms ease-out;
}

.araa-command__field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--araa-border);
}

.araa-command__field svg {
    width: 20px;
    height: 20px;
    color: var(--araa-muted);
}

.araa-command__field input {
    min-width: 0;
    flex: 1;
    border: 0 !important;
    outline: none;
    background: transparent !important;
    color: var(--araa-text) !important;
    font: inherit;
    font-size: 16px;
    box-shadow: none !important;
}

.araa-command__list {
    max-height: min(60vh, 440px);
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    list-style: none;
}

.araa-command__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--araa-text-soft);
    cursor: pointer;
}

.araa-command__item[aria-selected="true"] {
    background: var(--araa-accent-soft);
    color: var(--araa-text);
}

.araa-command__item i {
    width: 30px;
    height: 30px;
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--araa-surface-muted);
    color: var(--araa-accent);
    font-size: 13px;
}

.araa-command__text {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.araa-command__text strong {
    overflow: hidden;
    color: inherit;
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.araa-command__text small {
    color: var(--araa-muted) !important;
    font-size: 11.5px;
}

.araa-command__empty {
    padding: 22px;
    color: var(--araa-muted);
    font-size: 13px;
    text-align: center;
}

.araa-command__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 9px 16px;
    border-top: 1px solid var(--araa-border);
    color: var(--araa-muted);
    font-size: 11.5px;
}

@keyframes araa-pop-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
}

/* Gentle page entrance */
@media screen and (prefers-reduced-motion: no-preference) {
    .araa-app-shell #scrollable-container > * {
        animation: araa-page-in 280ms ease-out both;
    }
}

/* Opacity only: a transform here would re-anchor fixed modals inside the page while it runs */
@keyframes araa-page-in {
    from {
        opacity: 0;
    }
}

@media (max-width: 1150px) {
    .araa-topbar__search {
        flex-basis: 38px;
        width: 38px;
        padding: 0;
        justify-content: center;
    }

    .araa-topbar__search span,
    .araa-topbar__search .araa-kbd {
        display: none;
    }
}
/* Operations grid */
.araa-ops-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(330px, 1fr);
    align-items: start;
    gap: 20px;
}

.araa-ops-grid > :only-child {
    grid-column: 1 / -1;
}

.araa-ops-main,
.araa-ops-side {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Sales tracker */
.araa-sales-tracker .araa-panel__tools {
    flex: 1 1 360px;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.araa-search {
    width: auto;
    max-width: 346px;
    position: relative;
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    margin: 0;
}

.araa-search svg {
    width: 18px;
    height: 18px;
    position: absolute;
    inset-inline-start: 13px;
    color: var(--araa-muted);
    pointer-events: none;
}

.araa-app-shell .araa-search input {
    width: 100%;
    height: 42px;
    min-height: 42px;
    padding-inline: 40px 14px !important;
    background: var(--araa-bg-soft) !important;
    font-size: 13px;
}

.araa-app-shell .araa-search input::placeholder {
    color: var(--araa-muted);
    opacity: 1;
}

.araa-select {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
}

.araa-select svg {
    width: 16px;
    height: 16px;
    position: absolute;
    inset-inline-end: 13px;
    color: var(--araa-muted);
    pointer-events: none;
}

.araa-app-shell .araa-select select {
    height: 42px;
    min-height: 42px;
    min-width: 152px;
    padding-inline: 14px 38px !important;
    background: var(--araa-bg-soft) !important;
    font-size: 13px;
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.araa-table-wrap {
    position: relative;
    margin: 0 12px 12px;
    overflow-x: auto;
    border: 1px solid var(--araa-border);
    border-radius: 9px;
}

.araa-sales-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.araa-app-shell .araa-sales-table > thead > tr > th {
    padding: 13px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--araa-border) !important;
    background: var(--araa-surface-muted) !important;
    color: var(--araa-text-soft) !important;
    font-size: 13px;
    font-weight: 700;
    text-align: start;
    white-space: nowrap;
}

.araa-sales-table > tbody > tr > td {
    padding: 13px 18px;
    border-bottom: 1px solid var(--araa-border);
    color: var(--araa-text-soft);
    font-size: 13.5px;
    vertical-align: middle;
    white-space: nowrap;
}

.araa-sales-table > tbody > tr:last-child > td {
    border-bottom: 0;
}

.araa-sales-table > tbody > tr {
    transition: background-color 120ms ease;
}

.araa-sales-table > tbody > tr:hover {
    background: var(--araa-surface-hover);
}

.araa-app-shell .araa-invoice-link {
    color: var(--araa-accent) !important;
    font-family: var(--araa-font-latin);
    font-weight: 700;
    letter-spacing: 0.2px;
    text-decoration: none !important;
}

.araa-app-shell .araa-invoice-link:hover {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.araa-cell-strong {
    max-width: 230px;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    color: var(--araa-text) !important;
    font-weight: 600;
    text-overflow: ellipsis;
}

.araa-cell-method {
    max-width: 150px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.araa-time {
    color: var(--araa-text-soft);
    font-family: var(--araa-font-latin);
}

.araa-app-shell .araa-cell-date {
    display: block;
    color: var(--araa-muted) !important;
    font-size: 11px;
}

.araa-cell-amount {
    color: var(--araa-text) !important;
    font-weight: 700;
}

.araa-status {
    --tone: var(--araa-muted);
    --tone-soft: var(--araa-surface-muted);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px;
    border: 1px solid color-mix(in srgb, var(--tone) 26%, transparent);
    border-radius: 999px;
    background: var(--tone-soft);
    color: var(--tone);
    font-size: 12px;
    font-weight: 700;
}

.araa-status::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
    content: "";
}

.araa-status--paid {
    --tone: var(--araa-success);
    --tone-soft: var(--araa-success-soft);
}

.araa-status--partial {
    --tone: var(--araa-warning);
    --tone-soft: var(--araa-warning-soft);
}

.araa-status--due {
    --tone: var(--araa-danger);
    --tone-soft: var(--araa-danger-soft);
}

.araa-cell-action {
    width: 1%;
    text-align: end;
}

.araa-row-action {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--araa-muted);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.araa-row-action svg {
    width: 18px;
    height: 18px;
}

.araa-row-action:hover,
.araa-row-action:focus-visible {
    background: var(--araa-accent-soft);
    color: var(--araa-accent);
}

.araa-sales-empty td {
    padding: 26px 18px !important;
    color: var(--araa-muted) !important;
    text-align: center;
}

/* Recent activity */
.araa-activity-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 2px 6px 20px;
    list-style: none;
}

.araa-activity-list li {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 4px 16px;
}

.araa-activity-list li + li {
    border-inline-start: 1px solid var(--araa-border);
}

.araa-activity-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--araa-accent) 22%, transparent);
    border-radius: 50%;
    background: var(--araa-accent-soft);
    color: var(--araa-accent);
}

.araa-activity-icon svg {
    width: 21px;
    height: 21px;
}

.araa-activity-body {
    min-width: 0;
    display: grid;
    flex: 1;
    gap: 3px;
}

.araa-activity-body time {
    justify-self: end;
    color: var(--araa-muted);
    font-family: var(--araa-font-latin);
    font-size: 11.5px;
}

.araa-activity-body strong {
    display: -webkit-box;
    overflow: hidden;
    color: var(--araa-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.araa-activity-body > span {
    overflow: hidden;
    color: var(--araa-muted);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Today's performance */
.araa-today__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px 4px;
}

.araa-today__figure {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
}

.araa-today__figure strong {
    color: var(--araa-text);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.araa-trend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--araa-muted);
    white-space: nowrap;
}

[dir="rtl"] .araa-trend {
    flex-direction: row-reverse;
}

.araa-trend svg {
    width: 17px;
    height: 17px;
}

.araa-trend b {
    font-family: var(--araa-font-latin);
    font-size: 14px;
    font-weight: 800;
}

.araa-trend small {
    color: var(--araa-muted) !important;
    font-size: 12px;
}

.araa-trend.is-up svg,
.araa-trend.is-up b {
    color: var(--araa-success);
}

.araa-trend.is-down svg,
.araa-trend.is-down b {
    color: var(--araa-danger);
}

.araa-trend.is-down svg {
    transform: rotate(180deg);
}

.araa-hour-chart {
    height: 204px;
    position: relative;
    margin: 6px 12px 14px;
    color: var(--araa-accent);
    direction: ltr;
}

.araa-hour-chart svg {
    display: block;
    overflow: visible;
}

.araa-hour-chart__grid line {
    stroke: var(--araa-border);
    stroke-dasharray: 3 4;
}

.araa-hour-chart__grid line:first-of-type {
    stroke-dasharray: none;
}

.araa-hour-chart text {
    fill: var(--araa-muted);
    font-family: var(--araa-font-latin);
    font-size: 11px;
}

.araa-hour-chart__line {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
    filter: drop-shadow(0 4px 10px color-mix(in srgb, currentColor 35%, transparent));
}

.araa-hour-chart__dot {
    fill: currentColor;
    stroke: var(--araa-surface);
    stroke-width: 1.5;
    transition: r 120ms ease;
}

.araa-hour-chart__dot.is-last,
.araa-hour-chart__dot.is-active {
    r: 5;
    stroke: color-mix(in srgb, currentColor 30%, transparent);
    stroke-width: 6;
    paint-order: stroke;
}

.araa-hour-chart__guide {
    stroke: var(--araa-border-strong);
    stroke-dasharray: 3 3;
    opacity: 0;
    transition: opacity 120ms ease;
}

.araa-hour-chart__guide.is-visible {
    opacity: 1;
}

.araa-hour-chart__hit {
    fill: transparent;
    cursor: crosshair;
}

.araa-chart-tip {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    border: 1px solid var(--araa-border-strong);
    border-radius: 9px;
    background: var(--araa-surface-raised);
    box-shadow: var(--araa-shadow);
    color: var(--araa-text);
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 12px));
    transition: opacity 120ms ease;
}

.araa-chart-tip span {
    color: var(--araa-muted);
    font-family: var(--araa-font-latin);
    font-size: 11px;
}

.araa-chart-tip.is-visible {
    opacity: 1;
}

.araa-hour-chart__empty {
    position: absolute;
    inset: 0 0 28px 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--araa-muted);
    font-family: var(--araa-font);
    font-size: 12.5px;
    font-weight: 600;
    pointer-events: none;
}

.araa-hour-chart .araa-empty-state {
    height: 100%;
    direction: rtl;
}

[dir="ltr"] .araa-hour-chart .araa-empty-state {
    direction: ltr;
}

/* Sales by location */
.araa-branch-list {
    display: grid;
    gap: 17px;
    margin: 0;
    padding: 2px 22px 22px;
    list-style: none;
}

.araa-branch-list li {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(56px, 1fr) auto;
    align-items: center;
    gap: 16px;
}

.araa-branch-list__name {
    overflow: hidden;
    color: var(--araa-text-soft);
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.araa-branch-list__bar {
    height: 20px;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    background: var(--araa-surface-muted);
}

.araa-branch-list__bar i {
    width: var(--araa-share, 0%);
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--araa-accent-strong), var(--araa-accent));
    animation: araa-bar-in 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

[dir="rtl"] .araa-branch-list__bar i {
    background: linear-gradient(270deg, var(--araa-accent-strong), var(--araa-accent));
}

.araa-branch-list li:first-child .araa-branch-list__bar i {
    box-shadow: 0 0 18px color-mix(in srgb, var(--araa-accent) 40%, transparent);
}

.araa-branch-list li:not(:first-child) .araa-branch-list__bar i {
    opacity: 0.78;
}

.araa-branch-list__value {
    color: var(--araa-text);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

@keyframes araa-bar-in {
    from {
        width: 0;
    }
}

/* Analytics and alerts */
.araa-analytics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

/* Home analytics: 30-day trend and financial-year months */
.araa-insight {
    display: flex;
    flex-direction: column;
}

.araa-insight__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    color: var(--araa-muted);
    font-size: 12px;
    font-weight: 600;
}

.araa-insight__legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.araa-insight__legend span::before {
    width: 16px;
    height: 0;
    border-top: 3px solid var(--araa-accent);
    border-radius: 3px;
    content: "";
}

.araa-insight__legend .is-previous::before {
    border-top: 2px dashed var(--araa-muted);
    opacity: 0.8;
}

.araa-insight__stats {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
    margin: 0 22px;
    border: 1px solid var(--araa-border);
    border-radius: 14px;
    background: var(--araa-surface-muted);
    overflow: hidden;
}

.araa-insight__stat {
    min-width: 0;
    padding: 12px 14px;
}

.araa-insight__stat + .araa-insight__stat {
    border-inline-start: 1px solid var(--araa-border);
}

.araa-insight__stat dt {
    margin: 0 0 6px;
    overflow: hidden;
    color: var(--araa-muted);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.araa-insight__stat dd {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 0;
}

.araa-insight__stat strong {
    color: var(--araa-text);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.araa-insight__stat.is-lead strong {
    font-size: 20px;
    font-weight: 800;
}

.araa-insight__stat small {
    width: 100%;
    overflow: hidden;
    color: var(--araa-muted);
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.araa-insight__stat .araa-trend b {
    font-size: 13px;
}

.araa-insight__stat .araa-trend svg {
    width: 15px;
    height: 15px;
}

.araa-trend-chart,
.araa-month-chart {
    height: 236px;
    position: relative;
    margin: 14px 16px 6px;
    color: var(--araa-accent);
    direction: ltr;
}

.araa-trend-chart svg,
.araa-month-chart svg {
    display: block;
    overflow: visible;
}

.araa-insight-chart__grid line {
    stroke: var(--araa-border);
    stroke-dasharray: 3 4;
}

.araa-insight-chart__grid line:first-of-type {
    stroke-dasharray: none;
}

.araa-trend-chart text,
.araa-month-chart text {
    fill: var(--araa-muted);
    font-family: var(--araa-font);
    font-size: 11px;
}

.araa-insight-chart__tick {
    font-family: var(--araa-font-latin) !important;
}

.araa-insight-chart__guide {
    stroke: var(--araa-border-strong);
    stroke-dasharray: 3 3;
    opacity: 0;
    transition: opacity 120ms ease;
}

.araa-insight-chart__guide.is-visible {
    opacity: 1;
}

.araa-insight-chart__hit {
    fill: transparent;
    cursor: crosshair;
}

.araa-insight-chart__empty {
    position: absolute;
    inset: 0 0 26px 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--araa-muted);
    font-family: var(--araa-font);
    font-size: 12.5px;
    font-weight: 600;
    pointer-events: none;
}

.araa-trend-chart__line {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
    filter: drop-shadow(0 4px 10px color-mix(in srgb, currentColor 35%, transparent));
}

.araa-trend-chart__previous {
    fill: none;
    stroke: var(--araa-muted);
    stroke-dasharray: 5 5;
    stroke-linecap: round;
    stroke-width: 1.6;
    opacity: 0.7;
}

.araa-trend-chart__dot {
    fill: currentColor;
    stroke: color-mix(in srgb, currentColor 28%, transparent);
    stroke-width: 6;
    paint-order: stroke;
}

.araa-trend-chart__dot.is-previous {
    fill: var(--araa-muted);
    stroke: var(--araa-surface);
    stroke-width: 2;
}

.araa-month-chart__ghost {
    fill: var(--araa-muted);
    opacity: 0.16;
}

.araa-month-chart__bar {
    fill: currentColor;
    opacity: 0.85;
}

.araa-month-chart__bar.is-current {
    fill: var(--araa-gold);
    opacity: 1;
}

.araa-month-chart svg.is-entering .araa-month-chart__bar,
.araa-month-chart svg.is-entering .araa-month-chart__ghost {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: araa-bar-grow 650ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes araa-bar-grow {
    from {
        transform: scaleY(0);
    }
}

.araa-month-chart__label.is-current {
    fill: var(--araa-gold-ink);
    font-weight: 700;
}

.araa-month-chart__label.is-future {
    opacity: 0.55;
}

.araa-month-chart__average {
    stroke: var(--araa-gold);
    stroke-dasharray: 6 4;
    stroke-width: 1.4;
}

.araa-month-chart__average-label {
    fill: var(--araa-gold-ink) !important;
    font-weight: 700;
}

.araa-month-chart__focus {
    fill: var(--araa-text);
    opacity: 0;
    transition: opacity 120ms ease;
    pointer-events: none;
}

.araa-month-chart__focus.is-visible {
    opacity: 0.05;
}

.araa-chart-tip--rich {
    align-items: flex-start;
    gap: 3px;
    padding: 8px 12px;
    direction: rtl;
    text-align: start;
}

[dir="ltr"] .araa-chart-tip--rich {
    direction: ltr;
}

.araa-chart-tip--rich .araa-chart-tip__label {
    font-family: var(--araa-font);
    font-weight: 600;
}

.araa-chart-tip--rich strong {
    font-size: 14px;
}

.araa-chart-tip--rich em {
    color: var(--araa-muted);
    font-size: 11.5px;
    font-style: normal;
}

.araa-chart-tip--rich em i {
    font-style: normal;
}

.araa-chart-tip--rich b {
    margin-inline-start: 4px;
    font-family: var(--araa-font-latin);
}

.araa-chart-tip--rich b.is-up {
    color: var(--araa-success);
}

.araa-chart-tip--rich b.is-down {
    color: var(--araa-danger);
}

.araa-insight__split {
    margin: 6px 22px 20px;
    padding-top: 14px;
    border-top: 1px solid var(--araa-border);
}

.araa-insight__split h3 {
    margin: 0 0 12px;
    color: var(--araa-text-soft);
    font-size: 13px;
    font-weight: 700;
}

.araa-share-list {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.araa-share-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(60px, 1.3fr) 48px auto;
    align-items: center;
    gap: 12px;
}

.araa-share-list__name {
    overflow: hidden;
    color: var(--araa-text-soft);
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.araa-share-list__bar {
    height: 8px;
    position: relative;
    overflow: hidden;
    border-radius: 999px;
    background: var(--araa-surface-muted);
}

.araa-share-list__bar i {
    width: var(--araa-share, 0%);
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    border-radius: 999px;
    background: var(--araa-accent);
    animation: araa-bar-in 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.araa-share-list li:not(:first-child) .araa-share-list__bar i {
    opacity: 0.6;
}

.araa-share-list__pct {
    color: var(--araa-muted);
    font-family: var(--araa-font-latin);
    font-size: 12px;
    font-weight: 700;
    text-align: end;
}

.araa-share-list__value {
    color: var(--araa-text);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

/* The figures follow the panel width, not the window (the panels sit two to a row on desktop) */
.araa-insight {
    container-type: inline-size;
}

@container (max-width: 660px) {
    .araa-insight__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .araa-insight__stat:nth-child(odd) {
        border-inline-start: 0;
    }

    .araa-insight__stat:nth-child(n + 3) {
        border-top: 1px solid var(--araa-border);
    }
}

@container (max-width: 440px) {
    .araa-insight__stats,
    .araa-insight__split {
        margin-inline: 14px;
    }

    .araa-trend-chart,
    .araa-month-chart {
        height: 210px;
        margin-inline: 8px;
    }

    .araa-share-list li {
        grid-template-columns: minmax(0, 1fr) minmax(48px, 1fr) auto;
    }

    .araa-share-list__pct {
        display: none;
    }
}

.araa-alerts {
    display: grid;
    gap: 20px;
}

.araa-dues {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-block: 20px;
}

.araa-dues__panel {
    min-width: 0;
}

.araa-dues__panel .araa-panel__tools {
    width: 220px;
}

.araa-dues__panel .dataTables_wrapper {
    padding: 0 !important;
}

.araa-table-feedback {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--araa-danger, #b42318);
    border-radius: 8px;
    background: var(--araa-danger-soft, #fef3f2);
    color: var(--araa-danger, #b42318);
}

.araa-table-feedback[hidden] {
    display: none !important;
}

.araa-alert-panel .araa-panel__tools {
    width: 220px;
}

.araa-alert-panel .dataTables_wrapper {
    padding: 0 !important;
}

/* ARAA POS apps dialog in the active theme */
html[data-araa-theme] .araa-pos-apps-overlay {
    background: rgba(5, 12, 18, 0.66);
}

html[data-araa-theme] .araa-pos-apps-dialog {
    border-color: var(--araa-border-strong);
    background: var(--araa-surface);
    color: var(--araa-text);
}

html[data-araa-theme] .araa-pos-apps-header,
html[data-araa-theme] .araa-pos-apps-footer {
    border-color: var(--araa-border);
    background: var(--araa-surface-raised);
}

html[data-araa-theme] .araa-pos-apps-footer {
    background: transparent;
}

html[data-araa-theme] .araa-pos-apps-heading,
html[data-araa-theme] .araa-pos-app-card h3 {
    color: var(--araa-text);
}

html[data-araa-theme] .araa-pos-apps-subheading,
html[data-araa-theme] .araa-pos-app-card p,
html[data-araa-theme] .araa-pos-apps-footer-note,
html[data-araa-theme] .araa-pos-apps-dismiss {
    color: var(--araa-muted);
}

html[data-araa-theme] .araa-pos-app-card {
    border-color: var(--araa-border);
    background: var(--araa-surface-raised);
    box-shadow: none;
}

html[data-araa-theme] .araa-pos-apps-brand,
html[data-araa-theme] .araa-pos-app-download {
    border-color: transparent;
    background: var(--araa-btn-bg);
    color: var(--araa-btn-ink) !important;
}

html[data-araa-theme] .araa-pos-app-download:hover,
html[data-araa-theme] .araa-pos-app-download:focus-visible {
    border-color: transparent;
    background: var(--araa-accent-strong);
    color: var(--araa-btn-ink) !important;
}

html[data-araa-theme] .araa-pos-app-icon {
    background: var(--araa-accent-soft);
    color: var(--araa-accent);
}

html[data-araa-theme] .araa-pos-apps-close {
    color: var(--araa-muted);
}

html[data-araa-theme] .araa-pos-apps-close:hover,
html[data-araa-theme] .araa-pos-apps-close:focus-visible {
    background: var(--araa-surface-muted);
    color: var(--araa-text);
}

html[data-araa-theme] .araa-pos-apps-dismiss input {
    accent-color: var(--araa-accent);
}

/* Popovers and tooltips */
.araa-app-shell .popover {
    border: 1px solid var(--araa-border-strong);
    border-radius: 10px;
    background: var(--araa-surface-raised);
    box-shadow: var(--araa-shadow);
    color: var(--araa-text-soft);
    font-family: var(--araa-font);
}

.araa-app-shell .popover-title {
    border-color: var(--araa-border);
    background: var(--araa-surface-muted);
    color: var(--araa-text);
}

.araa-app-shell .popover.bottom > .arrow::after {
    border-bottom-color: var(--araa-surface-raised);
}

.araa-app-shell .popover.top > .arrow::after {
    border-top-color: var(--araa-surface-raised);
}

.araa-app-shell .popover.left > .arrow::after {
    border-left-color: var(--araa-surface-raised);
}

.araa-app-shell .popover.right > .arrow::after {
    border-right-color: var(--araa-surface-raised);
}

.araa-app-shell .popover > .arrow {
    border-color: transparent;
}

.araa-app-shell .popover.bottom > .arrow {
    border-bottom-color: var(--araa-border-strong);
}

.araa-app-shell .popover.top > .arrow {
    border-top-color: var(--araa-border-strong);
}

/* Frame responsiveness */
@media (max-width: 1279px) {
    .araa-kpis,
    .araa-minis {
        gap: 14px;
    }

    .araa-kpi {
        padding: 16px 18px;
    }

    .araa-ops-grid {
        grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
    }
}

@media (max-width: 1439px) {
    .araa-app-shell .araa-sales-table > thead > tr > th,
    .araa-sales-table > tbody > tr > td {
        padding-inline: 10px !important;
    }

    .araa-cell-strong {
        max-width: 128px;
    }

    .araa-activity-list li {
        gap: 11px;
        padding-inline: 12px;
    }

    .araa-activity-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .araa-cell-method {
        max-width: 96px;
    }
}

@media (max-width: 1150px) {
    .araa-kpis,
    .araa-minis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .araa-ops-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .araa-ops-side {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

@media (max-width: 1023px) {
    .araa-sidebar {
        display: flex !important;
        position: fixed !important;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 1001;
        width: min(86vw, 300px) !important;
        min-width: 0;
        height: 100dvh;
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform 220ms ease-out, visibility 220ms;
        box-shadow: var(--araa-shadow);
    }

    .araa-sidebar.small-view-side-active {
        transform: translateX(0);
        visibility: visible;
    }

    html[dir="rtl"] .araa-sidebar { transform: translateX(105%); }
    html[dir="rtl"] .araa-sidebar.small-view-side-active { transform: translateX(0); }

    .araa-sidebar:not(.small-view-side-active) { pointer-events: none; }
    .overlay { position: fixed; inset: 0; z-index: 1000; display: block !important; background: rgba(9, 22, 35, .62); opacity: 0; visibility: hidden; transition: opacity 220ms ease-out, visibility 220ms; }
    .overlay.araa-overlay-active { opacity: 1; visibility: visible; }
    body.araa-drawer-open { overflow: hidden; }

    .araa-sidebar .araa-brand {
        height: auto;
        min-height: 130px;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        padding: 12px 18px;
    }

    .araa-sidebar .araa-brand__mark {
        width: 74px;
        height: 74px;
    }

    .araa-sidebar .araa-brand__copy { align-items: center; }
    .araa-sidebar .araa-brand__wordmark { width: min(66vw, 178px); max-height: 56px; }

    .araa-sidebar .araa-online-dot {
        display: none;
    }

    .araa-app-shell .araa-sidebar .araa-nav-link {
        min-height: 48px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px !important;
        padding: 8px 18px !important;
        font-size: 14px !important;
        text-align: start;
    }

    .araa-sidebar .araa-nav-link > .tw-truncate {
        display: block;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .araa-sidebar .araa-nav-chevron {
        width: 16px !important;
        height: 16px !important;
        display: block !important;
        flex: 0 0 auto;
        margin-inline-start: auto !important;
        color: var(--araa-rail-muted) !important;
    }

    .araa-sidebar .araa-nav-children {
        margin: 2px 14px 8px !important;
        padding: 6px !important;
        border: 1px solid var(--araa-rail-border);
        border-radius: 10px;
        background: var(--araa-rail-hover) !important;
    }

    .araa-sidebar .araa-nav-rail {
        display: none !important;
    }

    .araa-sidebar .araa-nav-children > div {
        display: grid;
        gap: 2px;
    }

    .araa-sidebar .araa-nav-children > div > * {
        margin: 0 !important;
    }

    .araa-sidebar .araa-nav-child-link {
        min-height: 40px;
        display: flex !important;
        align-items: center;
        gap: 10px;
        padding: 8px 12px !important;
        border-radius: 8px;
        color: var(--araa-rail-text) !important;
        font-size: 13px !important;
        text-decoration: none !important;
    }

    .araa-sidebar .araa-nav-child-link.is-active {
        background: var(--araa-rail-active-bg);
        color: var(--araa-rail-active-text) !important;
    }

    .araa-topbar__inner {
        padding-inline: 16px;
    }

    .araa-dashboard {
        padding: 18px 16px 26px;
    }

    .araa-footer {
        padding-inline: 16px;
    }

    .araa-nav-flyout {
        display: none;
    }
}
@media (min-width: 1024px) and (max-width: 1279px) {
    html[data-araa-nav="rail"] .araa-sidebar .araa-brand__wordmark { width: 100px; }
}
@media (min-width: 1024px) {
    .araa-sidebar.araa-sidebar-collapsed .araa-brand__wordmark { display: none; }
}

@media (min-width: 1024px) {
    .araa-sidebar { transition: transform 220ms ease-out, width 220ms ease-out, min-width 220ms ease-out; }
    .araa-sidebar.araa-sidebar-collapsed { width: 0 !important; min-width: 0 !important; transform: translateX(-100%); }
    html[dir="rtl"] .araa-sidebar.araa-sidebar-collapsed { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .araa-sidebar, .overlay { transition-duration: .01ms !important; }
}

@media (max-width: 767px) {
    .araa-dues {
        grid-template-columns: 1fr;
    }

    .araa-topbar__inner {
        gap: 8px;
        padding-block: 8px;
    }

    .araa-topbar__business strong {
        max-width: 42vw;
        font-size: 14px;
    }

    .araa-topbar__end {
        gap: 4px;
    }

    .araa-lang-switch a,
    .araa-lang-switch button {
        padding: 5px 8px;
        font-size: 12px;
    }

    .araa-user-menu {
        padding-inline-start: 6px;
    }

    .araa-page-head__title h1 {
        font-size: 22px;
    }

    .araa-page-head__filters,
    .araa-page-head__actions {
        width: 100%;
    }

    .araa-filter--location,
    .araa-filter--date {
        flex: 1 1 160px;
    }

    .araa-page-head__actions {
        margin-inline-start: 0;
    }

    .araa-page-head__actions .araa-btn--primary,
    .araa-page-head__actions .araa-btn--ghost {
        min-width: 0;
        flex: 1 1 0;
    }

    .araa-kpis,
    .araa-minis {
        gap: 12px;
    }

    .araa-kpi {
        min-height: 92px;
        padding: 14px;
    }

    .araa-kpi__label {
        font-size: 13px;
    }

    .araa-kpi__spark {
        width: 64px;
        height: 36px;
    }

    .araa-ops-side,
    .araa-analytics {
        grid-template-columns: minmax(0, 1fr);
    }

    .araa-panel__head {
        padding: 16px 16px 12px;
    }

    .araa-panel__tools,
    .araa-search {
        width: 100%;
        max-width: none;
    }

    .araa-sales-tracker .araa-panel__tools {
        flex-basis: 100%;
        flex-wrap: wrap;
    }

    .araa-select {
        flex: 1;
    }

    .araa-app-shell .araa-select select {
        width: 100%;
    }

    .araa-table-wrap {
        margin-inline: 8px;
    }

    .araa-sales-table {
        min-width: 700px;
    }

    .araa-activity-list {
        grid-template-columns: minmax(0, 1fr);
        padding-bottom: 12px;
    }

    .araa-activity-list li {
        padding-block: 10px;
    }

    .araa-activity-list li + li {
        border-inline-start: 0;
        border-top: 1px solid var(--araa-border);
    }

    .araa-today__figure strong {
        font-size: 23px;
    }

    .araa-footer {
        padding-block: 6px;
    }

    .araa-footer p {
        font-size: 10.5px;
    }
}

@media (max-width: 479px) {
    .araa-kpis,
    .araa-minis {
        grid-template-columns: minmax(0, 1fr);
    }

    .araa-lang-switch {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .araa-app-shell *,
    .araa-nav-flyout {
        animation: none !important;
        transition: none !important;
    }
}

/* Report pages and shared report components */
.araa-report-page .content {
    padding-top: 8px;
}

.araa-app-shell .araa-filter-card {
    margin-bottom: 18px !important;
    overflow: hidden;
    border-radius: var(--araa-radius-sm) !important;
}

.araa-app-shell .araa-filter-card__head {
    padding: 0 !important;
    border: 0 !important;
}

.araa-app-shell .araa-filter-card__head .box-title {
    width: 100%;
    display: block;
    margin: 0;
    padding: 0 !important;
}

.araa-app-shell .araa-filter-card__toggle {
    width: 100%;
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    color: var(--araa-text) !important;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none !important;
}

.araa-filter-card__icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--araa-accent-soft);
    color: var(--araa-accent);
    font-size: 14px;
}

.araa-filter-card__title {
    flex: 1;
    transition: color 150ms ease;
}

.araa-filter-card__chevron {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--araa-muted);
    transition: transform 180ms ease, color 180ms ease;
}

.araa-filter-card__toggle:not(.collapsed) .araa-filter-card__chevron {
    color: var(--araa-accent);
    transform: rotate(180deg);
}

.araa-filter-card__toggle:hover .araa-filter-card__title {
    color: var(--araa-accent);
}

.araa-app-shell .araa-filter-card__body {
    padding: 14px 6px 2px !important;
    border-top: 1px solid var(--araa-border);
}

.araa-app-shell .araa-filter-card__body .form-group {
    margin-bottom: 14px;
}

.araa-app-shell .araa-widget {
    border-radius: var(--araa-radius-sm) !important;
}

.araa-app-shell .araa-widget > div {
    padding: 16px 18px !important;
}

.araa-app-shell .araa-widget .box-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 0 2px 14px !important;
    border-bottom: 1px solid var(--araa-border) !important;
}

.araa-app-shell .araa-widget .box-header .box-tools {
    position: static;
    margin-inline-start: auto;
}

.araa-app-shell .araa-widget .box-header > small {
    width: 100%;
    color: var(--araa-muted) !important;
}

.araa-app-shell .araa-widget .box-header > br {
    display: none;
}

/* Date filter buttons used by the classic reports */
.araa-app-shell button[id$="_date_filter"]:not(.araa-filter),
.araa-app-shell button[id$="_date_range"]:not(.araa-filter) {
    min-height: 40px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 14px !important;
    border: 1px solid var(--araa-border-strong) !important;
    border-radius: 9px !important;
    background: var(--araa-surface) !important;
    color: var(--araa-text) !important;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

.araa-app-shell button[id$="_date_filter"]:not(.araa-filter):hover,
.araa-app-shell button[id$="_date_range"]:not(.araa-filter):hover {
    border-color: var(--araa-accent) !important;
    background: var(--araa-surface-raised) !important;
}

.araa-app-shell button[id$="_date_filter"]:not(.araa-filter) i,
.araa-app-shell button[id$="_date_range"]:not(.araa-filter) i {
    color: var(--araa-accent) !important;
}

.araa-app-shell .tw-dw-btn {
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* Primary page actions (Add, Print, Save...) share the accent button */
.araa-app-shell .tw-dw-btn.tw-bg-gradient-to-r,
.araa-app-shell .tw-dw-btn.tw-dw-btn-primary,
.araa-app-shell .araa-form-actions .tw-dw-btn.tw-dw-btn-error {
    border: 0 !important;
    background: var(--araa-btn-bg) !important;
    color: var(--araa-btn-ink) !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--araa-accent) 18%, transparent) !important;
}

.araa-app-shell .tw-dw-btn.tw-bg-gradient-to-r svg,
.araa-app-shell .tw-dw-btn.tw-dw-btn-primary svg,
.araa-app-shell .tw-dw-btn.tw-bg-gradient-to-r i,
.araa-app-shell .tw-dw-btn.tw-dw-btn-primary i {
    color: inherit !important;
}

.araa-app-shell a[class*="tw-text-white"]:not(.tw-dw-btn) {
    color: #fff !important;
}

.araa-app-shell button[id$="_date_filter"]:not(.araa-filter) > span,
.araa-app-shell button[id$="_date_range"]:not(.araa-filter) > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.araa-app-shell input[readonly][id*="date"] {
    cursor: pointer;
}

/* Tabs scroll sideways instead of squeezing their labels */
.araa-app-shell .nav-tabs-custom > .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-color: var(--araa-border-strong) transparent;
    scrollbar-width: thin;
}

.araa-app-shell .nav-tabs-custom > .nav-tabs > li {
    flex: 0 0 auto;
}

.araa-app-shell .nav-tabs-custom > .nav-tabs > li > a {
    white-space: nowrap;
}

.araa-app-shell .nav-tabs-custom > .nav-tabs > li > a i {
    opacity: 0.85;
}

/* Key and value tables (profit & loss, register details, summaries) */
.araa-app-shell table.table > tbody > tr > th {
    padding: 11px 13px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--araa-border) !important;
    background: transparent !important;
    color: var(--araa-text-soft) !important;
    font-size: 12.5px;
    font-weight: 700;
    vertical-align: middle;
}

.araa-app-shell table.table > tbody > tr > th small {
    display: inline-block;
    color: var(--araa-muted) !important;
    font-size: 11px;
    font-weight: 600;
}

.araa-report-page table.table > tbody > tr > th + td {
    color: var(--araa-text) !important;
    font-weight: 700;
    text-align: end;
    white-space: nowrap;
}

.araa-app-shell table.table > tbody > tr:last-child > th,
.araa-app-shell table.table > tbody > tr:last-child > td {
    border-bottom: 0 !important;
}

/* Totals rows */
.araa-app-shell table > tfoot > tr > td,
.araa-app-shell table > tfoot > tr > th {
    border-top: 1px solid var(--araa-border-strong) !important;
}

.araa-app-shell .footer-total,
.araa-app-shell tr.bg-gray,
.araa-app-shell .bg-gray {
    background: var(--araa-surface-muted) !important;
    color: var(--araa-text) !important;
}

.araa-app-shell .footer-total > td,
.araa-app-shell .footer-total > th {
    color: var(--araa-text) !important;
    font-weight: 800;
}

.araa-app-shell .bg-light-blue,
.araa-app-shell .bg-aqua {
    background: var(--araa-accent-soft) !important;
    color: var(--araa-accent) !important;
}

.araa-app-shell .bg-green {
    background: var(--araa-success-soft) !important;
    color: var(--araa-success) !important;
}

.araa-app-shell .bg-yellow,
.araa-app-shell .bg-orange {
    background: var(--araa-warning-soft) !important;
    color: var(--araa-warning) !important;
}

.araa-app-shell .bg-red {
    background: var(--araa-danger-soft) !important;
    color: var(--araa-danger) !important;
}

/* DataTables toolbar */
.araa-app-shell .dataTables_wrapper .dt-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.araa-app-shell .dataTables_wrapper .dt-buttons .btn,
.araa-app-shell .dataTables_wrapper .dt-buttons a,
.araa-app-shell .dataTables_wrapper .dt-buttons button {
    min-height: 34px;
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    margin: 0 !important;
    padding: 6px 12px !important;
    border: 1px solid var(--araa-border-strong) !important;
    border-radius: 8px !important;
    background: var(--araa-surface-raised) !important;
    color: var(--araa-text-soft) !important;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: none !important;
    transform: none !important;
}

.araa-app-shell .dataTables_wrapper .dt-buttons .btn:hover,
.araa-app-shell .dataTables_wrapper .dt-buttons a:hover,
.araa-app-shell .dataTables_wrapper .dt-buttons button:hover {
    border-color: var(--araa-accent) !important;
    color: var(--araa-accent) !important;
}

.araa-app-shell .dataTables_wrapper .dt-buttons i {
    color: var(--araa-accent);
}

.araa-app-shell .dt-button-collection,
.araa-app-shell div.dt-button-collection {
    padding: 6px !important;
    border: 1px solid var(--araa-border-strong) !important;
    border-radius: 10px !important;
    background: var(--araa-surface-raised) !important;
    box-shadow: var(--araa-shadow) !important;
}

.araa-app-shell .dt-button-collection .dt-button,
.araa-app-shell .dt-button-collection a {
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--araa-text-soft) !important;
}

.araa-app-shell .dt-button-collection .dt-button.active,
.araa-app-shell .dt-button-collection a.active {
    background: var(--araa-accent-soft) !important;
    color: var(--araa-accent) !important;
}

.araa-app-shell .dataTables_wrapper .dataTables_processing {
    border: 1px solid var(--araa-border-strong) !important;
    border-radius: 10px;
    background: var(--araa-surface-raised) !important;
    color: var(--araa-text) !important;
    box-shadow: var(--araa-shadow);
}

/* Data rows stay on one line wherever the table can scroll sideways */
.araa-app-shell .table-responsive table.dataTable > tbody > tr > td,
.araa-app-shell .dataTables_scrollBody table.dataTable > tbody > tr > td {
    white-space: nowrap;
}

.araa-app-shell .table-responsive {
    border: 1px solid var(--araa-border);
    border-radius: 9px;
    scrollbar-color: var(--araa-border-strong) transparent;
    scrollbar-width: thin;
}

.araa-app-shell table.dataTable td.dataTables_empty {
    padding: 28px 12px !important;
    color: var(--araa-muted) !important;
    text-align: center;
}

/* Profit & loss summary cards */
.araa-profit-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.araa-profit-stat {
    --tone: var(--araa-accent);
    --tone-soft: var(--araa-accent-soft);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid var(--araa-border);
    border-radius: var(--araa-radius-sm);
    background: var(--araa-surface-raised);
}

.araa-profit-stat__label {
    color: var(--araa-muted);
    font-size: 13px;
    font-weight: 700;
}

.araa-app-shell .araa-profit-stat__value {
    color: var(--araa-text) !important;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
}

.araa-app-shell .araa-profit-stat__help {
    color: var(--araa-muted) !important;
    font-size: 11.5px;
    line-height: 1.6;
}

.araa-profit-stat--net {
    border-color: color-mix(in srgb, var(--tone) 35%, var(--araa-border));
    background: linear-gradient(135deg, var(--tone-soft), transparent 70%), var(--araa-surface-raised);
}

.araa-profit-stat--net.is-positive {
    --tone: var(--araa-success);
    --tone-soft: var(--araa-success-soft);
}

.araa-profit-stat--net.is-negative {
    --tone: var(--araa-danger);
    --tone-soft: var(--araa-danger-soft);
}

.araa-app-shell .araa-profit-stat--net .araa-profit-stat__value {
    color: var(--tone) !important;
    font-size: 28px;
}

@media (max-width: 991px) {
    .araa-profit-stats {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media print {
    .araa-profit-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 4mm;
    }

    .araa-profit-stat,
    .araa-profit-stat--net {
        padding: 3mm 4mm;
        border: 1px solid #c5cdd2 !important;
        background: #fff !important;
    }

    .araa-profit-stat__label,
    .araa-profit-stat__help,
    .araa-app-shell .araa-profit-stat__value,
    .araa-app-shell .araa-profit-stat--net .araa-profit-stat__value {
        color: #111 !important;
    }

    .araa-app-shell .footer-total,
    .araa-app-shell .bg-gray {
        background: #eef2f4 !important;
        color: #111 !important;
    }

    .araa-filter-card {
        display: none !important;
    }
}

/* Form layout: every Bootstrap row in page content becomes an aligned
   12-column grid (no float staircases or clearfix gaps). Modals keep Bootstrap. */
@media (min-width: 768px) {
    .araa-app-shell .content .row:not(.modal .row) {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        align-items: start;
        column-gap: 18px;
        margin-inline: 0;
    }

    .araa-app-shell .content .row:not(.modal .row)::before,
    .araa-app-shell .content .row:not(.modal .row)::after {
        display: none;
    }

    .araa-app-shell .content .row:not(.modal .row) > * {
        min-width: 0;
        grid-column: 1 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > [class*="col-"] {
        width: auto;
        float: none;
        margin-inline: 0;
        padding-inline: 0;
    }

    .araa-app-shell .content .row:not(.modal .row) > .clearfix {
        display: none;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-1 {
        grid-column: auto / span 1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-2 {
        grid-column: auto / span 2;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-3 {
        grid-column: auto / span 3;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-4 {
        grid-column: auto / span 4;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-5 {
        grid-column: auto / span 5;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-6 {
        grid-column: auto / span 6;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-7 {
        grid-column: auto / span 7;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-8 {
        grid-column: auto / span 8;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-9 {
        grid-column: auto / span 9;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-10 {
        grid-column: auto / span 10;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-11 {
        grid-column: auto / span 11;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-12 {
        grid-column: auto / span 12;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-offset-1 {
        grid-column-start: 2;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-offset-2 {
        grid-column-start: 3;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-offset-3 {
        grid-column-start: 4;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-offset-4 {
        grid-column-start: 5;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-offset-5 {
        grid-column-start: 6;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-offset-6 {
        grid-column-start: 7;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-offset-7 {
        grid-column-start: 8;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-offset-8 {
        grid-column-start: 9;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-offset-9 {
        grid-column-start: 10;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-offset-10 {
        grid-column-start: 11;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-offset-11 {
        grid-column-start: 12;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-1.pull-right {
        grid-column: span 1 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-2.pull-right {
        grid-column: span 2 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-3.pull-right {
        grid-column: span 3 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-4.pull-right {
        grid-column: span 4 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-5.pull-right {
        grid-column: span 5 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-6.pull-right {
        grid-column: span 6 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-7.pull-right {
        grid-column: span 7 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-8.pull-right {
        grid-column: span 8 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-9.pull-right {
        grid-column: span 9 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-10.pull-right {
        grid-column: span 10 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-xs-11.pull-right {
        grid-column: span 11 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-1 {
        grid-column: auto / span 1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-2 {
        grid-column: auto / span 2;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-3 {
        grid-column: auto / span 3;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-4 {
        grid-column: auto / span 4;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-5 {
        grid-column: auto / span 5;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-6 {
        grid-column: auto / span 6;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-7 {
        grid-column: auto / span 7;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-8 {
        grid-column: auto / span 8;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-9 {
        grid-column: auto / span 9;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-10 {
        grid-column: auto / span 10;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-11 {
        grid-column: auto / span 11;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-12 {
        grid-column: auto / span 12;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-offset-1 {
        grid-column-start: 2;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-offset-2 {
        grid-column-start: 3;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-offset-3 {
        grid-column-start: 4;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-offset-4 {
        grid-column-start: 5;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-offset-5 {
        grid-column-start: 6;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-offset-6 {
        grid-column-start: 7;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-offset-7 {
        grid-column-start: 8;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-offset-8 {
        grid-column-start: 9;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-offset-9 {
        grid-column-start: 10;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-offset-10 {
        grid-column-start: 11;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-offset-11 {
        grid-column-start: 12;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-1.pull-right {
        grid-column: span 1 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-2.pull-right {
        grid-column: span 2 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-3.pull-right {
        grid-column: span 3 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-4.pull-right {
        grid-column: span 4 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-5.pull-right {
        grid-column: span 5 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-6.pull-right {
        grid-column: span 6 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-7.pull-right {
        grid-column: span 7 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-8.pull-right {
        grid-column: span 8 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-9.pull-right {
        grid-column: span 9 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-10.pull-right {
        grid-column: span 10 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-11.pull-right {
        grid-column: span 11 / -1;
    }
}

@media (min-width: 992px) {

    .araa-app-shell .content .row:not(.modal .row) > .col-md-1 {
        grid-column: auto / span 1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-2 {
        grid-column: auto / span 2;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-3 {
        grid-column: auto / span 3;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-4 {
        grid-column: auto / span 4;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-5 {
        grid-column: auto / span 5;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-6 {
        grid-column: auto / span 6;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-7 {
        grid-column: auto / span 7;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-8 {
        grid-column: auto / span 8;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-9 {
        grid-column: auto / span 9;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-10 {
        grid-column: auto / span 10;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-11 {
        grid-column: auto / span 11;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-12 {
        grid-column: auto / span 12;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-offset-1 {
        grid-column-start: 2;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-offset-2 {
        grid-column-start: 3;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-offset-3 {
        grid-column-start: 4;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-offset-4 {
        grid-column-start: 5;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-offset-5 {
        grid-column-start: 6;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-offset-6 {
        grid-column-start: 7;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-offset-7 {
        grid-column-start: 8;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-offset-8 {
        grid-column-start: 9;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-offset-9 {
        grid-column-start: 10;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-offset-10 {
        grid-column-start: 11;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-offset-11 {
        grid-column-start: 12;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-1.pull-right {
        grid-column: span 1 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-2.pull-right {
        grid-column: span 2 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-3.pull-right {
        grid-column: span 3 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-4.pull-right {
        grid-column: span 4 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-5.pull-right {
        grid-column: span 5 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-6.pull-right {
        grid-column: span 6 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-7.pull-right {
        grid-column: span 7 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-8.pull-right {
        grid-column: span 8 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-9.pull-right {
        grid-column: span 9 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-10.pull-right {
        grid-column: span 10 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-11.pull-right {
        grid-column: span 11 / -1;
    }
}

@media (min-width: 1200px) {

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-1 {
        grid-column: auto / span 1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-2 {
        grid-column: auto / span 2;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-3 {
        grid-column: auto / span 3;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-4 {
        grid-column: auto / span 4;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-5 {
        grid-column: auto / span 5;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-6 {
        grid-column: auto / span 6;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-7 {
        grid-column: auto / span 7;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-8 {
        grid-column: auto / span 8;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-9 {
        grid-column: auto / span 9;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-10 {
        grid-column: auto / span 10;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-11 {
        grid-column: auto / span 11;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-12 {
        grid-column: auto / span 12;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-offset-1 {
        grid-column-start: 2;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-offset-2 {
        grid-column-start: 3;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-offset-3 {
        grid-column-start: 4;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-offset-4 {
        grid-column-start: 5;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-offset-5 {
        grid-column-start: 6;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-offset-6 {
        grid-column-start: 7;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-offset-7 {
        grid-column-start: 8;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-offset-8 {
        grid-column-start: 9;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-offset-9 {
        grid-column-start: 10;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-offset-10 {
        grid-column-start: 11;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-offset-11 {
        grid-column-start: 12;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-1.pull-right {
        grid-column: span 1 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-2.pull-right {
        grid-column: span 2 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-3.pull-right {
        grid-column: span 3 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-4.pull-right {
        grid-column: span 4 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-5.pull-right {
        grid-column: span 5 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-6.pull-right {
        grid-column: span 6 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-7.pull-right {
        grid-column: span 7 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-8.pull-right {
        grid-column: span 8 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-9.pull-right {
        grid-column: span 9 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-10.pull-right {
        grid-column: span 10 / -1;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-11.pull-right {
        grid-column: span 11 / -1;
    }
}

/* Wide screens: field columns (holding a .form-group) pack four to a row instead of three */
@media (min-width: 1400px) {

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-4:has(> .form-group) {
        grid-column: auto / span 3;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-6:has(> .form-group) {
        grid-column: auto / span 4;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-sm-8:has(> .form-group) {
        grid-column: auto / span 6;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-4:has(> .form-group) {
        grid-column: auto / span 3;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-6:has(> .form-group) {
        grid-column: auto / span 4;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-md-8:has(> .form-group) {
        grid-column: auto / span 6;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-4:has(> .form-group) {
        grid-column: auto / span 3;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-6:has(> .form-group) {
        grid-column: auto / span 4;
    }

    .araa-app-shell .content .row:not(.modal .row) > .col-lg-8:has(> .form-group) {
        grid-column: auto / span 6;
    }
}

/* Form fields: one rhythm for labels, inputs and help text */
.araa-app-shell .content .form-group {
    margin-bottom: 14px;
}

.araa-app-shell .content .form-group > label,
.araa-app-shell .content .form-group > .control-label {
    margin-bottom: 6px;
    line-height: 20px;
}

@media (min-width: 768px) {
    .araa-app-shell .content .form-group > label,
    .araa-app-shell .content .form-group > .control-label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }

    .araa-app-shell .content .form-group > label:has(+ .hover-q) {
        max-width: calc(100% - 22px);
    }
}

/* Checkbox columns used a leading <br> to line up with inputs */
.araa-app-shell .content .form-group:has(> br:first-child) {
    padding-top: 26px;
}

.araa-app-shell .content .form-group > br:first-child {
    display: none;
}

.araa-app-shell .content .help-block {
    margin: 5px 0 0;
    color: var(--araa-muted) !important;
    font-size: 11.5px;
    line-height: 1.55;
}

.araa-app-shell .content small > .help-block {
    margin-top: 5px;
}

.araa-app-shell .content .form-control.input-sm,
.araa-app-shell .content .input-sm {
    height: 38px;
    font-size: 13px;
}

/* select2 measures its width once at start-up; inside form fields it should
   always fill the column, whatever the layout was at that moment */
.araa-app-shell .content .form-group .select2-container,
.araa-app-shell .content .input-group .select2-container {
    width: 100% !important;
}

/* Inside a Bootstrap input-group, select2 must be a table cell so the add
   button stays inside its column */
.araa-app-shell .content .input-group > .select2-container {
    display: table-cell !important;
    max-width: 0;
    vertical-align: middle;
}

.araa-app-shell .content .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important;
}

.araa-app-shell .content .select2-container .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
}

/* Laravel's default textarea (rows=10) is taller than any note needs */
.araa-app-shell .content textarea.form-control[rows="10"] {
    height: 112px;
    min-height: 76px;
    resize: vertical;
}

.araa-label-spacer {
    display: block;
    visibility: hidden;
}

/* "More information" toggles become a slim disclosure bar */
.araa-app-shell .araa-widget:has(.more_btn) > div {
    padding-block: 10px !important;
}

.araa-app-shell .tw-dw-btn.more_btn,
.araa-app-shell .tw-dw-btn#toggle_additional_expense {
    width: 100%;
    min-height: 40px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px dashed var(--araa-border-strong) !important;
    background: transparent !important;
    color: var(--araa-accent) !important;
    box-shadow: none !important;
}

.araa-app-shell .tw-dw-btn.more_btn:hover,
.araa-app-shell .tw-dw-btn.more_btn:focus-visible,
.araa-app-shell .tw-dw-btn#toggle_additional_expense:hover,
.araa-app-shell .tw-dw-btn#toggle_additional_expense:focus-visible {
    border-style: solid !important;
    background: var(--araa-accent-soft) !important;
}

.araa-app-shell .tw-dw-btn.more_btn i {
    transition: transform 180ms ease;
}

.araa-app-shell .araa-widget:has(div:has(> .more_btn) + .row:not(.hide)) .more_btn i {
    transform: rotate(180deg);
}

.araa-app-shell .araa-widget div:has(> .more_btn) + .row:not(.hide) {
    margin-top: 16px;
}

/* Product form: the unit and barcode table reads as two normal fields */
@media (min-width: 768px) {
    .araa-app-shell .content .row:not(.modal .row) > .col-12:has(> #product_unit_table) {
        grid-column: auto / span 8;
    }
}

@media (min-width: 1400px) {
    .araa-app-shell .content .row:not(.modal .row) > .col-12:has(> #product_unit_table) {
        grid-column: auto / span 6;
    }
}

.araa-app-shell .row > .col-12 > #product_unit_table,
.araa-app-shell .row > .col-12 > #product_unit_table > thead,
.araa-app-shell .row > .col-12 > #product_unit_table > tbody {
    display: block;
}

.araa-app-shell .row > .col-12 > #product_unit_table {
    width: 100% !important;
    margin: 0 0 14px !important;
    border: 0 !important;
    background: transparent !important;
}

.araa-app-shell .row > .col-12 > #product_unit_table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    background: transparent !important;
}

.araa-app-shell .row > .col-12 > #product_unit_table th {
    padding: 0 0 6px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--araa-text-soft) !important;
    font-size: 12px;
    font-weight: 750;
    line-height: 20px;
}

.araa-app-shell .row > .col-12 > #product_unit_table td {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* Product pricing table (single product) */
.araa-app-shell .add-product-price-table {
    overflow: hidden;
    margin-bottom: 0 !important;
    border: 1px solid var(--araa-border) !important;
    border-radius: 10px;
}

.araa-app-shell .add-product-price-table > tbody > tr:first-child > th {
    padding: 11px 14px !important;
    border-bottom: 1px solid var(--araa-border) !important;
    background: var(--araa-surface-muted) !important;
    color: var(--araa-text) !important;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.araa-app-shell .add-product-price-table > tbody > tr > td {
    padding: 14px !important;
    border-bottom: 0 !important;
    vertical-align: top !important;
}

.araa-app-shell .add-product-price-table > tbody > tr > td + td,
.araa-app-shell .add-product-price-table > tbody > tr > th + th {
    border-inline-start: 1px solid var(--araa-border) !important;
}

.araa-app-shell .add-product-price-table td > [class*="col-"] {
    padding-inline: 0 6px;
}

.araa-app-shell .add-product-price-table td > [class*="col-"] + [class*="col-"] {
    padding-inline: 6px 0;
}

.araa-app-shell .add-product-price-table td > .form-control + .form-control {
    margin-top: 0;
}

.araa-app-shell .add-product-price-table label {
    margin-bottom: 6px;
    color: var(--araa-text-soft);
    font-size: 12px;
    line-height: 20px;
}

.araa-app-shell .add-product-price-table .form-group {
    margin-bottom: 0;
}

.araa-app-shell .add-product-price-table > tbody > tr:hover {
    background: transparent !important;
}

/* Form action bars stay reachable at the bottom of long forms */
.araa-app-shell .content form .araa-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 18px 0 0;
    padding: 12px 0;
    border-top: 1px solid var(--araa-border);
    background: color-mix(in srgb, var(--araa-bg) 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.araa-app-shell .content form .araa-form-actions .btn-group {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.araa-app-shell .content form .araa-form-actions .btn-group > .tw-dw-btn,
.araa-app-shell .content form .araa-form-actions .btn-group > .btn {
    float: none;
    margin: 0 !important;
    border-radius: 9px !important;
}

.araa-app-shell .araa-form-actions .tw-dw-btn.bg-maroon,
.araa-app-shell .araa-form-actions .tw-dw-btn.bg-purple,
.araa-app-shell .araa-form-actions .tw-dw-btn.tw-dw-btn-warning,
.araa-app-shell .araa-form-actions .tw-dw-btn.tw-dw-btn-success {
    border: 1px solid var(--araa-border-strong) !important;
    background: var(--araa-surface-raised) !important;
    color: var(--araa-text) !important;
    box-shadow: none !important;
}

.araa-app-shell .araa-form-actions .tw-dw-btn.bg-maroon:hover,
.araa-app-shell .araa-form-actions .tw-dw-btn.bg-purple:hover,
.araa-app-shell .araa-form-actions .tw-dw-btn.tw-dw-btn-warning:hover,
.araa-app-shell .araa-form-actions .tw-dw-btn.tw-dw-btn-success:hover {
    border-color: var(--araa-accent) !important;
    color: var(--araa-accent) !important;
}


/* Business settings */
.araa-business-settings-page .content {
    padding-top: 14px;
}

.araa-business-settings-page .pos-tab-container {
    overflow: hidden;
    background: var(--araa-surface) !important;
}

.araa-business-settings-page .araa-settings-shell {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.araa-business-settings-page .pos-tab-menu,
.araa-business-settings-page .pos-tab {
    width: auto !important;
    float: none !important;
    padding: 0 !important;
}

.araa-business-settings-page .pos-tab-menu {
    position: sticky;
    top: 10px;
}

.araa-business-settings-page .pos-tab-menu .list-group {
    margin: 0;
    padding: 8px;
    border: 1px solid var(--araa-border);
    border-radius: 11px;
    background: var(--araa-surface-raised);
}

.araa-app-shell div.pos-tab-menu div.list-group > a .fa,
.araa-app-shell div.pos-tab-menu div.list-group > a .glyphicon {
    color: var(--araa-muted);
}

.araa-app-shell div.pos-tab-menu div.list-group > a.active {
    border-color: color-mix(in srgb, var(--araa-accent) 40%, transparent) !important;
    background: var(--araa-accent-soft) !important;
    color: var(--araa-accent) !important;
    box-shadow: inset -3px 0 0 var(--araa-accent);
}

[dir="ltr"] .araa-app-shell div.pos-tab-menu div.list-group > a.active {
    box-shadow: inset 3px 0 0 var(--araa-accent);
}

.araa-app-shell div.pos-tab-menu div.list-group > a.active .fa,
.araa-app-shell div.pos-tab-menu div.list-group > a.active .glyphicon {
    background: transparent !important;
    color: var(--araa-accent) !important;
}

.araa-business-settings-page .pos-tab-content {
    min-height: 520px;
    padding: 22px !important;
    border: 1px solid var(--araa-border) !important;
    border-radius: 11px !important;
    background: var(--araa-surface-raised) !important;
    color: var(--araa-text-soft) !important;
}

.araa-business-settings-page .pos-tab-content .row {
    margin-inline: -9px;
}

.araa-business-settings-page .pos-tab-content [class*="col-"] {
    padding-inline: 9px;
}

.araa-business-settings-page .pos-tab-content label,
.araa-business-settings-page .pos-tab-content h4,
.araa-business-settings-page .pos-tab-content b {
    color: var(--araa-text-soft) !important;
}

.araa-business-settings-page .pos-tab-content .help-block {
    color: var(--araa-muted) !important;
}

/* Reports and legacy module cards */
.araa-report-page .content-header,
.araa-report-page .content {
    max-width: none;
}

.araa-report-page .content > .box,
.araa-report-page .content > .row > [class*="col-"] > .box,
.araa-report-page .content .panel,
.araa-report-page .content .card,
.araa-report-page .content .well,
.araa-report-page .content .small-box,
.araa-report-page .content .info-box {
    border: 1px solid var(--araa-border) !important;
    background: var(--araa-surface) !important;
    box-shadow: var(--araa-shadow-soft) !important;
}

.araa-report-page .content .box-body,
.araa-report-page .content .panel-body,
.araa-report-page .content .card-body {
    background: transparent !important;
    color: var(--araa-text-soft) !important;
}

.araa-zatca-page .crm-data-wrapper {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0 20px;
}

.araa-zatca-page .crm-data-item {
    min-height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    margin: 0 !important;
    padding: 17px !important;
    border: 1px solid var(--araa-border) !important;
    border-radius: 11px !important;
    background: linear-gradient(145deg, var(--araa-surface-raised), var(--araa-surface)) !important;
    box-shadow: var(--araa-shadow-soft) !important;
    color: var(--araa-text) !important;
}

.araa-zatca-page .crm-data-item h3,
.araa-zatca-page .crm-data-item h4 {
    margin: 0 !important;
    color: var(--araa-muted) !important;
    font-size: 13px !important;
}

.araa-zatca-page .crm-data-item .data-numbers {
    margin: 0 !important;
    color: var(--araa-text) !important;
    font-size: 25px !important;
    line-height: 1.2;
}

.araa-report-page .dataTables_wrapper {
    padding: 4px 0 0;
}

.araa-report-page .dt-buttons .btn,
.araa-report-page .dataTables_wrapper .btn {
    border-color: var(--araa-border-strong) !important;
    background: var(--araa-surface-raised) !important;
    color: var(--araa-text-soft) !important;
}

.araa-report-page .araa-shift-report .summary-box,
.araa-report-page .araa-shift-report .filters,
.araa-report-page .araa-shift-report .detail-panel {
    border: 1px solid var(--araa-border) !important;
    border-top: 3px solid var(--araa-accent) !important;
    border-radius: 10px !important;
    background: linear-gradient(145deg, var(--araa-surface-raised), var(--araa-surface)) !important;
    box-shadow: var(--araa-shadow-soft) !important;
    color: var(--araa-text-soft) !important;
}

.araa-report-page .araa-shift-report .summary-box span,
.araa-report-page .araa-shift-report .detail-summary span {
    color: var(--araa-muted) !important;
}

.araa-report-page .araa-shift-report .summary-box strong,
.araa-report-page .araa-shift-report .detail-panel h4,
.araa-report-page .araa-shift-report .detail-summary strong {
    color: var(--araa-text) !important;
}

.araa-report-page .araa-shift-report .shift-details-row,
.araa-report-page .araa-shift-report .detail-summary {
    border-color: var(--araa-border) !important;
    background: var(--araa-surface-muted) !important;
    color: var(--araa-text-soft) !important;
}

.araa-report-page .araa-shift-report .status-open {
    background: var(--araa-success-soft) !important;
    color: var(--araa-success) !important;
}

.araa-report-page .araa-shift-report .status-closed {
    background: var(--araa-surface-muted) !important;
    color: var(--araa-muted) !important;
}

.daterangepicker {
    overflow: hidden;
    padding: 8px !important;
    border: 1px solid var(--araa-border-strong) !important;
    border-radius: 12px !important;
    background: var(--araa-surface-raised) !important;
    color: var(--araa-text) !important;
    box-shadow: var(--araa-shadow) !important;
}

.daterangepicker::before {
    border-bottom-color: var(--araa-border-strong) !important;
}

.daterangepicker::after {
    border-bottom-color: var(--araa-surface-raised) !important;
}

.daterangepicker.dropup::before {
    border-top-color: var(--araa-border-strong) !important;
}

.daterangepicker.dropup::after {
    border-top-color: var(--araa-surface-raised) !important;
}

.daterangepicker .ranges {
    margin: 0 !important;
}

.daterangepicker .ranges ul {
    min-width: 200px;
    margin: 0 !important;
    padding: 0 !important;
}

.daterangepicker .ranges li {
    margin: 2px 0 !important;
    padding: 9px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--araa-text-soft) !important;
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.35;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.daterangepicker .ranges li:hover {
    border-color: var(--araa-border-strong) !important;
    background: var(--araa-accent-soft) !important;
    color: var(--araa-text) !important;
}

.daterangepicker .ranges li.active,
.daterangepicker .ranges li.active:hover {
    border-color: var(--araa-accent) !important;
    background: var(--araa-accent) !important;
    color: var(--araa-accent-ink) !important;
}

.daterangepicker .calendar,
.daterangepicker .calendar-table {
    border-color: var(--araa-border) !important;
    background: var(--araa-surface-raised) !important;
    color: var(--araa-text) !important;
}

.daterangepicker .calendar-table {
    border-radius: 9px !important;
}

.daterangepicker th,
.daterangepicker td {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--araa-text-soft) !important;
}

.daterangepicker th.month {
    color: var(--araa-text) !important;
    font-weight: 700;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
    background: transparent !important;
    color: var(--araa-muted) !important;
    opacity: 0.52;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    border-radius: 6px !important;
    background: var(--araa-accent-soft) !important;
    color: var(--araa-text) !important;
}

.daterangepicker td.in-range {
    background: var(--araa-accent-soft) !important;
    color: var(--araa-text) !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.start-date,
.daterangepicker td.end-date {
    background: var(--araa-accent) !important;
    color: var(--araa-accent-ink) !important;
}

.daterangepicker select,
.daterangepicker .input-mini,
.daterangepicker .calendar-time select {
    border: 1px solid var(--araa-border-strong) !important;
    border-radius: 7px !important;
    background: var(--araa-surface) !important;
    color: var(--araa-text) !important;
}

.daterangepicker .input-mini.active {
    border-color: var(--araa-accent) !important;
}

.daterangepicker .daterangepicker_input i {
    color: var(--araa-muted) !important;
}

.daterangepicker .range_inputs {
    display: flex;
    gap: 6px;
    padding-top: 7px;
}

.daterangepicker .range_inputs .btn {
    min-height: 32px;
    margin: 0 !important;
    border-radius: 7px !important;
    box-shadow: none !important;
}

.daterangepicker .range_inputs .applyBtn {
    border-color: var(--araa-accent) !important;
    background: var(--araa-accent) !important;
    color: var(--araa-accent-ink) !important;
}

.daterangepicker .range_inputs .cancelBtn {
    border-color: var(--araa-border-strong) !important;
    background: var(--araa-surface-muted) !important;
    color: var(--araa-text-soft) !important;
}

html[dir="rtl"] .daterangepicker .ranges li,
.daterangepicker.rtl .ranges li {
    text-align: right !important;
}

@media (max-width: 767px) {
    .daterangepicker {
        max-width: calc(100vw - 24px) !important;
    }

    .daterangepicker .ranges ul {
        min-width: 0;
    }
}

@media (max-width: 991px) {
    .araa-business-settings-page .araa-settings-shell {
        grid-template-columns: 1fr;
    }

    .araa-business-settings-page .pos-tab-menu {
        position: static;
    }

    .araa-business-settings-page .pos-tab-menu .list-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .araa-zatca-page .crm-data-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .araa-home-page .highcharts-data-labels,
    .araa-home-page .highcharts-connector-series {
        display: none !important;
    }

    .araa-business-settings-page .pos-tab-menu .list-group {
        display: flex;
        grid-template-columns: none;
        gap: 7px;
        overflow-x: auto;
        padding: 8px;
        scroll-snap-type: x proximity;
    }

    .araa-business-settings-page .pos-tab-menu .list-group-item {
        min-width: max-content;
        flex: 0 0 auto;
        margin: 0 !important;
        scroll-snap-align: start;
    }

    .araa-zatca-page .crm-data-wrapper {
        grid-template-columns: 1fr;
    }

    .araa-business-settings-page .pos-tab-content {
        padding: 15px !important;
    }
}

/* Professional report printing */
@media print {
    @page {
        size: A4 portrait;
        margin: 12mm 10mm 14mm;
    }

    html,
    html[data-araa-theme],
    body.araa-app-shell,
    .araa-app-shell .thetop,
    .araa-app-main,
    .araa-app-shell #scrollable-container {
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
        background: #fff !important;
        color: #111 !important;
    }

    .araa-report-page .araa-report-print-header {
        display: flex !important;
        align-items: flex-end;
        justify-content: space-between;
        margin: 0 0 8mm;
        padding: 0 0 4mm;
        border-bottom: 2px solid #0aaecb;
        color: #111;
    }

    .araa-report-print-header div,
    .araa-report-print-header strong,
    .araa-report-print-header span,
    .araa-report-print-header small {
        display: block;
        color: #111 !important;
    }

    .araa-report-print-header strong {
        font-size: 15pt;
    }

    .araa-report-print-header span {
        margin-top: 2mm;
        color: #555 !important;
        font-size: 10pt;
    }

    .araa-report-page .content-header {
        margin: 0 0 5mm;
        padding: 0;
        border: 0;
        background: #fff !important;
    }

    .araa-report-page .content-header::before,
    .araa-report-page .content-header > h1 {
        display: none !important;
    }

    .araa-report-page .content {
        margin: 0;
        padding: 0;
        border: 0;
        background: #fff !important;
    }

    .araa-report-page .box,
    .araa-report-page .card,
    .araa-report-page .panel,
    .araa-report-page [class*="tw-bg-white"] {
        border: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        color: #111 !important;
    }

    .araa-report-page .box-header,
    .araa-report-page .box-body {
        padding-inline: 0 !important;
    }

    .araa-report-page table.table,
    .araa-report-page table.dataTable {
        width: 100% !important;
        border-collapse: collapse !important;
        color: #111 !important;
    }

    .araa-report-page table thead {
        display: table-header-group;
    }

    .araa-report-page table tfoot {
        display: table-footer-group;
    }

    .araa-report-page table tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .araa-report-page table.table > thead > tr > th,
    .araa-report-page table.dataTable > thead > tr > th,
    .araa-report-page table > thead > tr > th {
        padding: 7px 6px !important;
        border: 1px solid #9ba6ad !important;
        background: #eaf6f9 !important;
        color: #111 !important;
        font-size: 8.5pt;
    }

    .araa-report-page table.table > tbody > tr > td,
    .araa-report-page table.dataTable > tbody > tr > td,
    .araa-report-page table.table > tfoot > tr > td,
    .araa-report-page table.table > tfoot > tr > th {
        padding: 6px !important;
        border: 1px solid #c5cdd2 !important;
        background: #fff !important;
        color: #111 !important;
        font-size: 8.5pt;
    }

    .araa-report-page a {
        color: #111 !important;
        text-decoration: none !important;
    }

    .araa-report-page .dataTables_filter,
    .araa-report-page .dataTables_length,
    .araa-report-page .dataTables_info,
    .araa-report-page .dataTables_paginate,
    .araa-report-page .dt-buttons,
    .araa-report-page .box-tools,
    .araa-report-page .btn,
    .araa-report-page .select2-container,
    .araa-report-page .nav-tabs,
    .araa-report-page .no-print,
    .araa-report-page #footer,
    .araa-report-page .scrolltop {
        display: none !important;
    }
}