/* Shared screen theme for the existing ScriptX Angular workspace.
 * Print, PDF, barcode, and scanner output geometry stays with its dedicated styles. */
@media screen {
    :root {
        --sx-primary: #176b59;
        --sx-brand: var(--sx-primary);
        --sx-brand-strong: #105446;
        --sx-brand-soft: #e5f1ed;
        --sx-canvas: #f5f7f5;
        --sx-surface: #ffffff;
        --sx-surface-muted: #f8faf8;
        --sx-text: #19312c;
        --sx-ink: var(--sx-text);
        --sx-muted: #53675f;
        --sx-border: #dce5df;
        --sx-border-strong: #bdcbc4;
        --sx-focus: #167555;
        --sx-success: #287a53;
        --sx-warning: #98651d;
        --sx-danger: #b13c45;
        --sx-info: #2f6876;
        --sx-radius-sm: 5px;
        --sx-radius: 8px;
        --sx-radius-lg: 12px;
        --sx-shadow-sm: 0 1px 2px rgba(25, 49, 41, 0.08);
        --sx-shadow: 0 8px 24px rgba(25, 49, 41, 0.1);
        --sx-control-height: 38px;
    }

    html,
    body {
        color: var(--sx-ink);
        background: var(--sx-canvas);
    }

    body.sx-workspace,
    body.sx-workspace .sx-app,
    body.sx-workspace .sx-app .app-content-body {
        color: var(--sx-text);
        background-color: var(--sx-canvas);
        background-image: none;
    }

    body,
    button,
    input,
    select,
    textarea {
        font-family: "sg", "Segoe UI", Arial, sans-serif;
    }

    body {
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    body.arabic-mode,
    html[lang="ar"] body {
        font-family: "watad-arabic", "sakkal", "sg", Arial, sans-serif !important;
    }

    .app-content-body {
        color: var(--sx-ink);
        background: var(--sx-canvas);
    }

    .app-content-body h1,
    .app-content-body h2,
    .app-content-body h3,
    .app-content-body h4,
    .app-content-body h5,
    .app-content-body h6,
    .modal-title {
        color: var(--sx-ink);
        font-weight: 600;
        letter-spacing: -0.015em;
    }

    .text-muted,
    .help-block,
    .form-control-feedback,
    .dms-item-description {
        color: var(--sx-muted) !important;
    }

    a {
        color: var(--sx-brand);
    }

    a:hover,
    a:focus {
        color: var(--sx-brand-strong);
    }

    .box,
    .panel,
    .well,
    .list-group {
        border-color: var(--sx-border);
        border-radius: var(--sx-radius-lg);
    }

    .box.wrapper,
    .box.wrapper-md,
    .panel,
    .well,
    .bg-white {
        background-color: var(--sx-surface);
    }

    .box.wrapper,
    .box.wrapper-md,
    .panel {
        box-shadow: var(--sx-shadow-sm);
    }

    .sx-app .wrapper-md {
        padding: clamp(16px, 2vw, 28px);
    }

    .sx-app .box.wrapper-md > .fixed.wrapper.b-b {
        margin: calc(clamp(16px, 2vw, 28px) * -1);
        margin-block-end: 20px;
        padding: 18px clamp(16px, 2vw, 28px);
        background: var(--sx-surface);
        border-color: var(--sx-border);
    }

    .panel-heading,
    .panel-footer {
        color: var(--sx-ink);
        background: var(--sx-surface-muted);
        border-color: var(--sx-border);
    }

    .panel-heading {
        border-start-start-radius: var(--sx-radius-lg);
        border-start-end-radius: var(--sx-radius-lg);
        font-weight: 600;
    }

    .panel-footer {
        border-end-start-radius: var(--sx-radius-lg);
        border-end-end-radius: var(--sx-radius-lg);
    }

    .list-group-item {
        color: var(--sx-ink);
        background: var(--sx-surface);
        border-color: var(--sx-border);
    }

    a.list-group-item:hover,
    a.list-group-item:focus,
    .list-group-item.hover {
        background: var(--sx-brand-soft);
    }

    .list-group-item.active,
    .list-group-item.active:hover,
    .list-group-item.active:focus {
        color: #fff;
        background: var(--sx-brand) !important;
        border-color: var(--sx-brand) !important;
    }

    .btn {
        min-height: 34px;
        background-image: none;
        border-radius: var(--sx-radius-sm);
        font-weight: 600;
        box-shadow: none;
        transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
    }

    .btn-sm,
    .btn-xs {
        min-height: 28px;
    }

    .btn-default,
    .btn-white {
        color: var(--sx-ink);
        background: var(--sx-surface);
        border-color: var(--sx-border-strong);
    }

    .btn-default:hover,
    .btn-default:focus,
    .btn-white:hover,
    .btn-white:focus,
    .open > .dropdown-toggle.btn-default {
        color: var(--sx-brand-strong);
        background: var(--sx-brand-soft);
        border-color: var(--sx-brand);
    }

    .btn-primary {
        color: #fff;
        background: var(--sx-brand);
        border-color: var(--sx-brand);
    }

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .open > .dropdown-toggle.btn-primary {
        color: #fff;
        background: var(--sx-brand-strong);
        border-color: var(--sx-brand-strong);
    }

    .btn-success {
        color: #fff;
        background: var(--sx-success);
        border-color: var(--sx-success);
    }

    .btn-info {
        color: #fff;
        background: var(--sx-primary);
        border-color: var(--sx-primary);
    }

    body.sx-workspace .sx-app .btn-group {
        background-color: transparent;
        background-image: none;
    }

    body.sx-workspace .sx-app .btn.btn-primary,
    body.sx-workspace .sx-app .btn.btn-info {
        color: #fff;
        background-color: var(--sx-primary);
        background-image: none;
        border-color: var(--sx-primary);
    }

    body.sx-workspace .sx-app .btn.btn-primary:hover,
    body.sx-workspace .sx-app .btn.btn-primary:focus,
    body.sx-workspace .sx-app .btn.btn-primary:active,
    body.sx-workspace .sx-app .btn.btn-info:hover,
    body.sx-workspace .sx-app .btn.btn-info:focus,
    body.sx-workspace .sx-app .btn.btn-info:active {
        color: #fff;
        background-color: var(--sx-brand-strong);
        background-image: none;
        border-color: var(--sx-brand-strong);
    }

    .btn-warning {
        color: #fff;
        background: var(--sx-warning);
        border-color: var(--sx-warning);
    }

    .btn-danger {
        color: #fff;
        background: var(--sx-danger);
        border-color: var(--sx-danger);
    }

    .btn[disabled],
    .btn.disabled,
    fieldset[disabled] .btn {
        cursor: not-allowed;
        opacity: 0.58;
        box-shadow: none;
    }

    .form-group > label,
    .control-label,
    legend {
        color: #40534c;
        font-weight: 600;
    }

    .form-control:not(.scanner_input),
    .ui-select-bootstrap > .ui-select-match > .btn,
    .bootstrap-tagsinput,
    .input-group-addon {
        min-height: var(--sx-control-height);
        color: var(--sx-ink);
        background-color: var(--sx-surface);
        border-color: var(--sx-border-strong);
        border-radius: var(--sx-radius-sm);
        box-shadow: none;
    }

    textarea.form-control:not(.scanner_input),
    select[multiple].form-control:not(.scanner_input) {
        height: auto;
    }

    .form-control:not(.scanner_input)::placeholder,
    .bootstrap-tagsinput input::placeholder,
    .ui-select-placeholder {
        color: #75847e !important;
        opacity: 1;
    }

    .form-control:not(.scanner_input):focus,
    .ui-select-bootstrap.open > .ui-select-match > .btn,
    .bootstrap-tagsinput.focus,
    .bootstrap-tagsinput:focus-within {
        border-color: var(--sx-focus);
        box-shadow: 0 0 0 3px rgba(22, 117, 85, 0.16);
    }

    .form-control:not(.scanner_input)[disabled],
    .form-control:not(.scanner_input)[readonly],
    fieldset[disabled] .form-control:not(.scanner_input) {
        color: #56655f;
        background: #edf1ef;
        border-color: var(--sx-border);
        opacity: 1;
    }

    input[type="checkbox"],
    input[type="radio"] {
        accent-color: var(--sx-brand);
    }

    .has-error .form-control,
    .has-error .ui-select-match > .btn {
        border-color: var(--sx-danger);
    }

    .has-error .help-block,
    .has-error .control-label {
        color: var(--sx-danger) !important;
    }

    .nav-tabs {
        border-color: var(--sx-border);
    }

    .nav-tabs > li > a {
        margin-inline-end: 4px;
        color: var(--sx-muted);
        background: transparent;
        border: 1px solid transparent;
        border-radius: var(--sx-radius-sm) var(--sx-radius-sm) 0 0;
        box-shadow: none;
        text-shadow: none;
    }

    .nav-tabs > li > a:hover,
    .nav-tabs > li > a:focus {
        color: var(--sx-brand-strong);
        background: var(--sx-brand-soft);
        border-color: var(--sx-brand-soft);
    }

    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:hover,
    .nav-tabs > li.active > a:focus {
        color: var(--sx-brand-strong);
        background: var(--sx-surface);
        border-color: var(--sx-border) var(--sx-border) var(--sx-surface);
        box-shadow: inset 0 3px 0 var(--sx-brand);
    }

    .table-responsive {
        border-color: var(--sx-border);
        border-radius: var(--sx-radius);
    }

    .table {
        color: var(--sx-ink);
        background: var(--sx-surface);
    }

    .table > thead > tr > th {
        color: #52645d;
        background: var(--sx-surface-muted);
        border-color: var(--sx-border);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.025em;
        text-transform: none;
    }

    .table > tbody > tr > td,
    .table > tbody > tr > th,
    .table > tfoot > tr > td,
    .table > tfoot > tr > th {
        border-color: var(--sx-border);
        vertical-align: middle;
    }

    .table-striped > tbody > tr:nth-child(odd) > td,
    .table-striped > tbody > tr:nth-child(odd) > th {
        background: #fbfcfb;
    }

    .table-hover > tbody > tr:hover > td,
    table tbody > tr:hover > td,
    table tbody > tr:hover > th {
        background: var(--sx-brand-soft) !important;
    }

    .table-filters .form-control,
    .table-filters .ui-select-match > .btn,
    .table-filters .bootstrap-tagsinput {
        min-height: 34px;
        font-size: 12px;
    }

    /* Shared kad-browsing lists: toolbar, filters, empty state, and footer. */
    .sx-app .box.wrapper-md > .flexible.panel {
        overflow: auto;
        border: 1px solid var(--sx-border);
        overscroll-behavior: contain;
    }

    .sx-app .box.wrapper-md > .flexible.panel > .table {
        margin-block-end: 0;
        border-radius: var(--sx-radius);
    }

    .sx-app .table-filters > th {
        padding: 8px 5px;
        background: var(--sx-surface-muted);
    }

    .sx-app .table .no-results {
        padding: 42px 16px !important;
        color: var(--sx-muted);
        background: var(--sx-surface);
    }

    .sx-app table > tfoot.fixed > tr > td {
        padding: 10px 12px;
        background: var(--sx-surface-muted);
        border-block-start: 1px solid var(--sx-border);
    }

    .sx-app .DocumentPaginationPanel-status,
    .sx-app .DocumentPaginationPanel-selector {
        min-height: 24px;
        color: var(--sx-muted);
    }

    .sx-app document-pagination-panel > .fixed.wrapper.b-b {
        background: var(--sx-brand-soft) !important;
        border: 1px solid var(--sx-border);
        border-radius: var(--sx-radius);
    }

    .sx-app .stat-box {
        min-height: 120px;
        padding: 16px;
        background: var(--sx-surface);
        border: 1px solid var(--sx-border);
        border-radius: var(--sx-radius);
        box-shadow: var(--sx-shadow-sm);
        transition: border-color 140ms ease, box-shadow 140ms ease;
    }

    .sx-app .stat-box:hover,
    .sx-app .stat-box:focus-within {
        border-color: var(--sx-border-strong);
        box-shadow: var(--sx-shadow);
    }

    .sx-app .stat-box h3 {
        color: var(--sx-text);
        font-size: 14px;
        font-weight: 650;
        line-height: 1.3;
    }

    .sx-app .stat-box-content h4,
    .sx-app .stat-box-content h4.centered {
        color: var(--sx-text);
        font-size: 34px;
        font-weight: 700;
    }

    .sx-app .stat-box .stat-icon {
        color: var(--sx-primary);
        opacity: 0.12;
    }

    .sx-app .stat-box-content .chart-labels ul {
        color: var(--sx-muted);
    }

    .dropdown-menu,
    .ui-select-bootstrap > .ui-select-choices {
        padding: 6px;
        color: var(--sx-ink);
        background: var(--sx-surface);
        border-color: var(--sx-border);
        border-radius: var(--sx-radius);
        box-shadow: var(--sx-shadow);
    }

    .dropdown-menu > li > a,
    .ui-select-choices-row > a {
        min-height: 34px;
        padding: 8px 10px;
        color: var(--sx-ink);
        border-radius: var(--sx-radius-sm);
    }

    .dropdown-menu > li > a:hover,
    .dropdown-menu > li > a:focus,
    .dropdown-menu > .active > a,
    .dropdown-menu > .active > a:hover,
    .dropdown-menu > .active > a:focus,
    .ui-select-choices-row.active > a,
    .ui-select-choices-row > a:hover {
        color: var(--sx-brand-strong);
        background: var(--sx-brand-soft);
    }

    .dropdown-menu .divider {
        background: var(--sx-border);
    }

    .modal-content {
        color: var(--sx-ink);
        background: var(--sx-surface);
        border: 1px solid var(--sx-border);
        border-radius: var(--sx-radius-lg);
        box-shadow: 0 18px 55px rgba(20, 42, 35, 0.22);
    }

    .modal-header {
        padding: 18px 20px;
        background: var(--sx-surface-muted);
        border-block-start: 4px solid var(--sx-brand);
        border-block-end: 1px solid var(--sx-border);
        border-radius: 0;
    }

    .modal-title {
        font-size: 18px;
    }

    .modal-body {
        padding: 20px;
    }

    .modal-footer {
        padding: 14px 20px;
        background: var(--sx-surface-muted);
        border-color: var(--sx-border);
    }

    .modal-backdrop.in {
        opacity: 0.46;
    }

    .pagination {
        display: inline-flex;
        gap: 3px;
    }

    .pagination > li > a,
    .pagination > li > span {
        min-width: 34px;
        min-height: 34px;
        padding: 7px 10px;
        color: var(--sx-ink);
        background: var(--sx-surface);
        border-color: var(--sx-border);
        border-radius: var(--sx-radius-sm) !important;
        text-align: center;
    }

    .pagination > li > a:hover,
    .pagination > li > a:focus,
    .pagination > .active > a,
    .pagination > .active > span,
    .pagination > .active > a:hover,
    .pagination > .active > span:hover {
        color: #fff;
        background: var(--sx-brand);
        border-color: var(--sx-brand);
    }

    .pagination > .disabled > a,
    .pagination > .disabled > span {
        color: #87938e;
        background: #edf1ef;
        border-color: var(--sx-border);
    }

    .badge,
    .label {
        border-radius: 999px;
        font-weight: 700;
        text-shadow: none;
    }

    .label-default,
    .badge.bg-light {
        color: #46564f;
        background: #e4eae7;
    }

    .label-primary,
    .badge.bg-primary {
        color: #fff;
        background: var(--sx-brand);
    }

    .label-success,
    .badge.bg-success {
        color: #fff;
        background: var(--sx-success);
    }

    .label-warning,
    .badge.bg-warning {
        color: #fff;
        background: var(--sx-warning);
    }

    .label-danger,
    .badge.bg-danger {
        color: #fff;
        background: var(--sx-danger);
    }

    .label-info,
    .badge.bg-info {
        color: #fff;
        background: var(--sx-info);
    }

    .alert {
        border-radius: var(--sx-radius);
        box-shadow: none;
    }

    .alert-success {
        color: #1d5b3d;
        background: #e7f4ec;
        border-color: #b9dbc7;
    }

    .alert-warning {
        color: #704a17;
        background: #fff5df;
        border-color: #ead09c;
    }

    .alert-danger {
        color: #842d35;
        background: #fcebed;
        border-color: #e8b8bd;
    }

    .alert-info {
        color: #255764;
        background: #e8f3f5;
        border-color: #bad7dd;
    }

    /* This legacy settings view carries inline purple/blue panel themes. */
    .sx-app .panel-heading[style*="#667eea"] {
        color: var(--sx-text) !important;
        background: var(--sx-brand-soft) !important;
        border-block-start: 4px solid var(--sx-primary) !important;
    }

    .sx-app .panel-heading[style*="#e3f2fd"],
    .sx-app .panel-heading[style*="#d1ecf1"] {
        background: var(--sx-surface-muted) !important;
        border-color: var(--sx-border) !important;
    }

    .sx-app .panel-heading[style*="#e3f2fd"] :where(h1, h2, h3, h4, h5),
    .sx-app .panel-heading[style*="#d1ecf1"] :where(h1, h2, h3, h4, h5) {
        color: var(--sx-text) !important;
    }

    /* Authentication and portal entry surfaces keep the same controls and focus language. */
    .signin-container {
        color: var(--sx-text);
        background: rgba(245, 247, 245, 0.94);
        box-shadow: var(--sx-shadow);
    }

    #signin-form,
    #signin-help > div > div:last-of-type {
        color: var(--sx-text);
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid var(--sx-border);
        border-radius: var(--sx-radius-lg);
        box-shadow: var(--sx-shadow-sm);
    }

    #signin-form {
        padding: 24px;
    }

    #signin input:not(.scanner_input) {
        color: var(--sx-text);
        background: var(--sx-surface);
        border: 1px solid var(--sx-border-strong);
        border-radius: var(--sx-radius-sm);
        text-align: start;
    }

    .signin-container button:not(.btn-white),
    .signin-container .btn-primary {
        color: #fff;
        background: var(--sx-primary);
        border-color: var(--sx-primary);
        border-radius: var(--sx-radius-sm);
    }

    .portal-account-actions button,
    a.suppliers-info-link,
    button.suppliers-info-link {
        color: var(--sx-brand-strong);
        background: var(--sx-brand-soft) !important;
        border-color: var(--sx-border-strong);
    }

    .portal-account-actions button:hover,
    .portal-account-actions button:focus,
    a.suppliers-info-link:hover,
    a.suppliers-info-link:focus,
    button.suppliers-info-link:hover,
    button.suppliers-info-link:focus {
        color: #fff;
        background: var(--sx-primary) !important;
    }

    :where(a, button, input, select, textarea, [tabindex], .btn, .ui-select-container):focus,
    :where(a, button, input, select, textarea, [tabindex], .btn, .ui-select-container):focus-visible {
        outline: 2px solid var(--sx-focus) !important;
        outline-offset: 2px;
    }

    [dir="rtl"] .nav-tabs > li > a,
    html[dir="rtl"] .nav-tabs > li > a,
    body.arabic-mode .nav-tabs > li > a {
        margin-inline: 4px 0;
    }

    [dir="rtl"] .dropdown-menu,
    html[dir="rtl"] .dropdown-menu,
    body.arabic-mode .dropdown-menu {
        text-align: start;
    }

    [dir="rtl"] .pagination,
    html[dir="rtl"] .pagination,
    body.arabic-mode .pagination {
        padding-inline-start: 0;
    }

    /* Dedicated output and scanner styles own their dimensions. */
    :where(.printable-item, .corr-barcode, .corr-barcode-surface, #DWTcontainer, .scanner_input) {
        letter-spacing: normal;
    }
}

@media screen and (max-width: 991px) {
    .sx-app .box.wrapper-md > .fixed.wrapper.b-b .row > [class*="col-"]:last-of-type {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-block-start: 12px;
        text-align: start;
    }

    .sx-app .box.wrapper-md > .fixed.wrapper.b-b .btn-group,
    .sx-app .box.wrapper-md > .fixed.wrapper.b-b .btn {
        margin: 0;
    }

    .sx-app .dms-view,
    .sx-app .dms-view > .height-auto-mobile,
    .sx-app .dms-view > .height-auto-mobile > .box.padder,
    .sx-app .dms-view .row.height-full {
        display: block;
        height: auto !important;
        min-height: 0;
    }

    .sx-app .dms-view .documents-tree-container {
        box-sizing: border-box;
        width: 100%;
        height: auto !important;
        max-height: min(46vh, 360px);
        overflow: hidden;
        float: none;
        border-block-end: 1px solid var(--sx-border);
    }

    .sx-app .dms-view .documents-tree {
        display: flex;
        height: auto;
        max-height: min(46vh, 360px);
        min-height: 0;
        flex-direction: column;
    }

    .sx-app .dms-view .documents-tree > cabinets-tree,
    .sx-app .dms-view .documents-tree > .flexible {
        display: block;
        min-height: 0;
        max-height: calc(min(46vh, 360px) - 64px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .sx-app .dms-view .documents-tree-container + [class*="col-"] {
        width: 100%;
        height: auto !important;
        min-height: 55vh;
        float: none;
    }

    .sx-app .dms-view .main-dms-view {
        min-height: 44vh;
    }
}

@media screen and (prefers-reduced-motion: reduce) {
    .btn,
    .form-control,
    .dropdown-menu,
    .modal,
    .fade,
    .collapsing {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}