/*
 * Al Farid UI — shared visual system
 * Presentation only: no accounting, inventory, permission or form behaviour.
 */
:root {
    --af-brown-950: #2f1d15;
    --af-brown-900: #43281c;
    --af-brown-800: #5b3826;
    --af-brown-700: #70472f;
    --af-brown-600: #875a3b;
    --af-gold-700: #a9781f;
    --af-gold-600: #bd8b2b;
    --af-gold-500: #cf9e42;
    --af-gold-300: #e6c983;
    --af-gold-100: #f8edcf;
    --af-cream-50: #fffdf8;
    --af-cream-100: #fbf7ee;
    --af-cream-200: #f3eadb;
    --af-ink-900: #29231f;
    --af-ink-700: #5f554f;
    --af-ink-500: #81756d;
    --af-border: #e6ddd1;
    --af-success: #19704b;
    --af-success-soft: #e6f5ed;
    --af-danger: #b42318;
    --af-danger-soft: #fdebea;
    --af-warning: #9b650c;
    --af-warning-soft: #fff3d6;
    --af-info: #29657a;
    --af-info-soft: #e9f4f7;
    --af-radius-sm: 8px;
    --af-radius-md: 12px;
    --af-radius-lg: 16px;
    --af-shadow-sm: 0 1px 2px rgba(67, 40, 28, .06), 0 1px 5px rgba(67, 40, 28, .04);
    --af-shadow-md: 0 8px 24px rgba(67, 40, 28, .08);
    --af-shadow-lg: 0 18px 48px rgba(47, 29, 21, .14);
    --af-control-height: 42px;
    --af-touch-height: 44px;
    --af-transition: 160ms ease;

    /* Keep the existing theme helpers, but give every page one brand identity. */
    --theme-700: var(--af-brown-700) !important;
    --theme-800: var(--af-brown-800) !important;
    --theme-900: var(--af-brown-900) !important;
}

html {
    background: var(--af-cream-100);
    color: var(--af-ink-900);
}

body.af-ui {
    color: var(--af-ink-900);
    background: var(--af-cream-100) !important;
    font-family: "Noto Kufi Arabic", "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif !important;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.af-ui *,
body.af-ui *::before,
body.af-ui *::after {
    box-sizing: border-box;
}

/* Quantities retain their complete 8-decimal input value. This overlay only
   shortens the resting visual representation to 3 decimals. Focusing the
   field reveals the exact value for precise editing. */
body.af-ui .af-quantity-display-host {
    position: relative !important;
}

body.af-ui input.af-quantity-display-active:not(:focus) {
    color: transparent !important;
    text-shadow: none !important;
    caret-color: transparent !important;
}

body.af-ui .af-quantity-display-overlay {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: var(--af-ink-900);
    font: inherit;
    line-height: normal;
    white-space: nowrap;
    pointer-events: none;
}

body.af-ui .af-quantity-display-overlay[hidden] {
    display: none !important;
}

body.af-ui a,
body.af-ui button,
body.af-ui input,
body.af-ui select,
body.af-ui textarea,
body.af-ui summary {
    transition: color var(--af-transition), background-color var(--af-transition),
        border-color var(--af-transition), box-shadow var(--af-transition), transform var(--af-transition);
}

body.af-ui a {
    color: var(--af-brown-700);
}

body.af-ui a:hover,
body.af-ui a:focus {
    color: var(--af-gold-700);
}

body.af-ui :focus-visible {
    outline: 3px solid rgba(207, 158, 66, .32);
    outline-offset: 2px;
}

body.af-ui .thetop > main,
body.af-ui #scrollable-container {
    background: var(--af-cream-100) !important;
}

body.af-ui .theme-header-bg {
    background: linear-gradient(105deg, var(--af-brown-950), var(--af-brown-800) 62%, #76512e) !important;
    border-color: rgba(230, 201, 131, .26) !important;
    box-shadow: 0 4px 18px rgba(47, 29, 21, .16);
}

body.af-ui .theme-logo-bg {
    background: linear-gradient(135deg, var(--af-brown-950), var(--af-brown-800)) !important;
    border-color: rgba(230, 201, 131, .24) !important;
}

body.af-ui .theme-btn-bg {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .15) !important;
}

body.af-ui .theme-btn-bg:hover,
body.af-ui .theme-btn-bg:focus {
    background: rgba(207, 158, 66, .24) !important;
    color: #fff !important;
}

body.af-ui .side-bar {
    background: var(--af-cream-50) !important;
    border-inline-end: 1px solid var(--af-border);
    box-shadow: 7px 0 24px rgba(67, 40, 28, .05);
}

[dir="rtl"] body.af-ui .side-bar {
    box-shadow: -7px 0 24px rgba(67, 40, 28, .05);
}

body.af-ui #side-bar a {
    border-radius: var(--af-radius-sm);
    margin-inline: 8px;
}

body.af-ui #side-bar a svg,
body.af-ui #side-bar a i {
    color: var(--af-ink-500);
}

body.af-ui #side-bar .theme-sidebar-hover:hover,
body.af-ui #side-bar .theme-sidebar-hover:focus,
body.af-ui #side-bar .theme-sidebar-active {
    background: var(--af-gold-100) !important;
    color: var(--af-brown-800) !important;
}

body.af-ui #side-bar .theme-sidebar-active {
    box-shadow: inset -3px 0 0 var(--af-gold-600);
    font-weight: 700;
}

[dir="ltr"] body.af-ui #side-bar .theme-sidebar-active {
    box-shadow: inset 3px 0 0 var(--af-gold-600);
}

body.af-ui #side-bar .theme-sidebar-active svg,
body.af-ui #side-bar .theme-sidebar-active i,
body.af-ui #side-bar a:hover svg,
body.af-ui #side-bar a:hover i {
    color: var(--af-gold-700) !important;
}

body.af-ui #sidebar-search {
    font-family: inherit;
}

body.af-ui .content {
    padding: 22px 24px 30px;
}

body.af-ui .content-header {
    padding: 20px 24px 4px;
}

body.af-ui .content-header > h1,
body.af-ui .content h1,
body.af-ui .content h2,
body.af-ui .content h3 {
    color: var(--af-brown-900);
    letter-spacing: -.02em;
}

body.af-ui .content-header > h1 {
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 800;
}

body.af-ui .breadcrumb {
    background: transparent;
    color: var(--af-ink-500);
}

/* Shared cards, boxes and filter panels. */
body.af-ui .box,
body.af-ui .card,
body.af-ui .tw-dw-card,
body.af-ui .panel,
body.af-ui .nav-tabs-custom {
    background: #fff;
    border: 1px solid var(--af-border) !important;
    border-radius: var(--af-radius-lg) !important;
    box-shadow: var(--af-shadow-sm) !important;
    overflow: hidden;
}

body.af-ui .box.box-solid,
body.af-ui .box.box-primary,
body.af-ui .box.box-info,
body.af-ui .box.box-success,
body.af-ui .box.box-warning,
body.af-ui .box.box-danger {
    border-top-color: var(--af-border) !important;
}

body.af-ui .box-header,
body.af-ui .panel-heading,
body.af-ui .modal-header {
    background: linear-gradient(180deg, #fff, var(--af-cream-50));
    border-bottom: 1px solid var(--af-border) !important;
    color: var(--af-brown-900);
    padding: 15px 18px;
}

body.af-ui .box-header .box-title,
body.af-ui .panel-title,
body.af-ui .modal-title {
    color: var(--af-brown-900);
    font-weight: 800;
}

/* Shared widget headings: keep titles and actions separated at every size. */
body.af-ui .af-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 18px;
    min-width: 0;
}

body.af-ui .af-widget-header::before,
body.af-ui .af-widget-header::after {
    display: none !important;
    content: none !important;
}

body.af-ui .af-widget-title {
    flex: 1 1 220px;
    min-width: 0;
    margin: 0 !important;
    line-height: 1.35;
}

body.af-ui .af-widget-header > .box-tools {
    position: static !important;
    inset: auto !important;
    float: none !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 0 auto;
    margin: 0 !important;
}

body.af-ui .af-widget-header > .box-tools > * {
    float: none !important;
    margin: 0 !important;
}

body.af-ui .af-widget-header > br {
    display: none;
}

body.af-ui .af-widget-header > small {
    flex: 1 0 100%;
}

body.af-ui .box-body,
body.af-ui .panel-body {
    padding: 18px;
}

body.af-ui .box-footer,
body.af-ui .panel-footer,
body.af-ui .modal-footer {
    background: var(--af-cream-50);
    border-top: 1px solid var(--af-border);
    padding: 13px 18px;
}

/* Buttons: one geometry, semantic colors. */
body.af-ui .btn,
body.af-ui .tw-dw-btn,
body.af-ui button[type="submit"] {
    min-height: 38px;
    border-radius: var(--af-radius-sm) !important;
    border-width: 1px;
    font-family: inherit;
    font-weight: 700;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-shadow: none;
}

body.af-ui .btn:hover,
body.af-ui .tw-dw-btn:hover,
body.af-ui button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: var(--af-shadow-sm);
}

body.af-ui .btn:active,
body.af-ui .tw-dw-btn:active,
body.af-ui button[type="submit"]:active {
    transform: translateY(0);
}

body.af-ui .btn-primary,
body.af-ui .btn-info,
body.af-ui .tw-dw-btn-primary,
body.af-ui button[type="submit"]:not(.btn-danger):not(.btn-warning):not(.btn-success) {
    color: #fff !important;
    background: var(--af-brown-800) !important;
    border-color: var(--af-brown-800) !important;
}

body.af-ui .tw-dw-btn.tw-bg-gradient-to-r {
    color: #fff !important;
    background-color: var(--af-brown-800) !important;
    background-image: linear-gradient(135deg, var(--af-brown-800), var(--af-gold-600)) !important;
    border-color: var(--af-gold-500) !important;
}

body.af-ui .tw-dw-btn.tw-bg-gradient-to-r:hover {
    background-image: linear-gradient(135deg, var(--af-brown-900), var(--af-gold-700)) !important;
}

body.af-ui .btn-primary:hover,
body.af-ui .btn-info:hover,
body.af-ui .tw-dw-btn-primary:hover,
body.af-ui button[type="submit"]:not(.btn-danger):not(.btn-warning):not(.btn-success):hover {
    background: var(--af-brown-900) !important;
    border-color: var(--af-brown-900) !important;
}

body.af-ui .btn-default,
body.af-ui .btn-secondary,
body.af-ui .tw-dw-btn-outline {
    color: var(--af-brown-800) !important;
    background: #fff !important;
    border-color: #d8cbbb !important;
}

body.af-ui .btn-default:hover,
body.af-ui .btn-secondary:hover,
body.af-ui .tw-dw-btn-outline:hover {
    background: var(--af-gold-100) !important;
    border-color: var(--af-gold-500) !important;
}

body.af-ui .btn-success {
    color: #fff !important;
    background: var(--af-success) !important;
    border-color: var(--af-success) !important;
}

body.af-ui .btn-warning {
    color: var(--af-brown-950) !important;
    background: var(--af-gold-500) !important;
    border-color: var(--af-gold-600) !important;
}

body.af-ui .btn-danger {
    color: #fff !important;
    background: var(--af-danger) !important;
    border-color: var(--af-danger) !important;
}

body.af-ui .btn-xs,
body.af-ui .tw-dw-btn-xs {
    min-height: 32px;
    padding: 5px 10px;
    font-size: 12px;
}

body.af-ui .btn[disabled],
body.af-ui .btn.disabled,
body.af-ui button[disabled] {
    cursor: not-allowed;
    opacity: .58;
    transform: none !important;
    box-shadow: none !important;
}

/* Forms and Select2. */
body.af-ui label,
body.af-ui .control-label {
    color: var(--af-ink-700);
    font-weight: 700;
    margin-bottom: 7px;
}

body.af-ui .form-control,
body.af-ui .input-group-addon,
body.af-ui .select2-container .select2-selection--single,
body.af-ui .select2-container .select2-selection--multiple {
    min-height: var(--af-control-height);
    border: 1px solid #d8cfc4 !important;
    border-radius: var(--af-radius-sm) !important;
    background: #fff;
    color: var(--af-ink-900);
    font-family: inherit;
    box-shadow: none !important;
}

body.af-ui textarea.form-control {
    min-height: 96px;
    resize: vertical;
}

body.af-ui .form-control:focus,
body.af-ui .select2-container--focus .select2-selection,
body.af-ui .select2-container--open .select2-selection {
    border-color: var(--af-gold-500) !important;
    box-shadow: 0 0 0 3px rgba(207, 158, 66, .16) !important;
}

body.af-ui .input-group-addon {
    display: table-cell;
    color: var(--af-brown-700);
    background: var(--af-cream-100);
    border-radius: 0 !important;
}

body.af-ui .input-group .form-control:first-child,
[dir="rtl"] body.af-ui .input-group .form-control:last-child {
    border-start-end-radius: 0 !important;
    border-end-end-radius: 0 !important;
}

body.af-ui .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 40px;
    padding-inline: 12px 32px;
}

body.af-ui .select2-container .select2-selection--single .select2-selection__arrow {
    min-height: 40px;
}

body.af-ui .has-error .form-control,
body.af-ui .has-error .select2-selection {
    border-color: var(--af-danger) !important;
}

body.af-ui .help-block,
body.af-ui .form-text {
    color: var(--af-ink-500);
    font-size: 12px;
}

body.af-ui .has-error .help-block,
body.af-ui .error,
body.af-ui label.error {
    color: var(--af-danger) !important;
}

/* Reusable form grid. It replaces Bootstrap's float-based masonry behaviour,
   which let tall customer/address fields pull later inputs into the same row. */
body.af-ui .af-form-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
}

body.af-ui .af-form-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.af-ui .af-form-grid::before,
body.af-ui .af-form-grid::after,
body.af-ui .af-form-grid > .clearfix {
    display: none !important;
    content: none !important;
}

body.af-ui .af-form-grid > [class*="col-"] {
    float: none !important;
    width: auto !important;
    min-width: 0;
    max-width: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

body.af-ui .af-form-grid > .af-form-field--wide {
    grid-column: span 2;
}

body.af-ui .af-form-grid > #restaurant_module_span {
    grid-column: 1 / -1;
}

body.af-ui .af-form-grid .form-group {
    min-width: 0;
    margin: 0;
}

body.af-ui .af-form-grid .form-control:not(.select2-hidden-accessible),
body.af-ui .af-form-grid .select2-container,
body.af-ui .af-form-grid .input-group {
    width: 100% !important;
    min-width: 0;
}

/* Shared payment form used by sales, purchases, expenses and POS. */
body.af-ui .payment_row,
body.af-ui #payment_rows_div {
    max-width: 100%;
    min-width: 0;
}

body.af-ui .af-payment-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
}

body.af-ui .af-payment-grid::before,
body.af-ui .af-payment-grid::after,
body.af-ui .af-payment-grid > .clearfix {
    display: none !important;
    content: none !important;
}

body.af-ui .af-payment-grid > [class*="col-"],
body.af-ui .af-payment-details-grid > [class*="col-"] {
    float: none !important;
    width: auto !important;
    min-width: 0;
    max-width: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

body.af-ui .af-payment-grid > .col-md-12,
body.af-ui .af-payment-grid > .cash_denomination_div,
body.af-ui .af-payment-grid > .payment_details_div {
    grid-column: 1 / -1;
}

body.af-ui .af-payment-account-date-pair {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
    width: 100% !important;
    min-width: 0;
}

body.af-ui .af-payment-account-date-pair__field {
    min-width: 0;
}

body.af-ui .af-payment-details-grid:not(.hide) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    max-width: 100%;
}

body.af-ui .af-payment-details-grid::before,
body.af-ui .af-payment-details-grid::after,
body.af-ui .af-payment-details-grid > .clearfix {
    display: none !important;
    content: none !important;
}

body.af-ui .af-payment-grid .form-group,
body.af-ui .af-payment-details-grid .form-group {
    min-width: 0;
    margin: 0;
}

body.af-ui .af-payment-grid .form-control:not(.select2-hidden-accessible),
body.af-ui .af-payment-grid .select2-container,
body.af-ui .af-payment-grid .input-group,
body.af-ui .af-payment-details-grid .form-control:not(.select2-hidden-accessible),
body.af-ui .af-payment-details-grid .select2-container,
body.af-ui .af-payment-details-grid .input-group {
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
}

body.af-ui .af-payment-grid .input-group,
body.af-ui .af-payment-details-grid .input-group {
    display: flex !important;
    align-items: stretch;
}

body.af-ui .af-payment-grid .input-group-addon,
body.af-ui .af-payment-details-grid .input-group-addon,
body.af-ui .af-payment-grid .input-group-btn,
body.af-ui .af-payment-details-grid .input-group-btn {
    display: flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: auto;
}

body.af-ui .af-payment-grid .input-group > .form-control:not(.select2-hidden-accessible),
body.af-ui .af-payment-grid .input-group > .select2-container,
body.af-ui .af-payment-details-grid .input-group > .form-control:not(.select2-hidden-accessible),
body.af-ui .af-payment-details-grid .input-group > .select2-container {
    display: block;
    flex: 1 1 auto;
    width: 1% !important;
    min-width: 0;
}

body.af-ui .af-field-label {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 27px;
}

body.af-ui .af-inline-fields {
    display: grid;
    grid-template-columns: minmax(90px, .8fr) minmax(120px, 1.2fr);
    gap: 8px;
    min-width: 0;
}

body.af-ui .af-credit-option .form-group {
    min-height: 100%;
    padding: 12px 14px;
    border: 1px solid var(--af-border);
    border-radius: var(--af-radius-md);
    background: var(--af-cream-50);
}

body.af-ui .af-credit-option label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

body.af-ui .af-credit-option .help-block {
    margin: 0;
    line-height: 1.55;
}

body.af-ui .af-customer-addresses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
    padding: 9px 11px;
    border: 1px solid #eee3d5;
    border-radius: var(--af-radius-sm);
    background: #fffdf9;
    color: var(--af-ink-600);
    font-size: 11px;
    line-height: 1.5;
}

body.af-ui .af-customer-addresses > div {
    min-width: 0;
    overflow-wrap: anywhere;
}

body.af-ui .af-customer-addresses strong {
    display: block;
    margin-bottom: 2px;
    color: var(--af-brown-800);
}

body.af-ui .af-form-file .file-input,
body.af-ui .af-form-file .file-caption-main {
    width: 100%;
    min-width: 0;
}

body.af-ui .af-form-file .file-caption-main {
    display: flex !important;
    align-items: stretch;
}

body.af-ui .af-form-file .file-caption {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
}

body.af-ui .af-form-file .input-group-btn {
    display: flex !important;
    flex: 0 0 auto;
    width: auto !important;
}

body.af-ui .af-form-file .input-group-btn > .btn,
body.af-ui .af-form-file .input-group-btn > .btn-file {
    width: auto !important;
    min-width: 88px;
    margin: 0 !important;
}

body.af-ui .af-form-file .help-block {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

body.af-ui .af-form-file .help-block br {
    display: none;
}

body.af-ui form .form-group > .btn,
body.af-ui form .form-group > .btn-group {
    max-width: 100%;
}

body.af-ui form .form-group > .btn {
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 1199px) {
    body.af-ui .af-form-grid,
    body.af-ui .af-form-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.af-ui .af-payment-grid,
    body.af-ui .af-payment-details-grid:not(.hide) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.af-ui form .file-input,
    body.af-ui form .file-caption-main {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    body.af-ui form .file-caption-main {
        display: flex !important;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 6px;
    }

    body.af-ui form .file-caption-main > .file-caption {
        display: block !important;
        flex: 1 1 120px;
        width: auto !important;
        min-width: 0;
    }

    body.af-ui form .file-caption-main > .input-group-btn {
        display: flex !important;
        flex: 0 1 auto;
        width: auto !important;
        max-width: 100%;
    }

    body.af-ui form .file-caption-main > .input-group-btn > .btn,
    body.af-ui form .file-caption-main > .input-group-btn > .btn-file {
        flex: 0 1 auto;
        width: auto !important;
        min-width: 0;
        margin: 0 !important;
    }
}

body.af-ui .af-stock-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

body.af-ui .af-stock-summary-item {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--af-border);
    border-radius: 12px;
    background: var(--af-gold-50, #fffaf0);
    text-align: center;
}

body.af-ui .af-stock-summary-item > span,
body.af-ui .af-stock-summary-item > h3 {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

body.af-ui .af-stock-summary-item > span {
    min-height: 42px;
    color: var(--af-ink-700, #5f5048);
    font-size: 13px;
    line-height: 1.6;
}

body.af-ui .af-stock-summary-item > h3 {
    margin-top: 8px !important;
    color: var(--af-brown-900, #4d2f20);
    font-size: clamp(18px, 2vw, 25px);
    line-height: 1.35;
}

@media (max-width: 767px) {
    body.af-ui .af-form-grid,
    body.af-ui .af-form-grid--3,
    body.af-ui .af-payment-grid,
    body.af-ui .af-payment-details-grid:not(.hide),
    body.af-ui .af-payment-account-date-pair {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    body.af-ui .af-form-grid > .af-form-field--wide {
        grid-column: span 1;
    }

    body.af-ui .af-customer-addresses {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Tables and DataTables. */
body.af-ui .table-responsive,
body.af-ui .dataTables_wrapper {
    max-width: 100%;
}

body.af-ui .table-responsive {
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid var(--af-border);
    border-radius: var(--af-radius-md);
    background: #fff;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: var(--af-gold-300) var(--af-cream-100);
    scrollbar-width: thin;
}

body.af-ui .table-responsive > .table {
    margin-bottom: 0;
}

body.af-ui .table {
    background: #fff;
    color: var(--af-ink-900);
}

body.af-ui .table > thead > tr > th {
    background: #f5ede1;
    color: var(--af-brown-900);
    border-color: #e1d4c4;
    font-weight: 800;
    vertical-align: middle;
    white-space: nowrap;
}

body.af-ui .table > tbody > tr > td,
body.af-ui .table > tfoot > tr > td {
    border-color: #eee7de;
    vertical-align: middle;
}

body.af-ui .table-striped > tbody > tr:nth-of-type(odd) {
    background: var(--af-cream-50);
}

body.af-ui .table-hover > tbody > tr:hover,
body.af-ui .table > tbody > tr:hover {
    background: #fff8e8;
}

body.af-ui .dataTables_wrapper .dataTables_filter input,
body.af-ui .dataTables_wrapper .dataTables_length select {
    min-height: 36px;
    border: 1px solid #d8cfc4;
    border-radius: var(--af-radius-sm);
    background: #fff;
    padding: 5px 10px;
}

body.af-ui .dataTables_wrapper .dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body.af-ui .dataTables_wrapper .dt-button {
    min-height: 34px;
    border: 1px solid #d8cbbb !important;
    border-radius: var(--af-radius-sm) !important;
    color: var(--af-brown-800) !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.af-ui .dataTables_wrapper .dt-button:hover {
    border-color: var(--af-gold-500) !important;
    background: var(--af-gold-100) !important;
}

/* AdminLTE adds clearfix pseudo-elements to every .box-body. When a box body
   is also a CSS grid, those pseudo-elements become empty grid cells. */
body.af-ui .metric-grid::before,
body.af-ui .metric-grid::after {
    display: none !important;
    content: none !important;
}

body.af-ui .pagination > li > a,
body.af-ui .pagination > li > span {
    color: var(--af-brown-800);
    border-color: var(--af-border);
    background: #fff;
}

body.af-ui .pagination > .active > a,
body.af-ui .pagination > .active > span {
    color: #fff !important;
    background: var(--af-brown-800) !important;
    border-color: var(--af-brown-800) !important;
}

/* Tabs, badges, alerts and states. */
body.af-ui .nav-tabs {
    border-bottom-color: var(--af-border);
}

body.af-ui .nav-tabs > li > a {
    color: var(--af-ink-700);
    border-radius: var(--af-radius-sm) var(--af-radius-sm) 0 0;
}

body.af-ui .nav-tabs > li.active > a,
body.af-ui .nav-tabs > li.active > a:hover,
body.af-ui .nav-tabs > li.active > a:focus {
    color: var(--af-brown-900);
    background: var(--af-cream-50);
    border-color: var(--af-border) var(--af-border) transparent;
    box-shadow: inset 0 3px 0 var(--af-gold-600);
    font-weight: 800;
}

body.af-ui .alert {
    border: 1px solid transparent;
    border-radius: var(--af-radius-md);
    box-shadow: var(--af-shadow-sm);
}

body.af-ui .alert-success { color: var(--af-success); background: var(--af-success-soft); border-color: #b9e1cb; }
body.af-ui .alert-danger { color: var(--af-danger); background: var(--af-danger-soft); border-color: #f4c7c3; }
body.af-ui .alert-warning { color: var(--af-warning); background: var(--af-warning-soft); border-color: #eed8a3; }
body.af-ui .alert-info { color: var(--af-info); background: var(--af-info-soft); border-color: #bfdde6; }

body.af-ui .label,
body.af-ui .badge {
    border-radius: 999px;
    padding: 5px 9px;
    font-weight: 700;
}

body.af-ui .modal-content {
    border: 1px solid var(--af-border);
    border-radius: var(--af-radius-lg);
    box-shadow: var(--af-shadow-lg);
    overflow: hidden;
}

body.af-ui .modal-backdrop.in {
    opacity: .46;
}

body.af-ui .dropdown-menu,
body.af-ui [role="menu"] {
    border: 1px solid var(--af-border);
    border-radius: var(--af-radius-md) !important;
    box-shadow: var(--af-shadow-md) !important;
}

body.af-ui .dropdown-menu > li > a {
    padding-block: 9px;
    color: var(--af-ink-700);
}

body.af-ui .dropdown-menu > li > a:hover,
body.af-ui .dropdown-menu > li > a:focus {
    color: var(--af-brown-900);
    background: var(--af-gold-100);
}

/* POS: preserve workflow, improve touch, hierarchy and brand consistency. */
body.af-pos-shell .content {
    padding: 8px 8px 76px;
}

body.af-pos-shell #add_pos_sell_form > .row,
body.af-pos-shell #edit_pos_sell_form > .row {
    max-width: 1920px;
    margin-inline: auto !important;
}

body.af-pos-shell #add_pos_sell_form .tw-shadow-\[rgba\(17\,_17\,_26\,_0\.1\)_0px_0px_16px\],
body.af-pos-shell #edit_pos_sell_form .tw-shadow-\[rgba\(17\,_17\,_26\,_0\.1\)_0px_0px_16px\] {
    border: 1px solid var(--af-border);
    box-shadow: var(--af-shadow-md) !important;
}

body.af-pos-shell #pos_table thead th {
    background: var(--af-brown-800);
    color: #fff;
    border-color: var(--af-brown-700);
}

body.af-pos-shell #pos_table input,
body.af-pos-shell #pos_table .form-control {
    min-height: 36px;
}

body.af-pos-shell .pos_form_totals {
    background: var(--af-cream-100) !important;
    border-color: var(--af-border) !important;
}

body.af-pos-shell .pos_form_totals .pos_totals_left {
    background: var(--af-border) !important;
}

body.af-pos-shell .pos_form_totals .pos_totals_cell {
    background: var(--af-cream-50) !important;
}

body.af-pos-shell .pos_form_totals .pos_totals_label {
    color: var(--af-ink-500) !important;
}

body.af-pos-shell .pos_form_totals .pos_totals_right {
    background: linear-gradient(135deg, #fff6dc, #f8e6b7) !important;
    border-color: var(--af-gold-300) !important;
}

body.af-pos-shell .pos_form_totals .pos_totals_right_label,
body.af-pos-shell .pos_form_totals .pos_totals_right_value {
    color: var(--af-brown-900) !important;
}

body.af-pos-shell .pos-form-actions {
    background: rgba(255, 253, 248, .97) !important;
    border-top: 1px solid var(--af-border) !important;
    box-shadow: 0 -8px 28px rgba(67, 40, 28, .12) !important;
    backdrop-filter: blur(10px);
}

body.af-pos-shell .pos-form-actions button {
    min-height: var(--af-touch-height);
    border-radius: var(--af-radius-sm) !important;
}

body.af-pos-shell .pos-form-actions .pos-finalize {
    background: var(--af-brown-800) !important;
    color: #fff !important;
}

body.af-pos-shell .pos-form-actions .pos-finalize:hover {
    background: var(--af-brown-900) !important;
}

body.af-pos-shell #recent-transactions {
    background: var(--af-gold-600) !important;
    color: var(--af-brown-950) !important;
}

/* Contextual section actions: the common daily tasks stay visible and grouped. */
body.af-ui .af-section-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 18px 22px 2px;
    padding: 12px 14px;
    border: 1px solid var(--af-border);
    border-radius: var(--af-radius-lg);
    background: linear-gradient(135deg, rgba(255, 253, 248, .98), rgba(250, 241, 219, .92));
    box-shadow: var(--af-shadow-sm);
}

body.af-ui .af-section-actions__identity {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 185px;
    color: var(--af-brown-900);
}

body.af-ui .af-section-actions__identity > span:last-child {
    display: flex;
    flex-direction: column;
}

body.af-ui .af-section-actions__identity strong {
    font-size: 15px;
    line-height: 1.35;
}

body.af-ui .af-section-actions__identity small {
    margin-top: 2px;
    color: var(--af-ink-500);
    font-size: 11px;
    white-space: nowrap;
}

body.af-ui .af-section-actions__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--af-brown-800), var(--af-brown-600));
    color: var(--af-gold-100);
    box-shadow: 0 5px 14px rgba(80, 49, 29, .18);
}

body.af-ui .af-section-actions__buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    padding: 2px 1px 5px;
    scrollbar-width: thin;
    scrollbar-color: var(--af-gold-300) transparent;
}

body.af-ui .af-section-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: max-content;
    min-height: 42px;
    padding: 9px 13px;
    border: 1px solid var(--af-border);
    border-radius: 10px;
    background: #fff;
    color: var(--af-brown-800);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    flex: 0 0 auto;
    white-space: nowrap;
    overflow: hidden;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

body.af-ui .af-section-action:hover,
body.af-ui .af-section-action:focus {
    color: var(--af-brown-950);
    border-color: var(--af-gold-500);
    background: var(--af-gold-100);
    box-shadow: 0 4px 12px rgba(105, 70, 36, .11);
    transform: translateY(-1px);
    outline: none;
}

body.af-ui .af-section-action--primary {
    border-color: var(--af-brown-700);
    background: linear-gradient(135deg, var(--af-brown-800), var(--af-brown-600));
    color: #fff;
}

body.af-ui .af-section-action--primary:hover,
body.af-ui .af-section-action--primary:focus {
    border-color: var(--af-brown-900);
    background: linear-gradient(135deg, var(--af-brown-900), var(--af-brown-700));
    color: #fff;
}

body.af-ui .af-section-action--muted {
    background: rgba(255, 255, 255, .62);
    color: var(--af-ink-500);
}

body.af-ui .af-section-action.is-active {
    border-color: var(--af-gold-600);
    background: var(--af-gold-100);
    color: var(--af-brown-950);
    box-shadow: inset 0 -3px 0 var(--af-gold-600);
}

/* Authentication and public forms. */
body.af-auth-shell,
body.af-guest-shell {
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at 18% 12%, rgba(207, 158, 66, .22), transparent 30%),
        linear-gradient(135deg, var(--af-brown-950), var(--af-brown-800) 58%, #8c6734) !important;
}

body.af-auth-shell .login-box-body,
body.af-auth-shell .register-box-body,
body.af-auth-shell .right-col form,
body.af-guest-shell .card,
body.af-guest-shell .box {
    background: rgba(255, 255, 255, .97);
    border: 1px solid rgba(230, 201, 131, .55);
    border-radius: var(--af-radius-lg);
    box-shadow: var(--af-shadow-lg);
}

/* Responsive shell and safe table behaviour. */
@media (max-width: 1199px) {
    body.af-ui .content { padding: 18px; }
    body.af-ui .content-header { padding: 17px 18px 3px; }
    body.af-ui .box-body, body.af-ui .panel-body { padding: 15px; }
}

@media (max-width: 1024px) {
    body.af-ui .btn:not(.btn-xs),
    body.af-ui .tw-dw-btn:not(.tw-dw-btn-xs),
    body.af-ui button[type="submit"] {
        min-height: var(--af-touch-height);
    }

    body.af-ui .btn-xs,
    body.af-ui .tw-dw-btn-xs,
    body.af-ui .dataTables_wrapper .dt-button,
    body.af-ui .af-section-action {
        min-width: 44px;
        min-height: var(--af-touch-height);
    }

    body.af-ui .af-section-actions {
        display: block;
        margin: 14px 16px 0;
    }

    body.af-ui .af-section-actions__identity {
        min-width: 0;
        margin-bottom: 10px;
    }

    body.af-ui .af-section-actions__buttons {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
        align-items: stretch;
        width: 100%;
        overflow: visible;
        padding: 0;
    }

    body.af-ui .af-section-action {
        width: 100%;
        min-width: 0;
        white-space: normal;
        line-height: 1.35;
        text-align: center;
    }

    /* Keep the DataTables toolbar readable on tablets and narrow laptops.
       The original Bootstrap 1/8/3 columns leave the length selector only a
       few pixels wide, so its label spills underneath the export buttons. */
    body.af-ui .dataTables_wrapper > .row:first-child {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(190px, 260px);
        gap: 10px 12px;
        align-items: center;
        width: 100%;
        margin: 0 0 12px !important;
        text-align: start !important;
    }

    body.af-ui .dataTables_wrapper > .row:first-child > [class*="col-"] {
        float: none !important;
        width: auto !important;
        min-width: 0;
        padding: 0 !important;
    }

    body.af-ui .dataTables_wrapper > .row:first-child > .col-sm-8 {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    body.af-ui .dataTables_wrapper > .row:first-child > .col-sm-1 {
        grid-column: 2;
        grid-row: 2;
    }

    body.af-ui .dataTables_wrapper > .row:first-child > .col-sm-3 {
        grid-column: 1;
        grid-row: 2;
    }

    body.af-ui .dataTables_wrapper > .row:first-child .dt-buttons {
        width: 100%;
        justify-content: flex-start;
    }

    body.af-ui .dataTables_wrapper > .row:first-child .dt-buttons > * {
        float: none !important;
        flex: 0 1 auto;
        min-width: 0;
        margin: 0 !important;
        white-space: nowrap;
    }

    body.af-ui .dataTables_wrapper > .row:first-child .dataTables_length,
    body.af-ui .dataTables_wrapper > .row:first-child .dataTables_filter {
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    body.af-ui .dataTables_wrapper > .row:first-child .dataTables_length label,
    body.af-ui .dataTables_wrapper > .row:first-child .dataTables_filter label {
        display: flex;
        align-items: center;
        gap: 7px;
        width: 100%;
        min-width: 0;
        margin: 0;
        white-space: nowrap;
    }

    body.af-ui .dataTables_wrapper > .row:first-child .dataTables_filter input {
        width: 100% !important;
        min-width: 0;
        margin: 0;
    }

    body.af-ui .small-view-side-active {
        width: min(84vw, 310px) !important;
        max-width: 310px;
        box-shadow: var(--af-shadow-lg);
    }

    [dir="rtl"] body.af-ui .small-view-side-active {
        right: 0 !important;
        left: auto !important;
    }

    body.af-ui .overlay {
        background: rgba(47, 29, 21, .55);
        backdrop-filter: blur(2px);
    }

    body.af-ui .modal-dialog {
        width: min(calc(100% - 28px), 760px);
        margin: 18px auto;
    }
}

@media (max-width: 767px) {
    body.af-ui .content { padding: 12px 10px 24px; }
    body.af-ui .content-header { padding: 14px 12px 2px; }
    body.af-ui .content-header > h1 { font-size: 22px; }
    body.af-ui .box, body.af-ui .card, body.af-ui .panel, body.af-ui .nav-tabs-custom { border-radius: 12px !important; }
    body.af-ui .box-body, body.af-ui .panel-body { padding: 12px; }

    body.af-ui .af-stock-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    body.af-ui .af-stock-summary-item {
        padding: 11px 8px;
    }

    body.af-ui .af-stock-summary-item > span {
        min-height: 40px;
        font-size: 11px;
    }

    body.af-ui .af-stock-summary-item > h3 {
        font-size: 17px;
    }

    body.af-ui .row > [class*="col-xs-"],
    body.af-ui .row > [class*="col-sm-"],
    body.af-ui .row > [class*="col-md-"],
    body.af-ui .row > [class*="col-lg-"] {
        min-width: 0;
    }

    body.af-ui .form-group {
        margin-bottom: 14px;
    }

    body.af-ui .form-control,
    body.af-ui .select2-container .select2-selection--single,
    body.af-ui .select2-container .select2-selection--multiple {
        min-height: var(--af-touch-height);
        font-size: 16px;
    }

    body.af-ui .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 42px;
    }

    body.af-ui .table-responsive,
    body.af-ui .dataTables_scrollBody {
        width: 100%;
        max-width: calc(100vw - 20px);
        overflow-x: auto !important;
        touch-action: pan-x pan-y;
    }

    body.af-ui .table-responsive > table,
    body.af-ui .dataTables_scrollBody > table {
        min-width: 720px;
    }

    body.af-ui .dataTables_wrapper .dataTables_length,
    body.af-ui .dataTables_wrapper .dataTables_filter,
    body.af-ui .dataTables_wrapper .dt-buttons {
        float: none !important;
        width: 100%;
        text-align: start !important;
        margin-bottom: 9px;
    }

    body.af-ui .dataTables_wrapper > .row:first-child {
        grid-template-columns: minmax(0, 1fr);
    }

    body.af-ui .dataTables_wrapper > .row:first-child > .col-sm-8,
    body.af-ui .dataTables_wrapper > .row:first-child > .col-sm-1,
    body.af-ui .dataTables_wrapper > .row:first-child > .col-sm-3 {
        grid-column: 1;
    }

    body.af-ui .dataTables_wrapper > .row:first-child > .col-sm-8 { grid-row: 1; }
    body.af-ui .dataTables_wrapper > .row:first-child > .col-sm-1 { grid-row: 2; }
    body.af-ui .dataTables_wrapper > .row:first-child > .col-sm-3 { grid-row: 3; }

    body.af-ui .dataTables_wrapper .dataTables_filter input {
        width: min(100%, 250px);
    }

    body.af-ui .dataTables_wrapper .dataTables_info,
    body.af-ui .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        width: 100%;
        text-align: center !important;
    }

    /* Long listing tables become readable field/value cards on phones. */
    body.af-ui .dataTables_scroll.af-mobile-card-host,
    body.af-ui .table-responsive.af-mobile-card-host {
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.af-ui .af-mobile-card-host .dataTables_scrollHead,
    body.af-ui .af-mobile-card-host .dataTables_scrollFoot {
        display: none !important;
    }

    body.af-ui .dataTables_scrollBody.af-mobile-card-body {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        border: 0 !important;
    }

    body.af-ui table.af-mobile-card-table,
    body.af-ui table.af-mobile-card-table > tbody,
    body.af-ui table.af-mobile-card-table > tfoot {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        transform: none !important;
    }

    body.af-ui table.af-mobile-card-table > thead {
        display: none !important;
    }

    body.af-ui table.af-mobile-card-table .af-mobile-header-row {
        display: none !important;
    }

    body.af-ui table.af-mobile-card-table > tbody > tr,
    body.af-ui table.af-mobile-card-table > tfoot > tr {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px !important;
        overflow: hidden;
        border: 1px solid var(--af-border) !important;
        border-radius: 12px;
        background: #fff !important;
        box-shadow: 0 4px 14px rgba(70, 46, 30, .07);
    }

    body.af-ui table.af-mobile-card-table > tfoot > tr {
        border-color: var(--af-gold-300) !important;
        background: var(--af-gold-100) !important;
    }

    body.af-ui table.af-mobile-card-table > tbody > tr > td,
    body.af-ui table.af-mobile-card-table > tfoot > tr > td,
    body.af-ui table.af-mobile-card-table > tfoot > tr > th {
        display: flex !important;
        box-sizing: border-box !important;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 44px;
        padding: 10px 12px !important;
        border: 0 !important;
        border-bottom: 1px solid #eee7de !important;
        background: transparent !important;
        color: var(--af-ink-900);
        text-align: start !important;
        white-space: normal !important;
        overflow: visible !important;
        overflow-wrap: anywhere;
    }

    body.af-ui table.af-mobile-card-table > tbody > tr > td:last-child,
    body.af-ui table.af-mobile-card-table > tfoot > tr > td:last-child,
    body.af-ui table.af-mobile-card-table > tfoot > tr > th:last-child {
        border-bottom: 0 !important;
    }

    body.af-ui table.af-mobile-card-table td::before,
    body.af-ui table.af-mobile-card-table tfoot th::before {
        content: attr(data-label);
        flex: 0 0 42%;
        max-width: 42%;
        color: var(--af-brown-800);
        font-size: 12px;
        font-weight: 800;
        line-height: 1.55;
        text-align: start;
        white-space: normal;
    }

    body.af-ui table.af-mobile-card-table .af-mobile-cell-value {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 1 1 auto;
        flex-wrap: wrap;
        gap: 6px;
        min-width: 0;
        max-width: 58%;
        color: var(--af-ink-900);
        text-align: end;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    body.af-ui table.af-mobile-card-table .af-mobile-cell-value > * {
        max-width: 100%;
    }

    body.af-ui table.af-mobile-card-table .af-mobile-empty-cell {
        display: none !important;
    }

    body.af-ui table.af-mobile-card-table td[colspan] {
        display: block !important;
        padding: 18px 12px !important;
        text-align: center !important;
    }

    body.af-ui table.af-mobile-card-table td[colspan]::before {
        display: none;
    }

    body.af-ui table.af-mobile-card-table td[colspan] .af-mobile-cell-value {
        display: block;
        max-width: 100%;
        text-align: center;
    }

    body.af-ui table.af-mobile-card-table .btn,
    body.af-ui table.af-mobile-card-table .tw-dw-btn {
        width: auto !important;
        margin: 0 !important;
    }

    body.af-ui .dataTables_wrapper .dt-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
    }

    body.af-ui .dataTables_wrapper .dt-buttons > .btn,
    body.af-ui .dataTables_wrapper .dt-buttons > .dt-button,
    body.af-ui .dataTables_wrapper .dt-buttons > a {
        flex: 1 1 120px;
        min-height: 44px;
        margin: 0 !important;
        white-space: normal !important;
    }

    body.af-ui .dataTables_wrapper .dataTables_length,
    body.af-ui .dataTables_wrapper .dataTables_filter {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-height: 44px;
    }

    body.af-ui .dataTables_wrapper .dataTables_filter label,
    body.af-ui .dataTables_wrapper .dataTables_length label {
        display: flex;
        align-items: center;
        gap: 7px;
        width: 100%;
        margin: 0;
    }

    body.af-ui .dataTables_wrapper .dataTables_filter input {
        flex: 1 1 auto;
        width: 100% !important;
        min-width: 0;
    }

    body.af-ui .modal-dialog {
        width: calc(100% - 16px);
        margin: 8px auto;
    }

    body.af-ui .modal-content {
        max-height: calc(100dvh - 16px);
        display: flex;
        flex-direction: column;
    }

    body.af-ui .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.af-ui .modal-footer {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    body.af-ui .modal-footer .btn {
        flex: 1 1 130px;
        margin: 0 !important;
    }

    body.af-ui .af-section-actions {
        display: block;
        margin: 10px 10px 2px;
        padding: 10px;
    }

    body.af-ui .af-section-actions__identity {
        min-width: 0;
        margin-bottom: 9px;
    }

    body.af-ui .af-section-actions__identity small {
        white-space: normal;
    }

    body.af-ui .af-section-actions__buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    body.af-ui .af-section-action {
        min-height: 46px;
        padding-inline: 12px;
    }

    /* Financial control centre and document shortcuts use dense custom
       blocks; keep every block inside the phone viewport. */
    body.af-ui .finance-hero,
    body.af-ui .document-section-shortcuts,
    body.af-ui .currency-panel,
    body.af-ui .control-tabs {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
    }

    body.af-ui .finance-hero {
        padding: 18px 14px;
    }

    body.af-ui .finance-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    body.af-ui .finance-actions .btn {
        width: 100% !important;
        min-width: 0;
        margin: 0 !important;
        padding-inline: 6px;
        white-space: normal;
    }

    body.af-ui .document-section-shortcuts {
        overflow: hidden;
    }

    body.af-ui .document-section-shortcuts__intro,
    body.af-ui .document-section-shortcuts__actions {
        width: 100%;
        min-width: 0;
    }

    body.af-ui .document-section-shortcuts__intro > span:last-child {
        min-width: 0;
    }

    body.af-ui .document-section-shortcuts__intro small {
        overflow-wrap: anywhere;
    }

    body.af-ui .document-section-shortcuts__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body.af-ui .document-section-shortcuts__actions a {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        justify-content: center;
        margin: 0;
        white-space: normal;
        text-align: center;
    }

    body.af-ui .metric-grid {
        width: 100%;
        max-width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.af-ui .metric {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    body.af-ui .metric strong {
        max-width: 100%;
        font-size: clamp(13px, 3.8vw, 16px);
        overflow-wrap: anywhere;
    }

    body.af-pos-shell .content { padding: 5px 5px 118px; }
    body.af-pos-shell .box-body { padding: 8px; }
    body.af-pos-shell .pos-form-actions { max-height: 38dvh; overflow-y: auto; }
    body.af-pos-shell .pos-form-actions > .tw-flex { padding-inline: 8px !important; }
    body.af-pos-shell .pos-footer-secondary { width: 100%; padding-bottom: 4px; }
    body.af-pos-shell .pos-footer-secondary > button { min-width: 68px; min-height: 48px; }
    body.af-pos-shell #pos_table { min-width: 650px; }
}

@media (max-width: 420px) {
    body.af-ui .content { padding-inline: 8px; }
    body.af-ui .btn:not(.btn-xs) { width: 100%; }
    body.af-ui .btn-group .btn,
    body.af-ui .input-group-btn .btn,
    body.af-ui .dataTables_wrapper .dt-button,
    body.af-pos-shell .pos-form-actions .btn,
    body.af-pos-shell .pos-form-actions button { width: auto; }
    body.af-ui .box-header { padding: 12px; }
    body.af-pos-shell .pos_form_totals .pos_totals_cell { flex-basis: calc(33.333% - 1px); min-width: calc(33.333% - 1px); }
}

/* DataTables keeps the length control in a Bootstrap col-sm-1 even on wide
   screens. Its Arabic label is wider than that column and used to extend
   underneath the CSV button. Give exports their own row on every tablet and
   desktop size, then place length and search in two safe columns below it. */
@media (min-width: 768px) {
    body.af-ui .dataTables_wrapper > .row:first-child {
        display: grid;
        grid-template-columns: minmax(190px, 260px) minmax(260px, 420px);
        gap: 10px 12px;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin: 0 0 12px !important;
        text-align: start !important;
    }

    body.af-ui .dataTables_wrapper > .row:first-child > [class*="col-"] {
        float: none !important;
        width: auto !important;
        min-width: 0;
        padding: 0 !important;
    }

    body.af-ui .dataTables_wrapper > .row:first-child > .col-sm-8 {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    body.af-ui .dataTables_wrapper > .row:first-child > .col-sm-1 {
        grid-column: 1;
        grid-row: 2;
    }

    body.af-ui .dataTables_wrapper > .row:first-child > .col-sm-3 {
        grid-column: 2;
        grid-row: 2;
    }

    body.af-ui .dataTables_wrapper > .row:first-child .dt-buttons {
        width: 100%;
        justify-content: flex-start;
    }

    body.af-ui .dataTables_wrapper > .row:first-child .dt-buttons > * {
        float: none !important;
        flex: 0 1 auto;
        min-width: 0;
        margin: 0 !important;
        white-space: nowrap;
    }

    body.af-ui .dataTables_wrapper > .row:first-child .dataTables_length,
    body.af-ui .dataTables_wrapper > .row:first-child .dataTables_filter,
    body.af-ui .dataTables_wrapper > .row:first-child .dataTables_length label,
    body.af-ui .dataTables_wrapper > .row:first-child .dataTables_filter label {
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    body.af-ui .dataTables_wrapper > .row:first-child .dataTables_length label,
    body.af-ui .dataTables_wrapper > .row:first-child .dataTables_filter label {
        display: flex;
        align-items: center;
        gap: 7px;
        white-space: nowrap;
    }

    body.af-ui .dataTables_wrapper > .row:first-child .dataTables_filter input {
        width: 100% !important;
        min-width: 0;
        margin: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.af-ui *, body.af-ui *::before, body.af-ui *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media print {
    body.af-ui { background: #fff !important; }
    body.af-ui .box, body.af-ui .card, body.af-ui .panel { box-shadow: none !important; border-color: #bbb !important; }
}