@charset "UTF-8";
/*
 * Codme.css -- shared modern UI component styles
 * ctrlTable  |  modal overlay  |  edit form card (cedit-*)
 */

/* ============================================
   CSS custom properties -- dark navy palette
   (mirrored here from master page so they work
    even if the compiled master isn't refreshed)
   ============================================ */
:root {
    --clr-bg: #0a1520;
    --clr-surface: #333333;
    --clr-surface2: #111d2b;
    --clr-border: #1e2d40;
    --clr-border2: #2a3a50;
    --clr-text: #cbd5e1;
    --clr-text-dim: #94a3b8;
    --clr-muted: #64748b;
    --clr-accent: #2563eb;
    --clr-accent-lt: #60a5fa;
    --clr-accent-hl: #93c5fd;
    --header-h: 84px;
    --sidebar-w: 52px;
    --sidebar-exp: 220px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --ctbl-modal-scale: 1;
}

html[data-font="small"]  { --ctbl-modal-scale: .95; }
html[data-font="medium"] { --ctbl-modal-scale: 1; }
html[data-font="large"]  { --ctbl-modal-scale: 1.08; }
html[data-font="xlarge"] { --ctbl-modal-scale: 1.16; }

/* ══════════════════════════════════════════════
   ctrlTable — modern card table  (.ctbl-*)
   ══════════════════════════════════════════════ */

/* ── Filter bar ──────────────────────────────────── */
.ctbl-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #131d2e 0%, #162236 100%);
    border-bottom: 1px solid rgba(37, 99, 235, .15);
    position: relative;
}
.ctbl-filter-bar::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, .3), transparent);
}
.ctbl-filter-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    position: relative;
}
.ctbl-filter-label {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ctbl-filter-ddl {
    /* background-color (longhand) instead of background (shorthand) so the
       custom SVG arrow set via background-image below isn't wiped out by
       the shorthand's implicit background-image: none. !important inherited
       by the shorthand would beat our non-important background-image and
       hide the chevron entirely. Same trick used on rm-section-body inputs. */
    background-color: #0c1420 !important;
    color: #e2e8f0 !important;
    border: 1px solid #1e3048 !important;
    border-radius: 8px !important;
    padding: 8px 32px 8px 14px !important;
    font-size: 13px;
    font-weight: 500;
    min-width: 200px;
    height: auto !important;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.ctbl-filter-ddl:hover {
    border-color: #2563eb;
    /* longhand — same reason as the rule above (don't wipe the arrow image). */
    background-color: #0f1926;
}
.ctbl-filter-ddl:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15), 0 0 12px rgba(59, 130, 246, .08);
}
.ctbl-filter-ddl option {
    background: #0c1420;
    color: #e2e8f0;
    padding: 8px;
}

/* Filter-bar trigger button (host-injected, e.g. "Categories" picker) — */
/* visually mirrors .ctbl-filter-ddl so injected buttons line up with the */
/* built-in dropdowns in the same row.                                   */
.ctbl-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #0c1420;
    color: #e2e8f0;
    border: 1px solid #1e3048;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    min-width: 200px;
    height: auto;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
    font-family: inherit;
}
.ctbl-filter-btn:hover {
    border-color: #2563eb;
    background-color: #0f1926;
}
.ctbl-filter-btn:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15), 0 0 12px rgba(59, 130, 246, .08);
}
.ctbl-filter-btn-icon { font-size: 13px; opacity: .8; }
.ctbl-filter-btn-text { flex: 1; text-align: left; }

html[data-theme="light"] .ctbl-filter-btn {
    background-color: #eef2f7;
    color: #0f172a;
    border-color: #cbd5e1;
}
html[data-theme="light"] .ctbl-filter-btn:hover {
    background-color: #dbe3ee;
    border-color: #2563eb;
}

/* ── Categories selection modal ──────────────────────────────────── */
.cat-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 9000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.cat-modal-dialog {
    width: min(560px, 100%);
    max-height: min(80vh, 760px);
    background: #1e2a3a;
    color: #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #2a3a50;
}
.cat-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #162032;
    border-bottom: 1px solid #2a3a50;
}
.cat-modal-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
}
.cat-modal-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}
.cat-modal-close:hover { color: #fff; background: #2a3a50; }

.cat-modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1 1 auto;
}
.cat-modal-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.cat-modal-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 6px 16px;
    padding: 10px 12px;
    border: 1px solid #2a3a50;
    border-radius: 8px;
    background: #0c1420;
    max-height: 360px;
    overflow-y: auto;
}
.cat-modal-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #e2e8f0;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}
.cat-modal-item input[type="checkbox"] { margin: 0; }
.cat-modal-options {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-top: 1px dashed #2a3a50;
}
.cat-modal-options label { color: #e2e8f0; font-size: 13px; }
.cat-modal-options .negacija { color: #fbbf24; }

.cat-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    background: #162032;
    border-top: 1px solid #2a3a50;
}

html[data-theme="light"] .cat-modal-dialog {
    background: #ffffff;
    color: #0f172a;
    border-color: #cbd5e1;
}
html[data-theme="light"] .cat-modal-header,
html[data-theme="light"] .cat-modal-footer {
    background: #f5efe6;
    border-color: #cbd5e1;
}
html[data-theme="light"] .cat-modal-close { color: #475569; }
html[data-theme="light"] .cat-modal-close:hover { color: #0f172a; background: #e5e7eb; }
html[data-theme="light"] .cat-modal-list {
    background: #f8fafc;
    border-color: #cbd5e1;
}
html[data-theme="light"] .cat-modal-item,
html[data-theme="light"] .cat-modal-options label { color: #0f172a; }

.ctbl-card {
    background: #1e2a3a;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    font-family: inherit;
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.content > .ctbl-host {
    display: block;
    width: 100%;
    margin: 0;
}

.sidebar + .content:has(> .ctbl-host) {
    padding-left: var(--sidebar-w) !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
}

.content > .ctbl-host .ctbl-card {
    width: 100%;
}

.ctbl-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #162032;
    border-bottom: 1px solid #2a3a50;
    gap: 12px;
    flex-wrap: wrap;
}
.ctbl-toolbar-left  { display: flex; align-items: center; gap: 8px; }
.ctbl-toolbar-right { display: flex; align-items: stretch; gap: 8px; }

.ctbl-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2563eb;
    color: #fff !important;
    border: none;
    padding: 8px 18px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, box-shadow .15s;
    text-decoration: none;
}
.ctbl-btn-primary:hover  { background: #1d4ed8; box-shadow: 0 2px 8px rgba(37,99,235,.4); }
.ctbl-btn-primary:active { background: #1e40af; }

/* Secondary button — quieter than primary, themed for both dark and
   light. Used for non-primary toolbar actions (e.g. "Copy from last",
   "Cancel", "Import") that don't deserve the bright blue weight. */
.ctbl-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1e293b;
    color: #cbd5e1 !important;
    border: 1px solid #334155;
    padding: 7px 16px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
    text-decoration: none;
}
.ctbl-btn-secondary:hover {
    background: #243348;
    border-color: #3a5070;
    color: #fff !important;
}
.ctbl-btn-secondary:active { background: #1a2535; }
html[data-theme="light"] .ctbl-btn-secondary {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569 !important;
}
html[data-theme="light"] .ctbl-btn-secondary:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
    color: #1e293b !important;
}

/* Action button — visually distinct from .ctbl-btn-primary so buttons that
   trigger a significant side-effect (e.g. "Generate invoice") don't blend
   in with the routine "Display" / "Search" primaries. Amber tone reads as
   "this writes data, double-check the selection". */
.ctbl-btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #d97706;
    color: #fff !important;
    border: none;
    padding: 8px 18px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, box-shadow .15s;
    text-decoration: none;
}
.ctbl-btn-action:hover  { background: #b45309; box-shadow: 0 2px 8px rgba(217,119,6,.4); }
.ctbl-btn-action:active { background: #92400e; }

/* Secondary action (teal) — shares the "writes data" weight of .ctbl-btn-action
   but distinguishes a softer / additive operation (e.g. "Add to the last
   invoice") from a primary creation action ("Generate invoice"). */
.ctbl-btn-action2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0d9488;
    color: #fff !important;
    border: none;
    padding: 8px 18px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, box-shadow .15s;
    text-decoration: none;
}
.ctbl-btn-action2:hover  { background: #0f766e; box-shadow: 0 2px 8px rgba(13,148,136,.4); }
.ctbl-btn-action2:active { background: #115e59; }

.ctbl-btn-exit {
    background: #1e2a3a;
    color: #94a3b8 !important;
    border: 1px solid #2a3a50;
    padding: 8px 18px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    line-height: 1.4;
    transition: background .15s, color .15s, border-color .15s;
    text-decoration: none;
}
.ctbl-btn-exit:hover  { background: #243348; color: #cbd5e1 !important; border-color: #3a5070; }
.ctbl-btn-exit:active { background: #1a2535; }

.ctbl-btn-export {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1a2d1e;
    color: #4ade80 !important;
    border: 1px solid #2d5a35;
    padding: 6px 10px;
    border-radius: 7px;
    cursor: pointer;
    line-height: 1;
    transition: background .15s, border-color .15s;
    margin-left: 8px;
    text-decoration: none !important;
}

/* ── Toolbar action group + inline help tooltip ─────────────────── */
/* Wrap a toolbar action button alongside a "?" help bubble. The
   tooltip is a CSS-only on-hover popover — no JS required. */
.ctbl-action-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
}
.ctbl-help-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font-size: .786rem;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    user-select: none;
    transition: background .15s, transform .15s;
    position: relative;
}
.ctbl-help-icon:hover { background: #1d4ed8; transform: scale(1.08); }
.ctbl-help-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 280px; max-width: 360px;
    background: #1e2a3a;
    color: #e2e8f0;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #2a3a50;
    font-size: .857rem;
    line-height: 1.5;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .15s, transform .15s;
    white-space: normal;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
.ctbl-action-group:hover .ctbl-help-tooltip,
.ctbl-help-icon:focus + .ctbl-help-tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
html[data-theme="light"] .ctbl-help-tooltip {
    background: #ffffff;
    color: #0f172a;
    border-color: #cbd5e1;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

/* ── Column picker (toolbar dropdown) ────────────────────────────── */
.ctbl-col-picker { position: relative; display: inline-flex; align-items: center; }
.ctbl-btn-colpicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #162032;
    color: #94a3b8;
    border: 1px solid #2a3a50;
    padding: 6px 10px;
    border-radius: 7px;
    cursor: pointer;
    line-height: 1;
    transition: background .15s, border-color .15s, color .15s;
    margin-left: 8px;
}
.ctbl-btn-colpicker:hover  { background: #1c2a40; border-color: #3b5273; color: #e2e8f0; }
.ctbl-btn-colpicker:active { background: #1f3050; }

.ctbl-col-picker-popup {
    /* position:fixed escapes any ancestor overflow:hidden (e.g. .ctbl-card)
       so the dropdown is never clipped — JS sets top/right when opening. */
    position: fixed;
    z-index: 9000;
    width: 260px;
    max-height: min(70vh, 480px);
    background: #1e2a3a;
    color: #e2e8f0;
    border: 1px solid #2a3a50;
    border-radius: 10px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ctbl-col-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #162032;
    border-bottom: 1px solid #2a3a50;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #94a3b8;
}
.ctbl-col-picker-close {
    background: transparent; border: none; color: #94a3b8;
    font-size: 18px; line-height: 1; cursor: pointer;
    padding: 2px 6px; border-radius: 4px;
}
.ctbl-col-picker-close:hover { color: #fff; background: #2a3a50; }

.ctbl-col-picker-actions {
    display: flex; gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid #2a3a50;
}
.ctbl-col-picker-actions button {
    flex: 1;
    background: #0c1420;
    color: #cbd5e1;
    border: 1px solid #2a3a50;
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.ctbl-col-picker-actions button:hover { background: #1f3050; border-color: #3b5273; color: #fff; }

.ctbl-col-picker-list {
    overflow-y: auto;
    padding: 6px 4px;
    flex: 1 1 auto;
    /* min-height:0 lets the flex child shrink below its content height so
       overflow:auto can actually engage and show a scrollbar. Without
       this the implicit min-height:auto keeps the list at full content
       size and the scroller never appears. */
    min-height: 0;
}
.ctbl-col-picker-item {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    border-radius: 4px;
}
.ctbl-col-picker-item:hover { background: #28344a; }
.ctbl-col-picker-item input[type="checkbox"] { margin: 0; }
.ctbl-col-picker-item span { flex: 1; }

html[data-theme="light"] .ctbl-btn-colpicker {
    background: #eef2f7; color: #475569; border-color: #cbd5e1;
}
html[data-theme="light"] .ctbl-btn-colpicker:hover {
    background: #dbe3ee; border-color: #2563eb; color: #0f172a;
}
html[data-theme="light"] .ctbl-col-picker-popup {
    background: #ffffff; color: #0f172a; border-color: #cbd5e1;
}
html[data-theme="light"] .ctbl-col-picker-head {
    background: #f5efe6; color: #475569; border-color: #cbd5e1;
}
html[data-theme="light"] .ctbl-col-picker-close { color: #475569; }
html[data-theme="light"] .ctbl-col-picker-close:hover { color: #0f172a; background: #e5e7eb; }
html[data-theme="light"] .ctbl-col-picker-actions { border-color: #cbd5e1; }
html[data-theme="light"] .ctbl-col-picker-actions button {
    background: #f1f5f9; color: #475569; border-color: #cbd5e1;
}
html[data-theme="light"] .ctbl-col-picker-actions button:hover {
    background: #dbe3ee; color: #0f172a; border-color: #2563eb;
}
html[data-theme="light"] .ctbl-col-picker-item:hover { background: #f1f5f9; }
.ctbl-btn-export:hover  { background: #1f3824; border-color: #3d7a48; }
.ctbl-btn-export:active { background: #243d29; }

html[data-theme="light"] .ctbl-btn-export {
    background: #f3f8f1;
    border-color: #b9caa8;
    color: #185c37 !important;
}

html[data-theme="light"] .ctbl-btn-export:hover {
    background: #e7f0e3;
    border-color: #97b47c;
}

html[data-theme="light"] .ctbl-btn-export:active {
    background: #dce8d5;
}

html[data-theme="light"] .ctbl-btn-exit { background: #e8e2d6; color: #475569 !important; border-color: #d5cfc4; }
html[data-theme="light"] .ctbl-btn-exit:hover { background: #ddd7cb; color: #1e293b !important; border-color: #b8afa0; }
html[data-theme="light"] .ctbl-btn-exit:active { background: #d5cec5; }

/* Trash / delete icon button used in grid rows (LinkButton + SVG) */
.ctbl-del-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #dc2626;
    opacity: .75;
    cursor: pointer;
    padding: 4px;
    border-radius: 5px;
    transition: opacity .12s, background .12s;
    text-decoration: none !important;
}
.ctbl-del-btn:hover  { opacity: 1; background: rgba(239,68,68,.1); }
.ctbl-del-btn:active { opacity: 1; }

/* imgDelete.png ImageButton in ctbl-grid rows */
.ctbl-grid input[type="image"][src*="imgDelete"] {
    width: 22px;
    height: 22px;
    opacity: .75;
    cursor: pointer;
    vertical-align: middle;
    transition: opacity .12s;
}
.ctbl-grid input[type="image"][src*="imgDelete"]:hover { opacity: 1; }

.ctbl-search-wrap {
    display: flex;
    align-items: center;
    background: #0f1a27;
    border: 1px solid #2a3a50;
    border-radius: 7px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.ctbl-search-wrap:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.ctbl-search-icon {
    padding: 0 10px;
    color: #4a6080;
    font-size: 14px;
    line-height: 1;
    pointer-events: none;
}
.ctbl-search-input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 8px 4px !important;
    font-size: 13px;
    width: 220px;
    height: auto !important;
    color: #cbd5e1 !important;
    background: transparent !important;
    border-radius: 0 !important;
}
.ctbl-search-input::placeholder { color: #4a6080; }
/* Search input must stay borderless even when the toolbar is rendered inside
   an .rm-section-body, where the light/dark theme adds 1px borders to text
   inputs (incl. a blue focus-ring rule that fires on click). The
   input[type=text].ctbl-search-input combo lifts specificity above the
   competing rules; covers BOTH default and :focus states. */
html[data-theme="light"] .rm-section-body input[type=text].ctbl-search-input,
html[data-theme="dark"]  .rm-section-body input[type=text].ctbl-search-input,
html[data-theme="light"] .ctbl-search-wrap  input[type=text].ctbl-search-input,
html[data-theme="dark"]  .ctbl-search-wrap  input[type=text].ctbl-search-input,
html[data-theme="light"] .rm-section-body input[type=text].ctbl-search-input:focus,
html[data-theme="dark"]  .rm-section-body input[type=text].ctbl-search-input:focus,
html[data-theme="light"] .ctbl-search-wrap  input[type=text].ctbl-search-input:focus,
html[data-theme="dark"]  .ctbl-search-wrap  input[type=text].ctbl-search-input:focus {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}
.ctbl-btn-search {
    background: #1e2a3a;
    color: #7a90a8;
    border: none;
    border-left: 1px solid #2a3a50;
    padding: 0 14px;
    align-self: stretch;
    font-size: 13px;
    cursor: pointer;
    transition: background .12s;
    white-space: nowrap;
}
.ctbl-btn-search:hover { background: #243348; color: #cbd5e1; }

/* Divider between multiple inputs inside a single ctbl-search-wrap */
.zs-sep { color: #2a3a50; padding: 0 2px; user-select: none; flex-shrink: 0; }
html[data-theme="light"] .zs-sep { color: #b8c5d4; }

.ctbl-wrap {
    overflow: auto;
    /* CSS fallback height before JS ctblSizeWrap() fires */
    height: calc(100vh - var(--header-h, 84px) - 160px);
    max-height: calc(100vh - var(--header-h, 84px) - 160px);
    min-height: 250px;
    flex: 1 1 auto;
}

.ctbl-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    color: #cbd5e1;
}
.ctbl-grid thead tr,
.ctbl-grid tr.ctbl-grid th { background: #162032 !important; }
.ctbl-grid th {
    padding: 11px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #5a7a9a;
    border-bottom: 2px solid #2a3a50;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
    background: #162032;
}
.ctbl-grid th a,
.ctbl-grid th .ctbl-sort-link {
    color: #5a7a9a !important;
    text-decoration: none !important;
    font-weight: 700;
}
.ctbl-grid th a:hover,
.ctbl-grid th .ctbl-sort-link:hover {
    color: #93c5fd !important;
}
.ctbl-grid td {
    padding: 11px 16px;
    border-bottom: 1px solid #243040;
    vertical-align: middle;
    color: #cbd5e1;
    transition: background .08s;
}
.ctbl-grid tr:last-child td { border-bottom: none; }
.ctbl-grid tbody tr:nth-child(even) td { background: #223146; }
.ctbl-grid tbody tr:hover td { background: #243050; }
.ctbl-grid tbody tr.selected td { background: #1e3a60 !important; }
.ctbl-grid td a { color: #60a5fa; text-decoration: none; font-weight: 500; }
.ctbl-grid td a:hover { text-decoration: underline; color: #93c5fd; }

.ctbl-pager {
    padding: 12px 20px;
    background: #162032;
    border-top: 1px solid #2a3a50;
    text-align: center;
}
.ctbl-pager a, .ctbl-pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    margin: 0 2px;
    border-radius: 6px;
    font-size: 13px;
    color: #60a5fa;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .1s, border-color .1s;
}
.ctbl-pager a:hover { background: #1e3050; border-color: #2a4a7a; }
.ctbl-pager span    { background: #2563eb; color: #fff; font-weight: 600; }

.ctbl-pager-dock {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    background: #162032;
    border-top: 1px solid #2a3a50;
    position: relative;
    flex-shrink: 0;
}
.ctbl-pager-nav {
    flex: 1;
    text-align: center;
}
.ctbl-pager-nav a, .ctbl-pager-nav span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    margin: 0 2px;
    border-radius: 6px;
    font-size: 13px;
    color: #60a5fa;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .1s, border-color .1s;
}
.ctbl-pager-nav a:hover { background: #1e3050; border-color: #2a4a7a; }
.ctbl-pager-nav span    { background: #2563eb; color: #fff; font-weight: 600; }
.ctbl-pager-size {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.ctbl-pager-size-label {
    color: #4a6080;
    font-size: 12px;
    white-space: nowrap;
}
.ctbl-pager-size-ddl {
    background: #0c1420 !important;
    color: #cbd5e1 !important;
    border: 1px solid #1e3048 !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    font-size: 12px;
    height: auto !important;
    cursor: pointer;
    min-width: 0;
}

.ctbl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 52px 20px;
    color: #4a6080;
    font-size: 14px;
}
.ctbl-empty-icon { font-size: 32px; opacity: .4; }

@media (max-width: 600px) {
    .ctbl-toolbar { flex-direction: column; align-items: flex-start; }
    .ctbl-search-input { width: 140px; }
}


/* ══════════════════════════════════════════════
   Modal overlay
   ══════════════════════════════════════════════ */

.ctbl-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.ctbl-modal-dialog {
    position: relative;
    background: #1e2a3a;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    border: 1px solid rgba(255,255,255,.1);
    width: min(calc(var(--ctbl-modal-base-width, 600px) * var(--ctbl-modal-scale, 1)), calc(100vw - 40px));
    height: min(calc(var(--ctbl-modal-base-height, 440px) * var(--ctbl-modal-scale, 1)), 90vh);
    max-width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ctbl-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 30px;
    height: 30px;
    border: none;
    background: #243348;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, color .12s;
}
.ctbl-modal-close:hover { background: #2d4060; color: #e2e8f0; }
.ctbl-modal-iframe {
    width: 100%;
    flex: 1;
    border: none;
    background: #1e2a3a;
}

/* ══════════════════════════════════════════════
   ctrlTable loading overlay  (.ctbl-loading)
   ══════════════════════════════════════════════ */
.ctbl-host { position: relative; }

.ctbl-loading {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 200;
    background: rgba(10, 18, 30, 0.55);
    backdrop-filter: blur(1px);
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    pointer-events: all;
}
.ctbl-loading.active { display: flex; }

.ctbl-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(96, 165, 250, 0.18);
    border-top-color: #60a5fa;
    border-radius: 50%;
    animation: ctbl-spin 0.7s linear infinite;
}
@keyframes ctbl-spin { to { transform: rotate(360deg); } }

html[data-theme="light"] .ctbl-loading {
    background: rgba(210, 220, 235, 0.60);
}
html[data-theme="light"] .ctbl-spinner {
    border-color: rgba(37, 99, 235, 0.15);
    border-top-color: #2563eb;
}

/* ══════════════════════════════════════════════
   Confirm dialog  (.cdm-*)
   ══════════════════════════════════════════════ */
.cdm-dialog {
    background: #1e2a3a;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.08);
    padding: 32px 28px 24px;
    text-align: center;
    width: min(340px, calc(100vw - 40px));
}
.cdm-icon  { font-size: 36px; margin-bottom: 12px; }
.cdm-title { font-size: 17px; font-weight: 600; color: #e2e8f0; margin-bottom: 8px; }
.cdm-msg   { font-size: 13px; color: #94a3b8; margin-bottom: 24px; line-height: 1.5; }
.cdm-actions { display: flex; gap: 10px; justify-content: center; }
.cdm-btn-cancel {
    padding: 8px 22px; border-radius: 7px;
    border: 1px solid #2a3a50; background: #1e2a3a; color: #94a3b8;
    font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.cdm-btn-cancel:hover { background: #243348; color: #cbd5e1; border-color: #3a5070; }
.cdm-btn-confirm {
    padding: 8px 22px; border-radius: 7px;
    border: none; background: #dc2626; color: #fff;
    font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background .15s;
}
.cdm-btn-confirm:hover { background: #b91c1c; }

/* ══════════════════════════════════════════════
   Edit form card  (.cedit-*)
   ══════════════════════════════════════════════ */

.cedit-card {
    background: #1e2a3a;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.2);
    overflow: hidden;
    max-width: 700px;
    margin: 24px auto;
}

/* inside modal iframe — fill the frame, no shadow */
.cedit-modal-body .cedit-card {
    border-radius: 0;
    box-shadow: none;
    max-width: 100%;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.cedit-body {
    padding: 28px 32px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

.cedit-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
}

.cedit-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #5a7a9a;
}

.cedit-input,
.cedit-body input[type=text],
.cedit-body input[type=number],
.cedit-body textarea,
.cedit-body select {
    background: #0f1a27 !important;
    border: 1px solid #2a3a50 !important;
    border-radius: 7px !important;
    padding: 9px 12px !important;
    font-size: 14px !important;
    color: #cbd5e1 !important;
    height: auto !important;
    width: 100%;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
    outline: none !important;
    box-shadow: none !important;
}
.cedit-body input[type=text]:focus,
.cedit-body input[type=number]:focus,
.cedit-body textarea:focus,
.cedit-body select:focus,
.cedit-input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.15) !important;
    background: #0a1520 !important;
}
.cedit-body input[type=text]::placeholder,
.cedit-body input[type=number]::placeholder,
.cedit-body textarea::placeholder {
    color: #4a6080 !important;
}
.cedit-body select option {
    background: #1e2a3a;
    color: #cbd5e1;
}

.cedit-error {
    font-size: 12px;
    color: #f87171;
    margin-top: 2px;
    display: block;
}

/* ── checkbox row inside edit card ── */
.cedit-check {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.cedit-check input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid #3b5a80;
    border-radius: 4px;
    background: #0f1a27;
    cursor: pointer;
    position: relative;
    transition: background .15s, border-color .15s;
    vertical-align: middle;
}

.cedit-check input[type=checkbox]:checked {
    background: #2563eb;
    border-color: #2563eb;
}

.cedit-check input[type=checkbox]:checked::after {
    content: '';
    display: block;
    position: absolute;
    left: 3px;
    top: 0px;
    width: 5px;
    height: 10px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.cedit-check input[type=checkbox]:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,.3);
}

.cedit-check label {
    font-size: 11px;
    color: #94a3b8;
    cursor: pointer;
    margin: 0;
    font-weight: normal;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* action bar */
.cedit-actions {
    position: sticky;
    bottom: 0;
    z-index: 90;
    padding: 16px 32px;
    background: #162032;
    border-top: 1px solid #2a3a50;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* all buttons inside actions — reset Default.css + apply modern style */
.cedit-actions input[type=submit],
.cedit-actions input[type=button],
.cedit-actions .btnMali,
.cedit-actions .submit,
.cedit-actions .submitC,
.cedit-actions .btnTrazi,
.cedit-actions .PotvrdaButton,
.cedit-actions .btnMailAttachment,
.cedit-actions .btnVeliki {
    background: #2563eb !important;
    color: #fff !important;
    border: none !important;
    border-radius: 7px !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    min-width: auto !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background .15s !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
}
.cedit-actions input[type=submit]:hover,
.cedit-actions input[type=button]:hover,
.cedit-actions .btnMali:hover,
.cedit-actions .submit:hover,
.cedit-actions .submitC:hover,
.cedit-actions .btnTrazi:hover,
.cedit-actions .PotvrdaButton:hover,
.cedit-actions .btnMailAttachment:hover,
.cedit-actions .btnVeliki:hover {
    background: #1d4ed8 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Cancel — secondary */
.cedit-actions input[id$="CancelButton"] {
    background: #1e2a3a !important;
    color: #94a3b8 !important;
    border: 1px solid #2a3a50 !important;
}
.cedit-actions input[id$="CancelButton"]:hover {
    background: #243348 !important;
    color: #cbd5e1 !important;
}

/* Delete — danger */
.cedit-actions input[id$="DeleteButton"] {
    background: #7f1d1d !important;
    color: #fca5a5 !important;
}
.cedit-actions input[id$="DeleteButton"]:hover {
    background: #991b1b !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════════
   Simulacija_Edit page  (.sim-*)
   ══════════════════════════════════════════════ */

.sim-page {
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px 20px;
    color: #cbd5e1;
}

/* top zone wrapper — relative so the categories overlay positions against it */
.sim-sticky-top {
    position: relative;
    overflow: visible;
}

/* equal spacing between all sections */
.sim-page .sim-header,
.sim-page .sim-toolbar,
.sim-page .sim-grid-card,
.sim-page .sim-results {
    margin-bottom: 16px;
}

/* header card */
.sim-header {
    background: #1e2a3a;
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}
.sim-header-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
}
.sim-header-info .sim-plan-id {
    font-size: 20px;
    font-weight: 700;
    color: #e2e8f0;
}
.sim-header-info .sim-date {
    font-size: 13px;
    color: #5a7a9a;
}
.sim-header-desc {
    flex: 1;
    min-width: 280px;
}
.sim-header-desc textarea {
    background: #0f1a27 !important;
    border: 1px solid #2a3a50 !important;
    border-radius: 7px !important;
    padding: 9px 12px !important;
    font-size: 14px !important;
    color: #cbd5e1 !important;
    width: 100% !important;
    box-sizing: border-box;
    resize: vertical;
    outline: none !important;
    transition: border-color .15s, box-shadow .15s;
}
.sim-header-desc textarea:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.15) !important;
}

/* toolbar: buttons + dropdown + filters */
.sim-toolbar {
    background: #1e2a3a;
    border-radius: 12px;
    padding: 14px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.sim-toolbar select {
    background: #0f1a27 !important;
    border: 1px solid #2a3a50 !important;
    border-radius: 7px !important;
    padding: 7px 12px !important;
    font-size: 13px !important;
    color: #cbd5e1 !important;
    height: auto !important;
    outline: none !important;
}
.sim-toolbar select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.15) !important;
}
.sim-toolbar input[type=checkbox] { accent-color: #2563eb; }
.sim-toolbar label,
.sim-toolbar .sim-filter-label {
    font-size: 13px;
    color: #7a90a8;
    cursor: pointer;
}

/* action buttons inside toolbar — base shared styles */
.sim-toolbar .sim-btn,
.sim-toolbar input[type=submit],
.sim-toolbar input[type=button],
.sim-toolbar .btnMali,
.sim-toolbar .submit {
    border-radius: 7px !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background .15s !important;
    height: auto !important;
    line-height: 1.4 !important;
    min-width: auto !important;
    width: auto !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
/* default blue for primary buttons */
.sim-toolbar .sim-btn:not(.sim-cbtn-danger):not(.sim-cbtn-secondary),
.sim-toolbar input[type=submit]:not(.sim-cbtn-danger):not(.sim-cbtn-secondary),
.sim-toolbar input[type=button]:not(.sim-cbtn-danger):not(.sim-cbtn-secondary),
.sim-toolbar .btnMali:not(.sim-cbtn-danger):not(.sim-cbtn-secondary),
.sim-toolbar .submit:not(.sim-cbtn-danger):not(.sim-cbtn-secondary) {
    background: #2563eb !important;
    color: #fff !important;
    border: none !important;
}
.sim-toolbar .sim-btn:not(.sim-cbtn-danger):not(.sim-cbtn-secondary):hover,
.sim-toolbar input[type=submit]:not(.sim-cbtn-danger):not(.sim-cbtn-secondary):hover,
.sim-toolbar input[type=button]:not(.sim-cbtn-danger):not(.sim-cbtn-secondary):hover,
.sim-toolbar .btnMali:not(.sim-cbtn-danger):not(.sim-cbtn-secondary):hover,
.sim-toolbar .submit:not(.sim-cbtn-danger):not(.sim-cbtn-secondary):hover {
    background: #1d4ed8 !important;
}
/* ctrlButtons: Delete button (red) */
.sim-toolbar .sim-cbtn-danger,
.sim-toolbar input[type=submit].sim-cbtn-danger,
.sim-page .sim-toolbar input[type=submit].sim-cbtn-danger {
    background: #2d1515 !important;
    background-color: #2d1515 !important;
    color: #f87171 !important;
    border: 1px solid #7f1d1d !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.sim-toolbar .sim-cbtn-danger:hover,
.sim-toolbar input[type=submit].sim-cbtn-danger:hover,
.sim-page .sim-toolbar input[type=submit].sim-cbtn-danger:hover {
    background: #3d1515 !important;
    background-color: #3d1515 !important;
    border-color: #991b1b !important;
    color: #fca5a5 !important;
}
/* ctrlButtons: Exit/Cancel button (secondary gray) */
.sim-toolbar .sim-cbtn-secondary,
.sim-toolbar input[type=submit].sim-cbtn-secondary,
.sim-page .sim-toolbar input[type=submit].sim-cbtn-secondary {
    background: #1e2a3a !important;
    background-color: #1e2a3a !important;
    color: #94a3b8 !important;
    border: 1px solid #2a3a50 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.sim-toolbar .sim-cbtn-secondary:hover,
.sim-toolbar input[type=submit].sim-cbtn-secondary:hover,
.sim-page .sim-toolbar input[type=submit].sim-cbtn-secondary:hover {
    background: #243348 !important;
    background-color: #243348 !important;
    color: #cbd5e1 !important;
    border-color: #3a5070 !important;
}

.sim-toolbar .sim-separator {
    width: 1px;
    height: 24px;
    background: #2a3a50;
    margin: 0 4px;
}

/* categories panel — floats below the sticky-top bar without affecting document flow */
.sim-categories {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 500;
    background: #162032;
    border: 1px solid #2a3a50;
    border-radius: 0 0 10px 10px;
    padding: 14px 18px;
    display: none;
    box-shadow: 0 6px 16px rgba(0,0,0,.4);
    box-sizing: border-box;
    overflow: hidden;
}
.sim-cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #2a3a50;
}
.sim-cat-title {
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.sim-cat-close {
    background: none;
    border: none;
    color: #64748b;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    transition: color .15s;
}
.sim-cat-close:hover { color: #f87171; }
.sim-cat-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #2a3a50;
}
.sim-cat-footer-left { display: flex; gap: 6px; }
.sim-cat-btn {
    border: none;
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.sim-cat-btn-ghost {
    background: transparent;
    color: #64748b;
    border: 1px solid #2a3a50;
}
.sim-cat-btn-ghost:hover { background: #1e2a3a; color: #94a3b8; }
.sim-cat-btn-ok {
    background: #2563eb;
    color: #fff;
}
.sim-cat-btn-ok:hover { background: #1d4ed8; }
/* grid wrapper for checkbox items — adapts columns to available width */
.sim-cat-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 2px 4px;
    margin-bottom: 4px;
}
.sim-categories .ListViewItem {
    display: flex;
    align-items: center;
    padding: 3px 4px 3px 0;
    min-width: 0; /* allow shrinking inside grid cell */
}
.sim-categories .ListViewItem input[type=checkbox] { flex-shrink: 0; accent-color: #2563eb; }
.sim-categories .ListViewItem label {
    color: #94a3b8;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sim-cat-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #2a3a50;
}
/* RadioButtonList renders as <table> — convert to flex so it wraps on narrow screens */
.sim-cat-options table { display: flex; flex-wrap: wrap; gap: 12px; }
.sim-cat-options table td { display: flex; align-items: center; gap: 4px; padding: 0; }
.sim-cat-options label,
.sim-cat-options span {
    color: #7a90a8;
    font-size: 13px;
}
.sim-cat-options input[type=radio] { flex-shrink: 0; accent-color: #2563eb; }

/* product add bar */
.sim-add-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.sim-add-bar label {
    font-size: 13px;
    font-weight: 600;
    color: #5a7a9a;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* products grid card */
.sim-grid-card {
    background: #1e2a3a;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
}
.sim-grid-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #162032;
    border-bottom: 1px solid #2a3a50;
    flex-shrink: 0;
    border-radius: 12px 12px 0 0;
}
.sim-grid-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.sim-grid-toggle {
    background: none;
    border: 1px solid #2a3a50;
    border-radius: 6px;
    color: #60a5fa;
    font-size: 12px;
    padding: 4px 12px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.sim-grid-toggle:hover { background: #1e3050; border-color: #3b82f6; }

.sim-grid-wrap {
    overflow: auto;
    flex: 1 1 auto;
    max-height: calc(100vh - 260px);
    min-height: 200px;
    border-radius: 0 0 12px 12px;
}

/* sticky column headers inside the scrollable grid-wrap */
.sim-grid-card .grid2 thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #162032 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,.3);
}

/* prevent expand button wrapping to new line in Stock/Ordered columns */
.sim-nowrap { white-space: nowrap; }

/* main products grid (grid2 override — must beat defaultTheme.css) */
.sim-grid-card .grid2,
.sim-grid-card table.grid2 {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 1rem !important;
    color: #cbd5e1 !important;
    background: transparent !important;
    border: none !important;
}
.sim-grid-card .grid2 th,
.sim-grid-card table.grid2 th {
    padding: 11px 16px !important;
    text-align: left !important;
    font-size: .929rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: #5a7a9a !important;
    background: #162032 !important;
    border: none !important;
    border-bottom: 2px solid #2a3a50 !important;
    white-space: nowrap !important;
}
.sim-grid-card .grid2 td,
.sim-grid-card table.grid2 td,
.sim-grid-card .grid2 .gridRow td,
.sim-grid-card .grid2 .gridAltRow td,
.sim-grid-card table.grid2 tr td {
    padding: 11px 16px !important;
    border: none !important;
    border-bottom: 1px solid #243040 !important;
    vertical-align: middle !important;
    color: #cbd5e1 !important;
    background: none !important;
    text-align: left !important;
    transition: background .08s !important;
    font-size: 1rem !important;
}
/* kill TR-level backgrounds from defaultTheme (.gridRow/.gridAltRow) */
.sim-grid-card .grid2 tr,
.sim-grid-card .grid2 tr.gridRow,
.sim-grid-card .grid2 tr.gridAltRow {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
}
.sim-grid-card .grid2 tbody tr:hover td,
.sim-grid-card .grid2 tr.gridRow:hover td,
.sim-grid-card .grid2 tr.gridAltRow:hover td { background: #243050 !important; }
.sim-grid-card .grid2 td a,
.sim-grid-card .grid2 a:link,
.sim-grid-card .grid2 a:visited,
.sim-grid-card .grid2 .gridRow a:link,
.sim-grid-card .grid2 .gridRow a:visited,
.sim-grid-card .grid2 .gridAltRow a:link,
.sim-grid-card .grid2 .gridAltRow a:visited {
    color: #60a5fa !important;
    background: none !important;
    background-color: transparent !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
.sim-grid-card .grid2 td a:hover { text-decoration: underline !important; color: #93c5fd !important; }
.sim-grid-card .grid2 td,
.sim-grid-card .grid2 td a,
.sim-grid-card .grid2 td span,
.sim-grid-card .grid2 td label,
.sim-grid-card .grid2 td div,
.sim-grid-card table.grid2 td,
.sim-grid-card table.grid2 td a,
.sim-grid-card table.grid2 td span,
.sim-grid-card table.grid2 td label,
.sim-grid-card table.grid2 td div {
    font-size: inherit !important;
}

/* expand icon button next to values */
.sim-expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: #0f1a27;
    border-radius: 5px;
    color: #5a7a9a;
    font-size: 13px;
    cursor: pointer;
    margin-left: 5px;
    vertical-align: middle;
    transition: background .12s, color .12s;
    text-decoration: none !important;
    line-height: 1;
    padding: 0;
}
.sim-expand-btn:hover { background: #1e3050; color: #60a5fa; }

/* textboxes inside grid */
.sim-grid-card .grid2 input[type=text],
.sim-grid-card .grid2 textarea {
    background: #0f1a27 !important;
    border: 1px solid #2a3a50 !important;
    border-radius: 5px !important;
    padding: 6px 8px !important;
    font-size: 13px !important;
    color: #cbd5e1 !important;
    outline: none !important;
}
.sim-grid-card .grid2 input[type=text]:focus,
.sim-grid-card .grid2 textarea:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59,130,246,.15) !important;
}

/* checkbox in grid */
.sim-grid-card .grid2 input[type=checkbox] { accent-color: #2563eb; }

/* sub-grids (repro, palete, narudzbe) */
.sim-grid-card .gridRepro,
.sim-grid-card .gridPalete,
.sim-grid-card .gridNarudzbeGR {
    margin-top: 6px;
    border-collapse: collapse;
    font-size: 12px;
    background: #0f1a27 !important;
    border-radius: 6px;
    overflow: hidden;
}
.sim-grid-card .gridRepro th,
.sim-grid-card .gridPalete th,
.sim-grid-card .gridNarudzbeGR th {
    padding: 6px 10px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #5a7a9a !important;
    background: #0a1520 !important;
    border-bottom: 1px solid #1e2a3a !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}
.sim-grid-card .gridRepro td,
.sim-grid-card .gridPalete td,
.sim-grid-card .gridNarudzbeGR td {
    padding: 5px 10px !important;
    color: #94a3b8 !important;
    border-bottom: 1px solid #1a2535 !important;
    background: transparent !important;
    font-size: 12px !important;
}

.sim-grid-card .gridRepro td,
.sim-grid-card .gridPalete td,
.sim-grid-card .gridNarudzbeGR td,
.sim-grid-card .gridRepro td a,
.sim-grid-card .gridPalete td a,
.sim-grid-card .gridNarudzbeGR td a,
.sim-grid-card .gridRepro td span,
.sim-grid-card .gridPalete td span,
.sim-grid-card .gridNarudzbeGR td span,
.sim-grid-card .gridRepro td label,
.sim-grid-card .gridPalete td label,
.sim-grid-card .gridNarudzbeGR td label,
.sim-grid-card .gridRepro td div,
.sim-grid-card .gridPalete td div,
.sim-grid-card .gridNarudzbeGR td div {
    font-size: inherit !important;
}

/* grid header buttons */
.sim-grid-btn-calc,
.sim-grid-card input[type=submit].sim-grid-btn-calc {
    background: #2563eb !important;
    color: #fff !important;
    border: none !important;
    border-radius: 7px !important;
    padding: 6px 16px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background .15s !important;
    white-space: nowrap !important;
    height: auto !important;
    line-height: 1.4 !important;
    min-width: auto !important;
    width: auto !important;
    box-shadow: none !important;
    filter: none !important;
}
.sim-grid-btn-calc:hover,
.sim-grid-card input[type=submit].sim-grid-btn-calc:hover {
    background: #1d4ed8 !important;
    box-shadow: 0 2px 8px rgba(37,99,235,.4) !important;
}

.sim-grid-btn-secondary,
.sim-grid-card input[type=submit].sim-grid-btn-secondary {
    background: #1e2a3a !important;
    color: #94a3b8 !important;
    border: 1px solid #2a3a50 !important;
    border-radius: 7px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background .15s, border-color .15s !important;
    white-space: nowrap !important;
    height: auto !important;
    line-height: 1.4 !important;
    min-width: auto !important;
    width: auto !important;
    box-shadow: none !important;
    filter: none !important;
}
.sim-grid-btn-secondary:hover,
.sim-grid-card input[type=submit].sim-grid-btn-secondary:hover {
    background: #243348 !important;
    color: #cbd5e1 !important;
    border-color: #3a5070 !important;
}

.sim-grid-btn-add {
    background: #1a2d1e;
    color: #4ade80;
    border: 1px solid #2d5a35;
    border-radius: 7px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.sim-grid-btn-add:hover { background: #1f3824; border-color: #3d7a48; }

.sim-grid-btn-danger,
.sim-grid-card input[type=submit].sim-grid-btn-danger,
.sim-page .sim-grid-header input[type=submit].sim-grid-btn-danger {
    background: #2d1515 !important;
    background-color: #2d1515 !important;
    color: #f87171 !important;
    border: 1px solid #7f1d1d !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    border-radius: 7px !important;
    padding: 5px 14px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background .15s, border-color .15s !important;
    white-space: nowrap !important;
    height: auto !important;
    line-height: 1.4 !important;
    min-width: auto !important;
    width: auto !important;
    box-shadow: none !important;
    filter: none !important;
}
.sim-grid-btn-danger:hover,
.sim-grid-card input[type=submit].sim-grid-btn-danger:hover,
.sim-page .sim-grid-header input[type=submit].sim-grid-btn-danger:hover {
    background: #3d1515 !important;
    border-color: #991b1b !important;
    color: #fca5a5 !important;
}

/* popup blocker hint */
.sim-popup-hint {
    margin-top: 12px;
    padding: 10px 16px;
    background: #162032;
    border: 1px solid #2a3a50;
    border-radius: 8px;
    color: #5a7a9a;
    font-size: 12px;
    line-height: 1.5;
}

/* add product modal */
.sim-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .6);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.sim-modal-dialog {
    background: #1e2a3a;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    border: 1px solid rgba(255,255,255,.1);
    min-width: 440px;
    max-width: 600px;
    width: 100%;
    overflow: hidden;
}
.sim-modal-title {
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    color: #e2e8f0;
    background: #162032;
    border-bottom: 1px solid #2a3a50;
}
.sim-modal-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sim-modal-footer {
    padding: 14px 24px;
    background: #162032;
    border-top: 1px solid #2a3a50;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}
.sim-modal-footer .btnMali,
.sim-modal-footer input[type=submit] {
    background: #2563eb !important;
    color: #fff !important;
    border: none !important;
    border-radius: 7px !important;
    padding: 8px 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    height: auto !important;
    line-height: 1.4 !important;
    min-width: auto !important;
    width: auto !important;
    box-shadow: none !important;
    filter: none !important;
    transition: background .15s !important;
}
.sim-modal-footer .btnMali:hover,
.sim-modal-footer input[type=submit]:hover {
    background: #1d4ed8 !important;
}
.sim-modal-footer .sim-btn-secondary {
    background: #1e2a3a !important;
    color: #94a3b8 !important;
    border: 1px solid #2a3a50 !important;
    border-radius: 7px !important;
    padding: 8px 20px !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: background .15s !important;
}
.sim-modal-footer .sim-btn-secondary:hover {
    background: #243348 !important;
    color: #cbd5e1 !important;
}

/* ── Confirm dialog (reusable) ── */
.rm-confirm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .6);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}
.rm-confirm-overlay.active { display: flex; }
.rm-confirm-dialog {
    background: #1e2a3a;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    border: 1px solid rgba(255,255,255,.1);
    min-width: 360px;
    max-width: 480px;
    width: 100%;
    overflow: hidden;
    animation: rmConfirmIn .15s ease-out;
}
@keyframes rmConfirmIn {
    from { opacity: 0; transform: scale(.95) translateY(-10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.rm-confirm-title {
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    color: #e2e8f0;
    background: #162032;
    border-bottom: 1px solid #2a3a50;
}
.rm-confirm-body {
    padding: 24px;
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1.6;
}
.rm-confirm-footer {
    padding: 14px 24px;
    background: #162032;
    border-top: 1px solid #2a3a50;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.rm-confirm-btn {
    border: none;
    border-radius: 7px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}
.rm-confirm-btn-cancel {
    background: #1e2a3a;
    color: #94a3b8;
    border: 1px solid #2a3a50;
}
.rm-confirm-btn-cancel:hover { background: #243348; color: #cbd5e1; }
.rm-confirm-btn-danger {
    background: #dc2626;
    color: #fff;
}
.rm-confirm-btn-danger:hover { background: #b91c1c; }

/* ── Alert/error toast inside UpdatePanel ── */
.rm-toast {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 12px;
    display: none;
}
.rm-toast.active { display: block; }
.rm-toast-error {
    background: rgba(220,38,38,.15);
    border: 1px solid #dc2626;
    color: #fca5a5;
}
.rm-toast-success {
    background: rgba(34,197,94,.15);
    border: 1px solid #22c55e;
    color: #86efac;
}

/* Light theme */
html[data-theme="light"] .rm-confirm-dialog { background: #ffffff; border-color: #a8b3c2; }
html[data-theme="light"] .rm-confirm-title { background: #e4e9f1; color: #1e293b; border-bottom-color: #a8b3c2; }
html[data-theme="light"] .rm-confirm-body { color: #475569; }
html[data-theme="light"] .rm-confirm-footer { background: #e4e9f1; border-top-color: #a8b3c2; }
html[data-theme="light"] .rm-confirm-btn-cancel { background: #ffffff; color: #475569; border-color: #a8b3c2; }
html[data-theme="light"] .rm-confirm-btn-cancel:hover { background: #f3f4f6; color: #1e293b; }
html[data-theme="light"] .rm-toast-error { background: rgba(220,38,38,.08); color: #dc2626; }
html[data-theme="light"] .rm-toast-success { background: rgba(34,197,94,.08); color: #16a34a; }

/* results section — match grid card width & spacing */
.sim-results {
    margin-top: 16px;
}
.sim-results > .tabela,
.sim-results table.tabela {
    background: #1e2a3a;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 16px;
    table-layout: fixed;
}

/* override .tabela / .tabela2 when inside sim-page */
.sim-page .tabela {
    border-collapse: collapse;
    color: #cbd5e1;
    width: 100%;
    background: #1e2a3a;
    border-radius: 10px;
    overflow: hidden;
    font-size: 13px;
}
.sim-page .tabela th {
    border: none;
    border-bottom: 2px solid #2a3a50;
    background: #162032;
    color: #5a7a9a;
    padding: 10px 12px;
    white-space: normal;
    word-break: break-word;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: left;
    max-width: 150px;
}
.sim-page .tabela td {
    border: none;
    border-bottom: 1px solid #243040;
    padding: 8px 12px;
    color: #cbd5e1;
    white-space: normal;
    word-break: break-word;
    overflow: hidden;
    font-size: 13px;
}
.sim-page .tabela tr:hover td { background: #243050; }
.sim-page .tabela a { color: #60a5fa !important; text-decoration: none; }
.sim-page .tabela a:hover { text-decoration: underline; color: #93c5fd !important; }
.sim-page .tabela td,
.sim-page .tabela td a,
.sim-page .tabela td span,
.sim-page .tabela td label,
.sim-page .tabela td div {
    font-size: inherit !important;
}

.sim-page .tabela2 {
    border-collapse: collapse;
    background: #0f1a27;
    border-radius: 6px;
    overflow: hidden;
    font-size: 12px;
    margin-top: 4px;
}
.sim-page .tabela2 th {
    border: none;
    border-bottom: 1px solid #1e2a3a;
    background: #0a1520;
    color: #5a7a9a;
    padding: 5px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}
.sim-page .tabela2 td {
    border: none;
    border-bottom: 1px solid #1a2535;
    padding: 4px 8px;
    color: #94a3b8;
    font-size: 12px;
}

.sim-page .tabela2 td,
.sim-page .tabela2 td a,
.sim-page .tabela2 td span,
.sim-page .tabela2 td label,
.sim-page .tabela2 td div {
    font-size: inherit !important;
}

/* red highlight for missing qty */
.sim-page .tabela td[style*="color: Red"],
.sim-page .tabela td[style*="color:Red"] {
    color: #f87171 !important;
}



/* modal body reset */
body.cedit-modal-body {
    margin: 0;
    padding: 0;
    background: #1e2a3a;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    color: #cbd5e1;
    height: 100vh;
    overflow: hidden;
}

body.cedit-modal-body form#Form1 {
    height: 100vh;
}

body.cedit-modal-body .cedit-card {
    height: 100vh;
    min-height: 100vh;
}

body.cedit-modal-body .cedit-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

body.cedit-modal-body #divDetail {
    position: sticky;
    bottom: 0;
    z-index: 90;
    background: #162032;
    border-top: 1px solid #2a3a50;
    padding: 14px 18px !important;
    box-shadow: 0 -4px 16px rgba(0,0,0,.35);
}


/* ══════════════════════════════════════════════
   Raw-material / detail-edit shared  (.rm-*)
   Used by: RawMaterial_Edit, OrgJedinica_Edit, …
   ══════════════════════════════════════════════ */

.rm-page { max-width: 1100px; margin: 0 auto; padding: 16px 20px 88px; display: flex; flex-direction: column; }

/* Header */
.rm-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.rm-header-id { font-size: 20px; font-weight: 700; color: #fff; }
.rm-header-status { font-size: 13px; color: #fff; }

/* Sections */
.rm-section {
    background: #1e2a3a; border-radius: 10px;
    /* Shadow paints downward + sides only — vertical offset >= blur on
       each layer so it cannot bleed above the section's top edge into
       the active tab area (which would draw a faint horizontal line
       right under the active tab text). Same approach the light-theme
       override uses. */
    box-shadow: 0 3px 3px rgba(0,0,0,.25),
                0 14px 18px -6px rgba(0,0,0,.25);
    margin-bottom: 16px; overflow: hidden;
    /* No z-index/stacking-context here — keeps it free of transform/filter
       trapping for position:fixed descendants like rm-confirm-overlay.
       The .rm-tabs-wrap (overflow:hidden) below clips the secondary-tab
       bleed pseudo so it can't visibly extend into the section. */
}
.rm-section-title {
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #3b82f6; padding: 14px 24px 0;
}
.rm-section-body { padding: 12px 24px 20px; }

/* Grid layout */
.rm-row  { display: flex; gap: 16px; flex-wrap: wrap; }
.rm-col1 { flex: 1; min-width: 180px; }
.rm-col2 { flex: 2; min-width: 280px; }
/* Narrow numeric/readonly column — opt-in modifier for KompletiSastavnice
   "Cost/pcs" readout where the value is just a small number with a
   currency suffix; full-width would waste the row. */
.rm-col1.kse-narrow-cost {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 200px;
}
.rm-col1.kse-narrow-cost .rm-readonly {
    display: inline-block;
    min-width: 90px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.rm-col3 { flex: 3; min-width: 360px; }
.rm-full { flex: 0 0 100%; }

/* "— or —" divider between filter modes */
.rm-or-divider {
    text-align: center; font-size: .75rem; color: #4a6080;
    margin: 4px 0 8px; letter-spacing: .05em;
}
html[data-theme="light"] .rm-or-divider { color: #94a3b8; }

/* Field */
.rm-field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.rm-lbl {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: #5a7a9a;
}
/* Modifier — turns the label into a horizontal divider with the text
   centered and lines extending to both edges of the field column (like a
   fieldset legend). Apply alongside .rm-lbl. The line color matches the
   theme's input-border tone so it reads as a subtle visual rule, not a
   strong separator. */
.rm-lbl-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}
.rm-lbl-divider::before,
.rm-lbl-divider::after {
    content: "";
    flex: 1 1 auto;
    border-top: 1px solid #2a3a50;
    height: 0;
}
html[data-theme="light"] .rm-lbl-divider::before,
html[data-theme="light"] .rm-lbl-divider::after {
    border-top-color: #cbd3df;
}
/* Inline help — small "?" badge that toggles a popover beneath the field.
   Used next to .rm-lbl for fields that benefit from a longer explanation
   (e.g. Payment model in KupciEdit). The popover is collapsed by default
   and opened/closed by rmToggleHelp() on the page. */
.rm-help-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; margin-left: 6px;
    border-radius: 50%; background: #3b82f6; color: #fff;
    font-size: 10px; font-weight: 700; line-height: 1;
    cursor: pointer; user-select: none;
    transition: background .15s, transform .15s;
    vertical-align: middle;
}
.rm-help-icon:hover { background: #2563eb; transform: scale(1.1); }
.rm-help-popover {
    margin: 6px 0 8px; padding: 10px 12px;
    background: #0f1a27; border: 1px solid #2a3a50; border-left: 3px solid #3b82f6;
    border-radius: 6px;
    font-size: 12px; line-height: 1.5; color: #cbd5e1;
    text-transform: none; letter-spacing: 0; font-weight: 400;
}
.rm-section-body input[type=text],
.rm-section-body input[type=number],
.rm-section-body textarea,
.rm-section-body select {
    /* background-color (longhand) instead of background (shorthand) so
       a later rule can add a background-image (e.g. the custom dropdown
       chevron) without it being wiped by the shorthand's implicit
       background-image: none. */
    background-color: #0f1a27 !important; border: 1px solid #2a3a50 !important;
    border-radius: 6px !important; padding: 8px 10px !important;
    font-size: 13px !important; color: #cbd5e1 !important;
    width: 100%; box-sizing: border-box; outline: none !important;
    height: auto !important;
    transition: border-color .15s;
}
.rm-section-body input[type=text]:focus,
.rm-section-body input[type=number]:focus,
.rm-section-body textarea:focus,
.rm-section-body select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59,130,246,.15) !important;
}
.rm-section-body select option { background: #1e2a3a; color: #cbd5e1; }

/* ── Custom dropdown chevron + reserved arrow zone ──
   Without this, browsers draw the native arrow ON TOP of the content
   area so a long selected option's text bleeds visibly through the
   chevron — looks like a glitch.
   We hide the native arrow (appearance:none) and draw a triangle out
   of two CSS linear-gradients (one half each). Pure CSS — no data
   URI / SVG to worry about across browsers. padding-right reserves
   the arrow zone so text gets clipped at the content edge before
   reaching the chevron; text-overflow:ellipsis adds the "..." cue. */
.rm-section-body select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Two linear-gradients build a downward triangle: the first draws
       the left half (transparent → arrow color at 50%), the second
       draws the right half (arrow color → transparent at 50%). They
       sit on the right edge of the box (calc(100% - 16px) and
       calc(100% - 11px)). #5a7a9a matches the .rm-lbl color. */
    background-image:
        linear-gradient(45deg, transparent 50%, #5a7a9a 50%),
        linear-gradient(135deg, #5a7a9a 50%, transparent 50%) !important;
    background-position:
        calc(100% - 16px) 55%,
        calc(100% - 11px) 55% !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat, no-repeat !important;
    padding-right: 32px !important;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Light theme — darker chevron so it reads on the lighter surface. */
html[data-theme="light"] .rm-section-body select {
    background-image:
        linear-gradient(45deg, transparent 50%, #475569 50%),
        linear-gradient(135deg, #475569 50%, transparent 50%) !important;
}

/* Same chevron treatment for typeahead-picker inputs. They're <input type=text>
   under the hood (inside .rm-supplier-picker), but visually act like a
   dropdown — click opens the suggestions list. The chevron makes that
   affordance obvious and matches the look of native <select> dropdowns. */
.rm-supplier-picker input[type=text] {
    background-image:
        linear-gradient(45deg, transparent 50%, #5a7a9a 50%),
        linear-gradient(135deg, #5a7a9a 50%, transparent 50%) !important;
    background-position:
        calc(100% - 16px) 55%,
        calc(100% - 11px) 55% !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat, no-repeat !important;
    padding-right: 32px !important;
}
html[data-theme="light"] .rm-supplier-picker input[type=text] {
    background-image:
        linear-gradient(45deg, transparent 50%, #475569 50%),
        linear-gradient(135deg, #475569 50%, transparent 50%) !important;
}

/* Date input with datepicker icon */
.rm-date-wrap { display: flex; align-items: center; gap: 6px; }
/* !important on flex too — a later rule (line ~2920) sets flex:1 which
   would make the input grow/shrink based on column width. We want a fixed
   130px so a full "dd.MM.yyyy" date never gets clipped. */
.rm-date-wrap .rm-date-input { width: 130px !important; flex: 0 0 auto !important; }
.rm-date-wrap img.ui-datepicker-trigger { cursor: pointer; flex: 0 0 auto; }

/* ctrlDateRange user-control — wraps its label + inputs as inline-flex
   column so the whole block shrinks to the inputs row's width. The
   .rm-lbl-divider legend sits on top and its ::before/::after lines
   naturally end at that same shrunk width (instead of stretching across
   the parent rm-col2). The 130px rule for the inputs is reused via the
   .rm-date-input class.

   margin-bottom: 12px mirrors .rm-field's bottom slack so neighbouring
   columns in a flex-end row (e.g. ORG.UNIT in .rm-field, DATE RANGE here)
   line up: same column height = labels at the same Y, controls at the
   same Y. Without this, the .rm-field column rides 12px higher than
   .rm-daterange. */
.rm-daterange { display: inline-flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.rm-daterange-inputs { display: flex; align-items: center; gap: 8px; }
.rm-daterange-inputs .rm-date-input { width: 130px !important; flex: 0 0 auto !important; }

/* ══════════════════════════════════════════════════════════════════════
   .os-* (OdvagaSirovina page)
   ══════════════════════════════════════════════════════════════════════ */
.os-page { max-width: 1600px; margin: 0 auto; padding: 20px; color: #cbd5e1; }
.os-page > * + * { margin-top: 16px; }

/* Combined header block — wraps `.os-toolbar` + `.os-header` in one
   card, laid out side-by-side (buttons + product info on the same
   row instead of stacked). Wraps to two rows on narrow screens. */
.os-header-block {
    background: #1e2a3a;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.os-header-block .os-toolbar,
.os-header-block .os-header {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 0 !important;
}
/* Toolbar keeps its inner flex (buttons in a row) but no outer card. */
.os-header-block .os-toolbar {
    flex-shrink: 0;
}
/* Header (product info) takes the remaining horizontal space. */
.os-header-block .os-header {
    flex: 1 1 0;
    min-width: 0;
}
html[data-theme="light"] .os-header-block {
    background: #f5efe6;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    border: 1px solid #e8e2d6;
}

/* Toolbar with action buttons */
.os-toolbar {
    background: #1e2a3a; border-radius: 12px; padding: 12px 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.os-toolbar input[type=submit].btnMali,
.os-toolbar input[type=button].btnMali,
.os-toolbar .btnMali {
    background: #2563eb !important; color: #fff !important; border: none !important;
    border-radius: 7px !important; padding: 8px 18px !important;
    font-size: .929rem !important; font-weight: 500 !important;
    cursor: pointer !important; white-space: nowrap !important;
    height: auto !important; line-height: 1.4 !important;
    min-width: 0 !important; width: auto !important;
    box-shadow: none !important; filter: none !important;
    -webkit-appearance: none !important; appearance: none !important;
    transition: background .15s !important;
}
.os-toolbar input[type=submit].btnMali:hover,
.os-toolbar input[type=button].btnMali:hover,
.os-toolbar .btnMali:hover { background: #1d4ed8 !important; }
.os-toolbar .os-btn-exit.btnMali {
    background: #1e2a3a !important; color: #94a3b8 !important;
    border: 1px solid #2a3a50 !important;
}
.os-toolbar .os-btn-exit.btnMali:hover {
    background: #243348 !important; color: #cbd5e1 !important; border-color: #3a5070 !important;
}
/* Green primary-action toolbar variant — used by Mijesanje2's
   Završetak button (mirrors the toolbar slot that OdvagaSirovina2
   uses for Mixing). Matches the .ns-start-btn palette so the
   "finish" action reads as the same affirmative green across pages. */
.os-toolbar .os-btn-finish.btnMali {
    background: linear-gradient(180deg, #16a34a 0%, #15803d 100%) !important;
    border: 1px solid #14532d !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(22,163,74,.35) !important;
}
.os-toolbar .os-btn-finish.btnMali:hover {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
    box-shadow: 0 2px 8px rgba(22,163,74,.5) !important;
}
.os-toolbar .os-pdf-wrap { display: inline-flex; align-items: center; }
.os-toolbar .os-pdf-wrap img { width: 24px; height: 24px; vertical-align: middle; }
.os-toolbar .PDFButton {
    background: #1e2a3a !important; color: #94a3b8 !important;
    border: 1px solid #2a3a50 !important;
    border-radius: 7px !important; padding: 7px 14px !important;
    font-size: .857rem !important; cursor: pointer !important;
    height: auto !important; line-height: 1.3 !important;
    -webkit-appearance: none !important; appearance: none !important;
}
.os-toolbar .PDFButton:hover { background: #243348 !important; color: #cbd5e1 !important; }

/* Product info header card */
.os-header {
    background: #1e2a3a; border-radius: 12px; padding: 18px 22px;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    color: #cbd5e1;
}
/* Info tiles grid: each tile has a muted caps label + big value */
.os-info-grid {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    grid-template-rows: auto auto;
    row-gap: 3px;
    column-gap: 32px;
    align-items: end;
    /* Push column tracks to the right when the grid is wider than its
       content. Necessary because some hosts stretch the InfoGrid
       (.pali-toolbar sets `flex: 1` on it), while others let it be
       content-sized and rely on the parent flex's space-between. With
       all-auto column templates from ApplyGridLayout, this rule keeps
       tiles right-aligned in BOTH cases — and is a no-op when there's
       no leftover space (e.g. when grid-template-columns still has a
       `1fr` column on legacy callers). */
    justify-content: end;
}
.os-info-tile {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    min-width: 0;
}
.os-info-tile .os-info-label {
    font-size: .714rem; text-transform: uppercase; letter-spacing: .08em;
    color: #5a7a9a; font-weight: 700;
}
.os-info-tile .os-info-value {
    font-size: 1.143rem; font-weight: 700; color: #e2e8f0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    /* Align every value to its FIRST text baseline. Without this, the
       wide Product tile's mixed font sizes (15 px bigLabel + 12 px
       os-info-sub) produce a taller line-box than single-bigLabel
       tiles. Row 2's track stretches to the max, but non-wide values
       default to `align-self: stretch` and end up top-aligned inside
       the stretched cell — visually mis-aligned with the wide tile.
       Baseline alignment makes "2701255", "5060…", "5,000 kom" share
       the same y regardless of internal markup. */
    align-self: baseline;
}
.os-info-tile.os-info-wide { grid-column: 3 / 4; min-width: 0; }
.os-info-tile.os-info-wide .os-info-value { white-space: normal; }
.os-info-tile .os-info-sub { font-size: .857rem; color: #94a3b8; font-weight: 400; }
.os-info-tile.os-info-order .os-info-value { font-size: 1.429rem; color: #60a5fa; }

/* Documents tile: chip-style PDF links */
.os-info-tile.os-info-pdfs .os-info-value { overflow: visible; }
.os-pdf-links { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
a.os-pdf-link,
a.os-pdf-link:link,
a.os-pdf-link:visited {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px 4px 8px; border-radius: 999px;
    background: rgba(96, 165, 250, .08);
    border: 1px solid rgba(96, 165, 250, .28);
    color: #93c5fd;
    font-size: .9rem; font-weight: 600; line-height: 1;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
a.os-pdf-link:hover,
a.os-pdf-link:focus {
    background: rgba(96, 165, 250, .18);
    border-color: rgba(96, 165, 250, .55);
    color: #bfdbfe;
    text-decoration: none;
}
.os-pdf-link svg { width: 16px; height: 16px; flex-shrink: 0; color: currentColor; }
.os-pdf-link span { white-space: nowrap; }

/* Image tile — small clickable thumbnail that opens a lightbox.
   Used by ctrlProizvod2 (product image) and ctrlProizvod3 (product + palette).
   The tile breaks out of the subgrid (display:flex) so the image is
   vertically centered across BOTH rows of the os-info-grid.

   IMPORTANT: do NOT set `grid-row: 1 / 3` here. It would put the tile
   in CSS Grid's explicit-placement pass (alongside ProductTile's
   explicit `grid-column`), where its auto column picks column 1 —
   visually shoving the image to the start of the row. We rely on the
   parent class's `grid-row: span 2` (from .os-info-tile) for the
   2-row span and `align-self: stretch` so flex can center the image. */
.os-info-tile.os-info-imgtile {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    padding: 0;
}
.os-info-thumb {
    height: 40px;
    width: 40px;
    border-radius: 6px;
    border: 1px solid #334155;
    object-fit: contain;
    cursor: zoom-in;
    background: rgba(255, 255, 255, .04);
    padding: 2px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.os-info-thumb:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
    border-color: #60a5fa;
}
html[data-theme="light"] .os-info-thumb { border-color: #cbd5e1; background: rgba(0, 0, 0, .03); }
html[data-theme="light"] .os-info-thumb:hover { border-color: #2563eb; box-shadow: 0 4px 14px rgba(0, 0, 0, .14); }

/* Lightbox overlay — opens when a thumbnail is clicked.
   Click the backdrop or press Escape to close. */
.os-imglb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    padding: 24px;
}
.os-imglb-overlay.is-open { display: flex; }
.os-imglb-overlay img {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .7);
    background: #fff;
    cursor: default;
}
.os-imglb-close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}
.os-imglb-close:hover { background: rgba(255, 255, 255, .22); }

@media (max-width: 900px) {
    .os-info-grid { grid-template-columns: 1fr 1fr; }
    .os-info-tile.os-info-wide { grid-column: 1 / -1; }
}

/* Grid card */
.os-grid-card {
    background: #1e2a3a; border-radius: 12px; padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.3); overflow: hidden;
}

/* Main grid (grid2) override — must beat defaultTheme.css */
.os-grid-card .grid2, .os-grid-card table.grid2 {
    width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important;
    background: transparent !important; color: #cbd5e1 !important; border: none !important;
    font-size: 1rem !important;
}
.os-grid-card .grid2 th, .os-grid-card table.grid2 th {
    padding: 12px 16px !important; text-align: left !important;
    font-size: .857rem !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: .05em !important;
    color: #5a7a9a !important; background: #162032 !important;
    border: none !important; border-bottom: 2px solid #2a3a50 !important;
    white-space: nowrap !important;
}
.os-grid-card .grid2 tr,
.os-grid-card .grid2 tr.gridRow,
.os-grid-card .grid2 tr.gridAltRow {
    background: none !important; background-color: transparent !important; border: none !important;
}
.os-grid-card .grid2 > tbody > tr > td {
    padding: 12px 16px !important; border: none !important;
    border-bottom: 1px solid #243040 !important; vertical-align: middle !important;
    color: #cbd5e1 !important; background: none !important; font-size: 1rem !important;
    /* Override legacy `.grid2 td { text-align: center }` from defaultTheme
       so headers (left-aligned) and data cells line up vertically. */
    text-align: left !important;
}
/* Icon columns keep center alignment — ItemStyle HorizontalAlign="Center"
   on the TemplateField renders as `align="center"` on the <td>, but the
   rule above would otherwise win and shove icons to the left. */
.os-grid-card .grid2 > tbody > tr > td[align="center"] {
    text-align: center !important;
}
.os-grid-card .grid2 > tbody > tr:last-child > td { border-bottom: none !important; }
.os-grid-card .grid2 > tbody > tr:hover > td { background: #243050 !important; }
.os-grid-card .grid2 td a:link,
.os-grid-card .grid2 td a:visited { color: #60a5fa !important; text-decoration: none !important; }
.os-grid-card .grid2 td a:hover { color: #93bbfc !important; }

/* hide id column visually but keep server-side cell value */
.os-hide-col { display: none !important; }

/* stacked code + name in one cell */
.os-name-col { text-align: center; }
.os-repro { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.3; }
.os-repro .os-repro-code {
    font-size: .786rem; color: #5a7a9a; font-weight: 600;
    letter-spacing: .02em; text-transform: none;
}
.os-repro .os-repro-name {
    font-size: 1rem; color: #e2e8f0; font-weight: 500;
}

/* alternatives collapsible toggle button + wrapper */
.os-alt-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    background: #0f1a27; border: 1px solid #2a3a50; color: #94a3b8 !important;
    border-radius: 6px; padding: 5px 10px; font-size: .786rem; font-weight: 500;
    cursor: pointer; text-decoration: none !important;
    transition: background .12s, color .12s, border-color .12s;
}
.os-alt-toggle:hover { background: #1e3050; color: #cbd5e1 !important; border-color: #3a5070; }
.os-alt-toggle .os-alt-caret { transition: transform .15s; font-size: 10px; }
.os-alt-toggle.os-alt-open .os-alt-caret { transform: rotate(180deg); }
/* when placed below the code/name block the toggle must stack as a block element */
.os-repro ~ .os-alt-toggle { display: flex; margin: 6px auto 0; width: fit-content; }
.os-alt-wrap { margin: 8px auto 0; width: fit-content; display: flex; flex-direction: column; align-items: center; }

/* the big kg label cell: large numeric display with two add buttons inline */
.os-weight-cell { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.os-weight-cell .os-weight-value { font-size: 1.571rem; font-weight: 700; color: #e2e8f0; min-width: 60px; text-align: right; }

/* icon add buttons (SVG inside an <a>) */
.os-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 8px;
    background: #0f1a27; border: 1px solid #2a3a50;
    color: #94a3b8;
    transition: background .12s, border-color .12s, color .12s;
    text-decoration: none !important;
}
.os-icon-btn:hover { background: #1e3050; border-color: #3b82f6; color: #e2e8f0; }
.os-icon-btn svg { width: 22px; height: 22px; display: block; }
.os-icon-btn .os-plus-badge { fill: #22c55e; }
.os-icon-btn .os-plus-glyph { stroke: #fff; }

/* backward compat: keep old img-based add buttons small if theyre rendered */
.os-weight-cell a img { width: 20px; height: 20px; display: block; }

/* alternative raw materials sub-grid */
.os-grid-card .gridAltSirovine {
    width: 100% !important; max-width: 240px; border-collapse: collapse !important;
    background: #0f1a27 !important; border-radius: 6px; overflow: hidden;
    font-size: .857rem !important;
}
.os-grid-card .gridAltSirovine tr,
.os-grid-card .gridAltSirovine tr.gridRow,
.os-grid-card .gridAltSirovine tr.gridAltRow {
    background: none !important; background-color: transparent !important;
}
.os-grid-card .gridAltSirovine td {
    padding: 6px 10px !important; color: #cbd5e1 !important;
    border: none !important; border-bottom: 1px solid #1e2a3a !important;
    background: none !important;
}
.os-grid-card .gridAltSirovine tr:last-child td { border-bottom: none !important; }

/* odvagano sub-grid (gridDodano) */
.os-grid-card .grid2 .grid {
    width: 100% !important; border-collapse: collapse !important;
    background: #0f1a27 !important; border-radius: 6px; overflow: hidden;
    font-size: .857rem !important;
}
.os-grid-card .grid2 .grid th {
    padding: 6px 8px !important; font-size: .714rem !important; font-weight: 700 !important;
    text-transform: uppercase !important; color: #5a7a9a !important;
    background: #162032 !important; border-bottom: 1px solid #2a3a50 !important;
    white-space: nowrap !important; text-align: left !important; letter-spacing: .04em !important;
}
.os-grid-card .grid2 .grid tr,
.os-grid-card .grid2 .grid tr.gridRow,
.os-grid-card .grid2 .grid tr.gridAltRow {
    background: none !important; background-color: transparent !important;
}
.os-grid-card .grid2 .grid td {
    padding: 5px 8px !important; color: #cbd5e1 !important;
    border: none !important; border-bottom: 1px solid #1e2a3a !important;
    background: none !important; font-size: .857rem !important;
}
.os-grid-card .grid2 .grid tr:last-child td { border-bottom: none !important; }
.os-grid-card .grid2 .smallButton { cursor: pointer; vertical-align: middle; opacity: .85; transition: opacity .12s; }
.os-grid-card .grid2 .smallButton:hover { opacity: 1; }

/* OK image centered nicely */
.os-grid-card .grid2 td img[src*="Ok32"] { width: 28px; height: 28px; }

/* Bottom full-width QualityControl / zastoj style */
.os-footer-actions { display: flex; justify-content: center; }
.os-footer-actions .btnExtraBig,
.os-footer-actions .btnExtraBig.zastoj {
    background: #7f1d1d !important; color: #fff !important;
    border: none !important; border-radius: 10px !important;
    padding: 16px 36px !important; font-size: 1.143rem !important;
    font-weight: 600 !important; cursor: pointer !important;
    height: auto !important; min-width: 320px;
    box-shadow: 0 2px 8px rgba(127,29,29,.35) !important;
    -webkit-appearance: none !important; appearance: none !important;
    transition: background .15s !important;
}
.os-footer-actions .btnExtraBig:hover,
.os-footer-actions .btnExtraBig.zastoj:hover { background: #991b1b !important; }

/* ══════════════════════════════════════════════════════════════════════
   .pm-* (PocetnaMjesaona dashboard)
   ══════════════════════════════════════════════════════════════════════ */
.pm-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--header-h, 84px) - 40px);
    padding: 32px 24px;
    box-sizing: border-box;
}
.pm-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 640px;
}
.pm-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 40px 24px 32px;
    background: #1e2a3a;
    border: 1px solid #2a3a50;
    border-radius: 18px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: transform .18s, box-shadow .18s, border-color .18s, background .18s;
    user-select: none;
}
.pm-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
    background: #243348;
}
.pm-tile:active { transform: translateY(-1px); }

.pm-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .18s;
}
.pm-tile:hover .pm-icon { transform: scale(1.08); }
.pm-icon svg { width: 34px; height: 34px; }

.pm-tile--mixing  .pm-icon { background: rgba(96,165,250,.15); color: #60a5fa; }
.pm-tile--weigh   .pm-icon { background: rgba(52,211,153,.15); color: #34d399; }
.pm-tile--tanks   .pm-icon { background: rgba(167,139,250,.15); color: #a78bfa; }
.pm-tile--codes   .pm-icon { background: rgba(251,146,60,.15);  color: #fb923c; }

.pm-tile--mixing:hover  { border-color: #60a5fa; }
.pm-tile--weigh:hover   { border-color: #34d399; }
.pm-tile--tanks:hover   { border-color: #a78bfa; }
.pm-tile--codes:hover   { border-color: #fb923c; }

.pm-label {
    font-size: 15px;
    font-weight: 600;
    color: #e2e8f0;
    text-align: center;
    line-height: 1.3;
}

@media (max-width: 480px) {
    .pm-grid { grid-template-columns: 1fr; max-width: 320px; }
}

/* 3-column variant (Pocetna — 6 tiles) */
.pm-grid--3col {
    grid-template-columns: repeat(3, 1fr);
    max-width: 900px;
}
@media (max-width: 720px) {
    .pm-grid--3col { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
}
@media (max-width: 480px) {
    .pm-grid--3col { grid-template-columns: 1fr; max-width: 360px; }
}

/* Pocetna tile colour variants */
.pm-tile--production    .pm-icon { background: rgba(96,165,250,.15);  color: #60a5fa; }
.pm-tile--production-k  .pm-icon { background: rgba(34,211,238,.15);  color: #22d3ee; }
.pm-tile--package       .pm-icon { background: rgba(52,211,153,.15);  color: #34d399; }
.pm-tile--pallets       .pm-icon { background: rgba(167,139,250,.15); color: #a78bfa; }
.pm-tile--palletscheck  .pm-icon { background: rgba(244,114,182,.15); color: #f472b6; }

.pm-tile--production:hover    { border-color: #60a5fa; }
.pm-tile--production-k:hover  { border-color: #22d3ee; }
.pm-tile--package:hover       { border-color: #34d399; }
.pm-tile--pallets:hover       { border-color: #a78bfa; }
.pm-tile--palletscheck:hover  { border-color: #f472b6; }

/* light theme */
html[data-theme="light"] .pm-tile { background: #f8fafc; border-color: #dde4ef; }
html[data-theme="light"] .pm-tile:hover { background: #eef2f9; }
html[data-theme="light"] .pm-label { color: #1e293b; }
html[data-theme="light"] .pm-tile--mixing        .pm-icon { background: rgba(37,99,235,.1);   }
html[data-theme="light"] .pm-tile--weigh         .pm-icon { background: rgba(5,150,105,.1);   color: #059669; }
html[data-theme="light"] .pm-tile--tanks         .pm-icon { background: rgba(109,40,217,.1);  color: #7c3aed; }
html[data-theme="light"] .pm-tile--codes         .pm-icon { background: rgba(194,65,12,.1);   color: #c2410c; }
html[data-theme="light"] .pm-tile--production    .pm-icon { background: rgba(37,99,235,.1);   color: #2563eb; }
html[data-theme="light"] .pm-tile--production-k  .pm-icon { background: rgba(6,182,212,.1);   color: #0891b2; }
html[data-theme="light"] .pm-tile--package       .pm-icon { background: rgba(5,150,105,.1);   color: #059669; }
html[data-theme="light"] .pm-tile--pallets       .pm-icon { background: rgba(109,40,217,.1);  color: #7c3aed; }
html[data-theme="light"] .pm-tile--palletscheck  .pm-icon { background: rgba(219,39,119,.1);  color: #db2777; }

/* ══════════════════════════════════════════════════════════════════════
   .pali-* (Paletiranje)
   ══════════════════════════════════════════════════════════════════════ */

/* Toolbar: Exit left, product card right, both top-aligned */
.pali-toolbar { align-items: flex-start; }
.pali-toolbar .os-info-grid { flex: 1; }

/* Main grid area — no horizontal padding so grid goes edge-to-edge */
.pali-main { min-width: 0; }
.pali-grid-header-left { display: flex; gap: 8px; align-items: center; }

/* New pallet / image buttons */
.pali-img-btn { font-size: 12.5px; }

/* Two-column inner layout: radio options left, fields right */
.pali-cols { display: flex; gap: 16px; align-items: flex-start; }
.pali-radio-col {
    flex: 0 0 auto;
    background: #0f1a27;
    border: 1px solid #2a3a50;
    border-radius: 8px;
    padding: 10px 14px;
}
.pali-rbl td { padding: 4px 2px; }
.pali-rbl input[type=radio] { accent-color: #3b82f6; width: 14px; height: 14px; cursor: pointer; vertical-align: middle; }
.pali-rbl label { font-size: 12.5px; color: #94a3b8; cursor: pointer; margin-left: 5px; vertical-align: middle; white-space: nowrap; }

.pali-fields-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

/* Fields */
.pali-fields { display: flex; flex-direction: column; gap: 8px; }
.pali-field  { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pali-label  { font-size: 12.5px; color: #94a3b8; line-height: 1.3; }
.pali-input,
.pali-select {
    width: 100%;
    box-sizing: border-box;
    background: #0f1a27 !important;
    border: 1px solid #2a3a50 !important;
    border-radius: 6px !important;
    padding: 7px 10px !important;
    color: #e2e8f0 !important;
    font-size: 13px;
    transition: border-color .15s, box-shadow .15s;
}
.pali-input:focus,
.pali-select:focus { outline: none; border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.pali-textarea {
    width: 100%;
    box-sizing: border-box;
    background: #0f1a27 !important;
    border: 1px solid #2a3a50 !important;
    border-radius: 6px !important;
    padding: 7px 10px !important;
    color: #e2e8f0 !important;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    transition: border-color .15s, box-shadow .15s;
}
.pali-textarea:focus { outline: none; border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }

/* Actions: Save button */
.pali-actions { display: flex; align-items: center; gap: 16px; padding-top: 4px; }

/* Grid */
.pali-grid-wrap   { min-width: 0; display: flex; flex-direction: column; }
.pali-grid-header { padding: 14px 20px 10px; display: flex; justify-content: space-between; align-items: center; }
.pali-total       { font-size: 14px; font-weight: 700; color: #e2e8f0; }

/* Form modal */
.pali-modal-dialog { height: auto !important; max-height: 90vh; overflow-y: auto; }
.pali-modal-header {
    padding: 16px 48px 14px 20px;
    font-size: 15px;
    font-weight: 700;
    color: #e2e8f0;
    border-bottom: 1px solid #2a3a50;
    flex-shrink: 0;
}
.pali-modal-body { padding: 20px; }

/* Image modal */
.pali-img-dialog .pali-modal-body { display: flex; align-items: center; justify-content: center; }
.pali-img-dialog .pali-modal-body img { max-width: 100%; max-height: calc(90vh - 100px); object-fit: contain; border-radius: 8px; }

/* light theme */
html[data-theme="light"] .pali-radio-col                        { background: #f0f4fa; border-color: #dde4ef; }
html[data-theme="light"] .pali-rbl label                        { color: #64748b; }
html[data-theme="light"] .pali-input,
html[data-theme="light"] .pali-select,
html[data-theme="light"] .pali-textarea                         { background: #f8fafc !important; border-color: #dde4ef !important; color: #1e293b !important; }
html[data-theme="light"] .pali-label                            { color: #64748b; }
html[data-theme="light"] .pali-total                            { color: #1e293b; }
html[data-theme="light"] .pali-modal-header                     { color: #1e293b; border-color: #dde4ef; }

/* ══════════════════════════════════════════════════════════════════════
   .ni-* (NalogIspustanje)
   ══════════════════════════════════════════════════════════════════════ */

/* Toolbar: spacer + right-side cluster (deficit + end button) */
.ni-toolbar-spacer { flex: 1; }
.ni-toolbar-end { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.ni-deficit-wrap { display: flex; flex-direction: column; gap: 3px; }
.ni-deficit-label {
    font-size: .714rem; text-transform: uppercase; letter-spacing: .08em;
    color: #5a7a9a; font-weight: 700;
}
.ni-deficit-input { width: 110px !important; }
/* Emission-end button: red, same height as toolbar buttons */
.os-toolbar .ni-kraj-btn.zastoj {
    background: #7f1d1d !important; color: #fff !important;
    border: none !important; border-radius: 7px !important;
    padding: 8px 16px !important; font-size: .929rem !important;
    font-weight: 600 !important; height: auto !important;
    white-space: nowrap !important; cursor: pointer !important;
    -webkit-appearance: none !important; appearance: none !important;
    transition: background .15s !important;
}
.os-toolbar .ni-kraj-btn.zastoj:hover { background: #991b1b !important; }
.ni-error-msg { font-size: .9rem; color: #f87171; }

/* Header: product card + mixer stat side by side */
.ni-header { display: flex; align-items: flex-start; gap: 32px; flex-wrap: wrap; }
.ni-header > :first-child { flex: 0 0 auto; max-width: 100%; }

/* Mixer quantity stat (in header) */
.ni-mixer-stat {
    flex-shrink: 0;
    display: flex; flex-direction: column; gap: 4px;
    border-left: 2px solid #2a3a50; padding-left: 28px;
}
@media (max-width: 820px) {
    .ni-header { flex-direction: column; gap: 16px; }
    .ni-mixer-stat {
        border-left: none; border-top: 2px solid #2a3a50;
        padding-left: 0; padding-top: 14px; width: 100%;
    }
}
.ni-stat-label {
    font-size: .714rem; text-transform: uppercase; letter-spacing: .08em;
    color: #5a7a9a; font-weight: 700;
}
.ni-stat-value {
    font-size: 2.2rem; font-weight: 700; color: #60a5fa; line-height: 1;
    display: flex; align-items: baseline; gap: 8px;
}
.ni-stat-unit { font-size: 1rem; font-weight: 500; color: #94a3b8; }

/* Fill form card */
.ni-form-card {
    background: #1e2a3a; border-radius: 12px; padding: 18px 22px;
    box-shadow: 0 2px 8px rgba(0,0,0,.3); margin-bottom: 16px;
}
.ni-form-row { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.ni-field { display: flex; flex-direction: column; gap: 4px; }
.ni-field-btn { justify-content: flex-end; }
.ni-label {
    font-size: .714rem; text-transform: uppercase; letter-spacing: .08em;
    color: #5a7a9a; font-weight: 700;
}
.ni-input {
    background: #0f1a27 !important; border: 1px solid #2a3a50 !important;
    border-radius: 6px; color: #e2e8f0 !important;
    padding: 7px 10px; font-size: .95rem;
}
.ni-input:focus { border-color: #3b82f6 !important; outline: none; }
.ni-form-error { display: block; margin-top: 10px; }

/* Tank searchable picker */
.ni-tank-picker { position: relative; }
.ni-tank-picker .ni-input { width: 220px; }
.ni-tank-results {
    display: none; position: fixed; z-index: 9999;
    background: #1e2a3a; border: 1px solid #2a3a50; border-radius: 8px;
    overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.ni-tank-results.open { display: block; }
.ni-tank-item {
    padding: 8px 14px; cursor: pointer; font-size: .9rem; color: #cbd5e1;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.ni-tank-item:last-child { border-bottom: none; }
.ni-tank-item:hover, .ni-tank-item.active { background: #243348; color: #e2e8f0; }

/* No-tanks warning */
.ni-no-tanks { font-size: 1rem; font-weight: 700; color: #f87171; margin-bottom: 12px; display: block; }

/* Activity indicator — shown by the UpdateProgress while an async
   postback (Save / Delete / Print / Transfer) is in flight. Full-screen
   overlay above all page content. */
.ni-busy {
    position: fixed; inset: 0;
    background: rgba(2, 6, 23, .55);
    z-index: 9000;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(2px);
}
.ni-busy-spinner {
    width: 56px; height: 56px;
    border: 5px solid rgba(255, 255, 255, .25);
    border-top-color: #60a5fa;
    border-radius: 50%;
    animation: niSpin .8s linear infinite;
}
@keyframes niSpin { to { transform: rotate(360deg); } }
html[data-theme="light"] .ni-busy { background: rgba(15, 23, 42, .45); }
html[data-theme="light"] .ni-busy-spinner {
    border-color: rgba(15, 23, 42, .15);
    border-top-color: #2563eb;
}

/* Save button — green primary variant, matches KRAJ button proportions */
.ni-form-card .ni-save-btn,
.os-page .ni-save-btn {
    background: #15803d !important; color: #fff !important;
    border: none !important; border-radius: 7px !important;
    padding: 8px 18px !important; font-size: .929rem !important;
    font-weight: 600 !important; height: auto !important;
    white-space: nowrap !important; cursor: pointer !important;
    -webkit-appearance: none !important; appearance: none !important;
    transition: background .15s !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.25) !important;
}
.ni-form-card .ni-save-btn:hover,
.os-page .ni-save-btn:hover { background: #16a34a !important; }
.ni-form-card .ni-save-btn:disabled,
.os-page .ni-save-btn:disabled {
    background: #475569 !important; cursor: not-allowed !important;
    opacity: .7 !important; box-shadow: none !important;
}

/* Barcode link in grid — rendered as a clearly visible pill badge so it
   stands out against the row background in both dark and light themes.
   Stronger than the legacy `.gridRow` rules so the link colour wins. */
.os-grid-card .grid2 td a.ni-paleta-link,
.os-grid-card .grid2 td a.ni-paleta-link:link,
.os-grid-card .grid2 td a.ni-paleta-link:visited {
    display: inline-flex; align-items: center;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(96,165,250,.15) !important;
    color: #93c5fd !important;
    border: 1px solid rgba(96,165,250,.45) !important;
    font: 600 .85rem ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .02em;
    text-decoration: none !important;
    transition: background .12s, border-color .12s, color .12s;
}
.os-grid-card .grid2 td a.ni-paleta-link:hover {
    background: rgba(96,165,250,.28) !important;
    color: #dbeafe !important;
    border-color: rgba(147,197,253,.7) !important;
}

/* Light theme */
html[data-theme="light"] .ni-mixer-stat { border-left-color: #d5cfc4; border-top-color: #d5cfc4; }
html[data-theme="light"] .ni-stat-label,
html[data-theme="light"] .ni-label,
html[data-theme="light"] .ni-deficit-label { color: #64748b; }
html[data-theme="light"] .ni-stat-value { color: #2563eb; }
html[data-theme="light"] .ni-stat-unit { color: #64748b; }
html[data-theme="light"] .ni-form-card {
    background: #f5efe6; box-shadow: 0 2px 8px rgba(0,0,0,.08); border: 1px solid #e8e2d6;
}
html[data-theme="light"] .ni-input {
    background: #f8fafc !important; border-color: #d5cfc4 !important; color: #1e293b !important;
}
html[data-theme="light"] .ni-tank-results {
    background: #fff; border-color: #d5cfc4; box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
html[data-theme="light"] .ni-tank-item { color: #1e293b; border-bottom-color: #f3f2f0; }
html[data-theme="light"] .ni-tank-item:hover,
html[data-theme="light"] .ni-tank-item.active { background: #f3e9d5; }
html[data-theme="light"] .ni-no-tanks { color: #dc2626; }
html[data-theme="light"] .ni-error-msg { color: #dc2626; }
html[data-theme="light"] .os-grid-card .grid2 td a.ni-paleta-link,
html[data-theme="light"] .os-grid-card .grid2 td a.ni-paleta-link:link,
html[data-theme="light"] .os-grid-card .grid2 td a.ni-paleta-link:visited {
    background: rgba(37,99,235,.10) !important;
    color: #1d4ed8 !important;
    border-color: rgba(37,99,235,.35) !important;
}
html[data-theme="light"] .os-grid-card .grid2 td a.ni-paleta-link:hover {
    background: rgba(37,99,235,.18) !important;
    color: #1e40af !important;
    border-color: rgba(37,99,235,.55) !important;
}
/* Light-theme Save button — slightly darker green for legibility */
html[data-theme="light"] .ni-form-card .ni-save-btn,
html[data-theme="light"] .os-page .ni-save-btn {
    background: #16a34a !important; box-shadow: 0 1px 3px rgba(0,0,0,.12) !important;
}
html[data-theme="light"] .ni-form-card .ni-save-btn:hover,
html[data-theme="light"] .os-page .ni-save-btn:hover { background: #15803d !important; }
html[data-theme="light"] .ni-form-card .ni-save-btn:disabled,
html[data-theme="light"] .os-page .ni-save-btn:disabled {
    background: #94a3b8 !important; opacity: .8 !important;
}

/* ═════ Light theme overrides ═════ */
html[data-theme="light"] .os-page { color: #1e293b; }
html[data-theme="light"] .os-toolbar,
html[data-theme="light"] .os-header,
html[data-theme="light"] .os-grid-card {
    /* Warm cream — matches the rest of the redesigned pages
       (--clr-surface = #f5efe6) instead of the neutral #f3f2f0 gray
       that read cool against the cream sidebar. */
    background: #f5efe6;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    border: 1px solid #e8e2d6;
}
html[data-theme="light"] .os-toolbar .os-btn-exit.btnMali { background: #e8e2d6 !important; color: #475569 !important; border-color: #d5cfc4 !important; }
html[data-theme="light"] .os-toolbar .os-btn-exit.btnMali:hover { background: #ddd7cb !important; color: #1e293b !important; border-color: #b8afa0 !important; }
html[data-theme="light"] .os-toolbar .PDFButton { background: #e8e2d6 !important; color: #475569 !important; border-color: #d5cfc4 !important; }
html[data-theme="light"] .os-toolbar .PDFButton:hover { background: #ddd7cb !important; color: #1e293b !important; }
html[data-theme="light"] .os-header { color: #1e293b; }
html[data-theme="light"] .os-header .bigLabel { color: #1e293b; }
html[data-theme="light"] .os-header span { color: #64748b; }
html[data-theme="light"] .os-grid-card .grid2 th { background: #e8e2d6 !important; color: #64748b !important; border-bottom-color: #d5cfc4 !important; }
html[data-theme="light"] .os-grid-card .grid2 > tbody > tr > td { color: #1e293b !important; border-bottom-color: #e8e2d6 !important; }
html[data-theme="light"] .os-grid-card .grid2 > tbody > tr:hover > td { background: #ede7db !important; }
html[data-theme="light"] .os-grid-card .grid2 td a:link,
html[data-theme="light"] .os-grid-card .grid2 td a:visited { color: #2563eb !important; }
html[data-theme="light"] .os-grid-card .grid2 td a:hover { color: #1d4ed8 !important; }
html[data-theme="light"] .os-weight-cell .os-weight-value { color: #1e293b; }
html[data-theme="light"] .os-weight-cell a { background: #fff; border-color: #d5cfc4; }
html[data-theme="light"] .os-weight-cell a:hover { background: #f3e9d5; border-color: #3b82f6; }
html[data-theme="light"] .os-icon-btn { background: #fff; border-color: #d5cfc4; color: #64748b; }
html[data-theme="light"] .os-icon-btn:hover { background: #f3e9d5; border-color: #3b82f6; color: #1e293b; }
html[data-theme="light"] .os-repro .os-repro-code { color: #64748b; }
html[data-theme="light"] .os-repro .os-repro-name { color: #1e293b; }
html[data-theme="light"] .os-alt-toggle { background: #fff; border-color: #d5cfc4; color: #475569 !important; }
html[data-theme="light"] .os-alt-toggle:hover { background: #f3e9d5; color: #1e293b !important; border-color: #b8afa0; }
html[data-theme="light"] .os-info-tile .os-info-label { color: #64748b; }
html[data-theme="light"] .os-info-tile .os-info-value { color: #1e293b; }
html[data-theme="light"] .os-info-tile .os-info-value .bigLabel { color: inherit !important; }
html[data-theme="light"] .os-info-tile.os-info-order .os-info-value { color: #2563eb; }
html[data-theme="light"] .os-info-tile .os-info-sub { color: #64748b; }
html[data-theme="light"] a.os-pdf-link,
html[data-theme="light"] a.os-pdf-link:link,
html[data-theme="light"] a.os-pdf-link:visited {
    background: #fff;
    border-color: #d5cfc4;
    color: #2563eb;
}
html[data-theme="light"] a.os-pdf-link:hover,
html[data-theme="light"] a.os-pdf-link:focus {
    background: #f3e9d5;
    border-color: #3b82f6;
    color: #1d4ed8;
}
html[data-theme="light"] .os-grid-card .gridAltSirovine { background: #fff !important; }
html[data-theme="light"] .os-grid-card .gridAltSirovine td { color: #1e293b !important; border-bottom-color: #e8e2d6 !important; }
html[data-theme="light"] .os-grid-card .grid2 .grid { background: #fff !important; }
html[data-theme="light"] .os-grid-card .grid2 .grid th { background: #e8e2d6 !important; color: #64748b !important; border-bottom-color: #d5cfc4 !important; }
html[data-theme="light"] .os-grid-card .grid2 .grid td { color: #1e293b !important; border-bottom-color: #e8e2d6 !important; }

/* ══════════════════════════════════════════════════════════════════════
   .od-* (OdvagaSirovina modals)
   ══════════════════════════════════════════════════════════════════════ */
.od-modal-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,.6); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
}
.od-modal {
    background: #162032; border-radius: 12px; width: 420px; max-width: 95vw;
    max-height: 90vh; display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,.5); border: 1px solid #2a3a50;
    font-size: 1rem;
}
.od-modal--wide { width: 880px; }
.od-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1em 1.4em; border-bottom: 1px solid #2a3a50;
}
.od-modal-title { font-size: 1.07em; font-weight: 600; color: #e2e8f0; }
.od-modal-close {
    background: none; border: none; color: #64748b; font-size: 1.5em;
    cursor: pointer; padding: 0 4px; line-height: 1;
}
.od-modal-close:hover { color: #f87171; }
.od-modal-body { padding: 1.4em; overflow-y: auto; }
.od-modal-columns { display: flex; gap: 1.7em; }
.od-modal-form { flex: 0 0 260px; }
.od-modal-units { flex: 1; min-width: 0; }

/* Fields */
.od-field { margin-bottom: 1em; }
.od-label {
    display: block; font-size: .78em; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: #5a7a9a; margin-bottom: 4px;
}
.od-input {
    width: 100%; box-sizing: border-box;
    background: #0f1a27; border: 1px solid #2a3a50; border-radius: 6px;
    padding: .6em .7em; font-size: .93em; color: #cbd5e1; outline: none;
    transition: border-color .15s;
}
.od-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.15); }

/* Buttons */
.od-field-actions { display: flex; gap: 8px; margin-top: 1.3em; }
.od-btn {
    border: none; border-radius: 7px; padding: .6em 1.4em; font-size: .93em;
    font-weight: 500; cursor: pointer; transition: background .15s; white-space: nowrap;
}
.od-btn-primary { background: #2563eb; color: #fff; }
.od-btn-primary:hover { background: #1d4ed8; }
.od-btn-cancel { background: #1e2a3a; color: #94a3b8; border: 1px solid #2a3a50; }
.od-btn-cancel:hover { background: #243348; color: #cbd5e1; }

/* Messages */
.od-error { display: block; font-size: .85em; color: #f87171; margin-top: .7em; }
.od-repro-info { display: block; font-size: .93em; font-weight: 600; color: #38bdf8; margin-top: .4em; }
.od-pw { -webkit-text-security: disc; text-security: disc; }

/* Units grid */
.od-units-scroll {
    --od-divider: #2a3a50;
    max-height: 400px; overflow: hidden; border-radius: 8px; border: 1px solid var(--od-divider);
    display: flex; flex-direction: column;
}
.od-units-scroll-inner { overflow-y: auto; flex: 1; }
.od-units-scroll-inner::-webkit-scrollbar { width: 6px; }
.od-units-scroll-inner::-webkit-scrollbar-track { background: #0f1a27; }
.od-units-scroll-inner::-webkit-scrollbar-thumb { background: #2a3a50; border-radius: 3px; }
.od-units-scroll-inner::-webkit-scrollbar-thumb:hover { background: #3b4f6b; }
.od-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .85em; }
.od-grid th {
    background: #1e2a3a; color: #5a7a9a; font-weight: 600; text-transform: uppercase;
    font-size: .75em; letter-spacing: .04em; padding: .6em .7em; text-align: left;
    position: sticky; top: 0; z-index: 1;
    box-shadow: inset -1px 0 0 0 var(--od-divider), inset 0 -1px 0 0 var(--od-divider);
}
.od-grid th:last-child { box-shadow: inset 0 -1px 0 0 var(--od-divider); }
.od-grid td { padding: .5em .7em; color: #cbd5e1; border-bottom: 1px solid var(--od-divider); white-space: nowrap; }
.od-grid tr:hover td { background: #1a2940; }
a.od-unit-link, a.od-unit-link:link, a.od-unit-link:visited { color: #60a5fa; text-decoration: underline; font-weight: 600; cursor: pointer; }
a.od-unit-link:hover { color: #93bbfc; text-decoration: underline; }
.od-grid .aspNetDisabled, .od-grid a[disabled] { color: #475569; }

/* Light theme */
html[data-theme="light"] .od-modal { background: #f3f2f0; border-color: #d5cfc4; }
html[data-theme="light"] .od-modal-header { border-color: #d5cfc4; }
html[data-theme="light"] .od-modal-title { color: #1e293b; }
html[data-theme="light"] .od-modal-close { color: #94a3b8; }
html[data-theme="light"] .od-modal-close:hover { color: #ef4444; }
html[data-theme="light"] .od-label { color: #64748b; }
html[data-theme="light"] .od-input { background: #fff; border-color: #d5cfc4; color: #1e293b; }
html[data-theme="light"] .od-input:focus { border-color: #3b82f6; }
html[data-theme="light"] .od-btn-cancel { background: #e8e2d6; color: #475569; border-color: #d5cfc4; }
html[data-theme="light"] .od-btn-cancel:hover { background: #ddd7cb; color: #1e293b; }
html[data-theme="light"] .od-repro-info { color: #0369a1; }
html[data-theme="light"] .od-units-scroll { --od-divider: #d5cfc4; }
html[data-theme="light"] .od-grid th { background: #e8e2d6; color: #64748b; }
html[data-theme="light"] .od-grid td { color: #1e293b; }
html[data-theme="light"] .od-grid tr:hover td { background: #ede7db; }
html[data-theme="light"] a.od-unit-link,
html[data-theme="light"] a.od-unit-link:link,
html[data-theme="light"] a.od-unit-link:visited { color: #2563eb; }
html[data-theme="light"] a.od-unit-link:hover { color: #1d4ed8; }
html[data-theme="light"] .od-units-scroll-inner::-webkit-scrollbar-track { background: #e8e2d6; }
html[data-theme="light"] .od-units-scroll-inner::-webkit-scrollbar-thumb { background: #b8afa0; }
html[data-theme="light"] .od-units-scroll-inner::-webkit-scrollbar-thumb:hover { background: #9a8f7c; }
html[data-theme="light"] .od-grid .PagerStyle td,
html[data-theme="light"] .od-grid tr.PagerStyle td { background: #f3f2f0; }

.rm-error { font-size: 11px; color: #f87171; display: block; }
.rm-readonly {
    min-height: 38px; padding: 8px 10px; border-radius: 6px;
    border: 1px solid #2a3a50; background: #0f1a27; color: #cbd5e1;
    box-sizing: border-box;
}
.rm-muted { color: #5a7a9a; font-size: 12px; }

/* Multichecks */
.rm-multichecks {
    padding: 10px 12px; border-radius: 6px; border: 1px solid #2a3a50;
    background: #0f1a27;
}
.rm-multichecks table { width: 100%; border-collapse: collapse; }
.rm-multichecks td { width: 33.33%; padding: 4px 10px 4px 0; vertical-align: top; }
.rm-multichecks input[type=checkbox] { margin-right: 6px; accent-color: #3b82f6; }
.rm-multichecks label { color: #cbd5e1; font-size: 13px; }
.rm-empty { color: #8eb0d6; font-weight: 600; }

/* Checkbox row */
.rm-checks { display: flex; flex-wrap: wrap; gap: 18px; padding: 4px 0; margin-bottom: 12px; }
.rm-checks label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #94a3b8; cursor: pointer; }
.rm-checks input[type=checkbox] { width: 16px; height: 16px; accent-color: #3b82f6; }
/* Spread variant: distributes children evenly across the full row width
   (first pinned left, last pinned right, equal gaps between). */
.rm-checks--spread { justify-content: space-between; }
/* Wrapper that keeps each checkbox + its label glued together when the parent
   is a flex container — without it, asp:CheckBox renders <input>+<label> as
   sibling flex items and they get separated by justify-content. */
.rm-check { display: inline-flex; align-items: center; gap: 6px; }

/* Tabs */
/* Optional wrapper around (secondary + primary) strips. Its overflow:hidden
   clips the secondary-strip bleed pseudo at the wrapper's bottom (= bottom
   of the primary strip), so the bleed colour can't visually leak down into
   the section's form area below. Only used when there's a secondary strip. */
.rm-tabs-wrap { overflow: hidden; }

.rm-tabs { display: flex; flex-wrap: wrap; row-gap: 4px; column-gap: 1px; margin-bottom: -1px; position: relative; z-index: 1; }

/* Force-break marker injected by JS to balance multi-row tab layouts.
   With flex-wrap the natural break point is wherever the row overflows,
   which often leaves the last row with a single stray tab. The balancer
   inserts these zero-height spacers at calculated positions so each row's
   total width decreases gradually (row1 ≥ row2 ≥ row3). */
.rm-tab-break { flex: 1 0 100%; height: 0; min-height: 0; padding: 0; margin: 0; border: 0; pointer-events: none; }
.rm-tab {
    padding: 10px 20px; font-size: 13px; font-weight: 600; color: #5a7a9a;
    cursor: pointer; border: 1px solid transparent; border-bottom: none;
    border-radius: 8px 8px 0 0; transition: all .15s; user-select: none;
    position: relative;             /* anchor the ::after fill below */
    --tab-fill: #141d2a;             /* dark-theme inactive colour */
}
/* Bleed-down fill is ONLY applied to the SECONDARY tab strip (the upper one,
   when there are two rows). Each secondary tab paints its colour downward
   into the primary strip's area so the rounded-corner gaps between primary
   tabs are filled; adjacent secondary tabs' fills merge horizontally.
   Primary tabs intentionally have NO ::after — their bottom sits flush
   against the section so any extension would visibly overlap form content. */
.rm-tabs--secondary .rm-tab::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: 45px;            /* roughly = primary strip height; minor overshoot is unobtrusive */
    background: var(--tab-fill);
    z-index: -1;
    pointer-events: none;
}
.rm-tab:hover { color: #94a3b8; background: rgba(59,130,246,.05); }
.rm-tab.active { color: #3b82f6; background: #1e2a3a; border-color: transparent; --tab-fill: #1e2a3a; }
.rm-tab-content { display: none; }
.rm-tab-content.active { display: block; }

/* Filler at the end of every tab strip — takes up remaining horizontal space
   so the strip layout is well-defined; intentionally has no visible border
   (no horizontal line between the active tab row and the section below). */
.rm-tabs::after {
    content: '';
    flex: 1 1 auto;
    align-self: stretch;
}

/* Secondary tab strip — sits ABOVE the primary strip, smaller and subdued.
   Used when a form has too many tabs to fit one row (e.g. KupciEdit). */
.rm-tabs--secondary {
    margin-bottom: -1px;        /* overlap with the primary strip below — no visual gap */
    z-index: 0;                  /* sit behind the primary strip so its bottom is masked */
}
.rm-tabs--secondary .rm-tab {
    padding: 5px 12px;
    font-size: 11.5px;
    font-weight: 500;
    border-radius: 6px 6px 0 0;
    opacity: 0.85;
}
.rm-tabs--secondary .rm-tab.active {
    /* When a secondary tab is the active one, brighten it but keep the
       compact size so it stays visually grouped with its strip. */
    color: #3b82f6;
    opacity: 1;
    background: #1e2a3a;
    border-color: transparent;
}
/* No bottom-edge line on the secondary strip — only the primary strip touches the section. */
.rm-tabs--secondary::after { border-bottom: 0; margin-bottom: 0; }

html[data-theme="dark"] .rm-tab:not(.active) {
    color: #7fa2c9 !important;
    background: #141d2a !important;
    border-color: #2a394d !important;
}

html[data-theme="dark"] .rm-tab:not(.active):hover {
    color: #d8e7f7 !important;
    background: #1b2a3d !important;
    border-color: #3d5572 !important;
}

/* Action bar – fixed bottom for rm edit forms */
.rm-actions {
    position: fixed;
    bottom: 0;
    z-index: 780;
    margin: 0;
    background: #162032; border-radius: 10px 10px 0 0; padding: 14px 24px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    box-shadow: 0 -4px 16px rgba(0,0,0,.45);
    border-top: 1px solid #2a3a50;
    box-sizing: border-box;
}

/* "Open product" deep-link chip next to the product picker label.
   Visible only when a product is selected (toggled by JS function
   updateProizvodViewLink). Renders as a compact blue pill so it
   reads as a clickable action, not part of the label text.
   target=_blank → opens FinishedGoodsEdit in a new browser tab
   without losing the current edit-page state.
   Shared by SastavniceEdit and KompletiSastavniceEdit. */
.sas-view-link {
    display: inline-flex; align-items: center;
    margin-left: 10px;
    padding: 1px 8px;
    background: #2563eb;
    color: #fff !important;
    border-radius: 4px;
    font-size: 11px; font-weight: 600;
    text-decoration: none !important;
    transition: background .12s ease;
    vertical-align: middle;
}
.sas-view-link:hover { background: #1d4ed8; color: #fff !important; }
html[data-theme="light"] .sas-view-link { background: #2563eb; }
html[data-theme="light"] .sas-view-link:hover { background: #1d4ed8; }

/* Inline (non-pinned) action bar variant — opt-in via `sas-actions`
   modifier. Used by SastavniceEdit and KompletiSastavniceEdit so the
   Save/Cancel/etc. buttons sit at the end of the Basic-data tab inside
   the section card, not floating at the viewport bottom. Without this
   override, `.rm-actions { position: fixed }` (above) pins them to
   the bottom and leaves a tall empty gap above. */
.sas-actions {
    position: static !important;
    margin-top: 16px;
    border-radius: 10px;
    background: #162032;
    border: 1px solid #2a3a50;
    box-shadow: none;
}
html[data-theme="light"] .sas-actions {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

/* sas-page: widened canvas + bottom padding so the page can scroll
   past whatever pinned UI lives at the bottom. Shared by both BOM
   edit pages. */
.sas-page {
    max-width: 1600px !important;
    padding-bottom: 88px !important;
}
.sas-page > .rm-section {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
}

/* Active / Main / Stock-report checkbox chips on modernized edit pages
   (SastavniceEdit, KompletiSastavniceEdit, ReproSastavniceEdit,
   RawmaterialEdit, FinishedGoodsEdit, etc.). Pill-chip with a soft
   tinted background + thin border so each flag reads as a discrete
   toggle (originally the FinishedGoodsEdit-only design — promoted to
   the global pattern so every modernized page renders flags identically).
   Explicit colour per theme — master body color is #fff in light theme
   for legacy-page compatibility, so `color: inherit` would render these
   labels white-on-white. */
.sas-flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0;
    padding: 4px 10px;
    background: rgba(96, 165, 250, .08);
    border: 1px solid rgba(96, 165, 250, .22);
    border-radius: 999px;
    color: #cbd5e1;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.sas-flag input[type="checkbox"] { margin: 0; cursor: pointer; }
html[data-theme="light"] .sas-flag {
    background: rgba(37, 99, 235, .08);
    border-color: rgba(37, 99, 235, .22);
    color: #1e293b;
}
.sas-row-tight {
    align-items: center;
    gap: 24px;
}
.sas-row-tight .rm-field { margin-bottom: 0; }

/* Approved status next to ctrlButtons inside .sas-actions. */
.sas-approved-info {
    display: inline-flex; align-items: center; gap: 8px;
    margin-left: 16px;
    font-size: .929rem;
    color: #94a3b8;
}
.sas-approved-info .rm-lbl { margin: 0; }
html[data-theme="light"] .sas-approved-info { color: #64748b; }
.rm-actions input[type=submit],
.rm-actions input[type=button],
.rm-actions .btnMali {
    background: #2563eb !important; color: #fff !important;
    border: none !important; border-radius: 7px !important;
    padding: 8px 18px !important; font-size: 13px !important;
    font-weight: 500 !important; cursor: pointer !important;
    transition: background .15s !important; white-space: nowrap !important;
    height: auto !important; width: auto !important; min-width: auto !important;
    line-height: 1.4 !important; box-shadow: none !important; filter: none !important;
}
.rm-actions input[type=submit]:hover,
.rm-actions .btnMali:hover { background: #1d4ed8 !important; }
.rm-actions input[id$="CancelButton"] { background: #1e2a3a !important; color: #94a3b8 !important; border: 1px solid #2a3a50 !important; }
.rm-actions input[id$="CancelButton"]:hover { background: #243348 !important; color: #cbd5e1 !important; }
.rm-actions input[id$="DeleteButton"] { background: #7f1d1d !important; color: #fca5a5 !important; }
.rm-actions input[id$="DeleteButton"]:hover { background: #991b1b !important; color: #fff !important; }

@media only screen and (max-width: 600px) {
    .rm-page { padding-bottom: 104px; }

    .rm-actions {
        left: 0;
    }
}

/* Category add-inline */
.rm-cat-row { display: flex; gap: 6px; align-items: flex-end; }
.rm-cat-row select { flex: 1; }
.rm-btn-add {
    background: #2563eb; color: #fff; border: none; border-radius: 6px;
    padding: 8px 12px; font-size: 13px; cursor: pointer; white-space: nowrap;
    height: 35px;
}
.rm-btn-add:hover { background: #1d4ed8; }
.rm-btn-delete {
    background: #7f1d1d; color: #fff; border: none; border-radius: 6px;
    padding: 8px 12px; font-size: 13px; cursor: pointer; white-space: nowrap;
    height: 35px;
}
.rm-btn-delete:hover { background: #991b1b; }
.rm-btn-cancel {
    background: #374151; color: #cbd5e1; border: none; border-radius: 6px;
    padding: 8px 12px; font-size: 13px; cursor: pointer; white-space: nowrap;
    height: 35px;
}
.rm-btn-cancel:hover { background: #4b5563; }

/* Inline edit panel (used in sub-controls like Banks, Users) */
.rm-inline-panel {
    padding: 14px; margin-bottom: 14px;
    border: 1px solid #2a3a50; border-radius: 8px; background: #162032;
}

/* New category inline panel */
.rm-newcat {
    display: none; background: #162032; border: 1px solid #2a3a50;
    border-radius: 8px; padding: 12px 16px; margin-top: 8px;
}
.rm-newcat.open { display: block; }
.rm-newcat-row { display: flex; gap: 8px; align-items: flex-end; }
.rm-newcat-row input[type=text] { flex: 1; }

/* Sub-tables (CAS, Functions, Regulatory, Documents, Prices) */
.rm-subtable { width: 100%; border-collapse: collapse; margin-top: 8px; }
.rm-subtable th {
    background: #162032; color: #5a7a9a; font-size: .857rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; padding: 6px 10px;
    border-bottom: 1px solid #2a3a50; text-align: left;
}
.rm-subtable td {
    padding: 6px 10px; border-bottom: 1px solid #1a2636; color: #cbd5e1; font-size: 1rem;
}
.org-users-grid-scroll,
.org-banke-grid-scroll {
    max-height: 360px;
    overflow-y: auto;
}
.rm-subtable tr:hover td { background: rgba(59,130,246,.06); }
.rm-subtable td:last-child { white-space: nowrap; }
/* Nested .rm-subtable (e.g. the per-row Tasks list inside the Calls grid)
   inherits the parent's row-separator border + 6px row padding which, on
   a single-row nested list, looks like the text is underlined and the
   parent row reads as taller than the others. Strip borders, hover fill,
   table margin and inner padding so the nested table sits flush inside
   its host cell. */
.rm-subtable .rm-subtable { margin: 0 !important; }
.rm-subtable .rm-subtable td,
.rm-subtable .rm-subtable th { border-bottom: none !important; padding: 0 !important; }
.rm-subtable .rm-subtable tr:hover td { background: transparent !important; }
/* Link inside a sub-table cell — overrides the global a:link {color:#fff}
   from Default.css so the link is visible on both themes. */
.rm-subtable td a:link,
.rm-subtable td a:visited { color: #60a5fa !important; text-decoration: none; }
.rm-subtable td a:hover  { color: #93c5fd !important; text-decoration: underline; }

/* ── Sticky header + footer for any rm-subtable inside a ctbl-wrap ──
   .ctbl-wrap is a scroll container (overflow:auto). position:sticky on the
   header/footer cells anchors them to that container's top/bottom edge so
   they stay visible while the data rows scroll. Background must be opaque
   so the rows don't bleed through during scroll.
   Applies generically to any (Customer Edit) tab using the ctbl-host /
   ctbl-card / ctbl-wrap shell — Orders, Locations, Sales reps, etc. */
/* Kill the default .rm-subtable {margin-top:8px} gap between the wrap and
   the table — pre-scroll it shows as a visible strip; when the user starts
   scrolling, the sticky header detaches from its in-flow position and the
   gap collapses to zero. Forcing margin:0 keeps the header flush either way. */
.ctbl-wrap table.rm-subtable { margin-top: 0; }
.ctbl-wrap table.rm-subtable thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    /* dark theme — same charcoal as the existing .rm-subtable th */
    background: #162032;
}
.ctbl-wrap table.rm-subtable tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: #162032;
    border-top: 2px solid #2a3a50;
}
html[data-theme="light"] .ctbl-wrap table.rm-subtable thead th {
    background: #c8d2df;
}
html[data-theme="light"] .ctbl-wrap table.rm-subtable tfoot td {
    background: #c8d2df;
    color: #1e293b;
    border-top: 2px solid #8a97a9;
}

/* Date picker */
.rm-date-wrap { display: flex; align-items: center; gap: 4px; }
/* Bumped from 120px → 140px so a full "dd.MM.yyyy" date (10 chars) fits
   without clipping. The earlier .rm-date-wrap rule sets width:130px on the
   .rm-date-input variant, but max-width here would otherwise cap it. */
.rm-date-wrap input[type=text] { flex: 1; min-width: 0; max-width: 140px; }
.rm-date-wrap img, .rm-date-wrap .ui-datepicker-trigger { flex-shrink: 0; cursor: pointer; }

/* INCI pills */
.rm-inci-display { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rm-inci-pill {
    display: inline-flex; align-items: center; min-height: 26px;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(59, 130, 246, .16); border: 1px solid rgba(96, 165, 250, .35);
    color: #dbeafe; font-size: 12px; font-weight: 700; line-height: 1.2;
}

/* Supplier search picker */
.rm-supplier-picker { position: relative; }
.rm-supplier-results {
    display: none; position: fixed; z-index: 10001;
    overflow-y: auto; background: #0f1a27; border: 1px solid #3b82f6;
    border-radius: 0 0 6px 6px; box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.rm-supplier-results.open { display: block; }
.rm-supplier-item { padding: 6px 10px; font-size: 13px; color: #cbd5e1; cursor: pointer; }
.rm-supplier-item:hover, .rm-supplier-item.selected, .rm-supplier-item.active { background: #1e3a5f; color: #fff; }
.rm-supplier-results.has-active .rm-supplier-item:not(.active):hover { background: transparent; color: #cbd5e1; }

/* Document upload */
.rm-doc-upload {
    padding: 14px; margin-bottom: 14px;
    border: 1px solid #2a3a50; border-radius: 8px; background: #162032;
}
.rm-doc-upload .rm-row:last-child .rm-field { margin-bottom: 0; }
.rm-file-input {
    color: #cbd5e1 !important; background: #0f1a27;
    border: 1px solid #2a3a50; border-radius: 6px;
    padding: 5px 8px; width: 100%; box-sizing: border-box; font-size: .929rem;
}
.rm-file-input::file-selector-button {
    margin-right: 8px; border: 1px solid #2f63ad; border-radius: 4px;
    background: #3b6eb6; color: #ffffff; padding: 4px 10px; cursor: pointer; font-size: .929rem;
}
.rm-file-input::-webkit-file-upload-button {
    margin-right: 8px; border: 1px solid #2f63ad; border-radius: 4px;
    background: #3b6eb6; color: #ffffff; padding: 4px 10px; cursor: pointer; font-size: .929rem;
}
.rm-doc-actions { display: flex; gap: 10px; align-items: center; white-space: nowrap; }
.rm-doc-download { color: #93c5fd !important; font-weight: 700; text-decoration: none; }
.rm-doc-download:hover { color: #dbeafe !important; text-decoration: underline; }
.rm-empty-note { color: #5a7a9a; font-size: .929rem; }
.rm-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    line-height: 1;
    font-weight: 700;
}
.rm-icon-edit { color: #60a5fa !important; font-size: 1.071rem; margin-right: 10px; }
.rm-icon-download { color: #60a5fa !important; font-size: 1.214rem; margin-right: 10px; }
.rm-icon-delete { color: #f87171 !important; font-size: 1rem; }

@media (max-width: 700px) {
    .rm-row { flex-direction: column; gap: 0; }
    .rm-col1, .rm-col2, .rm-col3 { min-width: 100%; }
    .rm-tabs { flex-wrap: wrap; }
    .rm-tab { padding: 8px 12px; font-size: 12px; }
}


/* ══════════════════════════════════════════════
   Formulation detail-edit  (.fm-*)
   Used by: Formulation_Edit
   ══════════════════════════════════════════════ */

.fm-page { max-width:1400px; margin:0 auto; padding:12px 18px 80px 18px; }
.fm-section { background:#1e2a3a; border-radius:8px; padding:18px 22px 14px 22px; margin-bottom:14px; }
.fm-section-title { color:#93c5fd; font-size:15px; font-weight:700; margin-bottom:12px; letter-spacing:.3px; border-bottom:1px solid #2d3e52; padding-bottom:6px; }
.fm-row { display:flex; flex-wrap:wrap; gap:10px 18px; margin-bottom:8px; }
.fm-field { display:flex; flex-direction:column; min-width:0; }
.fm-col1 { flex:1 1 180px; }
.fm-col2 { flex:2 1 280px; }
.fm-col3 { flex:3 1 400px; }
.fm-full { flex:1 1 100%; }
.fm-label { color:#7a99b5; font-size:12px; font-weight:600; margin-bottom:3px; letter-spacing:.2px; }
.fm-input, .fm-page input[type=text], .fm-page select, .fm-page textarea {
    background:#0f1a27 !important; color:#e2e8f0 !important; border:1px solid #2d3e52 !important; border-radius:5px !important;
    padding:7px 10px !important; font-size:14px !important; width:100%; box-sizing:border-box; transition:border .15s;
    height:auto !important;
}
.fm-page input[type=text]:focus, .fm-page select:focus, .fm-page textarea:focus { border-color:#3b82f6 !important; outline:none !important; box-shadow:0 0 0 2px rgba(59,130,246,.15) !important; }
.fm-page select option { background:#1e2a3a; color:#cbd5e1; }
.fm-readonly { background:#16202e !important; color:#7a99b5 !important; }
.fm-id { font-size:13px; color:#5a7a9a; margin-bottom:4px; }

/* Tabs */
.fm-tabs-bar { display:flex; gap:0; background:#162032; border-radius:8px 8px 0 0; overflow-x:auto; margin-top:18px; }
.fm-tab { padding:11px 22px; color:#5a7a9a; font-weight:600; font-size:13px; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; transition:color .12s,border-color .12s; user-select:none; }
.fm-tab:hover { color:#93c5fd; }
.fm-tab.active { color:#60a5fa; border-bottom:2px solid #3b82f6; background:#1e2a3a; }
.fm-tab-content { display:none; background:#1e2a3a; border-radius:0 0 8px 8px; padding:16px 18px; }
.fm-tab-content.active { display:block; }

/* Sub-tables */
.fm-subtable { width:100%; border-collapse:collapse; color:#cbd5e1; font-size:13px; }
.fm-subtable th { background:#162032; color:#5a7a9a; padding:8px 10px; text-align:left; font-weight:600; font-size:12px; border-bottom:1px solid #2d3e52; }
.fm-subtable td { padding:7px 10px; border-bottom:1px solid #243040; font-size:13px; }
.fm-subtable tbody tr:nth-child(even) td { background:#1a2638; }
.fm-subtable tbody tr:hover td { background:#243050; }
.fm-reg-history-selected td { background:#1a3a5c !important; border-left:3px solid #2E75B6; }
.fm-subtable td:last-child { white-space: nowrap; }
.fm-subtable input[type=text], .fm-subtable select { background:#0f1a27; color:#e2e8f0; border:1px solid #2d3e52; border-radius:4px; padding:5px 8px; font-size:13px; }
.fm-subtable td,
.fm-subtable td a,
.fm-subtable td span,
.fm-subtable td label,
.fm-subtable td div {
    font-size: inherit;
}

/* Buttons */
.fm-btn { background:#2563eb; color:#fff; border:none; border-radius:5px; padding:7px 18px; font-size:13px; font-weight:600; cursor:pointer; }
.fm-btn:hover { background:#1d4ed8; }
.fm-btn-sm { padding:4px 12px; font-size:12px; }
.fm-btn-danger { background:#991b1b; }
.fm-btn-danger:hover { background:#7f1d1d; }
.fm-btn-secondary { background:#374151; }
.fm-btn-secondary:hover { background:#4b5563; }

/* Total bar */
.fm-total-bar { background:#162032; border-radius:6px; padding:10px 16px; margin-top:10px; display:flex; align-items:center; gap:16px; font-size:14px; font-weight:600; }
.fm-total-ok { color:#34d399; }
.fm-total-warn { color:#fbbf24; }
.fm-total-over { color:#f87171; }

/* Phase header in ingredients */
.fm-phase-header td { background:#162032 !important; color:#60a5fa; font-weight:700; font-size:13px; border-bottom:2px solid #2d3e52; }

/* Document upload form */
.fm-doc-upload { background:#162032; border-radius:6px; padding:14px 16px; margin-bottom:12px; }
.fm-field-block { display:flex; flex-direction:column; min-width:0; }
.fm-field-block .fm-label { margin-bottom:4px; }
.fm-file-input { color:#cbd5e1; font-size:13px; }
.fm-file-input::file-selector-button {
    background:#2563eb; color:#fff; border:none; border-radius:5px; padding:6px 14px;
    font-size:12px; font-weight:600; cursor:pointer; margin-right:10px;
}
.fm-file-input::file-selector-button:hover { background:#1d4ed8; }
.fm-link { color:#60a5fa; text-decoration:none; }
.fm-link:hover { color:#93c5fd; text-decoration:underline; }
.fm-empty-note { color:#5a7a9a; }
.fm-reg-meta { font-size:.929rem; color:#cbd5e1; }

/* Action bar – sticky bottom */
.fm-actions {
    position: sticky; bottom: 0; z-index: 90;
    background: #162032; border-radius: 10px 10px 0 0; padding: 14px 24px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    box-shadow: 0 -4px 16px rgba(0,0,0,.45);
    border-top: 1px solid #2a3a50;
}
.fm-actions input[type=submit],
.fm-actions input[type=button],
.fm-actions .btnMali {
    background: #2563eb !important; color: #fff !important;
    border: none !important; border-radius: 7px !important;
    padding: 8px 18px !important; font-size: 13px !important;
    font-weight: 500 !important; cursor: pointer !important;
    transition: background .15s !important; white-space: nowrap !important;
    height: auto !important; width: auto !important; min-width: auto !important;
    line-height: 1.4 !important; box-shadow: none !important; filter: none !important;
}
.fm-actions input[type=submit]:hover,
.fm-actions .btnMali:hover { background: #1d4ed8 !important; }
.fm-actions input[id$="CancelButton"] { background: #1e2a3a !important; color: #94a3b8 !important; border: 1px solid #2a3a50 !important; }
.fm-actions input[id$="CancelButton"]:hover { background: #243348 !important; color: #cbd5e1 !important; }
.fm-actions input[id$="DeleteButton"] { background: #7f1d1d !important; color: #fca5a5 !important; }
.fm-actions input[id$="DeleteButton"]:hover { background: #991b1b !important; color: #fff !important; }

/* Inline form */
.fm-inline-form { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; padding:10px 0; border-top:1px solid #2d3e52; margin-top:8px; }
.fm-inline-form .fm-field { margin-bottom:0; }

/* Regulatory tab highlight */
.fm-tab-reg { color:#fbbf24 !important; }
.fm-tab-reg:hover { color:#fde68a !important; }
.fm-tab-reg.active { color:#fbbf24 !important; border-bottom-color:#f59e0b !important; background:#2a2415 !important; }

/* Regulatory tab */
.fm-reg-summary { display:flex; flex-wrap:wrap; gap:14px 28px; background:#162032; border-radius:6px; padding:14px 18px; margin-bottom:14px; }
.fm-reg-summary .fm-reg-stat { display:flex; flex-direction:column; }
.fm-reg-summary .fm-reg-stat-label { color:#5a7a9a; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.fm-reg-summary .fm-reg-stat-value { font-size:18px; font-weight:700; }
.fm-reg-status-pass { color:#34d399; }
.fm-reg-status-fail { color:#f87171; }
.fm-reg-status-warning { color:#fbbf24; }
.fm-reg-status-nodata { color:#9ca3af; }
.fm-reg-status-compliant { color:#34d399; }
.fm-reg-status-noncompliant { color:#f87171; }
.fm-reg-status-incomplete { color:#fbbf24; }
.fm-reg-badge { display:inline-block; padding:2px 10px; border-radius:10px; font-size:12px; font-weight:600; }
.fm-reg-badge-pass { background:rgba(52,211,153,.15); color:#34d399; }
.fm-reg-badge-fail { background:rgba(248,113,113,.15); color:#f87171; }
.fm-reg-badge-warning { background:rgba(251,191,36,.15); color:#fbbf24; }
.fm-reg-badge-nodata { background:rgba(156,163,175,.15); color:#9ca3af; }
.fm-reg-history { margin-top:18px; }
.fm-reg-history-title { color:#93c5fd; font-size:14px; font-weight:700; margin-bottom:8px; }

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
   Triggered by  <html data-theme="light">  set from the master page
   settings popover. Keep this block at the bottom so the selectors
   override the dark defaults above.
   ═══════════════════════════════════════════════════════════════════════ */

html[data-theme="light"] {
    --clr-bg:        #e9e1d6;
    --clr-surface:   #f5efe6;
    --clr-surface2:  #eadfce;
    --clr-border:    #c9baa3;
    --clr-border2:   #b5a58c;
    --clr-text:      #2f2a22;
    --clr-text-dim:  #5d5346;
    --clr-muted:     #7b7062;
    --clr-accent:    #2563eb;
    --clr-accent-lt: #1d4ed8;
    --clr-accent-hl: #1e40af;
}

/* ── ctrlTable card / toolbar / grid ── */
html[data-theme="light"] .ctbl-card {
    background: #e4e9f1;
    box-shadow: none;
    border: 1px solid #a8b3c2;
}
html[data-theme="light"] .ctbl-filter-bar {
    background: linear-gradient(135deg, #d7dfe9 0%, #cad3df 100%);
    border-bottom: 1px solid #a8b3c2;
}
html[data-theme="light"] .ctbl-filter-bar::before {
    background: linear-gradient(90deg, transparent, rgba(37,99,235,.25), transparent);
}
html[data-theme="light"] .ctbl-filter-label { color: #475569; }
html[data-theme="light"] .ctbl-filter-ddl {
    /* background-color longhand — preserves the SVG chevron set in the
       base .ctbl-filter-ddl rule. The shorthand !important version would
       force background-image:none on top of the dark-theme one and hide
       the arrow in light mode. */
    background-color: #eef2f7 !important;
    color: #0f172a !important;
    border-color: #a8b3c2 !important;
}
html[data-theme="light"] .ctbl-filter-ddl:hover { background-color: #dbe3ee !important; border-color: #2563eb !important; }
html[data-theme="light"] .ctbl-filter-ddl option { background: #eef2f7; color: #0f172a; }

html[data-theme="light"] .ctbl-toolbar {
    background: #d7dfe9;
    border-bottom: 1px solid #a8b3c2;
}
html[data-theme="light"] .ctbl-search-wrap {
    background: #eef2f7;
    border: 1px solid #a8b3c2;
}
html[data-theme="light"] .ctbl-search-wrap:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.18);
}
html[data-theme="light"] .ctbl-search-icon { color: #7a8597; }
html[data-theme="light"] .ctbl-search-input { color: #0f172a !important; background: transparent !important; }
html[data-theme="light"] .ctbl-search-input::placeholder { color: #7a8597; }
html[data-theme="light"] .ctbl-btn-search {
    background: #c8d2df;
    color: #475569;
    border-left: 1px solid #a8b3c2;
}
html[data-theme="light"] .ctbl-btn-search:hover { background: #b5c0d1; color: #0f172a; }

html[data-theme="light"] .ctbl-grid { color: #1e293b; }
html[data-theme="light"] .ctbl-grid thead tr,
html[data-theme="light"] .ctbl-grid tr.ctbl-grid th { background: #c8d2df !important; }
html[data-theme="light"] .ctbl-grid th {
    color: #475569;
    background: #c8d2df;
    border-bottom: 2px solid #8a97a9;
}
html[data-theme="light"] .ctbl-grid th a,
html[data-theme="light"] .ctbl-grid th .ctbl-sort-link { color: #475569 !important; }
html[data-theme="light"] .ctbl-grid th a:hover,
html[data-theme="light"] .ctbl-grid th .ctbl-sort-link:hover { color: #1d4ed8 !important; }
html[data-theme="light"] .ctbl-grid td {
    color: #1e293b;
    border-bottom: 1px solid #b8c2d0;
}
html[data-theme="light"] .ctbl-grid tbody tr td { background: #e4e9f1; }
html[data-theme="light"] .ctbl-grid tbody tr:nth-child(even) td { background: #d7dfe9; }
html[data-theme="light"] .ctbl-grid tbody tr:hover td { background: #c0d1ec; }
html[data-theme="light"] .ctbl-grid tbody tr.selected td { background: #b0c6e8 !important; }
html[data-theme="light"] .ctbl-grid td a { color: #1d4ed8; }
html[data-theme="light"] .ctbl-grid td a:hover { color: #1e40af; }

html[data-theme="light"] .ctbl-pager,
html[data-theme="light"] .ctbl-pager-dock {
    background: #d7dfe9;
    border-top: 1px solid #a8b3c2;
}
html[data-theme="light"] .ctbl-pager a,
html[data-theme="light"] .ctbl-pager-nav a { color: #1d4ed8; }
html[data-theme="light"] .ctbl-pager a:hover,
html[data-theme="light"] .ctbl-pager-nav a:hover { background: #b0c6e8; border-color: #6a93d4; }
html[data-theme="light"] .ctbl-pager-size-label { color: #475569; }
html[data-theme="light"] .ctbl-pager-size-ddl {
    background: #eef2f7 !important;
    color: #0f172a !important;
    border-color: #a8b3c2 !important;
}
html[data-theme="light"] .ctbl-empty { color: #7a8597; }

/* ── Modal overlay ── */
html[data-theme="light"] .ctbl-modal-overlay { background: rgba(15,23,42,.50); }
html[data-theme="light"] .ctbl-modal-dialog {
    background: #e4e9f1;
    border: 1px solid #a8b3c2;
    box-shadow: 0 24px 70px rgba(15,23,42,.35);
}
html[data-theme="light"] .ctbl-modal-close {
    background: #c8d2df;
    color: #475569;
}
html[data-theme="light"] .ctbl-modal-close:hover { background: #a8b3c2; color: #0f172a; }
html[data-theme="light"] .ctbl-modal-iframe { background: #e4e9f1; }

html[data-theme="light"] .cdm-dialog { background: #fff; border-color: rgba(0,0,0,.1); box-shadow: 0 20px 60px rgba(15,23,42,.25); }
html[data-theme="light"] .cdm-title  { color: #0f172a; }
html[data-theme="light"] .cdm-msg    { color: #64748b; }
html[data-theme="light"] .cdm-btn-cancel { background: #e8e2d6; color: #475569; border-color: #d5cfc4; }
html[data-theme="light"] .cdm-btn-cancel:hover { background: #ddd7cb; color: #1e293b; border-color: #b8afa0; }

/* ── cedit edit card ── */
html[data-theme="light"] body.cedit-modal-body { background: #d7dfe9; }
html[data-theme="light"] .cedit-card {
    background: #e4e9f1;
    box-shadow: 0 1px 3px rgba(15,23,42,.10), 0 8px 24px rgba(15,23,42,.14);
    border: 1px solid #a8b3c2;
}
html[data-theme="light"] .cedit-label { color: #475569; }
html[data-theme="light"] .cedit-input,
html[data-theme="light"] .cedit-body input[type=text],
html[data-theme="light"] .cedit-body input[type=number],
html[data-theme="light"] .cedit-body textarea,
html[data-theme="light"] .cedit-body select {
    background: #eef2f7 !important;
    border-color: #a8b3c2 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .cedit-body input[type=text]:focus,
html[data-theme="light"] .cedit-body input[type=number]:focus,
html[data-theme="light"] .cedit-body textarea:focus,
html[data-theme="light"] .cedit-body select:focus,
html[data-theme="light"] .cedit-input:focus {
    background: #f6f8fc !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.18) !important;
}
html[data-theme="light"] .cedit-body input[type=text]::placeholder,
html[data-theme="light"] .cedit-body input[type=number]::placeholder,
html[data-theme="light"] .cedit-body textarea::placeholder { color: #7a8597 !important; }
html[data-theme="light"] .cedit-body select option { background: #eef2f7; color: #0f172a; }
html[data-theme="light"] .cedit-error { color: #dc2626; }
html[data-theme="light"] .cedit-check label { color: #475569; }
html[data-theme="light"] .cedit-check input[type=checkbox] {
    background: #eef2f7;
    border-color: #7a8597;
}
html[data-theme="light"] .cedit-check input[type=checkbox]:checked {
    background: #2563eb;
    border-color: #2563eb;
}
html[data-theme="light"] .cedit-actions {
    background: #d7dfe9;
    border-top: 1px solid #a8b3c2;
}
html[data-theme="light"] body.cedit-modal-body #divDetail {
    background: #d7dfe9;
    border-top: 1px solid #a8b3c2;
    box-shadow: 0 -4px 16px rgba(15,23,42,.10);
}

/* ── Formulation module (.fm-*) ── */
html[data-theme="light"] .fm-page { color: #1e293b; }
html[data-theme="light"] .fm-section {
    background: #e4e9f1;
    border: 1px solid #a8b3c2;
    box-shadow: 0 1px 3px rgba(15,23,42,.10), 0 8px 24px rgba(15,23,42,.14);
}
html[data-theme="light"] .fm-section-title {
    color: #1d4ed8;
    border-bottom-color: #a8b3c2;
}
html[data-theme="light"] .fm-label { color: #475569; }
html[data-theme="light"] .fm-page input[type=text],
html[data-theme="light"] .fm-page select,
html[data-theme="light"] .fm-page textarea {
    background: #eef2f7 !important;
    border: 1px solid #a8b3c2 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .fm-page input[type=text]:focus,
html[data-theme="light"] .fm-page select:focus,
html[data-theme="light"] .fm-page textarea:focus {
    background: #f6f8fc !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.18) !important;
}
html[data-theme="light"] .fm-page select option { background: #eef2f7; color: #0f172a; }
html[data-theme="light"] .fm-readonly {
    background: #d7dfe9 !important;
    color: #475569 !important;
}
html[data-theme="light"] .fm-id { color: #475569; }
html[data-theme="light"] .fm-tabs-bar {
    background: #d7dfe9;
    border: 1px solid #a8b3c2;
    border-bottom: none;
}
html[data-theme="light"] .fm-tab { color: #64748b; }
html[data-theme="light"] .fm-tab:hover {
    color: #475569;
    background: rgba(37,99,235,.08);
}
html[data-theme="light"] .fm-tab.active {
    color: #1d4ed8;
    background: #e4e9f1;
    border-bottom-color: #2563eb;
}
html[data-theme="light"] .fm-tab-content {
    background: #e4e9f1;
    border: 1px solid #a8b3c2;
    border-top: none;
}
html[data-theme="light"] .fm-subtable { color: #1e293b; }
html[data-theme="light"] .fm-subtable th {
    background: #c8d2df;
    color: #475569;
    border-bottom: 2px solid #8a97a9;
}
html[data-theme="light"] .fm-subtable td {
    color: #1e293b;
    border-bottom: 1px solid #b8c2d0;
    font-size: 13px;
}
html[data-theme="light"] .fm-subtable tbody tr:nth-child(even) td { background: #eef2f7; }
html[data-theme="light"] .fm-subtable tbody tr:hover td { background: #d8e4f5; }
html[data-theme="light"] .fm-reg-history-selected td {
    background: #cfe0fb !important;
    border-left-color: #2563eb;
}
html[data-theme="light"] .fm-subtable input[type=text],
html[data-theme="light"] .fm-subtable select {
    background: #eef2f7 !important;
    color: #0f172a !important;
    border: 1px solid #a8b3c2 !important;
}
html[data-theme="light"] .fm-total-bar {
    background: #d7dfe9;
    color: #1e293b;
    border: 1px solid #a8b3c2;
}
html[data-theme="light"] .fm-phase-header td {
    background: #d7dfe9 !important;
    color: #1d4ed8 !important;
    border-bottom-color: #8a97a9;
}
html[data-theme="light"] .fm-doc-upload {
    background: #eef2f7;
    border: 1px solid #a8b3c2;
}
html[data-theme="light"] .fm-file-input {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #a8b3c2 !important;
}
html[data-theme="light"] .fm-file-input::file-selector-button,
html[data-theme="light"] .fm-file-input::-webkit-file-upload-button {
    background: #dbe7f8;
    color: #1d4ed8;
    border: 1px solid #8aa8d6;
}
html[data-theme="light"] .fm-link { color: #1d4ed8; }
html[data-theme="light"] .fm-link:hover { color: #1e40af; }
html[data-theme="light"] .fm-empty-note { color: #64748b; }
html[data-theme="light"] .fm-reg-meta { color: #1e293b; }
html[data-theme="light"] .fm-page input[type=checkbox] { accent-color: #2563eb; }
html[data-theme="light"] .fm-page input[type=checkbox] + label,
html[data-theme="light"] .fm-page input[type=checkbox] + span {
    color: #1e293b;
}
html[data-theme="light"] .fm-reg-summary { background: #d7dfe9; border: 1px solid #a8b3c2; }
html[data-theme="light"] .fm-reg-summary .fm-reg-stat-label { color: #475569; }
html[data-theme="light"] .fm-reg-summary .fm-reg-stat-value { color: #1e293b; }
html[data-theme="light"] .fm-reg-history-title { color: #1d4ed8; }
html[data-theme="light"] .fm-inline-form { border-top-color: #a8b3c2; }
html[data-theme="light"] .fm-tab-reg { color: #b45309 !important; }
html[data-theme="light"] .fm-tab-reg:hover { color: #92400e !important; }
html[data-theme="light"] .fm-tab-reg.active {
    color: #b45309 !important;
    border-bottom-color: #d97706 !important;
    background: #f8edd1 !important;
}
html[data-theme="light"] .fm-actions {
    background: #d7dfe9;
    border-top: 1px solid #a8b3c2;
    box-shadow: 0 -4px 16px rgba(15,23,42,.12);
}
html[data-theme="light"] .fm-actions input[id$="CancelButton"] {
    background: #c8d2df !important;
    color: #475569 !important;
    border: 1px solid #a8b3c2 !important;
}
html[data-theme="light"] .fm-actions input[id$="CancelButton"]:hover {
    background: #b5c0d1 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .fm-actions input[id$="DeleteButton"] {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #f87171 !important;
}
html[data-theme="light"] .fm-actions input[id$="DeleteButton"]:hover {
    background: #fecaca !important;
    color: #7f1d1d !important;
}

/* ══════════════════════════════════════════════════════════════════════
   .rm-* (record module — OrgJedinica_Edit and similar edit forms)
   ══════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .rm-header-id { color: #fff !important; }
html[data-theme="light"] .rm-header-status { color: #fff !important; }
html[data-theme="light"] .rm-section {
    background: #f3f2f0 !important;
    /* Shadow MUST NOT paint above the section's top edge — the active
       tab sits flush against that edge and any upward shadow blur
       reads as a horizontal line right under the active tab text.
       Both shadows use vertical offset >= blur radius so they can
       only paint downward + sideways. The second uses negative spread
       to soften the lift without growing taller. */
    box-shadow: 0 3px 3px rgba(15,23,42,.10),
                0 14px 18px -6px rgba(15,23,42,.14);
    /* No border — a solid border would draw a horizontal line right
       under the active tab row. */
}
html[data-theme="light"] .rm-section-title { color: #1d4ed8; }
html[data-theme="light"] .rm-lbl { color: #475569; }
/* Override Default.css cornsilk (#FFF8DC) only for modern rm-* sections */
html[data-theme="light"] .rm-section-body input[type=text],
html[data-theme="light"] .rm-section-body input[type=number],
html[data-theme="light"] .rm-section-body textarea,
html[data-theme="light"] .rm-section-body select {
    /* background-color longhand only — see note on the dark-theme rule:
       the shorthand would wipe the chevron background-image. */
    background-color: #eef2f7 !important;
    border: 1px solid #a8b3c2 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .rm-section-body input[type=text]:focus,
html[data-theme="light"] .rm-section-body input[type=number]:focus,
html[data-theme="light"] .rm-section-body textarea:focus,
html[data-theme="light"] .rm-section-body select:focus {
    background-color: #f6f8fc !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.18) !important;
}
html[data-theme="light"] .rm-section-body select option { background: #f3f2f0; color: #0f172a; }
html[data-theme="light"] .rm-error { color: #dc2626; }
html[data-theme="light"] .rm-readonly {
    background: #eef2f7; border: 1px solid #a8b3c2; color: #0f172a;
}
html[data-theme="light"] .rm-muted { color: #64748b; }
html[data-theme="light"] .rm-multichecks {
    background: #eef2f7; border: 1px solid #a8b3c2;
}
html[data-theme="light"] .rm-multichecks label { color: #1e293b; }
html[data-theme="light"] .rm-empty { color: #1d4ed8; }
html[data-theme="light"] .rm-checks label { color: #475569; }
html[data-theme="light"] .rm-tab {
    color: #0f172a !important;
    font-weight: 600 !important;
    background-color: #d0d9e5 !important;
    /* Visible outline on the TOP + SIDES of every inactive tab — same
       approach dark theme uses (border-color #2a394d on top+sides).
       border-bottom: none keeps the bottom edge of each tab clean so
       no visible 1 px line is drawn under the active tab (where it
       meets the section) or under the upper-row tabs (where they meet
       the row below). In light theme #a8b3c2 is a slate-gray that
       contrasts against the #d0d9e5 tab bg without fighting the warm
       cream palette of the form section. */
    border: 1px solid #a8b3c2 !important;
    border-bottom: none !important;
}
html[data-theme="light"] .rm-tab:hover {
    color: #1d4ed8 !important;
    background-color: #c0cbda !important;
}
html[data-theme="light"] .rm-tab.active {
    color: #1d4ed8 !important;
    /* var(--clr-surface) = #f5efe6 — what the rm-section actually renders as
       in light theme (the section's declared #f3f2f0 ends up displayed as
       the warm-cream surface variable through chrome / inheritance we don't
       fully control). Pinning tab.active to the same variable means the
       active tab and the form below always paint as one continuous panel,
       no matter which page hosts them. */
    background-color: var(--clr-surface) !important;
    /* Active tab has NO visible outline — it's the same colour as the
       section below it, and an outline would draw a visible line
       between the active tab and the form. */
    border-color: transparent !important;
    border-bottom-color: var(--clr-surface) !important;
    --tab-fill: var(--clr-surface);
}
/* Light-theme inactive box-shadow fill colour. */
html[data-theme="light"] .rm-tab { --tab-fill: #d0d9e5; }
html[data-theme="light"] .rm-actions {
    background: #d7dfe9;
    border-top: 1px solid #a8b3c2;
    box-shadow: 0 -4px 16px rgba(15,23,42,.12);
}
html[data-theme="light"] .rm-actions input[id$="CancelButton"] {
    background: #c8d2df !important;
    color: #475569 !important;
    border: 1px solid #a8b3c2 !important;
}
html[data-theme="light"] .rm-actions input[id$="CancelButton"]:hover {
    background: #b5c0d1 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .rm-actions input[id$="DeleteButton"] {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #f87171 !important;
}
html[data-theme="light"] .rm-actions input[id$="DeleteButton"]:hover {
    background: #fecaca !important;
    color: #7f1d1d !important;
}
html[data-theme="light"] .rm-btn-cancel { background: #c8d2df; color: #475569; }
html[data-theme="light"] .rm-btn-cancel:hover { background: #b5c0d1; color: #0f172a; }
html[data-theme="light"] .rm-inline-panel {
    background: #eef2f7; border: 1px solid #a8b3c2;
}
html[data-theme="light"] .rm-newcat {
    background: #eef2f7; border: 1px solid #a8b3c2;
}
html[data-theme="light"] .rm-doc-upload {
    background: #eef2f7;
    border: 1px solid #a8b3c2;
}
html[data-theme="light"] .rm-file-input {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #a8b3c2 !important;
}
html[data-theme="light"] .rm-file-input::file-selector-button,
html[data-theme="light"] .rm-file-input::-webkit-file-upload-button {
    background: #dbe7f8;
    color: #1d4ed8;
    border: 1px solid #8aa8d6;
}
html[data-theme="light"] .rm-subtable th {
    background: #c8d2df; color: #475569; border-bottom: 2px solid #8a97a9;
}
html[data-theme="light"] .rm-subtable td {
    color: #1e293b !important; border-bottom: 1px solid #b8c2d0;
}
html[data-theme="light"] .rm-subtable tr:hover td { background: rgba(37,99,235,.08); }
/* Light-theme link inside sub-table — darker blue so it's readable on the
   light surface; mirrors the same pattern used by .sim-page .tabela a. */
html[data-theme="light"] .rm-subtable td a:link,
html[data-theme="light"] .rm-subtable td a:visited { color: #1d4ed8 !important; }
html[data-theme="light"] .rm-subtable td a:hover  { color: #1e40af !important; }
html[data-theme="light"] .rm-empty-note { color: #64748b; }
html[data-theme="light"] .rm-icon-edit,
html[data-theme="light"] .rm-icon-download { color: #1d4ed8 !important; }
html[data-theme="light"] .rm-icon-delete { color: #b91c1c !important; }
html[data-theme="light"] .rm-inci-pill {
    background: #eef2f7; color: #1e293b; border: 1px solid #a8b3c2;
}
html[data-theme="light"] .rm-supplier-results {
    background: #eef2f7; border: 1px solid #a8b3c2;
}
html[data-theme="light"] .rm-supplier-item { color: #1e293b; }
html[data-theme="light"] .rm-supplier-item:hover,
html[data-theme="light"] .rm-supplier-item.selected,
html[data-theme="light"] .rm-supplier-item.active { background: #b0c6e8; color: #0f172a; }
html[data-theme="light"] .rm-supplier-results.has-active .rm-supplier-item:not(.active):hover { background: transparent; color: #1e293b; }
/* Border separators used inline in rm-* pages (style="border-top:1px solid #2a3a50") */
html[data-theme="light"] .rm-section-body div[style*="border-top"] { border-top-color: #a8b3c2 !important; }

/* ══════════════════════════════════════════════════════════════════════
   .sim-* (simulation editor / production planning)
   ══════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .sim-page { color: #1e293b; }
html[data-theme="light"] .sim-header {
    background: #e4e9f1;
    box-shadow: 0 1px 3px rgba(15,23,42,.10), 0 8px 24px rgba(15,23,42,.14);
    border: 1px solid #a8b3c2;
}
html[data-theme="light"] .sim-header-info .sim-plan-id { color: #0f172a; }
html[data-theme="light"] .sim-header-info .sim-date { color: #475569; }
html[data-theme="light"] .sim-header-desc textarea {
    background: #eef2f7 !important;
    border-color: #a8b3c2 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .sim-header-desc textarea:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.18) !important;
}
html[data-theme="light"] .sim-toolbar {
    background: #e4e9f1;
    box-shadow: 0 1px 3px rgba(15,23,42,.10), 0 8px 24px rgba(15,23,42,.14);
    border: 1px solid #a8b3c2;
}
html[data-theme="light"] .sim-toolbar select {
    background: #eef2f7 !important;
    border-color: #a8b3c2 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .sim-toolbar select:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.18) !important;
}
html[data-theme="light"] .sim-toolbar label,
html[data-theme="light"] .sim-toolbar .sim-filter-label { color: #475569; }
html[data-theme="light"] .sim-toolbar .sim-separator { background: #a8b3c2; }
html[data-theme="light"] .sim-toolbar .sim-cbtn-secondary,
html[data-theme="light"] .sim-toolbar input[type=submit].sim-cbtn-secondary,
html[data-theme="light"] .sim-page .sim-toolbar input[type=submit].sim-cbtn-secondary {
    background: #c8d2df !important;
    color: #475569 !important;
    border: 1px solid #a8b3c2 !important;
}
html[data-theme="light"] .sim-toolbar .sim-cbtn-secondary:hover,
html[data-theme="light"] .sim-toolbar input[type=submit].sim-cbtn-secondary:hover {
    background: #b5c0d1 !important;
    color: #0f172a !important;
    border-color: #8a97a9 !important;
}
html[data-theme="light"] .sim-toolbar .sim-cbtn-danger,
html[data-theme="light"] .sim-toolbar input[type=submit].sim-cbtn-danger {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #f87171 !important;
}
html[data-theme="light"] .sim-toolbar .sim-cbtn-danger:hover,
html[data-theme="light"] .sim-toolbar input[type=submit].sim-cbtn-danger:hover {
    background: #fecaca !important;
    color: #7f1d1d !important;
    border-color: #dc2626 !important;
}
html[data-theme="light"] .sim-categories {
    background: #e4e9f1;
    border: 1px solid #a8b3c2;
    box-shadow: 0 10px 30px rgba(15,23,42,.18);
}
html[data-theme="light"] .sim-cat-header { border-bottom-color: #a8b3c2; }
html[data-theme="light"] .sim-cat-title { color: #1e293b; }
html[data-theme="light"] .sim-cat-close { color: #64748b; }
html[data-theme="light"] .sim-cat-footer { border-top-color: #a8b3c2; }
html[data-theme="light"] .sim-cat-btn-ghost {
    background: transparent; color: #475569; border-color: #a8b3c2;
}
html[data-theme="light"] .sim-cat-btn-ghost:hover { background: #d7dfe9; color: #0f172a; }
html[data-theme="light"] .sim-categories .ListViewItem label { color: #1e293b; }
html[data-theme="light"] .sim-cat-options { border-top-color: #a8b3c2; }
html[data-theme="light"] .sim-cat-options label,
html[data-theme="light"] .sim-cat-options span { color: #475569; }
html[data-theme="light"] .sim-add-bar label { color: #475569; }
html[data-theme="light"] .sim-grid-card {
    background: #e4e9f1;
    box-shadow: 0 1px 3px rgba(15,23,42,.10), 0 8px 24px rgba(15,23,42,.14);
    border: 1px solid #a8b3c2;
}
html[data-theme="light"] .sim-grid-header {
    background: #d7dfe9;
    border-bottom: 1px solid #a8b3c2;
}
html[data-theme="light"] .sim-grid-header h3 { color: #475569; }
html[data-theme="light"] .sim-grid-toggle {
    background: transparent; color: #1d4ed8; border-color: #a8b3c2;
}
html[data-theme="light"] .sim-grid-toggle:hover { background: #b0c6e8; border-color: #2563eb; }
html[data-theme="light"] .sim-grid-card .grid2,
html[data-theme="light"] .sim-grid-card table.grid2 {
    color: #1e293b !important;
}
html[data-theme="light"] .sim-grid-card .grid2 thead th,
html[data-theme="light"] .sim-grid-card .grid2 th,
html[data-theme="light"] .sim-grid-card table.grid2 th {
    background: #d7dfe9 !important;
    color: #475569 !important;
    border-bottom: 2px solid #8a97a9 !important;
}
html[data-theme="light"] .sim-grid-card .grid2 td,
html[data-theme="light"] .sim-grid-card table.grid2 td,
html[data-theme="light"] .sim-grid-card .grid2 .gridRow td,
html[data-theme="light"] .sim-grid-card .grid2 .gridAltRow td,
html[data-theme="light"] .sim-grid-card table.grid2 tr td {
    color: #1e293b !important;
    border-bottom: 1px solid #b8c2d0 !important;
    font-size: 1rem !important;
}
html[data-theme="light"] .sim-grid-card .grid2 tbody tr:hover td,
html[data-theme="light"] .sim-grid-card .grid2 tr.gridRow:hover td,
html[data-theme="light"] .sim-grid-card .grid2 tr.gridAltRow:hover td {
    background: #c0d1ec !important;
}
html[data-theme="light"] .sim-grid-card .grid2 td a,
html[data-theme="light"] .sim-grid-card .grid2 a:link,
html[data-theme="light"] .sim-grid-card .grid2 a:visited,
html[data-theme="light"] .sim-grid-card .grid2 .gridRow a:link,
html[data-theme="light"] .sim-grid-card .grid2 .gridRow a:visited,
html[data-theme="light"] .sim-grid-card .grid2 .gridAltRow a:link,
html[data-theme="light"] .sim-grid-card .grid2 .gridAltRow a:visited {
    color: #1d4ed8 !important;
}
html[data-theme="light"] .sim-grid-card .grid2 td a:hover { color: #1e40af !important; }
html[data-theme="light"] .sim-expand-btn {
    background: #eef2f7; color: #475569;
}
html[data-theme="light"] .sim-expand-btn:hover { background: #b0c6e8; color: #1d4ed8; }
html[data-theme="light"] .sim-grid-card .grid2 input[type=text],
html[data-theme="light"] .sim-grid-card .grid2 textarea {
    background: #eef2f7 !important;
    border: 1px solid #a8b3c2 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .sim-grid-card .grid2 input[type=text]:focus,
html[data-theme="light"] .sim-grid-card .grid2 textarea:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 2px rgba(37,99,235,.18) !important;
}
html[data-theme="light"] .sim-grid-card .gridRepro,
html[data-theme="light"] .sim-grid-card .gridPalete,
html[data-theme="light"] .sim-grid-card .gridNarudzbeGR {
    background: #eef2f7 !important;
}
html[data-theme="light"] .sim-grid-card .gridRepro th,
html[data-theme="light"] .sim-grid-card .gridPalete th,
html[data-theme="light"] .sim-grid-card .gridNarudzbeGR th {
    background: #d7dfe9 !important;
    color: #475569 !important;
    border-bottom: 1px solid #a8b3c2 !important;
}
html[data-theme="light"] .sim-grid-card .gridRepro td,
html[data-theme="light"] .sim-grid-card .gridPalete td,
html[data-theme="light"] .sim-grid-card .gridNarudzbeGR td {
    color: #475569 !important;
    border-bottom: 1px solid #b8c2d0 !important;
    font-size: 12px !important;
}
html[data-theme="light"] .sim-grid-btn-secondary,
html[data-theme="light"] .sim-grid-card input[type=submit].sim-grid-btn-secondary {
    background: #c8d2df !important;
    color: #475569 !important;
    border: 1px solid #a8b3c2 !important;
}
html[data-theme="light"] .sim-grid-btn-secondary:hover,
html[data-theme="light"] .sim-grid-card input[type=submit].sim-grid-btn-secondary:hover {
    background: #b5c0d1 !important;
    color: #0f172a !important;
    border-color: #8a97a9 !important;
}
html[data-theme="light"] .sim-grid-btn-danger,
html[data-theme="light"] .sim-grid-card input[type=submit].sim-grid-btn-danger,
html[data-theme="light"] .sim-page .sim-grid-header input[type=submit].sim-grid-btn-danger {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #f87171 !important;
}
html[data-theme="light"] .sim-grid-btn-danger:hover,
html[data-theme="light"] .sim-grid-card input[type=submit].sim-grid-btn-danger:hover,
html[data-theme="light"] .sim-page .sim-grid-header input[type=submit].sim-grid-btn-danger:hover {
    background: #fecaca !important;
    color: #7f1d1d !important;
    border-color: #dc2626 !important;
}
html[data-theme="light"] .sim-popup-hint {
    background: #d7dfe9; color: #475569; border: 1px solid #a8b3c2;
}
html[data-theme="light"] .sim-modal-overlay { background: rgba(15,23,42,.50); }
html[data-theme="light"] .sim-modal-dialog {
    background: #e4e9f1;
    border: 1px solid #a8b3c2;
    box-shadow: 0 24px 70px rgba(15,23,42,.35);
}
html[data-theme="light"] .sim-modal-title {
    background: #d7dfe9; color: #0f172a; border-bottom: 1px solid #a8b3c2;
}
html[data-theme="light"] .sim-modal-footer {
    background: #d7dfe9; border-top: 1px solid #a8b3c2;
}
html[data-theme="light"] .sim-modal-footer .sim-btn-secondary {
    background: #c8d2df !important;
    color: #475569 !important;
    border: 1px solid #a8b3c2 !important;
}
html[data-theme="light"] .sim-modal-footer .sim-btn-secondary:hover {
    background: #b5c0d1 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .sim-results > .tabela,
html[data-theme="light"] .sim-results table.tabela {
    background: #e4e9f1;
    box-shadow: 0 1px 3px rgba(15,23,42,.10), 0 8px 24px rgba(15,23,42,.14);
    border: 1px solid #a8b3c2;
}
html[data-theme="light"] .sim-page .tabela {
    background: #e4e9f1;
    color: #1e293b;
}
html[data-theme="light"] .sim-page .tabela th {
    background: #d7dfe9;
    color: #475569;
    border-bottom: 2px solid #8a97a9;
}
html[data-theme="light"] .sim-page .tabela td {
    color: #1e293b;
    border-bottom: 1px solid #b8c2d0;
    font-size: 13px;
}
html[data-theme="light"] .sim-page .tabela tr:hover td { background: #c0d1ec; }
html[data-theme="light"] .sim-page .tabela a { color: #1d4ed8 !important; }
html[data-theme="light"] .sim-page .tabela a:hover { color: #1e40af !important; }
html[data-theme="light"] .sim-page .tabela2 { background: #eef2f7; }
html[data-theme="light"] .sim-page .tabela2 th {
    background: #d7dfe9; color: #475569; border-bottom: 1px solid #a8b3c2;
}
html[data-theme="light"] .sim-page .tabela2 td {
    font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════
   FONT SIZE SCALE (triggered by html[data-font="..."])
   Scales the main text-heavy components so Small / Medium / Large / XL
   from the settings popover is clearly visible.
   ═══════════════════════════════════════════════════════════════════════ */

/* small */
html[data-font="small"] .ctbl-grid                    { font-size: 12.5px; }
html[data-font="small"] .ctbl-search-input            { font-size: 12px; }
html[data-font="small"] .ctbl-btn-primary             { font-size: 12px; }
html[data-font="small"] .pm-label                     { font-size: 13px; }
html[data-font="small"] .pm-icon                      { width: 54px; height: 54px; }
html[data-font="small"] .pm-icon svg                  { width: 28px; height: 28px; }
html[data-font="small"] .cedit-label                  { font-size: 11px; }
html[data-font="small"] .cedit-input,
html[data-font="small"] .cedit-body input[type=text],
html[data-font="small"] .cedit-body input[type=number],
html[data-font="small"] .cedit-body textarea,
html[data-font="small"] .cedit-body select            { font-size: 13px !important; }

/* medium — defaults already set */

/* large */
html[data-font="large"] .ctbl-grid                    { font-size: 15.5px; }
html[data-font="large"] .ctbl-grid th                 { font-size: 12.5px; }
html[data-font="large"] .ctbl-search-input            { font-size: 15px; }
html[data-font="large"] .ctbl-btn-primary             { font-size: 15px; }
html[data-font="large"] .pm-label                     { font-size: 17px; }
html[data-font="large"] .pm-icon                      { width: 72px; height: 72px; }
html[data-font="large"] .pm-icon svg                  { width: 38px; height: 38px; }
html[data-font="large"] .cedit-label                  { font-size: 13px; }
html[data-font="large"] .cedit-input,
html[data-font="large"] .cedit-body input[type=text],
html[data-font="large"] .cedit-body input[type=number],
html[data-font="large"] .cedit-body textarea,
html[data-font="large"] .cedit-body select            { font-size: 16px !important; padding: 11px 14px !important; }
html[data-font="large"] .cedit-actions input[type=submit],
html[data-font="large"] .cedit-actions input[type=button],
html[data-font="large"] .cedit-actions .btnMali       { font-size: 14.5px !important; padding: 10px 20px !important; }

/* extra large */
html[data-font="xlarge"] .ctbl-grid                   { font-size: 17px; }
html[data-font="xlarge"] .ctbl-grid th                { font-size: 13px; }
html[data-font="xlarge"] .ctbl-grid td                { padding: 13px 18px; }
html[data-font="xlarge"] .ctbl-search-input           { font-size: 16px; }
html[data-font="xlarge"] .ctbl-btn-primary            { font-size: 16px; padding: 8px 22px; }
html[data-font="xlarge"] .pm-label                    { font-size: 19px; }
html[data-font="xlarge"] .pm-icon                     { width: 80px; height: 80px; }
html[data-font="xlarge"] .pm-icon svg                 { width: 44px; height: 44px; }
html[data-font="xlarge"] .cedit-label                 { font-size: 14px; }
html[data-font="xlarge"] .cedit-input,
html[data-font="xlarge"] .cedit-body input[type=text],
html[data-font="xlarge"] .cedit-body input[type=number],
html[data-font="xlarge"] .cedit-body textarea,
html[data-font="xlarge"] .cedit-body select          { font-size: 17px !important; padding: 12px 16px !important; }
html[data-font="xlarge"] .cedit-actions input[type=submit],
html[data-font="xlarge"] .cedit-actions input[type=button],
html[data-font="xlarge"] .cedit-actions .btnMali     { font-size: 15.5px !important; padding: 11px 22px !important; }

/* ═══════════════════════════════════════════════════════════════════════
   ROOT FONT INHERITANCE FOR MODERN FORMS
   New form layouts should follow html[data-font] via rem/inherit instead
   of fixed px values from the original dark-theme design.
   ═══════════════════════════════════════════════════════════════════════ */

body.cedit-modal-body,
.cedit-card,
.cedit-body,
.rm-page,
.rm-section,
.fm-page,
.fm-section,
.fm-tab-content,
.sim-page,
.sim-header,
.sim-toolbar,
.sim-grid-card,
.sim-results,
.sim-categories,
.sim-modal-dialog {
    font-size: 1rem;
}

.cedit-label,
.rm-lbl,
.fm-label,
.fm-subtable th {
    font-size: .857rem;
}

.cedit-input,
.cedit-body input[type=text],
.cedit-body input[type=number],
.cedit-body textarea,
.cedit-body select,
.rm-section-body input[type=text],
.rm-section-body input[type=number],
.rm-section-body textarea,
.rm-section-body select,
.fm-input,
.fm-page input[type=text],
.fm-page select,
.fm-page textarea,
.fm-subtable,
.fm-subtable input[type=text],
.fm-subtable select {
    font-size: 1rem !important;
}

.cedit-error,
.rm-error,
.rm-muted,
.rm-readonly,
.rm-header-status,
.fm-id,
.fm-btn-sm {
    font-size: .857rem;
}

.cedit-check label,
.rm-multichecks label,
.rm-checks label,
.rm-tab,
.fm-tab,
.fm-btn {
    font-size: .929rem !important;
}

.fm-file-input,
.fm-reg-summary .fm-reg-stat-value,
.sim-header-desc textarea,
.sim-toolbar select,
.sim-toolbar .sim-btn,
.sim-toolbar input[type=submit],
.sim-toolbar input[type=button],
.sim-toolbar .btnMali,
.sim-toolbar .submit,
.sim-grid-card .grid2 input[type=text],
.sim-grid-card .grid2 textarea,
.sim-modal-footer .btnMali,
.sim-modal-footer input[type=submit],
.sim-modal-footer .sim-btn-secondary {
    font-size: 1rem !important;
}

.cedit-actions input[type=submit],
.cedit-actions input[type=button],
.cedit-actions .btnMali,
.cedit-actions .submit,
.cedit-actions .submitC,
.cedit-actions .btnTrazi,
.cedit-actions .PotvrdaButton,
.cedit-actions .btnMailAttachment,
.cedit-actions .btnVeliki,
.rm-actions input[type=submit],
.rm-actions input[type=button],
.rm-actions .btnMali {
    font-size: .929rem !important;
}

.rm-header-id,
.fm-section-title {
    font-size: 1.071rem;
}

.rm-section-title,
.fm-total-bar {
    font-size: .929rem;
}

.sim-header-info .sim-plan-id { font-size: 1.429rem; }
.sim-header-info .sim-date,
.sim-toolbar label,
.sim-toolbar .sim-filter-label,
.sim-categories .ListViewItem label,
.sim-cat-options label,
.sim-cat-options span,
.sim-add-bar label,
.sim-cat-title,
.sim-popup-hint,
.sim-grid-header h3 {
    font-size: .929rem;
}

.sim-cat-close { font-size: 1.143rem; }

.sim-cat-btn,
.sim-grid-toggle,
.sim-grid-btn-calc,
.sim-grid-btn-secondary,
.sim-grid-btn-add,
.sim-grid-btn-danger,
.sim-modal-title {
    font-size: .929rem !important;
}

.sim-grid-card .grid2,
.sim-grid-card table.grid2,
.sim-page .tabela {
    font-size: 1rem !important;
}

.sim-grid-card .grid2 th,
.sim-grid-card table.grid2 th,
.sim-page .tabela th {
    font-size: .929rem !important;
}

.fm-subtable td,
.fm-subtable td a,
.fm-subtable td span,
.fm-subtable td label,
.fm-subtable td div {
    font-size: 1rem !important;
}

.sim-grid-card .gridRepro,
.sim-grid-card .gridPalete,
.sim-grid-card .gridNarudzbeGR,
.sim-page .tabela2 {
    font-size: .857rem !important;
}

.sim-grid-card .grid2 td,
.sim-grid-card .grid2 td a,
.sim-grid-card .grid2 td span,
.sim-grid-card .grid2 td label,
.sim-grid-card .grid2 td div,
.sim-grid-card table.grid2 td,
.sim-grid-card table.grid2 td a,
.sim-grid-card table.grid2 td span,
.sim-grid-card table.grid2 td label,
.sim-grid-card table.grid2 td div,
.sim-page .tabela td,
.sim-page .tabela td a,
.sim-page .tabela td span,
.sim-page .tabela td label,
.sim-page .tabela td div {
    font-size: 1rem !important;
}

.sim-grid-card .gridRepro th,
.sim-grid-card .gridPalete th,
.sim-grid-card .gridNarudzbeGR th,
.sim-page .tabela2 th {
    font-size: .714rem !important;
}

.sim-grid-card .gridRepro td,
.sim-grid-card .gridPalete td,
.sim-grid-card .gridNarudzbeGR td,
.sim-grid-card .gridRepro td a,
.sim-grid-card .gridPalete td a,
.sim-grid-card .gridNarudzbeGR td a,
.sim-grid-card .gridRepro td span,
.sim-grid-card .gridPalete td span,
.sim-grid-card .gridNarudzbeGR td span,
.sim-grid-card .gridRepro td label,
.sim-grid-card .gridPalete td label,
.sim-grid-card .gridNarudzbeGR td label,
.sim-grid-card .gridRepro td div,
.sim-grid-card .gridPalete td div,
.sim-grid-card .gridNarudzbeGR td div,
.sim-page .tabela2 td,
.sim-page .tabela2 td a,
.sim-page .tabela2 td span,
.sim-page .tabela2 td label,
.sim-page .tabela2 td div {
    font-size: .857rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   WARM LIGHT THEME TUNING
   Keeps the blue accent but moves neutral surfaces from cold grey/white
   to a softer cream palette.
   ═══════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .ctbl-card,
html[data-theme="light"] .ctbl-modal-dialog,
html[data-theme="light"] .cedit-card,
html[data-theme="light"] .fm-section,
html[data-theme="light"] .fm-tab-content,
html[data-theme="light"] .rm-section,
html[data-theme="light"] .sim-header,
html[data-theme="light"] .sim-toolbar,
html[data-theme="light"] .sim-categories,
html[data-theme="light"] .sim-grid-card,
html[data-theme="light"] .sim-modal-dialog,
html[data-theme="light"] .sim-results > .tabela,
html[data-theme="light"] .sim-results table.tabela,
html[data-theme="light"] .sim-page .tabela {
    background: var(--clr-surface) !important;
    border-color: var(--clr-border) !important;
}

html[data-theme="light"] .ctbl-filter-bar,
html[data-theme="light"] .ctbl-toolbar,
html[data-theme="light"] .ctbl-pager,
html[data-theme="light"] .ctbl-pager-dock,
html[data-theme="light"] .cedit-actions,
html[data-theme="light"] .fm-tabs-bar,
html[data-theme="light"] .fm-total-bar,
html[data-theme="light"] .fm-reg-summary,
html[data-theme="light"] .fm-actions,
html[data-theme="light"] .rm-actions,
html[data-theme="light"] .sim-grid-header,
html[data-theme="light"] .sim-modal-title,
html[data-theme="light"] .sim-modal-footer,
html[data-theme="light"] .sim-popup-hint,
html[data-theme="light"] .sim-page .tabela th,
html[data-theme="light"] .sim-page .tabela2 th,
html[data-theme="light"] .sim-grid-card .grid2 th,
html[data-theme="light"] .sim-grid-card table.grid2 th,
html[data-theme="light"] .sim-grid-card .gridRepro th,
html[data-theme="light"] .sim-grid-card .gridPalete th,
html[data-theme="light"] .sim-grid-card .gridNarudzbeGR th,
html[data-theme="light"] .fm-subtable th,
html[data-theme="light"] .rm-subtable th,
html[data-theme="light"] .ctbl-grid thead tr,
html[data-theme="light"] .ctbl-grid tr.ctbl-grid th,
html[data-theme="light"] .ctbl-grid th {
    background: var(--clr-surface2) !important;
    border-color: var(--clr-border2) !important;
    color: var(--clr-text-dim) !important;
}

html[data-theme="light"] .ctbl-filter-ddl,
html[data-theme="light"] .ctbl-pager-size-ddl,
html[data-theme="light"] .ctbl-search-wrap,
html[data-theme="light"] .cedit-input,
html[data-theme="light"] .cedit-body input[type=text],
html[data-theme="light"] .cedit-body input[type=number],
html[data-theme="light"] .cedit-body textarea,
html[data-theme="light"] .cedit-body select,
html[data-theme="light"] .fm-page input[type=text],
html[data-theme="light"] .fm-page select,
html[data-theme="light"] .fm-page textarea,
html[data-theme="light"] .fm-subtable input[type=text],
html[data-theme="light"] .fm-subtable select,
html[data-theme="light"] .fm-doc-upload,
html[data-theme="light"] .fm-file-input,
html[data-theme="light"] .rm-section-body input[type=text],
html[data-theme="light"] .rm-section-body input[type=number],
html[data-theme="light"] .rm-section-body textarea,
html[data-theme="light"] .rm-section-body select,
html[data-theme="light"] .rm-readonly,
html[data-theme="light"] .rm-multichecks,
html[data-theme="light"] .rm-inline-panel,
html[data-theme="light"] .rm-newcat,
html[data-theme="light"] .rm-doc-upload,
html[data-theme="light"] .rm-file-input,
html[data-theme="light"] .rm-inci-pill,
html[data-theme="light"] .rm-supplier-results,
html[data-theme="light"] .sim-header-desc textarea,
html[data-theme="light"] .sim-toolbar select,
html[data-theme="light"] .sim-grid-card .grid2 input[type=text],
html[data-theme="light"] .sim-grid-card .grid2 textarea,
html[data-theme="light"] .sim-grid-card .gridRepro,
html[data-theme="light"] .sim-grid-card .gridPalete,
html[data-theme="light"] .sim-grid-card .gridNarudzbeGR,
html[data-theme="light"] .sim-page .tabela2 {
    /* background-color longhand only — the shorthand would wipe the
       custom dropdown chevron's background-image on .rm-section-body select. */
    background-color: #fcf7f0 !important;
    border-color: var(--clr-border) !important;
}

html[data-theme="light"] .ctbl-grid tbody tr td,
html[data-theme="light"] .fm-subtable tbody tr:nth-child(even) td,
html[data-theme="light"] .rm-subtable tr td,
html[data-theme="light"] .sim-grid-card .grid2 td,
html[data-theme="light"] .sim-grid-card table.grid2 td,
html[data-theme="light"] .sim-page .tabela td {
    background: var(--clr-surface) !important;
}

/* :not(.selected) on the ctbl-grid stripe — the selected-row highlight
   (`tr.selected td` at line ~3862) uses !important to override the
   base/alt backgrounds. Without :not(.selected) here, this later
   !important rule wins the cascade tiebreak on even rows and the
   selected highlight is silently dropped. The visible symptom: in
   light theme, only every OTHER visible row picks up the selection
   colour when clicked, because ASP.NET GridView renders its header
   <tr> inside <tbody> so the first visible data row is :nth-child(2)
   (an EVEN child in CSS) and inherits this stripe override. */
html[data-theme="light"] .ctbl-grid tbody tr:nth-child(even):not(.selected) td,
html[data-theme="light"] .sim-grid-card .grid2 .gridAltRow:not(.selected) td {
    background: #fffaf4 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   HOME DASHBOARD
   Theme-aware, font-scale aware, full-width layout aligned with ctrlTable.
   ═══════════════════════════════════════════════════════════════════════ */
.content > .home-dashboard-host {
    display: block;
    width: calc(100% + 20px);
    margin: -10px;
    min-height: calc(100vh - var(--header-h, 84px));
}

.home-dashboard-host .toDo {
    height: calc(100vh - var(--header-h, 84px));
    padding: 0 !important;
    overflow: hidden;
    background: var(--clr-bg);
}

.home-dashboard-host #mainLayout {
    display: flex;
    gap: 0;
    width: 100%;
    height: 100%;
}

.home-dashboard-host .todo-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #0f1926;
    border: 1px solid #2d4055;
    border-right-width: 0;
    border-radius: 0;
    box-shadow: none;
}

.home-dashboard-host .todo-col:last-child {
    border-right-width: 1px;
}

.home-dashboard-host .col-header {
    background: #152235;
    border-bottom: 1px solid #31465e;
    color: #93c5fd;
    font-size: .857rem;
    font-weight: 700;
    letter-spacing: .08em;
    min-height: 3rem;
    height: auto;
    padding: 0 1rem;
}

.home-dashboard-host .col-toolbar,
.home-dashboard-host .col-filters {
    background: #101927;
    border-bottom: 1px solid #27384a;
    padding-left: 1rem;
    padding-right: 1rem;
}

.home-dashboard-host .col-toolbar {
    min-height: 3.25rem;
    height: auto;
}

.home-dashboard-host .col-filters {
    min-height: 4rem;
    height: auto;
    padding-top: .625rem;
    padding-bottom: .625rem;
}

.home-dashboard-host .col-task-name {
    font-size: .929rem;
    color: #d6dee9;
}

.home-dashboard-host .col-filter-item > label {
    font-size: .714rem;
    color: #9fb0c4;
}

.home-dashboard-host .segmented-bar .segment,
.home-dashboard-host select.col-select,
.home-dashboard-host .plus-button,
.home-dashboard-host .popup-input,
.home-dashboard-host #participantsSelect,
.home-dashboard-host .save-button,
.home-dashboard-host .cancel-button,
.home-dashboard-host .modalHome label,
.home-dashboard-host .tasksList {
    font-size: .929rem;
}

.home-dashboard-host .segmented-bar .segment {
    min-width: 7.5rem;
    padding: .5rem .875rem;
}

.home-dashboard-host .plus-button {
    min-height: 2rem;
    padding: .25rem .75rem;
}

.home-dashboard-host .modalHome label {
    color: var(--clr-text-dim);
}

.home-dashboard-host select.col-select,
.home-dashboard-host .popup-input,
.home-dashboard-host #participantsSelect {
    background: #152235 !important;
    color: #f8fafc !important;
    border-color: #3a5068 !important;
}

.home-dashboard-host .col-cards {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    background: #0c1520;
}

.home-dashboard-host .projectGrid,
.home-dashboard-host .taskGrid,
.home-dashboard-host .messagesGrid {
    width: 100%;
}

.home-dashboard-host .projectGrid td,
.home-dashboard-host .taskGrid td,
.home-dashboard-host .messagesGrid td {
    padding: 0;
    width: 100%;
    border: none;
}

.home-dashboard-host .project-card,
.home-dashboard-host .task-card,
.home-dashboard-host .messagesGrid .message-card {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 1rem 1.125rem;
    background: #182739;
    border: 0;
    border-bottom: 1px solid #2f465e;
    border-radius: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
    transition: background-color .16s ease, box-shadow .16s ease;
}

.home-dashboard-host .project-card:hover,
.home-dashboard-host .task-card:hover,
.home-dashboard-host .messagesGrid .message-card:hover {
    background: #1e3147;
}

.home-dashboard-host .project-card.selected-card,
.home-dashboard-host .task-card.selected-card {
    background: rgba(37, 99, 235, .18);
    border-bottom-color: #3a5068;
    box-shadow: inset .3rem 0 0 var(--clr-accent-lt);
}

.home-dashboard-host .messagesGrid .message-card {
    max-width: none;
}

.home-dashboard-host .messagesGrid .message-card:after {
    display: none;
}

.home-dashboard-host .project-title,
.home-dashboard-host .messagesGrid .message-header {
    font-size: 1.071rem;
    line-height: 1.45;
}

.home-dashboard-host .project-meta,
.home-dashboard-host .project-assignee,
.home-dashboard-host .project-description,
.home-dashboard-host .messagesGrid .message-body,
.home-dashboard-host .messagesGrid .message-footer {
    font-size: .929rem;
    line-height: 1.6;
}

.home-dashboard-host .project-meta,
.home-dashboard-host .project-assignee,
.home-dashboard-host .project-description,
.home-dashboard-host .messagesGrid .message-footer {
    color: #c6d1de;
}

.home-dashboard-host .project-description-wrapper {
    background: #121f31;
    border-color: #31465e;
}

.home-dashboard-host .messagesGrid .message-header {
    color: var(--clr-accent-lt);
}

.home-dashboard-host .messagesGrid .message-body {
    color: var(--clr-text);
}

.home-dashboard-host .messagesGrid a,
.home-dashboard-host .messagesGrid a:hover,
.home-dashboard-host .messagesGrid a:visited {
    color: var(--clr-accent-lt);
}

html[data-theme="light"] .home-dashboard-host .todo-col {
    background: #f0e6d6;
    border-color: #c9b999;
}

html[data-theme="light"] .home-dashboard-host .col-header {
    background: #e5d8c4;
    border-bottom-color: #cdbb9a;
    color: #1d4ed8;
}

html[data-theme="light"] .home-dashboard-host .col-toolbar,
html[data-theme="light"] .home-dashboard-host .col-filters,
html[data-theme="light"] .home-dashboard-host .col-cards {
    background: #f0e6d6;
    border-bottom-color: #d0c1a6;
}

html[data-theme="light"] .home-dashboard-host .col-task-name {
    color: #5d5346;
}

html[data-theme="light"] .home-dashboard-host .col-filter-item > label {
    color: #7b7062;
}

html[data-theme="light"] .home-dashboard-host select.col-select,
html[data-theme="light"] .home-dashboard-host .popup-input,
html[data-theme="light"] .home-dashboard-host #participantsSelect {
    background: #fffaf4 !important;
    color: #2f2a22 !important;
    border-color: #c9b999 !important;
}

html[data-theme="light"] .home-dashboard-host .project-card,
html[data-theme="light"] .home-dashboard-host .task-card,
html[data-theme="light"] .home-dashboard-host .messagesGrid .message-card {
    background: #fffaf4;
    border-bottom-color: #d0bfa1;
    box-shadow: none;
}

html[data-theme="light"] .home-dashboard-host .project-card:hover,
html[data-theme="light"] .home-dashboard-host .task-card:hover,
html[data-theme="light"] .home-dashboard-host .messagesGrid .message-card:hover {
    background: #f3e8d7;
}

html[data-theme="light"] .home-dashboard-host .project-meta,
html[data-theme="light"] .home-dashboard-host .project-assignee,
html[data-theme="light"] .home-dashboard-host .project-description,
html[data-theme="light"] .home-dashboard-host .messagesGrid .message-footer {
    color: #5d5346;
}

html[data-theme="light"] .home-dashboard-host .project-description-wrapper {
    background: #eee1cd;
    border-color: #c7b58f;
}

@media (max-width: 860px) {
    .content > .home-dashboard-host {
        width: calc(100% + 20px);
        margin: -10px;
        min-height: auto;
    }

    .home-dashboard-host .toDo {
        height: auto;
        overflow: visible;
    }

    .home-dashboard-host #mainLayout {
        flex-direction: column;
    }

    .home-dashboard-host .todo-col {
        border-right-width: 1px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Procedures grid (ctrlPostupci) — modern table styling, drag-handle
   row reorder, and per-row typeahead picker for raw materials.
   ═════════════════════════════════════════════════════════════════── */

.postupci-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Toolbar above the grid: action buttons + summary stats. */
.postupci-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
}
.postupci-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
/* Normalize the bulk-edit toolbar buttons (Edit / Cancel / Save All /
   Add new item) to a single height regardless of underlying element
   (asp:Button → <input>, asp:LinkButton → <a>) or class
   (ctbl-btn-primary vs ctbl-btn-action). Without this, browser-default
   line-height differences between <a> and <input> produce visibly
   different button heights side by side. */
.postupci-actions > .ctbl-btn-primary,
.postupci-actions > .ctbl-btn-action,
.postupci-actions > .ctbl-btn-secondary,
.postupci-actions > .ctbl-btn-export {
    height: 36px;
    padding: 0 18px !important;
    line-height: 1 !important;
    box-sizing: border-box;
}
.postupci-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    font-size: .9rem;
}
.postupci-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.postupci-stat-lbl {
    color: #94a3b8;
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .05em;
    font-weight: 600;
}
.postupci-stat-val {
    color: #e2e8f0;
    font-weight: 700;
    font-size: 1rem;
}
html[data-theme="light"] .postupci-stat-lbl { color: #475569; }
html[data-theme="light"] .postupci-stat-val { color: #0f172a; }

/* Card wrapper — reuses .sim-grid-card visuals but lets the grid
   shrink to its content rather than the dashboard's max-height. */
.postupci-card .sim-grid-wrap,
.postupci-card.sim-grid-card .sim-grid-wrap {
    max-height: none !important;
    min-height: 0 !important;
    overflow: auto;
}

/* Raw materials grid (KompletiSastavniceEdit > Raw materials tab) —
   opt-in via `.kre-scroll` on the inner wrap. Caps the height so the
   whole grid fits on screen and the user can scroll vertically inside
   the table instead of scrolling the entire page. Sticky thead keeps
   the column headers visible while scrolling.

   IMPORTANT: the selector below has to OUTSPECIFY the existing
   `.postupci-card .sim-grid-wrap { max-height: none !important }` rule
   directly above, otherwise `!important` ties get broken by source
   specificity and the wrap stays uncapped. We pin `.kre-scroll` to
   the same ancestor chain (.postupci-card.sim-grid-card .sim-grid-wrap)
   to reach (0,4,0) > the original's (0,3,0). */
.postupci-card .sim-grid-wrap.kre-scroll,
.postupci-card.sim-grid-card .sim-grid-wrap.kre-scroll,
.sim-grid-card .sim-grid-wrap.kre-scroll,
.postupci-card .sim-grid-wrap.kpr-scroll,
.postupci-card.sim-grid-card .sim-grid-wrap.kpr-scroll,
.sim-grid-card .sim-grid-wrap.kpr-scroll,
.postupci-card .sim-grid-wrap.sas-scroll,
.postupci-card.sim-grid-card .sim-grid-wrap.sas-scroll,
.sim-grid-card .sim-grid-wrap.sas-scroll,
.postupci-card .sim-grid-wrap.post-scroll,
.postupci-card.sim-grid-card .sim-grid-wrap.post-scroll,
.sim-grid-card .sim-grid-wrap.post-scroll {
    max-height: calc(100vh - 360px) !important;
    min-height: 220px !important;
    overflow-y: auto !important;
}
.sim-grid-wrap.kre-scroll .grid2 thead th,
.sim-grid-wrap.kpr-scroll .grid2 thead th,
.sim-grid-wrap.sas-scroll .grid2 thead th,
.sim-grid-wrap.post-scroll .grid2 thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #162032; /* dark theme thead bg to mask rows scrolling under */
}
html[data-theme="light"] .sim-grid-wrap.kre-scroll .grid2 thead th,
html[data-theme="light"] .sim-grid-wrap.kpr-scroll .grid2 thead th,
html[data-theme="light"] .sim-grid-wrap.sas-scroll .grid2 thead th,
html[data-theme="light"] .sim-grid-wrap.post-scroll .grid2 thead th {
    background: #e8e2d6;
}
.postupci-card .grid2 { font-size: .9rem !important; }
.postupci-card .grid2 th,
.postupci-card .grid2 td {
    padding: 8px 10px !important;
    vertical-align: middle !important;
}
.postupci-card .grid2 th {
    font-size: .75rem !important;
    letter-spacing: .04em !important;
}

/* Hide the legacy "Novi rb" column — kept in the DOM only for renum()
   to write the post-drag order into RbTextBox before postback. */
.postupci-card .grid2 th.postupci-hidden-col,
.postupci-card .grid2 td.postupci-hidden-col {
    display: none !important;
}

/* Action column: drag handle + delete icon. Tight padding so it
   doesn't waste horizontal space at the start of every row. */
.postupci-card .grid2 th.postupci-action-h,
.postupci-card .grid2 td.postupci-action-cell {
    width: 56px;
    white-space: nowrap;
    padding-left: 10px !important;
    padding-right: 6px !important;
    text-align: left !important;
}
.postupci-drag {
    display: inline-block;
    cursor: grab;
    color: #5a7a9a;
    font-size: 14px;
    line-height: 1;
    padding: 4px 6px;
    user-select: none;
    margin-right: 4px;
    border-radius: 4px;
    transition: background .12s, color .12s;
}
.postupci-drag:hover { color: #93c5fd; background: #1e3a5f; }
.postupci-drag:active { cursor: grabbing; }
html[data-theme="light"] .postupci-drag { color: #64748b; }
html[data-theme="light"] .postupci-drag:hover { color: #1d4ed8; background: #dbeafe; }

/* SN — narrow centred sequence number column. */
.postupci-card .grid2 th.postupci-sn-h,
.postupci-card .grid2 td.postupci-sn-cell {
    width: 44px;
    text-align: center !important;
    color: #94a3b8 !important;
    font-weight: 600 !important;
}
html[data-theme="light"] .postupci-card .grid2 td.postupci-sn-cell { color: #475569 !important; }

/* Raw material picker column: wide enough for "code — name" text. */
.postupci-card .grid2 th.postupci-rm-h,
.postupci-card .grid2 td.postupci-rm-cell {
    min-width: 280px;
    max-width: 360px;
    /* Allow long material names to wrap onto multiple lines so they
       don't bleed into the next column. */
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.repro-disp-link {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

/* Process (Postupak) column — wider so the dropdown shows full
   "Heating"/"Cooling"/"Mixing" text without truncation. */
.postupci-card .grid2 th.postupci-process-h,
.postupci-card .grid2 td.postupci-process-cell {
    min-width: 130px;
}
.postupci-process-ddl { min-width: 120px; }

/* Dose (Doziranje) column — wide enough for full decimals. */
.postupci-card .grid2 th.postupci-dose-h,
.postupci-card .grid2 td.postupci-dose-cell {
    min-width: 110px;
}
.postupci-dose-input { width: 100px !important; }
.postupci-card .repro-picker {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}
.postupci-card .repro-picker .repro-search {
    flex: 1 1 auto;
    width: 100%;
    min-width: 220px;
}
.repro-edit-link {
    flex: 0 0 auto;
    display: inline-block;
    text-align: center;
    width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 4px;
    color: #60a5fa;
    text-decoration: none !important;
    font-size: 14px;
    transition: background .12s, color .12s;
}
.repro-edit-link:hover { background: #1e3a5f; color: #93c5fd; }
html[data-theme="light"] .repro-edit-link { color: #1d4ed8; }
html[data-theme="light"] .repro-edit-link:hover { background: #dbeafe; color: #1e40af; }

/* Predmiješanje pair — keep the two narrow ints on one line. */
.postupci-pred {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

/* Sortable drag-helper — preserves cell widths during drag. */
.postupci tbody tr.ui-sortable-helper {
    display: table;
    background: #243050 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.postupci tbody tr.ui-sortable-placeholder {
    visibility: visible !important;
    background: #1a2436 !important;
    border: 2px dashed #3b82f6 !important;
}
html[data-theme="light"] .postupci tbody tr.ui-sortable-helper {
    background: #e0e7ff !important;
}
html[data-theme="light"] .postupci tbody tr.ui-sortable-placeholder {
    background: #f1f5f9 !important;
    border-color: #93c5fd !important;
}

/* AddNewRowButton stays in DOM as the picker's async-postback target,
   but is invisible — new rows now appear automatically. */
.postupci-add-hidden { display: none !important; }

/* ── Edit-mode / display-mode swap ───────────────────────────────── */
/* Every editable cell renders both an input (.cell-edit) and a label
   (.cell-disp). The row's class — set in grid_RowDataBound — picks
   which one is visible, with no postbacks needed for re-rendering.
   Scoped to any of the BOM-style cards (Procedures, Packaging,
   Specifications) so each gets the same edit/display swap. */
.postupci-card tr.row-display .cell-edit,
.postupci-card tbody tr.row-display .cell-edit,
.spec-card tr.row-display .cell-edit,
.spec-card tbody tr.row-display .cell-edit { display: none !important; }
.postupci-card tr.row-edit .cell-disp,
.postupci-card tbody tr.row-edit .cell-disp,
.spec-card tr.row-edit .cell-disp,
.spec-card tbody tr.row-edit .cell-disp { display: none !important; }

/* Display-mode label baseline — show as plain text. */
.postupci-card .cell-disp,
.spec-card .cell-disp {
    color: #cbd5e1;
    font-size: .9rem;
    line-height: 1.4;
}
html[data-theme="light"] .postupci-card .cell-disp,
html[data-theme="light"] .spec-card .cell-disp { color: #1e293b; }

/* Display-mode raw-material link — looks like a link, no icon clutter. */
.repro-disp-link {
    color: #60a5fa !important;
    text-decoration: none !important;
    font-weight: 500;
}
.repro-disp-link:hover { text-decoration: underline !important; color: #93c5fd !important; }
html[data-theme="light"] .repro-disp-link { color: #1d4ed8 !important; }
html[data-theme="light"] .repro-disp-link:hover { color: #1e40af !important; }

/* Action-column icons (edit / save / delete). Force a consistent
   16×16 footprint so different source PNGs don't render at wildly
   different sizes (Save.png is much larger than imgEdit.png). */
.postupci-action-icon,
.postupci-action-cell input[type="image"] {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain;
    vertical-align: middle;
    cursor: pointer;
    border: 0;
    padding: 1px;
    margin-right: 2px;
    border-radius: 4px;
    transition: background .12s;
}
.postupci-action-icon:hover { background: #1e3a5f; }
html[data-theme="light"] .postupci-action-icon:hover { background: #dbeafe; }

/* Trailing-empty row:
   • Drag handle hidden (nothing to reorder).
   • Delete server-side Visible=false (nothing to delete yet).
   • Cancel hidden until the row goes is-dirty — so the moment the
     user starts typing, both the save floppy (existing rule) and
     the cancel icon reveal together. */
.postupci-card tbody tr.row-empty-trailing .postupci-drag,
.spec-card tbody tr.row-empty-trailing .postupci-drag {
    display: none !important;
}
.postupci-card tbody tr.row-empty-trailing:not(.is-dirty) .postupci-cancel-row,
.spec-card    tbody tr.row-empty-trailing:not(.is-dirty) .postupci-cancel-row {
    display: none !important;
}

/* Action-icon visibility per row state.
   • Display mode  → pencil only
   • Edit, clean   → cancel only (pencil hidden; save not yet needed)
   • Edit, dirty   → save + cancel (both shown so user can commit or
                     discard)
   The .row-edit class is set server-side from item.IsEditing; .is-dirty
   is set client-side on the first input/change event in the row. */
.postupci-save-row,
.postupci-cancel-row { display: none !important; }

.postupci-card tbody tr.row-edit .postupci-edit-toggle,
.spec-card tbody tr.row-edit .postupci-edit-toggle { display: none !important; }
.postupci-card tbody tr.row-edit .postupci-cancel-row,
.spec-card tbody tr.row-edit .postupci-cancel-row { display: inline-block !important; }
.postupci-card tbody tr.row-edit.is-dirty .postupci-save-row,
.spec-card tbody tr.row-edit.is-dirty .postupci-save-row { display: inline-block !important; }

/* Hidden top Save button — kept in DOM as the async-postback target
   for sortable's drag-end auto-save and the per-row Save icon, but
   never visible to the user. */
.postupci-hidden-save { display: none !important; }

/* ── Bulk-edit toolbar ───────────────────────────────────────────
   The .postupci-wrap container gets the .postupci-bulk-edit class
   while every row is in edit mode (code-behind toggles it). CSS
   below swaps which buttons are visible based on that class:
   default = Edit button shown; bulk-edit mode = Cancel + Save All
   shown and per-row action icons hidden. */
.postupci-bulk-cancel-btn,
.postupci-bulk-save-btn,
.postupci-add-item { display: none; }
.postupci-bulk-edit .postupci-bulk-edit-btn { display: none; }
.postupci-bulk-edit .postupci-bulk-cancel-btn,
.postupci-bulk-edit .postupci-bulk-save-btn { display: inline-flex; }
.postupci-bulk-edit .postupci-add-item { display: block; padding: 10px 0 4px; }

/* Centered "+ Add new item" button under the grid. Uses the same
   ctbl-btn-action chrome as other secondary actions. */
.postupci-add-item-btn {
    display: inline-flex !important;
    align-items: center;
    height: 32px;
    padding: 0 16px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}

/* Suppress the legacy `border: solid 1px #fff` from defaultTheme.css
   inside the modern dark-theme grid cards (Procedures, Packaging,
   Semiproduct spec). That border was a square white frame around the
   scroll viewport — it punched through the cards' rounded corners and
   left a broken-looking white outline (visible top-left + missing
   right edge thanks to overflow:auto). The card itself already gives
   the table a proper rounded frame, so we just drop the inner one. */
.postupci-card .grid-scroll,
.sas-card      .grid-scroll,
.spec-card     .grid-scroll {
    border: none;
}

/* The bulk-edit wrapper sits BETWEEN the outer .postupci-wrap /
   .sas-wrap / .spec-wrap (which used `display:flex; gap:Npx;` to
   space toolbar / info / grid / add-item) and the actual content. As
   a plain block-level Panel the wrapper would collapse that gap. We
   re-establish it here so the children stack with proper vertical
   breathing room in every control that adopts the bulk-edit pattern. */
.postupci-bulk-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* When the wrapper is in bulk-edit mode the ENTIRE action column
   (drag handle, edit pencil, save floppy, cancel ×, delete icon)
   collapses — the toolbar's Save All / Cancel buttons cover those
   actions globally. We hide the header and body cells of the
   action column so the column simply doesn't render. Covers all
   three grids that participate in the bulk-edit pattern:
   Procedures (.postupci), Packaging (.sastavnice-grid), and
   Semiproduct spec (.spec-grid — uses .spec-action-* classes). */
.postupci-bulk-edit th.postupci-action-h,
.postupci-bulk-edit td.postupci-action-cell,
.postupci-bulk-edit th.spec-action-h,
.postupci-bulk-edit td.spec-action-cell {
    display: none !important;
}

/* Print button — icon-only. The LinkButton renders as <a>, we set
   the printer glyph via background-image so no inline text is needed. */
.postupci-print-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    background: #1e293b url('icons/print-icon.png') center center no-repeat;
    background-size: 18px 18px;
    border: 1px solid #334155;
    border-radius: 7px;
    cursor: pointer;
    margin-left: 4px;
    text-decoration: none !important;
    transition: background-color .15s, border-color .15s;
    font-size: 0; /* swallow any whitespace */
}
.postupci-print-btn:hover  { background-color: #243348; border-color: #3a5070; }
.postupci-print-btn:active { background-color: #1a2535; }
html[data-theme="light"] .postupci-print-btn {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}
html[data-theme="light"] .postupci-print-btn:hover {
    background-color: #e2e8f0;
    border-color: #94a3b8;
}

/* Postupci toolbar — the export LinkButton renders as <a> inside a
   flex container; tighten its margin so it sits next to the other
   toolbar buttons rather than getting auto-pushed to the right. */
.postupci-actions .ctbl-btn-export { margin-left: 4px; }

/* ═══════════════════════════════════════════════════════════════════
   Production Standard tab (SastavniceEdit)
   Two-column layout: settings cards (label + images) on the left,
   version-history grid on the right. Stacks below the breakpoint.
   ═════════════════════════════════════════════════════════════════── */

.sas-ps {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sas-ps-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sas-ps-pdf-trigger { display: inline-flex; align-items: center; }
.sas-ps-hidden { display: none !important; }

/* Two-column grid: settings (1.4fr) + version history (1fr). */
.sas-ps-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
.sas-ps-col-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.sas-ps-col-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* Stack the columns below 1100px so the grid doesn't get cramped. */
@media (max-width: 1100px) {
    .sas-ps-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Modifier — both columns stretch to the same (tallest) height, and
   the single card inside each column fills its column vertically.
   Used by the Palletizing tab so the Images card lines up flush
   with the Shelf-life-&-notes card on its right. */
.sas-ps-grid--stretch { align-items: stretch; }
.sas-ps-grid--stretch .sas-ps-col-main,
.sas-ps-grid--stretch .sas-ps-col-side {
    display: flex;
    flex-direction: column;
}
.sas-ps-grid--stretch .sas-ps-col-main > .sas-ps-card,
.sas-ps-grid--stretch .sas-ps-col-side > .sas-ps-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.sas-ps-grid--stretch .sas-ps-card > .sas-ps-card-body {
    flex: 1 1 auto;
}
/* The image grid inside the Images card body fills the available
   vertical space, and the row stretches each tile to match. */
.sas-ps-grid--stretch .pal-image-grid {
    height: 100%;
    grid-auto-rows: 1fr;
}

/* Card chrome — same dark/light theming as .sim-grid-card. */
.sas-ps-card {
    background: #1e2a3a;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.sas-ps-card-title {
    background: #162032;
    border-bottom: 1px solid #2a3a50;
    padding: 10px 16px;
    color: #94a3b8;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
}
.sas-ps-card-body {
    padding: 14px 16px;
    color: #cbd5e1;
}
/* "Flush" body — used by the version-history grid so the table edge
   reaches the card's rounded corner. */
.sas-ps-card-body--flush { padding: 0; }

html[data-theme="light"] .sas-ps-card {
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(15,23,42,.08);
    border: 1px solid #e2e8f0;
}
html[data-theme="light"] .sas-ps-card-title {
    background: #f1f5f9;
    border-bottom-color: #e2e8f0;
    color: #475569;
}
html[data-theme="light"] .sas-ps-card-body { color: #1e293b; }

/* Field rows inside cards — let rm-field flow naturally with a tighter
   bottom margin than the page-level form rows. */
.sas-ps-fields .rm-field { margin-bottom: 12px; }
.sas-ps-fields .rm-field:last-child { margin-bottom: 0; }

/* ── Background-color picker ─────────────────────────────────────── */
.sas-ps-color-field { position: relative; }
.sas-ps-color-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.sas-ps-hex-input {
    width: 120px !important;
    font-family: monospace !important;
    text-transform: uppercase;
}
.sas-ps-color-swatch {
    width: 36px;
    height: 36px;
    border: 1px solid #334155;
    border-radius: 4px;
    cursor: pointer;
    background: #ffffff;
    flex-shrink: 0;
    transition: border-color .12s, transform .08s;
}
.sas-ps-color-swatch:hover { border-color: #60a5fa; }
.sas-ps-color-swatch:active { transform: scale(.96); }
html[data-theme="light"] .sas-ps-color-swatch { border-color: #cbd5e1; }
html[data-theme="light"] .sas-ps-color-swatch:hover { border-color: #2563eb; }

/* Floating popover anchored under the swatch. */
.sas-ps-color-popover {
    display: none;
    position: absolute;
    z-index: 10000;
    top: calc(100% + 6px);
    left: 0;
    width: 240px;
    background: #1e2a3a;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
    color: #cbd5e1;
}
html[data-theme="light"] .sas-ps-color-popover {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #1e293b;
    box-shadow: 0 8px 24px rgba(15,23,42,.18);
}
.sas-ps-color-popover-title {
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 13px;
}
.sas-ps-color-native {
    width: 100%;
    height: 40px;
    border: 1px solid #334155;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    background: transparent;
}
html[data-theme="light"] .sas-ps-color-native { border-color: #cbd5e1; }
.sas-ps-color-hex-row {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sas-ps-color-hex-row label { font-size: 12px; font-weight: 600; }
.sas-ps-color-hex {
    font-family: monospace;
    font-size: 14px;
    width: 90px;
    padding: 4px 6px;
    border: 1px solid #334155;
    border-radius: 4px;
    background: #0f1a27;
    color: #cbd5e1;
}
html[data-theme="light"] .sas-ps-color-hex {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #1e293b;
}
.sas-ps-color-preview {
    width: 28px;
    height: 28px;
    border: 1px solid #334155;
    border-radius: 4px;
    background: #ffffff;
}
html[data-theme="light"] .sas-ps-color-preview { border-color: #cbd5e1; }
.sas-ps-color-presets {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.sas-ps-color-presets .bcPresetColor {
    width: 24px;
    height: 24px;
    border: 1px solid #334155;
    border-radius: 3px;
    cursor: pointer;
    transition: transform .08s;
}
.sas-ps-color-presets .bcPresetColor:hover { transform: scale(1.1); }
html[data-theme="light"] .sas-ps-color-presets .bcPresetColor { border-color: #cbd5e1; }
.sas-ps-color-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}
.sas-ps-color-ok,
.sas-ps-color-cancel {
    padding: 5px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    border: 1px solid transparent;
    transition: background .12s;
}
.sas-ps-color-ok {
    background: #10b981;
    color: #fff;
    border-color: #059669;
}
.sas-ps-color-ok:hover { background: #059669; }
.sas-ps-color-cancel {
    background: #334155;
    color: #cbd5e1;
    border-color: #475569;
}
.sas-ps-color-cancel:hover { background: #3a4a63; }
html[data-theme="light"] .sas-ps-color-cancel {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}
html[data-theme="light"] .sas-ps-color-cancel:hover { background: #e2e8f0; }

/* ── Thumbnail tiles with inline upload + delete ─────────────────── */
.sas-ps-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.sas-ps-thumb {
    display: flex;
    flex-direction: column;
    background: #162032;
    border: 1px solid #2a3a50;
    border-radius: 8px;
    overflow: hidden;
    min-height: 200px;
}
html[data-theme="light"] .sas-ps-thumb {
    background: #f8fafc;
    border-color: #e2e8f0;
}
.sas-ps-thumb-cap {
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid #2a3a50;
    background: #1a2536;
    text-align: center;
}
html[data-theme="light"] .sas-ps-thumb-cap {
    color: #475569;
    background: #f1f5f9;
    border-bottom-color: #e2e8f0;
}

/* Image preview area — placeholder is always rendered but sits below
   the image. When the asp:Image is Visible="false" (no URL on the
   server-side entity), only the placeholder is visible. */
.sas-ps-thumb-body {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    min-height: 110px;
    position: relative;
}
.sas-ps-thumb-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5a7a9a;
    font-size: 12px;
    font-style: italic;
    pointer-events: none;
}
html[data-theme="light"] .sas-ps-thumb-placeholder { color: #94a3b8; }
.sas-ps-thumb-img {
    max-width: 100%;
    max-height: 140px;
    height: auto;
    border-radius: 4px;
    display: block;
    position: relative;
    z-index: 1; /* sit on top of the placeholder text */
    cursor: zoom-in;
    transition: transform .12s, box-shadow .12s;
}
.sas-ps-thumb-img:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
}

/* ═══════════════════════════════════════════════════════════════════
   Palletizing tab — image tiles + shelf-life form fields
   Re-uses the .sas-ps-card chrome from the Production Standard tab,
   plus a narrower image-tile grid that wraps the legacy
   ctrlImageUpload user control without modifying it.
   ═════════════════════════════════════════════════════════════════── */

.pal-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.pal-image-tile {
    display: flex;
    flex-direction: column;
    background: #162032;
    border: 1px solid #2a3a50;
    border-radius: 8px;
    overflow: hidden;
    min-height: 240px;
}
html[data-theme="light"] .pal-image-tile {
    background: #f8fafc;
    border-color: #e2e8f0;
}
.pal-image-cap {
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid #2a3a50;
    background: #1a2536;
    text-align: center;
}
html[data-theme="light"] .pal-image-cap {
    color: #475569;
    background: #f1f5f9;
    border-bottom-color: #e2e8f0;
}

/* When ctrlImageUpload is hosted in a Palletizing tile, the .iu-wrap
   fills the remaining vertical space, the image area grows to fill,
   and the .iu-panel becomes a real footer (border-top, background,
   full-width Upload pill + fixed-width trash) matching the Production
   Standard tile chrome. */
.pal-image-tile .iu-wrap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.pal-image-tile .iu-image-area {
    flex: 1 1 auto;
    margin: 0;
    padding: 10px;          /* breathing room around the image */
    min-height: 110px;
}
/* Image fills the (potentially much taller) tile body — aspect
   preserved via object-fit:contain so it never distorts. The
   !important's neutralize the legacy inline width="..." attribute
   that the Slika.Width / ImageWidth setter could still emit. */
.pal-image-tile .iu-img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
}
.pal-image-tile .iu-panel {
    display: flex !important;
    align-items: stretch;
    gap: 6px;
    flex-wrap: nowrap;
    padding: 8px;
    border-top: 1px solid #2a3a50;
    background: #1a2536;
}
.pal-image-tile .iu-pick-label {
    flex: 1 1 auto;
    justify-content: center;
}
.pal-image-tile .iu-delete-btn {
    flex: 0 0 auto;
}
html[data-theme="light"] .pal-image-tile .iu-panel {
    border-top-color: #e2e8f0;
    background: #f1f5f9;
}

/* ── ctrlImageUpload modern UI ──────────────────────────────────────
   Pill-shaped "Upload" label that wraps a hidden file input + a
   small red trash button. Picking a file auto-fires the upload via
   the hidden trigger (UploadImageButton) — same UX as the per-tile
   uploads on the Production Standard tab.

   Layout: image preview on top, actions row below — uses `order` so
   the visual sequence is image → buttons even though the markup has
   Panel1 first (server-side requirement: file inputs must precede
   their submit triggers). */
.iu-wrap {
    display: flex;
    flex-direction: column;
}
.iu-panel  { order: 2; }
.iu-image-area { order: 1; }
.iu-panel {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.iu-pick-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #334155;
    border-radius: 6px;
    background: #1e293b;
    color: #cbd5e1;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: background .12s, border-color .12s, color .12s;
    user-select: none;
}
.iu-pick-label:hover {
    background: #243348;
    border-color: #3a5070;
    color: #fff;
}
.iu-pick-icon { font-size: 14px; line-height: 1; }
.iu-pick-label input[type="file"] {
    /* sr-only — invisible but receives clicks via the wrapping label */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    opacity: 0;
}
/* Disabled state (Panel1.Enabled=false until EntityID > 0). */
.iu-panel[disabled] .iu-pick-label,
.iu-panel.aspNetDisabled .iu-pick-label {
    opacity: .5;
    cursor: not-allowed;
}

/* The legacy "Upload image" asp:Button is now an internal trigger,
   fired by the file input's onchange. The user never clicks it. */
.iu-upload-trigger { display: none !important; }

/* Square red trash icon — matches Production Standard's per-tile
   delete style. */
.iu-delete-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    margin: 0;
    border: 1px solid #334155;
    border-radius: 6px;
    background: #1e293b;
    cursor: pointer;
    text-decoration: none !important;
    transition: background .12s, border-color .12s;
    box-sizing: border-box;
}
.iu-delete-btn img {
    width: 16px;
    height: 16px;
    display: block;
}
.iu-delete-btn:hover {
    background: #2a1010;
    border-color: #b91c1c;
}

/* Image preview area — placeholder always rendered, image stacked
   on top via z-index. When the server hides the <img> (no file)
   the placeholder shows. */
.iu-image-area {
    position: relative;
    margin-top: 10px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.iu-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5a7a9a;
    font-size: 12px;
    font-style: italic;
    pointer-events: none;
}
.iu-img {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 180px;
    height: auto;
    border-radius: 4px;
    cursor: zoom-in;
    transition: transform .12s, box-shadow .12s;
    background: transparent;
    display: block;
}
.iu-img:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
}

/* Light theme — softer cool-gray everything. */
html[data-theme="light"] .iu-pick-label {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #475569;
}
html[data-theme="light"] .iu-pick-label:hover {
    background: #e0e7ff;
    border-color: #2563eb;
    color: #1e40af;
}
html[data-theme="light"] .iu-delete-btn {
    background: #ffffff;
    border-color: #cbd5e1;
}
html[data-theme="light"] .iu-delete-btn:hover {
    background: #fee2e2;
    border-color: #ef4444;
}
html[data-theme="light"] .iu-empty { color: #94a3b8; }

/* Packing Standard print row — sits at the bottom of the Packaging
   tab below ctrlSastavnice. Hosts a labeled "Print packing standard"
   button + the legacy hidden PDF download trigger. */
.sas-pack-print-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .06);
}
html[data-theme="light"] .sas-pack-print-row {
    border-top-color: rgba(15, 23, 42, .08);
}
.sas-pack-pdf-trigger { display: inline-flex; align-items: center; }

/* Labeled print button — printer icon + text, themed for both
   dark and light. Used by "Print packing standard" but generic
   enough to reuse anywhere a labeled icon-button is needed. */
.sas-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 7px;
    color: #cbd5e1 !important;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color .15s, border-color .15s, color .15s;
}
.sas-print-btn img {
    width: 18px;
    height: 18px;
    display: block;
}
.sas-print-btn:hover {
    background: #243348;
    border-color: #3a5070;
    color: #fff !important;
}
.sas-print-btn:active { background: #1a2535; }
html[data-theme="light"] .sas-print-btn {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569 !important;
}
html[data-theme="light"] .sas-print-btn:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
    color: #1e293b !important;
}

/* Form fields in the right-side card. */
.pal-textarea {
    width: 100% !important;
    box-sizing: border-box;
    resize: vertical;
}
.pal-shelf-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.pal-shelf-row .pal-narrow {
    flex: 1 1 130px;
    min-width: 130px;
}
.pal-narrow input[type="text"] {
    width: 100% !important;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════
   Semi-product specifications tab (ctrlSpecifikacijaPoluproizvoda)
   Toolbar + info bar + grid card — same look as the Production
   Standard / Palletizing tabs for visual consistency.
   ═════════════════════════════════════════════════════════════════── */

.spec-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.spec-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* Height normalization — primary/action have padding 8px (no border),
   secondary has padding 7px + 1px border (= same height), print has
   18px icon that bumps it ~2px taller. Lock all four to 36px so
   Cancel / Save All / Copy from last / Print line up evenly. */
.spec-toolbar > .ctbl-btn-primary,
.spec-toolbar > .ctbl-btn-action,
.spec-toolbar > .ctbl-btn-secondary,
.spec-toolbar > .sas-print-btn {
    height: 36px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
    box-sizing: border-box;
}
.spec-toolbar > .sas-print-btn img {
    width: 16px;
    height: 16px;
}

/* Info bar — sequence number, prepared by, approved by + Approve. */
.spec-info {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 12px 16px;
    background: #1e2a3a;
    border: 1px solid #2a3a50;
    border-radius: 8px;
}
html[data-theme="light"] .spec-info {
    background: #f8fafc;
    border-color: #e2e8f0;
}
.spec-info-item {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.spec-info-lbl {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    color: #94a3b8;
}
.spec-info-val {
    color: #cbd5e1;
    font-size: .95rem;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
html[data-theme="light"] .spec-info-lbl { color: #64748b; }
html[data-theme="light"] .spec-info-val { color: #1e293b; }
.spec-rb-input {
    width: 60px !important;
    text-align: center;
    font-weight: 700;
}
.spec-approve-cell { gap: 12px; }

/* Card wrapper for the spec grid — thin and minimal, no min-height
   like the bigger tile cards. */
.spec-card {
    border-radius: 12px;
}
.spec-card .sim-grid-wrap,
.spec-card.sim-grid-card .sim-grid-wrap {
    max-height: none !important;
    min-height: 0 !important;
    overflow: auto;
}

/* Spec grid — overrides defaultTheme.css's `.grid2 td/.grid2 th`
   (border:solid 1px gray; background:#fff; color:#000) with
   transparent borderless cells + a subtle horizontal row separator,
   themed for both dark and light. */
.spec-card .spec-grid,
.spec-card table.spec-grid {
    width: 100% !important;
    border: none !important;
    border-collapse: collapse !important;
    background: transparent !important;
    font-size: .9rem;
}
.spec-card .spec-grid th,
.spec-card .spec-grid tr th {
    background: transparent !important;
    color: #94a3b8 !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 12px 14px !important;
    text-align: left !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    white-space: nowrap;
}
.spec-card .spec-grid td,
.spec-card .spec-grid tr td {
    padding: 10px 14px !important;
    background: transparent !important;
    color: #cbd5e1 !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, .05) !important;
    vertical-align: middle !important;
    text-align: left !important;
}
.spec-card .spec-grid tbody tr:last-child td {
    border-bottom: none !important;
}
.spec-card .spec-grid tbody tr:hover td,
.spec-card .spec-grid tr:hover td {
    background: rgba(96, 165, 250, .06) !important;
    color: #cbd5e1 !important;
    cursor: default !important;
}
html[data-theme="light"] .spec-card .spec-grid th,
html[data-theme="light"] .spec-card .spec-grid tr th {
    color: #64748b !important;
    border-bottom-color: rgba(15, 23, 42, .08) !important;
}
html[data-theme="light"] .spec-card .spec-grid td,
html[data-theme="light"] .spec-card .spec-grid tr td {
    color: #1e293b !important;
    border-bottom-color: rgba(15, 23, 42, .06) !important;
}
html[data-theme="light"] .spec-card .spec-grid tbody tr:hover td,
html[data-theme="light"] .spec-card .spec-grid tr:hover td {
    background: rgba(37, 99, 235, .04) !important;
}

/* Column widths / alignment — bumped specificity so they win over
   the generic td rule above. */
.spec-card .spec-grid .spec-action-cell,
.spec-card .spec-grid .spec-action-h {
    width: 110px;
    white-space: nowrap;
    padding: 8px 10px !important;
    text-align: left !important;
}
.spec-card .spec-grid .spec-sn-cell,
.spec-card .spec-grid .spec-sn-h {
    width: 44px;
    text-align: center !important;
    color: #94a3b8 !important;
    font-weight: 600 !important;
}
html[data-theme="light"] .spec-card .spec-grid .spec-sn-cell { color: #475569 !important; }
.spec-card .spec-grid .spec-text-cell { width: auto; }

/* Text inputs inside the grid fill the cell width and inherit theme
   colors instead of the legacy white-on-black look. */
.spec-input {
    width: 100% !important;
    box-sizing: border-box;
    padding: 6px 10px !important;
    background: #0f1a27;
    border: 1px solid #334155;
    border-radius: 4px;
    color: #cbd5e1;
    font-size: .9rem;
    transition: border-color .12s, background .12s;
}
.spec-input:focus {
    outline: none;
    border-color: #60a5fa;
    background: #15243a;
}
html[data-theme="light"] .spec-input {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #1e293b;
}
html[data-theme="light"] .spec-input:focus {
    border-color: #2563eb;
    background: #ffffff;
}

/* The Save button is hidden but stays in DOM as the postback target
   for the auto-save flow (any spec-input `change` triggers it). The
   AddNewRowButton wrapper is also hidden — new rows appear via the
   same auto-save → BindGrid → EnsureTrailingEmptyRow loop. */
.spec-save-trigger,
.spec-add-hidden { display: none !important; }

/* The "no data" banner if the legacy code ever flips it visible. */
.spec-empty-banner {
    margin: 0;
    color: #94a3b8;
    font-size: 1rem;
    text-align: center;
}

/* ── Shared delete-confirm modal ────────────────────────────────────
   Themed replacement for window.confirm(). Hidden by default; opened
   by the global confirmDeleteAction(target, message) helper in the
   master page. Click outside the dialog or press Esc to cancel; Enter
   confirms. */
.cdm-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 100050;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: cdmFade .12s ease-out;
}
.cdm-modal.open { display: flex; }
@keyframes cdmFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.cdm-dialog {
    background: #1e2a3a;
    border: 1px solid #2a3a50;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
    padding: 22px 24px 18px;
    width: 100%;
    max-width: 380px;
    color: #cbd5e1;
    text-align: center;
    animation: cdmPop .14s ease-out;
}
@keyframes cdmPop {
    from { transform: scale(.94); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
html[data-theme="light"] .cdm-dialog {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #1e293b;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
}
.cdm-icon {
    width: 56px;
    height: 56px;
    line-height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: rgba(245, 158, 11, .15);
    color: #f59e0b;
    font-size: 30px;
    font-weight: 700;
}
html[data-theme="light"] .cdm-icon {
    background: #fef3c7;
    color: #b45309;
}
.cdm-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 6px;
}
.cdm-msg {
    font-size: .92rem;
    color: #94a3b8;
    margin-bottom: 18px;
    line-height: 1.4;
}
html[data-theme="light"] .cdm-msg { color: #475569; }
.cdm-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.cdm-btn {
    padding: 8px 18px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    min-width: 90px;
}
.cdm-btn-cancel {
    background: #334155;
    color: #cbd5e1;
    border-color: #475569;
}
.cdm-btn-cancel:hover { background: #3a4a63; }
html[data-theme="light"] .cdm-btn-cancel {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}
html[data-theme="light"] .cdm-btn-cancel:hover { background: #e2e8f0; }
.cdm-btn-ok {
    background: #dc2626;
    color: #ffffff;
    border-color: #b91c1c;
}
.cdm-btn-ok:hover { background: #b91c1c; }
.cdm-btn-ok:focus-visible {
    outline: 2px solid #fca5a5;
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   Calculation tab (ctrlKalkulacija)
   Toolbar + info chip + read-mostly grid with bold total in footer.
   ═════════════════════════════════════════════════════════════════── */

/* ═════════════════════════════════════════════════════════════════════
   KompletiSastavniceEdit — Proizvodi / Repromaterijal sub-grids.
   Same visual grammar as ctrlPostupci/ctrlSastavnice: a small toolbar
   with a primary Save button + cost summary, then a rounded grid card
   with a sticky bottom-left "+" add-row action.
   ═════════════════════════════════════════════════════════════════════ */
.kse-noentity {
    display: block;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: rgba(245, 158, 11, .12);
    border: 1px solid rgba(245, 158, 11, .35);
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    color: #fbbf24;
    font-size: .95rem;
    font-weight: 600;
}
html[data-theme="light"] .kse-noentity {
    background: rgba(245, 158, 11, .10);
    border-color: rgba(245, 158, 11, .35);
    color: #92400e;
}

.kse-grid-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kse-toolbar {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.kse-cost {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 14px;
    background: #162032;
    border: 1px solid #2a3a50;
    border-radius: 8px;
}
html[data-theme="light"] .kse-cost {
    background: #f8fafc;
    border-color: #e2e8f0;
}
.kse-cost-lbl {
    color: #94a3b8;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
html[data-theme="light"] .kse-cost-lbl { color: #64748b; }
.kse-cost-val {
    color: #60a5fa;
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
html[data-theme="light"] .kse-cost-val { color: #2563eb; }

/* Grid card — reuses the existing .sim-grid-card visual shell. */
.kse-grid-card {
    padding-bottom: 0;
}
/* Bottom-left "Add row" footer inside the grid card */
.kse-grid-footer {
    display: flex;
    padding: 10px 16px;
    background: #162032;
    border-top: 1px solid #2a3a50;
}
html[data-theme="light"] .kse-grid-footer {
    background: #f8fafc;
    border-top-color: #e2e8f0;
}
.kse-addrow-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: #2563eb !important;
    color: #fff !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    cursor: pointer;
    padding: 0 !important;
    line-height: 1 !important;
    box-shadow: 0 1px 3px rgba(37,99,235,.35);
    transition: background .12s, box-shadow .12s;
    -webkit-appearance: none; appearance: none;
}
.kse-addrow-btn:hover {
    background: #1d4ed8 !important;
    box-shadow: 0 2px 6px rgba(37,99,235,.5);
}

/* "..." picker button in grid cells — small, neutral, sits next to a
   shifra/barcode TextBox. */
.kse-pick-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 26px;
    margin-left: 4px;
    border-radius: 5px;
    border: 1px solid #2a3a50;
    background: #0f1a27;
    color: #94a3b8;
    font-size: 1rem; line-height: 1;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.kse-pick-btn:hover {
    background: #1e2a3a; color: #cbd5e1; border-color: #3a5070;
}
html[data-theme="light"] .kse-pick-btn {
    background: #fff; color: #475569; border-color: #d5cfc4;
}
html[data-theme="light"] .kse-pick-btn:hover {
    background: #f3e9d5; color: #1e293b; border-color: #b8afa0;
}

.calc-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.calc-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Info chip showing who calculated and when. */
.calc-info {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 10px 16px;
    background: #1e2a3a;
    border: 1px solid #2a3a50;
    border-radius: 8px;
}
html[data-theme="light"] .calc-info {
    background: #f8fafc;
    border-color: #e2e8f0;
}
.calc-info-item {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}
.calc-info-lbl {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    color: #94a3b8;
}
.calc-info-val {
    color: #cbd5e1;
    font-size: .95rem;
    font-weight: 500;
}
html[data-theme="light"] .calc-info-lbl { color: #64748b; }
html[data-theme="light"] .calc-info-val { color: #1e293b; }

/* Card wrapper */
.calc-card { border-radius: 12px; }
.calc-card .sim-grid-wrap,
.calc-card.sim-grid-card .sim-grid-wrap {
    max-height: none !important;
    min-height: 0 !important;
    overflow: auto;
}

/* Grid styling — same approach as .spec-grid: bumped specificity to
   beat defaultTheme.css's `.grid2` borders and forced black/white. */
.calc-card .calc-grid,
.calc-card table.calc-grid {
    width: 100% !important;
    border: none !important;
    border-collapse: collapse !important;
    background: transparent !important;
    font-size: .9rem;
}
.calc-card .calc-grid th,
.calc-card .calc-grid tr th {
    background: transparent !important;
    color: #94a3b8 !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 12px 14px !important;
    text-align: left !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    white-space: nowrap;
}
.calc-card .calc-grid td,
.calc-card .calc-grid tr td {
    padding: 10px 14px !important;
    background: transparent !important;
    color: #cbd5e1 !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, .05) !important;
    vertical-align: middle !important;
    text-align: left !important;
}
.calc-card .calc-grid tbody tr:hover td,
.calc-card .calc-grid tr:hover td {
    background: rgba(96, 165, 250, .06) !important;
    color: #cbd5e1 !important;
    cursor: default !important;
}
html[data-theme="light"] .calc-card .calc-grid th,
html[data-theme="light"] .calc-card .calc-grid tr th {
    color: #64748b !important;
    border-bottom-color: rgba(15, 23, 42, .08) !important;
}
html[data-theme="light"] .calc-card .calc-grid td,
html[data-theme="light"] .calc-card .calc-grid tr td {
    color: #1e293b !important;
    border-bottom-color: rgba(15, 23, 42, .06) !important;
}
html[data-theme="light"] .calc-card .calc-grid tbody tr:hover td,
html[data-theme="light"] .calc-card .calc-grid tr:hover td {
    background: rgba(37, 99, 235, .04) !important;
}

/* Column-specific tweaks. */
.calc-card .calc-grid .calc-h-type {
    font-weight: 600 !important;
    color: #94a3b8 !important;
}
html[data-theme="light"] .calc-card .calc-grid .calc-h-type {
    color: #64748b !important;
}
.calc-card .calc-grid .calc-h-sn {
    width: 50px;
    text-align: center !important;
}
.calc-card .calc-grid .calc-num {
    font-variant-numeric: tabular-nums;
    text-align: right !important;
}
.calc-card .calc-grid .calc-value {
    font-weight: 600 !important;
}

/* Editable price input. */
.calc-card .calc-grid .calc-price-cell {
    text-align: right !important;
    width: 110px;
}
.calc-price-input {
    width: 90px !important;
    text-align: right;
    box-sizing: border-box;
    padding: 6px 10px !important;
    background: #0f1a27;
    border: 1px solid #334155;
    border-radius: 4px;
    color: #cbd5e1;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
    transition: border-color .12s, background .12s;
}
.calc-price-input:focus {
    outline: none;
    border-color: #60a5fa;
    background: #15243a;
}
html[data-theme="light"] .calc-price-input {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #1e293b;
}
html[data-theme="light"] .calc-price-input:focus {
    border-color: #2563eb;
}

/* Footer total — bold, slightly tinted background, no row hover. */
.calc-card .calc-grid tfoot td,
.calc-card .calc-grid tr.calc-footer td,
.calc-card .calc-grid .calc-footer td {
    background: rgba(96, 165, 250, .08) !important;
    color: #e2e8f0 !important;
    font-weight: 700 !important;
    font-size: .95rem !important;
    border-top: 2px solid rgba(96, 165, 250, .35) !important;
    border-bottom: none !important;
    padding: 14px !important;
}
html[data-theme="light"] .calc-card .calc-grid tfoot td,
html[data-theme="light"] .calc-card .calc-grid tr.calc-footer td,
html[data-theme="light"] .calc-card .calc-grid .calc-footer td {
    background: rgba(37, 99, 235, .06) !important;
    color: #1e293b !important;
    border-top-color: rgba(37, 99, 235, .25) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Production "Start order" pages (NalogStart / NalogKompletiStart)
   Touch-friendly operator screen: product image + order metadata in
   a big card, then a large green START button at the bottom.
   ═════════════════════════════════════════════════════════════════── */

.ns-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 16px;
}

.ns-toolbar {
    display: flex;
    align-items: center;
}
.ns-cancel-btn { padding: 8px 18px !important; }

/* Header card — image left, metadata right. Stacks below 720 px. */
.ns-card {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: 32px;
    padding: 24px 28px;
    background: #1e2a3a;
    border: 1px solid #2a3a50;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
    align-items: center;
}
html[data-theme="light"] .ns-card {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}
@media (max-width: 720px) {
    .ns-card { grid-template-columns: 1fr; }
}

.ns-card-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #162032;
    border-radius: 10px;
    overflow: hidden;
    min-height: 200px;
    aspect-ratio: 1 / 1;
}
html[data-theme="light"] .ns-card-image { background: #f8fafc; }

/* "No image" placeholder — always rendered absolute-positioned behind
   the <img>. When the image is hidden (empty src OR 404 → onerror
   sets display:none) the placeholder shows through cleanly. */
.ns-card-image .ns-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5a7a9a;
    font-size: 1rem;
    font-weight: 600;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: .06em;
    pointer-events: none;
}
html[data-theme="light"] .ns-card-image .ns-empty { color: #94a3b8; }

.ns-product-img {
    max-width: 100%;
    max-height: 260px;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 6px;
    position: relative;
    z-index: 1;             /* sit on top of the placeholder when shown */
    background: transparent;
}
/* Empty-src belt-and-braces — when ASP.NET emits <img src=""> because
   no slika was found, hide it via CSS (onerror handles 404s for valid
   URLs). */
.ns-product-img:not([src]),
.ns-product-img[src=""],
.ns-product-img[src$="/"] { display: none; }

/* Metadata column — generous spacing so values are scannable from
   across the room (the operator's typical use case). */
.ns-card-meta {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ns-meta-row {
    display: grid;
    grid-template-columns: minmax(160px, 200px) 1fr;
    gap: 16px;
    align-items: baseline;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.ns-meta-row:last-child { border-bottom: none; padding-bottom: 0; }
html[data-theme="light"] .ns-meta-row { border-bottom-color: rgba(15, 23, 42, .08); }

.ns-meta-label {
    color: #94a3b8;
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
html[data-theme="light"] .ns-meta-label { color: #64748b; }

.ns-meta-value {
    color: #e2e8f0;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.25;
    word-break: break-word;
}
html[data-theme="light"] .ns-meta-value { color: #0f172a; }

.ns-meta-name { font-size: 1.6rem; }
.ns-meta-qty {
    color: #60a5fa;
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
}
html[data-theme="light"] .ns-meta-qty { color: #2563eb; }

/* Start button — full-width, big, green, deliberate. The kind of
   button you can hit with gloves on. */
.ns-start-btn {
    display: block;
    width: 100%;
    padding: 24px 32px !important;
    background: linear-gradient(180deg, #16a34a 0%, #15803d 100%) !important;
    color: #ffffff !important;
    border: 1px solid #14532d !important;
    border-radius: 14px !important;
    font-size: 2rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(22, 163, 74, .35);
    transition: transform .08s, box-shadow .12s, background .15s;
}
.ns-start-btn:hover {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
    box-shadow: 0 6px 24px rgba(22, 163, 74, .5);
}
.ns-start-btn:active {
    transform: scale(.98);
    box-shadow: 0 2px 10px rgba(22, 163, 74, .35);
}

/* ── Multi-button action row (Mijesanje2: Završetak + Kontrola) ──
   Same proportions as .ns-start-btn — same padding, same font size,
   same border radius — only the colour changes. Two buttons line up
   side by side on wide screens, stack on narrow. */
.ns-actions {
    display: flex; gap: 16px; flex-wrap: wrap;
}
.ns-action-btn {
    display: block;
    flex: 1 1 320px;
    padding: 24px 32px !important;
    color: #ffffff !important;
    border-radius: 14px !important;
    font-size: 2rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    cursor: pointer !important;
    transition: transform .08s, box-shadow .12s, background .15s !important;
    -webkit-appearance: none; appearance: none;
}
.ns-action-btn:active { transform: scale(.98); }

/* Završetak — green, same palette as .ns-start-btn so the operator
   workflow stays visually consistent (start → finish are both green). */
.ns-end-btn {
    background: linear-gradient(180deg, #16a34a 0%, #15803d 100%) !important;
    border: 1px solid #14532d !important;
    box-shadow: 0 4px 18px rgba(22, 163, 74, .35);
}
.ns-end-btn:hover {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
    box-shadow: 0 6px 24px rgba(22, 163, 74, .5);
}

/* Kontrola kvalitete — amber, "in progress" state. */
.ns-quality-btn {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%) !important;
    border: 1px solid #92400e !important;
    box-shadow: 0 4px 18px rgba(245, 158, 11, .35);
}
.ns-quality-btn:hover {
    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%) !important;
    box-shadow: 0 6px 24px rgba(245, 158, 11, .5);
}

/* ═══════════════════════════════════════════════════════════════════
   Mijesanje2 — operator screen for confirming mixing steps. Uses
   the same visual language as NalogStart: clean card layout, big
   action buttons, generous touch spacing. The product header is
   rendered by ctrlProizvod2 (os-info-grid). The bottom action row
   has Završetak (red) and Kontrola kvalitete (amber).
   ═══════════════════════════════════════════════════════════════════ */

.mj-page {
    display: flex; flex-direction: column;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 16px;
}
.mj-toolbar { display: flex; align-items: center; }
.mj-cancel-btn { padding: 8px 18px !important; }

/* Validation banner — replaces window.alert() for Provjera errors. */
.mj-toast {
    display: block;
    padding: 14px 20px;
    background: rgba(239, 68, 68, .14);
    border: 1px solid rgba(239, 68, 68, .4);
    border-left: 4px solid #ef4444;
    border-radius: 8px;
    color: #fca5a5;
    font-size: 1rem;
    font-weight: 600;
}
html[data-theme="light"] .mj-toast {
    background: rgba(220, 38, 38, .08);
    border-color: rgba(220, 38, 38, .35);
    color: #b91c1c;
}

/* Grid card — wraps the gridview in a rounded, shadowed container
   matching .ns-card / .os-grid-card style. */
.mj-grid-card {
    background: #1e2a3a;
    border: 1px solid #2a3a50;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
    overflow: hidden;
}
html[data-theme="light"] .mj-grid-card {
    background: #f5efe6;
    border-color: #e8e2d6;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}

/* Grid styling — neutralises the legacy `gridRow2`/`gridAltRow2`
   classes (30 px font, gray background) from defaultTheme.css. */
.mj-grid { width: 100%; border-collapse: collapse; }
.mj-grid th {
    padding: 14px 16px !important;
    text-align: left !important;
    font-size: .857rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    color: #5a7a9a !important;
    background: #162032 !important;
    border: none !important;
    border-bottom: 2px solid #2a3a50 !important;
    white-space: nowrap !important;
}
.mj-grid tbody tr,
.mj-grid tbody tr.gridRow2,
.mj-grid tbody tr.gridAltRow2 {
    background: none !important;
    background-color: transparent !important;
    color: inherit !important;
    font-size: 1rem !important;
    border: none !important;
}
.mj-grid tbody tr > td {
    padding: 14px 16px !important;
    border: none !important;
    border-bottom: 1px solid #243040 !important;
    vertical-align: middle !important;
    color: #cbd5e1 !important;
    background: none !important;
    font-size: 1rem !important;
    text-align: left !important;
}
.mj-grid tbody tr:last-child > td { border-bottom: none !important; }
.mj-grid tbody tr:hover > td { background: #243050 !important; }
.mj-grid tbody tr > td[align="center"] { text-align: center !important; }
.mj-grid tbody tr > td[align="right"]  { text-align: right  !important; }
.mj-grid tbody tr > td a:link,
.mj-grid tbody tr > td a:visited { color: #60a5fa !important; text-decoration: none !important; }

html[data-theme="light"] .mj-grid th {
    background: #e8e2d6 !important;
    color: #64748b !important;
    border-bottom-color: #d5cfc4 !important;
}
html[data-theme="light"] .mj-grid tbody tr > td {
    color: #1e293b !important;
    border-bottom-color: #e8e2d6 !important;
}
html[data-theme="light"] .mj-grid tbody tr:hover > td { background: #ede7db !important; }
html[data-theme="light"] .mj-grid tbody tr > td a:link,
html[data-theme="light"] .mj-grid tbody tr > td a:visited { color: #2563eb !important; }

/* Cell content accents */
.mj-grid .mj-rb {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 32px; padding: 0 10px;
    border-radius: 999px;
    background: rgba(96, 165, 250, .14);
    color: #93c5fd;
    font-weight: 700; font-size: .95rem;
    border: 1px solid rgba(96, 165, 250, .35);
}
html[data-theme="light"] .mj-grid .mj-rb {
    background: rgba(37, 99, 235, .10);
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, .35);
}
.mj-grid .mj-code {
    font: 600 .9rem ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .02em;
    color: #94a3b8;
}
html[data-theme="light"] .mj-grid .mj-code { color: #475569; }
.mj-grid .mj-name { font-weight: 600; }
.mj-grid .mj-qty {
    font-variant-numeric: tabular-nums;
    font-weight: 700; font-size: 1.1rem;
    color: #60a5fa;
}
html[data-theme="light"] .mj-grid .mj-qty { color: #2563eb; }
.mj-grid .mj-opis { font-size: .9rem; line-height: 1.5; color: #94a3b8; }
html[data-theme="light"] .mj-grid .mj-opis { color: #475569; }

/* Confirm button — image kept large for touch, plus optional date
   label shown next to it once confirmed. */
.mj-grid .mj-confirm-btn {
    width: 56px; height: 56px; cursor: pointer;
    border-radius: 10px;
    transition: transform .08s, filter .15s;
}
.mj-grid .mj-confirm-btn:hover { filter: brightness(1.15); }
.mj-grid .mj-confirm-btn:active { transform: scale(.95); }
.mj-grid .mj-confirm-date {
    display: block; margin-top: 4px;
    color: #94a3b8; font-size: .85rem; font-weight: 600;
}
html[data-theme="light"] .mj-grid .mj-confirm-date { color: #475569; }

/* Bottom action row — big buttons, side by side, wrap on narrow
   screens. */
.mj-actions {
    display: flex; gap: 16px; flex-wrap: wrap;
    margin-top: 8px;
}
.mj-action-btn {
    flex: 1 1 280px;
    padding: 20px 28px !important;
    color: #fff !important;
    border: none;
    border-radius: 14px !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    cursor: pointer !important;
    transition: transform .08s, box-shadow .12s, background .15s;
    -webkit-appearance: none; appearance: none;
}
.mj-action-btn:active { transform: scale(.98); }

.mj-action-end {
    background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%) !important;
    border: 1px solid #7f1d1d !important;
    box-shadow: 0 4px 18px rgba(220, 38, 38, .35) !important;
}
.mj-action-end:hover {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
    box-shadow: 0 6px 24px rgba(220, 38, 38, .5) !important;
}

.mj-action-quality {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%) !important;
    border: 1px solid #92400e !important;
    box-shadow: 0 4px 18px rgba(245, 158, 11, .35) !important;
}
.mj-action-quality:hover {
    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%) !important;
    box-shadow: 0 6px 24px rgba(245, 158, 11, .5) !important;
}

/* ── Click-to-zoom lightbox ─────────────────────────────────────── */
.sas-ps-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .88);
    z-index: 100000;
    align-items: center;
    justify-content: center;
    padding: 40px;
    cursor: zoom-out;
    animation: psLightboxFade .15s ease-out;
}
.sas-ps-lightbox.open { display: flex; }
.sas-ps-lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .6);
    background: #ffffff;
}
.sas-ps-lightbox-close {
    position: absolute;
    top: 14px;
    right: 22px;
    color: #fff;
    font-size: 36px;
    line-height: 1;
    font-weight: 300;
    cursor: pointer;
    user-select: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    transition: opacity .12s;
    opacity: .85;
}
.sas-ps-lightbox-close:hover { opacity: 1; }
@keyframes psLightboxFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Action row at the bottom of the tile: a styled "Upload" label that
   wraps the (visually hidden) <input type="file">, and a small delete
   icon. The whole label is clickable — picking a file triggers
   psPickImage() which fires an immediate postback. */
.sas-ps-thumb-actions {
    display: flex;
    gap: 6px;
    align-items: stretch;
    padding: 8px;
    border-top: 1px solid #2a3a50;
    background: #1a2536;
}
html[data-theme="light"] .sas-ps-thumb-actions {
    border-top-color: #e2e8f0;
    background: #f1f5f9;
}

.sas-ps-tile-upload {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #334155;
    border-radius: 6px;
    background: #1e293b;
    color: #cbd5e1;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: background .12s, border-color .12s, color .12s;
    user-select: none;
}
.sas-ps-tile-upload:hover {
    background: #243348;
    border-color: #3a5070;
    color: #fff;
}
.sas-ps-tile-upload-icon { font-size: 14px; line-height: 1; }
html[data-theme="light"] .sas-ps-tile-upload {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #475569;
}
html[data-theme="light"] .sas-ps-tile-upload:hover {
    background: #e0e7ff;
    border-color: #2563eb;
    color: #1e40af;
}

/* The native file input is invisible but still receives clicks
   because the wrapping <label> proxies them. Position:absolute keeps
   it from affecting layout. */
.sas-ps-tile-upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    opacity: 0;
}

/* Per-tile delete button — small red trash icon. */
.sas-ps-tile-del {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    padding: 6px !important;
    border: 1px solid #334155;
    border-radius: 6px;
    background: #1e293b;
    cursor: pointer;
    text-decoration: none !important;
    transition: background .12s, border-color .12s;
}
.sas-ps-tile-del:hover {
    background: #2a1010;
    border-color: #b91c1c;
}
.sas-ps-tile-del img {
    width: 16px;
    height: 16px;
    display: block;
    filter: brightness(.9);
}
html[data-theme="light"] .sas-ps-tile-del {
    background: #ffffff;
    border-color: #cbd5e1;
}
html[data-theme="light"] .sas-ps-tile-del:hover {
    background: #fee2e2;
    border-color: #ef4444;
}

/* ── Version-history grid styling (live inside .sas-ps-card) ─────────
   Specificity bumped to .sas-ps-card .sas-ps-history-grid so it wins
   over defaultTheme.css's `.grid2 td/.grid2 th` rules — those force
   `border: solid 1px gray` (the dark cell-borders), `background: #fff`
   and `color: #000` regardless of theme. We disable all cell borders,
   add only a subtle horizontal row separator, and let our card-themed
   colors come through. */
.sas-ps-card .sas-ps-history-grid,
.sas-ps-card table.sas-ps-history-grid {
    width: 100% !important;
    border: none !important;
    border-collapse: collapse !important;
    background: transparent !important;
    font-size: .9rem;
}
.sas-ps-card .sas-ps-history-grid th,
.sas-ps-card .sas-ps-history-grid tr th {
    background: transparent !important;
    color: #94a3b8 !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 12px 14px !important;
    text-align: left !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    white-space: nowrap;
}
.sas-ps-card .sas-ps-history-grid td,
.sas-ps-card .sas-ps-history-grid tr td {
    padding: 14px !important;
    background: transparent !important;
    color: #cbd5e1 !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, .05) !important;
    vertical-align: middle !important;
    text-align: left !important;
}
.sas-ps-card .sas-ps-history-grid tbody tr:last-child td {
    border-bottom: none !important;
}
.sas-ps-card .sas-ps-history-grid tbody tr:hover td,
.sas-ps-card .sas-ps-history-grid tr:hover td {
    background: rgba(96, 165, 250, .06) !important;
    color: #cbd5e1 !important;
    cursor: default !important;
}

/* Light-theme overrides — softer cool-gray everything. */
html[data-theme="light"] .sas-ps-card .sas-ps-history-grid th,
html[data-theme="light"] .sas-ps-card .sas-ps-history-grid tr th {
    color: #64748b !important;
    border-bottom-color: rgba(15, 23, 42, .08) !important;
}
html[data-theme="light"] .sas-ps-card .sas-ps-history-grid td,
html[data-theme="light"] .sas-ps-card .sas-ps-history-grid tr td {
    color: #1e293b !important;
    border-bottom-color: rgba(15, 23, 42, .06) !important;
}
html[data-theme="light"] .sas-ps-card .sas-ps-history-grid tbody tr:hover td,
html[data-theme="light"] .sas-ps-card .sas-ps-history-grid tr:hover td {
    background: rgba(37, 99, 235, .04) !important;
    color: #1e293b !important;
}

/* ── Polished Version History grid ──────────────────────────────── */

/* Column widths / cell-level styling — scoped under .sas-ps-card so
   the specificity beats the generic-td rule above (which forces
   text-align:left to override defaultTheme.css's centered cells). */
.sas-ps-card .sas-ps-history-grid .sas-ps-h-vcell {
    width: 60px;
    text-align: center !important;
    padding: 12px 8px !important;
}
.sas-ps-card .sas-ps-history-grid .sas-ps-h-meta   { width: 1%; white-space: nowrap; }
.sas-ps-card .sas-ps-history-grid .sas-ps-h-status { width: 1%; white-space: nowrap; }
.sas-ps-card .sas-ps-history-grid .sas-ps-h-actions{
    width: 140px;
    text-align: right !important;
    padding-right: 16px !important;
}

/* Row state — left edge in approved (green) / pending (amber).
   Specificity bumped so it survives the row-hover rule above. */
.sas-ps-card .sas-ps-history-grid tr.row-approved td:first-child {
    box-shadow: inset 3px 0 0 0 #10b981 !important;
}
.sas-ps-card .sas-ps-history-grid tr.row-pending td:first-child {
    box-shadow: inset 3px 0 0 0 #f59e0b !important;
}

/* Version badge — circular blue chip with the version number. */
.sas-ps-vbadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    background: #2563eb;
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 1px 3px rgba(37, 99, 235, .35);
}
html[data-theme="light"] .sas-ps-vbadge {
    background: #2563eb;
    box-shadow: 0 1px 3px rgba(37, 99, 235, .25);
}

/* Stacked date + user metadata cell. */
.sas-ps-h-date {
    font-size: .9rem;
    font-weight: 500;
    color: #cbd5e1;
    line-height: 1.3;
}
.sas-ps-h-date--sm { font-size: .78rem; color: #94a3b8; font-weight: 400; }
.sas-ps-h-user {
    font-size: .78rem;
    color: #94a3b8;
    line-height: 1.3;
}
html[data-theme="light"] .sas-ps-h-date { color: #1e293b; }
html[data-theme="light"] .sas-ps-h-date--sm { color: #64748b; }
html[data-theme="light"] .sas-ps-h-user { color: #64748b; }

/* Pending pill — subtle amber. */
.sas-ps-h-pending {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(245, 158, 11, .15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, .35);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.sas-ps-h-pending-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, .6);
    animation: psPulse 1.6s ease-out infinite;
}
@keyframes psPulse {
    0%   { box-shadow: 0 0 0 0    rgba(245, 158, 11, .6); }
    70%  { box-shadow: 0 0 0 6px  rgba(245, 158, 11, 0);  }
    100% { box-shadow: 0 0 0 0    rgba(245, 158, 11, 0);  }
}
html[data-theme="light"] .sas-ps-h-pending {
    background: #fef3c7;
    color: #92400e;
    border-color: #fcd34d;
}

/* Approved cell — green check + stacked user/date. */
.sas-ps-h-approved {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.sas-ps-h-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #10b981;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.sas-ps-h-approved-body { display: flex; flex-direction: column; }

/* Action row — Approve pill + PDF tile, both icon-aware. */
.sas-ps-h-action-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}
.sas-ps-approve-link {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: #10b981;
    color: #fff !important;
    border-radius: 4px;
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    transition: background .12s, transform .08s;
    border: 1px solid #059669;
}
.sas-ps-approve-link:hover { background: #059669; }
.sas-ps-approve-link:active { transform: scale(.97); }
.sas-ps-approve-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .25);
    font-size: 10px;
    line-height: 1;
}

/* PDF download — square tile mirroring the per-tile delete style. */
.sas-ps-pdf-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    border: 1px solid #334155;
    border-radius: 6px;
    background: #1e293b;
    cursor: pointer;
    text-decoration: none !important;
    transition: background .12s, border-color .12s;
}
.sas-ps-pdf-btn:hover {
    background: #2a1010;
    border-color: #b91c1c;
}
.sas-ps-pdf-btn img { width: 18px; height: 18px; display: block; }
html[data-theme="light"] .sas-ps-pdf-btn {
    background: #ffffff;
    border-color: #cbd5e1;
}
html[data-theme="light"] .sas-ps-pdf-btn:hover {
    background: #fee2e2;
    border-color: #ef4444;
}

/* First-cell extra left padding — clears the row-state inset shadow
   so the version badge isn't crowded against the green/amber edge. */
.sas-ps-card .sas-ps-history-grid th:first-child,
.sas-ps-card .sas-ps-history-grid td:first-child {
    padding-left: 16px !important;
}


/* ═══════════════════════════════════════════════════════
   Admin/OrgJedinica_Edit.aspx
   ═══════════════════════════════════════════════════════ */
        /* Pin the master-page scroll container to "always show
           scrollbar" so the available width doesn't change when
           switching between a short tab (no scrollbar) and a tall tab
           (scrollbar present). The master has `.content { overflow-y:
           auto !important; }`, so we have to match its specificity AND
           use !important to override. Without this, the .rm-tabs strip
           reflows by ~17px whenever the scrollbar toggles and the tab
           cards visibly rearrange. */
        .content { overflow-y: scroll !important; }

        /* Same widening + clipping pattern FinishedGoodsEdit /
           SastavniceEdit / KupciEdit / Dobavljaci_Edit use. The per-tab
           bleed pseudo is clipped by .oje-tabs { overflow:hidden }
           below — NOT by zeroing the page's padding-bottom. We DO need
           padding-bottom (88px) so the page can scroll past the fixed
           .rm-actions footer and the last rows of the form remain
           reachable. */
        .oje-page {
            max-width: 1600px !important;
            padding-bottom: 88px !important;
        }

        /* ── File-folder tab cards ────────────────────────────────────
           flex-wrap:wrap-reverse → first tab in markup lands bottom-left,
           overflow wraps UP. row-gap:0 keeps rows flush. The per-tab
           ::after pseudo paints a tall body in --tab-fill behind the
           form; --tab-fill is only set on .rm-tab.active so only the
           active tab's body is actually coloured. Section's #1e2a3a
           background matches the active fill → seamless merge. */
        .oje-page .rm-tabs {
            flex-wrap: wrap-reverse;
            row-gap: 0;
            position: relative;
            z-index: 0;
            /* overflow:hidden clips tab bleeds at strip's bottom edge. */
            overflow: hidden;
        }
        .oje-page .rm-tabs .rm-tab { position: relative; }
        .oje-page .rm-tabs .rm-tab::after {
            content: '';
            position: absolute;
            top: 100%; left: 0; right: 0;
            height: 9999px;
            background: var(--tab-fill, transparent);
            z-index: -1;
            pointer-events: none;
        }

        /* Section paints OVER the tab strip's stacking context so its
           opaque background covers any bleed below the strip. */
        .oje-page > .rm-section {
            position: relative;
            z-index: 1;
            margin-bottom: 0;
        }

/* ═══════════════════════════════════════════════════════
   Pages/Codebooks/FinishedGoodsEdit.aspx
   ═══════════════════════════════════════════════════════ */
    /* Page-scoped tweaks for the rm-* design system in FinishedGoodsEdit.
       17 tabs is a lot — let them wrap to multiple rows, and give each
       tab content pane the same body padding as SastavniceEdit's
       .rm-section-body. */
    /* Pin the master-page scroll container to "always show scrollbar"
       so the available width doesn't change when switching between a
       short tab (no scrollbar) and a tall tab (scrollbar present).
       The master has `.content { overflow-y: auto !important; }` so
       we have to match its specificity AND use !important to override.
       Without this, .fge-tabs flex-wrap:wrap-reverse reflows by ~17px
       whenever the scrollbar toggles and the tab cards visibly
       rearrange. */
    .content { overflow-y: scroll !important; }

    /* Wide enough that the 17 tabs fit in two rows on a normal
       desktop. Same max-width SastavniceEdit uses. width:100% (with
       box-sizing:border-box on the global rm-page) locks the page to
       the parent's content area so a wide child (a grid, a gallery,
       etc.) inside a tab can never push .fge-page itself wider —
       which would also shift the tab strip wrap. */
    .fge-page {
        width: 100%;
        max-width: 1600px;
        padding: 16px 20px 0;
        box-sizing: border-box;
    }

    /* Section sits ON TOP of the tab strip's stacking context — its
       opaque #1e2a3a background covers the per-tab bleed pseudos that
       extend 9999px downward from each tab's bottom. Without this z
       order, .fge-tabs (position:relative) paints AFTER the static
       .rm-section per the CSS painting algorithm and the bleeds bleed
       INTO the form area, which is the opposite of what we want.
       margin-bottom:0 overrides the global .rm-section's 16px margin
       so the .fge-page's overflow:hidden clip sits exactly at the
       form's bottom edge (not 16px below it). */
    .fge-section {
        min-height: 360px;
        position: relative;
        z-index: 1;
        margin-bottom: 0;
        /* min-width:0 + max-width:100% so a wide child inside any tab
           (e.g. a large grid in Composition, an image gallery in Images)
           can NEVER expand .fge-section past its flex-parent's width.
           Without min-width:0, a flex item's intrinsic minimum is its
           min-content which can exceed the parent → tab strip rewraps. */
        min-width: 0;
        max-width: 100%;
    }
    /* Same defensive lock on every tab pane: clip horizontal overflow
       so a wide table inside one tab can't push the section sideways. */
    .fge-page .rm-tab-content { min-width: 0; max-width: 100%; overflow-x: auto; }

    /* Bottom-up wrap: first tab in markup lands bottom-left, overflow
       wraps UP. Browser handles row distribution automatically — fills
       the bottom row to capacity, then the row above, then above that.
       (Default rm-tabs uses plain flex-wrap:wrap, top-to-bottom.)

       row-gap:0 = no visible band between rows. Combined with the
       :after bleed below, an active upper-row tab's colour extends
       straight down through the row(s) beneath it and into the form,
       like a real file-folder tab whose body sits behind the page.

       position:relative + z-index:0 establishes a stacking context so
       the per-tab ::after pseudos (z-index:-1 each) stay inside .fge-tabs
       and don't escape behind the page background. */
    .fge-tabs {
        flex-wrap: wrap-reverse;
        row-gap: 0;
        position: relative;
        z-index: 0;
        /* overflow:hidden clips the per-tab ::after bleed pseudos at
           the strip's bottom edge — they only fill the inter-row
           area inside the strip (the original design intent) and
           never extend down into the section's body. That means the
           bleed never reaches the section's rounded bottom-corner
           cutouts → no dark colour leaking through there. */
        overflow: hidden;
    }

    /* File-folder body — every tab gets a downward extension that lives
       behind sibling tabs and behind the form. Inactive tabs paint a
       transparent extension (invisible). The active tab paints with the
       --tab-fill colour the global rm-tab.active rule already sets, so
       its body bleeds visibly through the row-gap (0), through any
       lower-row tabs (which paint on top because z-index:-1 sits below
       them in the .fge-tabs stacking context), and down to the form
       area where the section's opaque background takes over. */
    .fge-tabs .rm-tab { position: relative; }
    .fge-tabs .rm-tab::after {
        content: '';
        position: absolute;
        top: 100%; left: 0; right: 0;
        height: 9999px;
        background: var(--tab-fill, transparent);
        z-index: -1;
        pointer-events: none;
    }
    .fge-page .rm-tab-content { display: none; padding: 16px 24px 20px; }
    .fge-page .rm-tab-content.active { display: block; }

    /* PIF documents grid (TabDocuments2) — was a raw <table class="grid2">.
       The rm-* design system doesn't have a built-in style for this
       legacy 4-column upload grid, so we re-implement a minimal modern
       look here. Defensive !important because .grid2 / .gridRow
       legacy CSS is heavy-handed. */
    .fge-pif-table {
        width: 100% !important;
        background: #0f2237 !important;
        border: 1px solid #2a5a84 !important;
        border-collapse: collapse !important;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 3px 14px rgba(0, 0, 0, .35);
        color: #d8ecff !important;
        font-size: .9rem;
    }
    html[data-theme="light"] .fge-pif-table {
        background: #f0f6fd !important; border-color: #b0cceb !important;
        color: #0f2237 !important; box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
    }
    .fge-pif-table > tbody > tr,
    .fge-pif-table > tbody > tr.gridRow,
    .fge-pif-table > tbody > tr.gridAltRow {
        background: none !important; background-color: transparent !important;
        color: inherit !important; border: none !important;
    }
    .fge-pif-table > tbody > tr > td {
        padding: 10px 14px !important;
        background: transparent !important; color: inherit !important;
        border: none !important; border-bottom: 1px solid #183452 !important;
        vertical-align: middle !important; text-align: left !important;
    }
    html[data-theme="light"] .fge-pif-table > tbody > tr > td { border-bottom-color: #c0d8ee !important; }
    .fge-pif-table > tbody > tr:last-child > td { border-bottom: none !important; }
    .fge-pif-table > tbody > tr:hover > td { background: rgba(20, 80, 140, .25) !important; }
    html[data-theme="light"] .fge-pif-table > tbody > tr:hover > td { background: #d8eaf9 !important; }
    .fge-pif-table > tbody > tr > td:first-child { font-weight: 600; color: #d8ecff !important; }
    html[data-theme="light"] .fge-pif-table > tbody > tr > td:first-child { color: #0f2237 !important; }
    .fge-pif-table a:link, .fge-pif-table a:visited { color: #60b8fa !important; text-decoration: none !important; font-weight: 600; }
    .fge-pif-table a:hover { color: #a5d8ff !important; }
    html[data-theme="light"] .fge-pif-table a:link,
    html[data-theme="light"] .fge-pif-table a:visited { color: #2563eb !important; }
    html[data-theme="light"] .fge-pif-table a:hover { color: #1e40af !important; }
    /* ── Packaging tab — rm-* layout overrides ──────────────────────
       Six dropdowns laid out 3 × 2 using the standard rm-row / rm-col1
       grid. The dropdown texts are long ("P1 (Bottles, Jars, Pumps,
       Caps, Cartons)" etc.) so we bump rm-col1's min-width here to
       give each cell breathing room, and let dropdowns fill their
       column width fully. */
    .fge-page .fge-pack { padding: 4px 0; }
    .fge-pack-title {
        font-size: 13px; font-weight: 700; letter-spacing: .06em;
        text-transform: uppercase; color: #3b82f6;
        padding: 4px 0 14px;
    }
    html[data-theme="light"] .fge-pack-title { color: #1d4ed8; }
    .fge-pack .rm-row { row-gap: 8px; }
    .fge-pack .rm-col1 { min-width: 240px; }
    .fge-pack .rm-field select,
    .fge-pack .rm-field input[type="text"] { width: 100%; }
    .fge-pack-actions {
        display: flex; justify-content: flex-start;
        margin-top: 18px;
        padding-top: 16px;
        border-top: 1px solid #2a5a84;
    }
    html[data-theme="light"] .fge-pack-actions { border-top-color: #c0d8ee; }

    /* PIF iframe-upload busy overlay — covers the table while a hidden
       upload/delete postback is in flight. .fge-pif-wrap is the
       positioned container; .fge-pif-busy is the absolute-fill
       overlay, hidden by default (inline style:display:none) and
       toggled by the JS helpers above. */
    .fge-pif-wrap { position: relative; }
    .fge-pif-busy {
        position: absolute; top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(15, 23, 42, 0.55);
        z-index: 100;
        display: flex; align-items: center; justify-content: center;
        flex-direction: column; gap: 14px;
        border-radius: 10px;
        backdrop-filter: blur(1.5px);
    }
    .fge-pif-busy-spinner {
        width: 48px; height: 48px;
        border: 4px solid rgba(255, 255, 255, .25);
        border-top-color: #60a5fa;
        border-radius: 50%;
        animation: fgePifSpin .8s linear infinite;
    }
    .fge-pif-busy-text {
        color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .3px;
    }
    @keyframes fgePifSpin { to { transform: rotate(360deg); } }
    html[data-theme="light"] .fge-pif-busy { background: rgba(15, 23, 42, .35); }

    /* PIF actions cell — reuses the .sas-ps-thumb-actions + .sas-ps-tile-upload +
       .sas-ps-tile-del visual system from SastavniceEdit's Production
       standard tab so the Upload/Delete pair feels familiar across the
       app. .sas-ps-thumb-actions was designed for the FOOT of a thumb
       tile (border-top + tinted background) — inside this PIF table
       it's a row-level cell, so we strip the chrome and let the table
       row's own bg show through. The actions cell width is capped so
       the document name + current-file columns get the breathing room. */
    .fge-pif-table > tbody > tr > td.fge-pif-actions-cell {
        width: 1%;        /* shrink-to-fit — name column takes the rest */
        white-space: nowrap;
        padding: 8px 14px !important;
    }
    .fge-pif-table .fge-pif-actions {
        padding: 0 !important;
        border-top: none !important;
        background: transparent !important;
        justify-content: flex-end;
    }
    /* Hidden native file input still occupies a 1x1 absolute box (see
       .sas-ps-tile-upload input[type="file"]); make sure it doesn't
       inherit the table's text colour rules and stays invisible. */
    .fge-pif-table .sas-ps-tile-upload input[type="file"] { color: transparent !important; }

    /* ── TabPodaci — modernised 4-column field grid ──────────────────
       The fields used to live inside <table>…<td vertical-align:top>
       and floating-label <div>s. They've been converted to the rm-row /
       rm-col1 / rm-field / rm-lbl system that SastavniceEdit uses. The
       four columns map straight onto rm-col1 (each = 1/4 width) and the
       fields stack vertically inside each. */
    .fge-page .rm-tab-content > .rm-section-body { padding: 4px 0; }

    /* Each rm-field already styles label+input on its own; the only
       page-level tweak is to keep the multi-line textboxes from feeling
       cramped — bump their min-height a touch. */
    .fge-page .rm-field textarea {
        min-height: 64px;
    }

    /* (Removed per-page .fge-page .sas-flag pill-chip override —
       it conflicted with the global .sas-flag pattern in Codme.css
       that the other modernized edit pages (SastavniceEdit,
       KompletiSastavniceEdit, ReproSastavniceEdit) use. Active /
       Stock-report checkboxes here now look identical to those
       pages.) */
    .fge-page .sas-flag input[type="checkbox"] { margin: 0; cursor: pointer; }

    /* Categorical pickers — same look as SastavniceEdit's Kategorija
       typeahead pickers. Markup is rm-field + rm-supplier-picker (input
       + results dropdown) backed by a single JSON payload, identical to
       the rmBuildPicker pattern from SastavniceEdit. */
    .fge-page .fge-choosers > .rm-field { margin-bottom: 12px; }

    /* "Last change" is a label-only readonly. Push it to the bottom of
       its column so it doesn't crowd the Stock-report flag above it. */
    .fge-page .fge-lastchange { margin-top: auto; opacity: .85; }

    /* Action bar — lives OUTSIDE the tab-content stack so it renders on
       every main tab. The global .rm-actions rule pins it to the bottom
       of the viewport (position:fixed, bottom:0). We reserve room at the
       bottom of the page so the last bit of form content isn't hidden
       under the fixed bar when the user scrolls all the way down. */
    .fge-page { padding-bottom: 88px; }

    /* ── TabPodaci accordion ────────────────────────────────────────
       The Basic-data tab was getting too dense with 4 columns of fields
       so we split it into 4 boxes stacked vertically (Basic / Logistic /
       Categories / Additional). Each box has a clickable header (title +
       "Always open" toggle + caret) that expands/collapses its body.
       Basic data is open by default. Per-user preferences (which boxes
       are toggled "Always open" / which are closed) are persisted in
       localStorage under the key `fge.boxPrefs` — see the activation
       script at the bottom of this page. */
    .fge-accordion {
        display: flex; flex-direction: column; gap: 10px;
        padding: 10px 0 4px;
    }
    .fge-box {
        background: #0f1b2d;
        border: 1px solid #243349;
        border-radius: 8px;
        overflow: hidden;
    }
    html[data-theme="light"] .fge-box {
        background: #fff;
        border-color: #d1d9e3;
    }
    .fge-box-header {
        display: flex; align-items: center; gap: 14px;
        height: 38px; padding: 0 14px;
        background: #14233a;
        cursor: pointer;
        user-select: none;
        transition: background .12s ease;
    }
    .fge-box-header:hover { background: #1a2c47; }
    html[data-theme="light"] .fge-box-header {
        background: #eef2f7;
    }
    html[data-theme="light"] .fge-box-header:hover { background: #e2e8f0; }
    .fge-box-title {
        flex: 1;
        font-size: 13px; font-weight: 700;
        color: #cbd5e1;
        letter-spacing: .2px;
    }
    html[data-theme="light"] .fge-box-title { color: #1e293b; }
    .fge-box-always-open {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: 11px; font-weight: 500;
        color: #94a3b8;
        cursor: pointer;
        user-select: none;
    }
    .fge-box-always-open input[type="checkbox"] {
        margin: 0; cursor: pointer;
    }
    html[data-theme="light"] .fge-box-always-open { color: #475569; }
    .fge-box-caret {
        display: inline-flex; align-items: center; justify-content: center;
        width: 18px; height: 18px;
        font-size: 10px;
        color: #94a3b8;
        transform: rotate(-90deg);
        transition: transform .15s ease;
    }
    html[data-theme="light"] .fge-box-caret { color: #475569; }
    .fge-box--open > .fge-box-header > .fge-box-caret { transform: rotate(0deg); }

    /* Box body: hidden by default, shown when parent .fge-box has
       .fge-box--open. Padding mirrors the previous .fge-subtab-content
       breathing room. */
    .fge-box-body {
        display: none;
        padding: 14px 14px 16px;
    }
    .fge-box--open > .fge-box-body { display: block; }

    /* Last-change inline next to the Active flag — small subdued line. */
    .fge-lastchange-inline {
        display: inline-flex; align-items: center; gap: 8px;
        margin-left: 16px;
        font-size: .82rem;
        color: #94a3b8;
    }
    .fge-lastchange-inline .rm-lbl { margin: 0; font-size: 11px; }
    html[data-theme="light"] .fge-lastchange-inline { color: #64748b; }

    /* Promote any .btnMali button inside the new tabs to look like the
       modern primary button (same as ctbl-btn-primary). Save Packaging,
       any small action button uses btnMali in this page. */
    .fge-page .btnMali, .fge-page .btnMali:link, .fge-page .btnMali:visited {
        display: inline-flex !important; align-items: center !important;
        height: 34px !important; padding: 0 18px !important;
        background: #2563eb !important; border: none !important; border-radius: 6px !important;
        color: #fff !important; font-size: .85rem !important; font-weight: 600 !important;
        cursor: pointer !important; width: auto !important; text-decoration: none !important;
        transition: background .12s ease;
    }
    .fge-page .btnMali:hover { background: #3b82f6 !important; }

/* ═══════════════════════════════════════════════════════
   Pages/Development/SastavniceEdit.aspx
   ═══════════════════════════════════════════════════════ */
        /* Pin the master-page scroll container to "always show
           scrollbar" so the available width doesn't change when
           switching between a short tab (no scrollbar) and a tall tab
           (scrollbar present). The master has `.content { overflow-y:
           auto !important; }`, so we have to match its specificity AND
           use !important to override. Without this, the .rm-tabs strip
           reflows by ~17px whenever the scrollbar toggles and the tab
           cards visibly rearrange. */
        .content { overflow-y: scroll !important; }

        /* Widen the page beyond the default rm-page max-width (1100px)
           so all 8 tabs and the multi-column form rows fit comfortably
           on standard desktop screens.

           The per-tab bleed pseudo is clipped by .sas-tabs
           { overflow:hidden } below — NOT by zeroing the page's
           padding-bottom. We DO need padding-bottom (88px) so the page
           can scroll past the fixed .rm-actions footer and the last
           rows of the form remain reachable; without it the bottom of
           the Basic tab is trapped under the action bar. */
        .sas-page {
            max-width: 1600px !important;
            padding-bottom: 88px !important;
        }

        /* ── File-folder tab cards ────────────────────────────────────
           Bottom-up wrap (first tab in markup lands bottom-left, overflow
           wraps UP) + per-tab body that bleeds straight down behind the
           form. Section's #1e2a3a background matches the active tab's
           --tab-fill so the active tab visually merges with the form. */
        .sas-page .rm-tabs {
            flex-wrap: wrap-reverse;
            row-gap: 0;
            position: relative;
            z-index: 0;
            /* overflow:hidden clips the tab bleed pseudos at the strip's
               bottom edge — they fill the inter-row area inside the
               strip but never extend down into the section's body. */
            overflow: hidden;
        }
        .sas-page .rm-tabs .rm-tab { position: relative; }
        .sas-page .rm-tabs .rm-tab::after {
            content: '';
            position: absolute;
            top: 100%; left: 0; right: 0;
            height: 9999px;
            background: var(--tab-fill, transparent);
            z-index: -1;
            pointer-events: none;
        }

        /* Section sits ON TOP of the tab strip's stacking context — its
           opaque #1e2a3a background covers the bleed pseudos below it.
           margin-bottom:0 overrides the global .rm-section 16px margin
           so the wrapper's overflow:hidden clip sits exactly at the
           form's bottom edge. */
        .sas-page > .rm-section {
            position: relative;
            z-index: 1;
            margin-bottom: 0;
        }

        /* SG-mismatch banner inside the Basic-data tab. */
        .sg-warning {
            background: #fff7e6; border: 1px solid #f59e0b;
            border-radius: 6px; padding: 12px 16px; margin: 12px 0;
            color: #78350f; font-size: 1rem;
        }
        .sg-warning-value { font-weight: 700; }
        html[data-theme="dark"] .sg-warning {
            background: #2a1f0a; border-color: #b45309; color: #fcd34d;
        }

        /* Read-only FL textbox shown in the page header — keep it visually
           subdued so it reads as an identifier, not an editable field. */
        .rm-input-readonly {
            background: transparent !important;
            border: none !important;
            color: inherit !important;
            font-weight: 700;
            padding: 2px 0 !important;
            width: auto !important;
        }

        /* "Open product" deep-link chip next to the product picker
           label. Visible only when a product is selected (toggled by
           updateProizvodViewLink in JS). Renders as a compact blue
           pill so it reads as a clickable action, not part of the
           label text. target=_blank → opens FinishedGoodsEdit in a
           new browser tab without losing this page's edit state. */
        .sas-view-link {
            display: inline-flex; align-items: center;
            margin-left: 10px;
            padding: 1px 8px;
            background: #2563eb;
            color: #fff !important;
            border-radius: 4px;
            font-size: 11px; font-weight: 600;
            text-decoration: none !important;
            transition: background .12s ease;
            vertical-align: middle;
        }
        .sas-view-link:hover { background: #1d4ed8; color: #fff !important; }
        html[data-theme="light"] .sas-view-link { background: #2563eb; }
        html[data-theme="light"] .sas-view-link:hover { background: #1d4ed8; }

        /* Status flag chips — Active / Main inline next to Maceration.
           No bottom padding here — vertical alignment is handled by the
           parent row's align-items:center so all three items line up
           with the Maceration <input> midline (not its label-top edge). */
        /* (Removed duplicate .sas-flag override — global pill-chip
           rule near top of Codme.css now handles all theme colours.) */

        /* Tight row mixing a narrow input with inline flag chips —
           centered vertically so the Maceration input and the two
           checkbox chips share the same midline. */
        .sas-row-tight {
            align-items: center;
            gap: 24px;
            /* Restore vertical breathing room to the row itself — the
               inner .rm-field has margin-bottom zeroed (for midline
               alignment) so the row needs its own bottom margin to keep
               the next .rm-row (Categories) from sitting on top of the
               Maceration input. */
            margin-bottom: 16px;
        }
        /* Maceration field stops its inner default margin so its visual
           midline matches the checkboxes' midline exactly. */
        .sas-row-tight .rm-field { margin-bottom: 0; }

        /* Narrow numeric field — sized to roughly the label width
           ("Maceration (days)" ≈ 140px) so the input doesn't sprawl. */
        .sas-narrow-field { flex: 0 0 auto; }
        .sas-narrow-field input[type=text],
        .sas-narrow-field input[type=number] {
            max-width: 140px !important; width: 140px !important;
        }

        /* Gas / Plin section — surrounded by a soft fieldset frame so the
           gas-related inputs read as a discrete sub-block. The legend at
           the top sits over the top border like a real <fieldset>. */
        .sas-gas-section {
            position: relative;
            border: 1px solid #2a3a50;
            border-radius: 8px;
            padding: 18px 18px 6px;
            margin: 18px 0 14px;
        }
        .sas-gas-title {
            position: absolute;
            top: -10px; left: 16px;
            background: #1e2a3a;
            padding: 0 8px;
            font-size: .786rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: #3b82f6;
        }
        html[data-theme="light"] .sas-gas-section { border-color: #cbd5e1; }
        html[data-theme="light"] .sas-gas-title {
            background: #ffffff; color: #1d4ed8;
        }

        /* "Approved: …" status sits inline with the Save / Delete /
           Approve buttons. Use a soft tone so the text doesn't compete
           with the Approve button itself for attention. */
        .sas-approved-info {
            display: inline-flex; align-items: center; gap: 8px;
            margin-left: 16px;
            font-size: .929rem;
            color: #94a3b8;
        }
        .sas-approved-info .rm-lbl { margin: 0; }
        html[data-theme="light"] .sas-approved-info { color: #64748b; }

        /* Action bar — keep ctrlButtons in the natural flow at the end of
           the Basic-data tab (not pinned bottom). The base .rm-actions
           rule positions:fixed for an edit-page footer; we override that
           to inline so it doesn't overlap the tab content. */
        .sas-actions {
            position: static !important;
            margin-top: 16px;
            border-radius: 10px;
            background: #162032;
            border: 1px solid #2a3a50;
            box-shadow: none;
        }
        html[data-theme="light"] .sas-actions {
            background: #f1f5f9;
            border-color: #cbd5e1;
        }

/* ═══════════════════════════════════════════════════════
   Pages/Development/ReproSastavniceEdit.aspx
   ═══════════════════════════════════════════════════════ */
        /* Page-level — same widening + bottom-padding SastavniceEdit uses
           so the rm-actions footer doesn't overlap form content. */
        .sas-page {
            max-width: 1600px !important;
            padding-bottom: 88px !important;
        }

        /* (Removed duplicate .sas-flag override — global pill-chip
           rule near top of Codme.css now handles all theme colours.) */
        .sas-row-tight { align-items: center; gap: 24px; }
        .sas-row-tight .rm-field { margin-bottom: 0; }

        /* Action bar — inline at the end of the Basic-data tab (override
           the base .rm-actions position:fixed footer). Same treatment as
           SastavniceEdit so the visual matches. */
        .sas-actions {
            position: static !important;
            margin-top: 16px;
            border-radius: 10px;
            background: #162032;
            border: 1px solid #2a3a50;
            box-shadow: none;
        }
        html[data-theme="light"] .sas-actions {
            background: #f1f5f9;
            border-color: #cbd5e1;
        }

        /* Narrow the "Cost" readonly column so it doesn't visually
           dominate the row when paired with the wide repromaterijal picker. */
        .kse-narrow-cost { flex: 0 0 220px; }

/* ═══════════════════════════════════════════════════════
   Pages/Codebooks/RawmaterialEdit.aspx
   ═══════════════════════════════════════════════════════ */
    /* ── FinishedGoodsEdit-style tab strip (file-folder, wrap-reverse) ──
       Same design as FinishedGoodsEdit: 18+ tabs wrap to multiple rows,
       the FIRST tab in markup lands in the bottom-left (closest to the
       form), and overflow wraps UPWARD row by row. Active tab's body
       bleeds through the inter-row gaps so it looks like a file-folder
       tab whose body sits behind the page. */
    .content { overflow-y: scroll !important; }

    .rme-page {
        width: 100%;
        max-width: 1600px;
        padding: 16px 20px 0;
        box-sizing: border-box;
        padding-bottom: 88px;
    }

    .rme-section {
        min-height: 360px;
        position: relative;
        z-index: 1;
        margin-bottom: 0;
        min-width: 0;
        max-width: 100%;
    }
    .rme-page .rm-tab-content { min-width: 0; max-width: 100%; overflow-x: auto; }

    .rme-tabs {
        flex-wrap: wrap-reverse;
        row-gap: 0;
        position: relative;
        z-index: 0;
        overflow: hidden;
    }
    .rme-tabs .rm-tab { position: relative; }
    .rme-tabs .rm-tab::after {
        content: '';
        position: absolute;
        top: 100%; left: 0; right: 0;
        height: 9999px;
        background: var(--tab-fill, transparent);
        z-index: -1;
        pointer-events: none;
    }
    .rme-page .rm-tab-content { display: none; padding: 16px 24px 20px; }
    .rme-page .rm-tab-content.active { display: block; }

    /* ── Basic-tab accordion (FinishedGoodsEdit pattern) ─────────────
       Replaces the previous flat field grid with 4 collapsible boxes
       (Basic / Classification / Categories / Tolerances). Each box
       has a header (title + Always-open toggle + caret) and a body
       holding the matching fields. Basic data is open by default;
       user toggles others open/closed by clicking the header.
       "Always open" forces a box open on every load — preference
       persisted in localStorage under `rme.boxPrefs`. */
    .rme-accordion {
        display: flex; flex-direction: column; gap: 10px;
        padding: 10px 0 4px;
    }
    .rme-box {
        background: #0f1b2d;
        border: 1px solid #243349;
        border-radius: 8px;
        overflow: hidden;
    }
    html[data-theme="light"] .rme-box {
        background: #fff;
        border-color: #d1d9e3;
    }
    .rme-box-header {
        display: flex; align-items: center; gap: 14px;
        height: 38px; padding: 0 14px;
        background: #14233a;
        cursor: pointer;
        user-select: none;
        transition: background .12s ease;
    }
    .rme-box-header:hover { background: #1a2c47; }
    html[data-theme="light"] .rme-box-header { background: #eef2f7; }
    html[data-theme="light"] .rme-box-header:hover { background: #e2e8f0; }
    .rme-box-title {
        flex: 1;
        font-size: 13px; font-weight: 700;
        color: #cbd5e1;
        letter-spacing: .2px;
    }
    html[data-theme="light"] .rme-box-title { color: #1e293b; }
    .rme-box-always-open {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: 11px; font-weight: 500;
        color: #94a3b8;
        cursor: pointer;
        user-select: none;
    }
    .rme-box-always-open input[type="checkbox"] { margin: 0; cursor: pointer; }
    html[data-theme="light"] .rme-box-always-open { color: #475569; }
    .rme-box-caret {
        display: inline-flex; align-items: center; justify-content: center;
        width: 18px; height: 18px;
        font-size: 10px;
        color: #94a3b8;
        transform: rotate(-90deg);
        transition: transform .15s ease;
    }
    html[data-theme="light"] .rme-box-caret { color: #475569; }
    .rme-box--open > .rme-box-header > .rme-box-caret { transform: rotate(0deg); }
    .rme-box-body { display: none; padding: 14px 14px 16px; }
    .rme-box--open > .rme-box-body { display: block; }

    /* Last-change inline pill — small footer in Basic-data box. */
    .rme-lastchange-inline {
        display: inline-flex; align-items: center; gap: 8px;
        margin-top: 8px;
        font-size: .82rem;
        color: #94a3b8;
    }
    .rme-lastchange-inline .rm-lbl { margin: 0; font-size: 11px; }

    /* ── Alternatives tab table tweaks ──────────────────────────────
       Code column reads as a monospace identifier and indicates the
       row is clickable; empty-state message centred so it reads as
       intentional copy rather than missing data. */
    .rme-alt-code {
        font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
        font-weight: 600;
        color: #93c5fd;
    }
    html[data-theme="light"] .rme-alt-code { color: #1d4ed8; }
    .ctbl-grid tbody tr { cursor: pointer; }
    .rme-alt-empty {
        padding: 28px 24px;
        text-align: center;
        font-style: italic;
        color: #94a3b8;
    }
    html[data-theme="light"] .rme-alt-empty { color: #64748b; }

/* ═══════════════════════════════════════════════════════
   Pages/Development/RawMaterial_Edit.aspx
   ═══════════════════════════════════════════════════════ */
    /* Page-specific overrides only — all rm-* base styles come from Codme.css */
    .rm-col1 { min-width: 240px; }
    .rm-col2 { min-width: 340px; }
    .rm-col3 { min-width: 460px; }

/* ═══════════════════════════════════════════════════════
   Pages/Purchase/Dobavljaci_Edit.aspx
   ═══════════════════════════════════════════════════════ */
        /* Pin the master-page scroll container to "always show
           scrollbar" so the available width doesn't change when
           switching between a short tab (no scrollbar) and a tall tab
           (scrollbar present). The master has `.content { overflow-y:
           auto !important; }`, so we have to match its specificity AND
           use !important to override. Without this, the .rm-tabs strip
           reflows by ~17px whenever the scrollbar toggles and the tab
           cards visibly rearrange. */
        .content { overflow-y: scroll !important; }

        /* Same widening + clipping pattern FinishedGoodsEdit /
           SastavniceEdit / KupciEdit use. The per-tab bleed pseudo is
           clipped by .dob-tabs { overflow:hidden } below — NOT by
           zeroing the page's padding-bottom. We DO need padding-bottom
           (88px) so the page can scroll past the fixed .rm-actions
           footer and the last rows of the form remain reachable;
           without it the bottom of the tab is trapped under the bar. */
        .dob-page {
            max-width: 1600px !important;
            padding-bottom: 88px !important;
        }

        /* ── File-folder tab cards ────────────────────────────────────
           flex-wrap:wrap-reverse → first tab in markup lands bottom-left,
           overflow wraps UP. row-gap:0 keeps rows flush. Each tab gets
           a tall ::after body that paints in --tab-fill behind the form;
           --tab-fill is only set on .rm-tab.active so only the active
           tab's body actually appears coloured. The .rm-section's
           #1e2a3a background matches the active fill → seamless merge
           between the active tab and the content area below. */
        .dob-page .rm-tabs {
            flex-wrap: wrap-reverse;
            row-gap: 0;
            position: relative;
            z-index: 0;
            /* overflow:hidden clips tab bleeds at strip's bottom edge. */
            overflow: hidden;
        }
        .dob-page .rm-tabs .rm-tab { position: relative; }
        .dob-page .rm-tabs .rm-tab::after {
            content: '';
            position: absolute;
            top: 100%; left: 0; right: 0;
            height: 9999px;
            background: var(--tab-fill, transparent);
            z-index: -1;
            pointer-events: none;
        }

        /* Section paints OVER the tab strip's stacking context so its
           opaque background covers any bleed below the strip. */
        .dob-page > .rm-section {
            position: relative;
            z-index: 1;
            margin-bottom: 0;
        }

/* ═══════════════════════════════════════════════════════
   Pages/Sales/KupciEdit.aspx
   ═══════════════════════════════════════════════════════ */
        /* Pin the master-page scroll container to "always show
           scrollbar" so the available width doesn't change when
           switching between a short tab (no scrollbar) and a tall tab
           (scrollbar present). The master has `.content { overflow-y:
           auto !important; }`, so we have to match its specificity AND
           use !important to override. Without this, the .rm-tabs strip
           reflows by ~17px whenever the scrollbar toggles and the tab
           cards visibly rearrange. */
        .content { overflow-y: scroll !important; }

        /* Widen + clip-bleed setup, same pattern FinishedGoodsEdit /
           SastavniceEdit use. The per-tab bleed pseudo is clipped by
           .kup-tabs { overflow:hidden } below — NOT by zeroing the
           page's padding-bottom. We DO need padding-bottom (88px) so
           the page can scroll past the fixed .rm-actions footer and
           the last rows of the form remain reachable; without it the
           bottom of the Basic tab is trapped under the action bar. */
        .kup-page {
            max-width: 1600px !important;
            padding-bottom: 88px !important;
        }

        /* ── File-folder tab cards ────────────────────────────────────
           flex-wrap:wrap-reverse → first tab in markup lands bottom-left,
           overflow wraps UP. row-gap:0 keeps rows flush. The per-tab
           ::after pseudo paints a tall body in --tab-fill behind the
           form; --tab-fill is only set on .rm-tab.active so only the
           active tab's body is actually coloured. Section's #1e2a3a
           background matches the active fill → seamless merge. */
        .kup-page .rm-tabs {
            flex-wrap: wrap-reverse;
            row-gap: 0;
            position: relative;
            z-index: 0;
            /* overflow:hidden clips tab bleeds at strip's bottom edge —
               bleeds fill inter-row area inside strip but don't extend
               down into the section's body. */
            overflow: hidden;
        }
        .kup-page .rm-tabs .rm-tab { position: relative; }
        .kup-page .rm-tabs .rm-tab::after {
            content: '';
            position: absolute;
            top: 100%; left: 0; right: 0;
            height: 9999px;
            background: var(--tab-fill, transparent);
            z-index: -1;
            pointer-events: none;
        }

        /* Section paints OVER the tab strip's stacking context so its
           opaque #1e2a3a bg covers the bleed pseudos. margin-bottom:0
           overrides the global .rm-section 16px margin so the page's
           overflow:hidden clip sits exactly at the form's bottom edge. */
        .kup-page > .rm-section {
            position: relative;
            z-index: 1;
            margin-bottom: 0;
        }

/* ═══════════════════════════════════════════════════════
   Pages/ProductionPlanning/Simulacija_Edit.aspx
   ═══════════════════════════════════════════════════════ */
    /* Empiric column — clickable pill that copies the suggested
       mixture weight (derived from completed historical batches) into
       the Weight field next to it. Muted state (.sim-empiric-link--empty)
       for products that don't have any completed batches yet. */
    .sim-empiric-link, .sim-empiric-link:link, .sim-empiric-link:visited {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 999px;
        background: rgba(96, 165, 250, .15);
        color: #93c5fd !important;
        font-size: .82rem;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition: background .12s ease, color .12s ease;
    }
    .sim-empiric-link:hover {
        background: rgba(96, 165, 250, .28);
        color: #d8ecff !important;
        text-decoration: none;
    }
    .sim-empiric-link--empty,
    .sim-empiric-link--empty:link,
    .sim-empiric-link--empty:visited {
        background: rgba(148, 163, 184, .15) !important;
        color: #94a3b8 !important;
        font-weight: 500;
        font-style: italic;
        cursor: default;
    }
    .sim-empiric-link--empty:hover {
        background: rgba(148, 163, 184, .15) !important;
        color: #94a3b8 !important;
    }
    html[data-theme="light"] .sim-empiric-link,
    html[data-theme="light"] .sim-empiric-link:link,
    html[data-theme="light"] .sim-empiric-link:visited {
        background: rgba(37, 99, 235, .10);
        color: #1e40af !important;
    }
    html[data-theme="light"] .sim-empiric-link:hover {
        background: rgba(37, 99, 235, .20);
        color: #0f2237 !important;
    }
    html[data-theme="light"] .sim-empiric-link--empty,
    html[data-theme="light"] .sim-empiric-link--empty:link,
    html[data-theme="light"] .sim-empiric-link--empty:visited {
        background: rgba(100, 116, 139, .15) !important;
        color: #64748b !important;
    }

    /* ── Column-header help badge ─────────────────────────────────────
       Small circular "?" next to a header label. On hover (or keyboard
       focus, for accessibility) reveals an absolutely-positioned popover
       explaining the column's calculation. Pure CSS — no JS state. */
    .sim-help {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px; height: 16px;
        margin-left: 6px;
        border-radius: 999px;
        background: rgba(96, 165, 250, .18);
        color: #93c5fd;
        font-size: 11px;
        font-weight: 700;
        cursor: help;
        position: relative;
        user-select: none;
        vertical-align: middle;
        outline: none;
    }
    .sim-help:hover, .sim-help:focus { background: rgba(96, 165, 250, .35); color: #d8ecff; }
    html[data-theme="light"] .sim-help { background: rgba(37, 99, 235, .15); color: #1e40af; }
    html[data-theme="light"] .sim-help:hover,
    html[data-theme="light"] .sim-help:focus { background: rgba(37, 99, 235, .25); color: #0f2237; }

    .sim-help-tip {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        left: 50%;
        transform: translateX(-50%);
        width: 320px;
        padding: 12px 14px;
        background: #0f1a27;
        border: 1px solid #2a3a50;
        border-radius: 8px;
        box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
        color: #d8ecff;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.5;
        text-transform: none;
        letter-spacing: normal;
        text-align: left;
        white-space: normal;
        z-index: 10000;
        cursor: auto;
    }
    .sim-help-tip code {
        font-family: Consolas, "Courier New", monospace;
        font-size: 11px;
        background: rgba(96, 165, 250, .10);
        color: #93c5fd;
        padding: 1px 5px;
        border-radius: 3px;
    }
    .sim-help-tip strong { color: #93c5fd; }
    .sim-help-tip em { color: #cbd5e1; font-style: normal; font-weight: 600; }
    /* Hover OR keyboard focus reveals the popover. */
    .sim-help:hover .sim-help-tip,
    .sim-help:focus .sim-help-tip,
    .sim-help:focus-within .sim-help-tip { display: block; }

    html[data-theme="light"] .sim-help-tip {
        background: #ffffff;
        border-color: #cbd5e1;
        color: #0f172a;
        box-shadow: 0 6px 24px rgba(15, 23, 42, .18);
    }
    html[data-theme="light"] .sim-help-tip code {
        background: rgba(37, 99, 235, .10);
        color: #1e40af;
    }
    html[data-theme="light"] .sim-help-tip strong { color: #1e40af; }
    html[data-theme="light"] .sim-help-tip em { color: #475569; }

/* ═══════════════════════════════════════════════════════
   Pages/Production/NalogProizvodnja2.aspx
   ═══════════════════════════════════════════════════════ */
/* ── Scroll fix: this page uses a multi-panel layout, not the full-screen ctbl mode ── */
.sidebar + .content:has(> .ctbl-host) { overflow-y: auto !important; }
.ctbl-card { overflow: visible !important; }

/* ── Sticky header (toolbar + stats bar) ── */
.np2-sticky-hd {
    position: sticky;
    top: 0;
    z-index: 200;
    background: #1e2a3a;
}
html[data-theme="light"] .np2-sticky-hd { background: #e4e9f1; }

/* ── NalogProizvodnja2 ──────────────────────────────────────────────────── */

/* Toolbar */
.np2-toolbar { flex-wrap: wrap; gap: 12px; }

/* ── Normalize all toolbar buttons to the same height ── */
.np2-toolbar .ctbl-btn-exit {
    height: 36px;
    padding: 0 18px;
    line-height: 36px;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: .85rem;
    font-weight: 600;
}

.np2-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid #475569;
    border-radius: 8px;
    color: #94a3b8;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
    transition: background .13s, color .13s, border-color .13s;
}
.np2-print-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.np2-print-btn:hover { background: #1e293b; color: #e2e8f0; border-color: #64748b; }

/* Stats bar — scan input left, production numbers right */
.np2-stats-bar {
    display: flex;
    align-items: stretch;
    padding: 0 20px;
    border-bottom: 1px solid #2d3f52;
    min-height: 60px;
    flex-shrink: 0;
}
/* Scan input + Add button — leftmost */
.np2-scan-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 20px;
    border-right: 1px solid #2d3f52;
    flex-shrink: 0;
}
/* Stat chips — right of scan bar */
.np2-stats-chips {
    display: flex;
    align-items: stretch;
}
.np2-scan-bar .np2-unit-input {
    flex: none;
    min-width: 200px;
}
.np2-stat-chip {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    padding: 0 20px;
    border-right: 1px solid #2d3f52;
}
.np2-stat-chip-last { border-right: none; }
.np2-stat-lbl {
    font-size: .67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #64748b;
    line-height: 1;
}
.np2-stat-val {
    font-size: 1.35rem;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1;
}
.np2-stat-speed { color: #93c5fd; font-size: 1.05rem; }
/* (Product image moved into ctrlProizvod2 as a clickable thumbnail
   with a lightbox — see .os-info-imgtile / .os-info-thumb in Codme.css.) */

/* ── View filter (next to production speed) ─────────────────────── */
.np2-view-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    margin-left: auto;
    border-left: 1px solid #2d3f52;
    flex-shrink: 0;
}
.np2-view-select {
    height: 28px !important;
    padding: 0 26px 0 10px !important;
    background-color: #1a3352 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2360b8fa'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 9px 5px !important;
    border: 1px solid #4a7ea0 !important;
    border-radius: 6px !important;
    color: #c8e0f4 !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
}
.np2-view-select:hover { background-color: #1f3d60 !important; border-color: #60b8fa !important; }
.np2-view-select:focus { border-color: #60b8fa !important; outline: 2px solid rgba(96,184,250,.25) !important; outline-offset: 1px !important; }
.np2-hide-done-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
/* Toggle switch */
.np2-toggle {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    flex-shrink: 0;
}
.np2-toggle input[type="checkbox"] {
    opacity: 0 !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    z-index: 1;
}
.np2-toggle-thumb {
    position: absolute;
    inset: 0;
    background: #334155;
    border-radius: 9px;
    transition: background .18s;
    pointer-events: none;
}
.np2-toggle-thumb::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    left: 2px;
    top: 2px;
    background: #64748b;
    border-radius: 50%;
    transition: transform .18s, background .18s;
}
.np2-toggle input[type="checkbox"]:checked + .np2-toggle-thumb           { background: #2563eb; }
.np2-toggle input[type="checkbox"]:checked + .np2-toggle-thumb::before   { transform: translateX(14px); background: #fff; }
.np2-hide-done-lbl {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b;
    white-space: nowrap;
}
html[data-theme="light"] .np2-view-filter  { border-color: #e2e8f0; }
html[data-theme="light"] .np2-view-select  {
    background-color: #f1f5f9 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E") !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .np2-view-select:hover { background-color: #e2e8f0 !important; border-color: #64748b !important; }
html[data-theme="light"] .np2-toggle-thumb  { background: #cbd5e1; }
html[data-theme="light"] .np2-toggle-thumb::before { background: #94a3b8; }
html[data-theme="light"] .np2-toggle input[type="checkbox"]:checked + .np2-toggle-thumb { background: #2563eb; }
html[data-theme="light"] .np2-toggle input[type="checkbox"]:checked + .np2-toggle-thumb::before { background: #fff; }
html[data-theme="light"] .np2-hide-done-lbl { color: #94a3b8; }

/* Toolbar action buttons */
.np2-btn-hold {
    height: 36px;
    padding: 0 16px;
    background: #92400e;
    color: #fef3c7;
    border: none;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .03em;
    text-transform: uppercase;
    transition: background .13s;
    width: auto !important;
    box-sizing: border-box;
}
.np2-btn-hold:hover { background: #b45309; }
.np2-btn-finish {
    height: 36px;
    padding: 0 16px;
    background: #166534;
    color: #dcfce7;
    border: none;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .03em;
    text-transform: uppercase;
    transition: background .13s;
    width: auto !important;
    box-sizing: border-box;
}
.np2-btn-finish:hover { background: #15803d; }
/* ── Scan input — wrapper div nosi vizualni okvir, input unutra je transparentan ── */
.np2-unit-input {
    display: flex;
    align-items: stretch;
    height: 31px;
    background: #0d1f35;
    border: 1px solid #4b5563;
    border-radius: 8px;
    flex: 1;
    min-width: 180px;
    box-sizing: border-box;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
}
/* outline lives outside the box — not clipped by overflow:hidden */
.np2-unit-input:focus-within {
    border-color: #f59e0b;
    outline: 2px solid rgba(245,158,11,.35);
    outline-offset: 1px;
}
/* Scan icon — left side visual hint */
.np2-scan-icon {
    display: flex;
    align-items: center;
    padding: 0 7px 0 9px;
    color: #4b5563;
    flex-shrink: 0;
    pointer-events: none;
    transition: color .15s;
}
.np2-scan-icon svg { width: 14px; height: 14px; display: block; }
.np2-unit-input:focus-within .np2-scan-icon { color: #f59e0b; }

/* Target the scan input directly */
.np2-unit-input input {
    -webkit-appearance: none !important;
    appearance: none !important;
    flex: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 10px 0 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-width: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: #e2e8f0 !important;
    font-size: .9rem !important;
    outline: 0 !important;
    box-sizing: border-box !important;
}
.np2-unit-input input::placeholder {
    color: #4b5563 !important;
    font-size: .82rem !important;
    letter-spacing: 0 !important;
}
html[data-theme="light"] .np2-unit-input {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.07) !important;
}
html[data-theme="light"] .np2-unit-input:focus-within {
    border-color: #d97706 !important;
    outline-color: rgba(217,119,6,.3) !important;
}
html[data-theme="light"] .np2-unit-input input { color: #0f172a !important; }
html[data-theme="light"] .np2-unit-input input::placeholder { color: #94a3b8 !important; }
html[data-theme="light"] .np2-scan-icon { color: #94a3b8; }
html[data-theme="light"] .np2-unit-input:focus-within .np2-scan-icon { color: #d97706; }

/* ── Error bar (below stats bar, inside sticky header) ── */
.np2-error-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    background: rgba(220,38,38,.13);
    border-bottom: 1px solid rgba(220,38,38,.30);
}
.np2-error-icon {
    width: 16px; height: 16px; flex-shrink: 0;
    color: #f87171;
}
.np2-error-msg {
    color: #f87171;
    font-size: .875rem;
    font-weight: 600;
}
html[data-theme="light"] .np2-error-bar  { background: rgba(220,38,38,.07); border-color: rgba(220,38,38,.22); }
html[data-theme="light"] .np2-error-icon { color: #dc2626; }
html[data-theme="light"] .np2-error-msg  { color: #dc2626; }

.np2-container-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* !important needed: Default.css has "select:not(.form-control):not(.modern-select)"
   with higher specificity (0-3-1). We added "modern-select" class to the element
   so that rule no longer matches, but keep !important as safety net. */
.np2-select {
    height: 31px !important;
    padding: 0 10px !important;
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    border-radius: 8px !important;
    color: #e2e8f0 !important;
    font-size: .9rem;
    box-sizing: border-box !important;
    cursor: pointer;
    min-width: 0;
}
/* Inside a card-actions row, the select stretches to fill available space */
.np2-card-actions .np2-select {
    flex: 1 !important;
    max-width: none !important;
    min-width: 0 !important;
}
.np2-btn-add {
    height: 31px;
    padding: 0 18px;
    background: #2563eb;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .13s;
    width: auto !important;
    box-sizing: border-box;
}
.np2-btn-add:hover  { background: #3b82f6; }
.np2-btn-add:active { background: #1d4ed8; }

/* Loading state — applied during async postback by PageRequestManager hooks.
   Hides the label and overlays a spinning ring; pointer-events:none blocks
   re-clicks even though we also set .disabled on the element itself. */
.np2-btn-add.is-loading {
    pointer-events: none;
    color: transparent !important;
    position: relative;
    opacity: 0.85;
}
.np2-btn-add.is-loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 16px; height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: np2-spin .65s linear infinite;
}
@keyframes np2-spin { to { transform: rotate(360deg); } }

/* Dim the scan input while the request is in flight */
.np2-unit-input.is-loading { opacity: 0.6; }
.np2-unit-input.is-loading input { cursor: wait; }

/* Body: two-column layout */
.np2-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    gap: 16px;
}

/* Grid card custom header (title + inline controls) */
.np2-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    background: #1e3045;
    border-bottom: 1px solid #3a5470;
    flex-wrap: wrap;
}
.np2-card-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #64748b;
    white-space: nowrap;
    flex-shrink: 0;
}
.np2-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
/* UpdatePanel renders a <div> — make it layout-transparent in flex context */
.np2-card-actions > div { display: contents; }

/* ── Light theme ─────────────────────────────────────────────────── */
html[data-theme="light"] .np2-stats-bar   { border-color: #e2e8f0; }
html[data-theme="light"] .np2-scan-bar    { border-color: #e2e8f0; }
html[data-theme="light"] .np2-stat-chip   { border-color: #e2e8f0; }
html[data-theme="light"] .np2-stat-lbl   { color: #94a3b8; }
html[data-theme="light"] .np2-stat-val   { color: #0f172a; }
html[data-theme="light"] .np2-stat-speed { color: #2563eb; }
html[data-theme="light"] .np2-card-header { background: #f0f4f8; border-color: #e2e8f0; }
html[data-theme="light"] .np2-card-title  { color: #94a3b8; }
html[data-theme="light"] .np2-error      { color: #dc2626; }
html[data-theme="light"] .np2-select     { background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #0f172a !important; }
html[data-theme="light"] .np2-print-btn  { border-color: #cbd5e1; color: #64748b; }
html[data-theme="light"] .np2-print-btn:hover { background: #f1f5f9; color: #1e293b; }
html[data-theme="light"] .np2-btn-hold   { background: #b45309; }
html[data-theme="light"] .np2-btn-finish { background: #15803d; }

/* ── Utrosak modal ────────────────────────────────────────────────── */
.utrosak-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9000;
}
.utrosak-overlay.utrosak-anim   { animation: identFadeIn  .16s ease both; }
.utrosak-anim .utrosak-box      { animation: identSlideIn .20s ease both; }
.utrosak-box {
    background: #1e2a3a;
    border: 1px solid #334155;
    border-radius: 16px;
    width: 420px;
    max-width: calc(100vw - 32px);
    box-shadow: 0 24px 64px rgba(0,0,0,.55);
    overflow: hidden;
}
.utrosak-header {
    background: #162032;
    border-bottom: 1px solid #334155;
    padding: 18px 24px;
    display: flex; align-items: center; gap: 12px;
}
.utrosak-icon { width: 22px; height: 22px; color: #f59e0b; flex-shrink: 0; }
.utrosak-header-title {
    font-size: .95rem; font-weight: 700;
    color: #e2e8f0; letter-spacing: .06em; text-transform: uppercase;
}
.utrosak-body { padding: 20px 24px 12px; }
.utrosak-repro {
    display: block; margin-bottom: 16px;
    font-size: 1rem; font-weight: 700; color: #f59e0b;
}
.utrosak-field {
    display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.utrosak-field-lbl {
    font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: #64748b; min-width: 90px; flex-shrink: 0;
}
.utrosak-field-val { font-size: 1rem; font-weight: 700; color: #e2e8f0; }
.utrosak-input {
    flex: 1;
    padding: 10px 14px !important;
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    border-radius: 8px !important;
    color: #e2e8f0 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    height: auto !important;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box !important;
    width: 100% !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.utrosak-input:focus { border-color: #f59e0b !important; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
/* Kill browser autofill yellow override (dark theme) */
.utrosak-input:-webkit-autofill,
.utrosak-input:-webkit-autofill:hover,
.utrosak-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 40px #0f172a inset !important;
    -webkit-text-fill-color: #e2e8f0 !important;
    caret-color: #e2e8f0;
}
.utrosak-footer {
    padding: 14px 24px 18px;
    display: flex; gap: 10px; justify-content: flex-end;
    border-top: 1px solid #2d3f52;
}
.utrosak-btn {
    padding: 10px 26px; border-radius: 8px;
    font-size: .9rem; font-weight: 700; cursor: pointer;
    border: none; transition: background .13s, box-shadow .13s; letter-spacing: .02em;
}
.utrosak-cancel { background: transparent; border: 1px solid #475569; color: #94a3b8; }
.utrosak-cancel:hover { background: #1e293b; color: #e2e8f0; border-color: #64748b; }
.utrosak-ok { background: #2563eb; color: #fff; min-width: 90px; }
.utrosak-ok:hover { background: #3b82f6; box-shadow: 0 2px 12px rgba(37,99,235,.45); }
.utrosak-ok:active { background: #1d4ed8; }

/* Loading state — applied to PotvrdaButton during async postback by
   PageRequestManager hooks. Mirrors .np2-btn-add.is-loading so the modal
   button gets the same hide-label-and-spin visual. */
.utrosak-ok.is-loading {
    pointer-events: none;
    color: transparent !important;
    position: relative;
    opacity: 0.85;
}
.utrosak-ok.is-loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 16px; height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: np2-spin .65s linear infinite;
}
/* Dim the inputs while the modal request is in flight */
.utrosak-input.is-loading { opacity: 0.6; cursor: wait; }
.utrosak-cancel.is-loading { pointer-events: none; opacity: 0.6; }

/* ── Inline error inside utrosak modal (replaces alert) ── */
.utrosak-error {
    margin: 12px 0 4px;
    padding: 10px 12px;
    display: flex; align-items: flex-start; gap: 10px;
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.45);
    border-left: 3px solid #dc2626;
    border-radius: 6px;
    color: #fecaca;
    font-size: .88rem;
    line-height: 1.35;
    animation: utrosakErrIn .18s ease both;
}
.utrosak-error-icon {
    width: 18px; height: 18px; flex-shrink: 0;
    color: #f87171; margin-top: 1px;
}
.utrosak-error-msg { color: inherit; font-weight: 600; }
@keyframes utrosakErrIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
html[data-theme="light"] .utrosak-error {
    background: #fef2f2;
    border-color: #fecaca;
    border-left-color: #dc2626;
    color: #7f1d1d;
}
html[data-theme="light"] .utrosak-error-icon { color: #dc2626; }

html[data-theme="light"] .utrosak-box    { background: #fff; border-color: #e2e8f0; box-shadow: 0 24px 64px rgba(0,0,0,.12); }
html[data-theme="light"] .utrosak-header { background: #f8fafc; border-color: #e2e8f0; }
html[data-theme="light"] .utrosak-header-title { color: #1e293b; }
html[data-theme="light"] .utrosak-input  { background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #0f172a !important; }
html[data-theme="light"] .utrosak-input:-webkit-autofill,
html[data-theme="light"] .utrosak-input:-webkit-autofill:hover,
html[data-theme="light"] .utrosak-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 40px #f1f5f9 inset !important;
    -webkit-text-fill-color: #0f172a !important;
    caret-color: #0f172a;
}
html[data-theme="light"] .utrosak-field-val { color: #1e293b; }
html[data-theme="light"] .utrosak-footer { border-color: #e2e8f0; }
html[data-theme="light"] .utrosak-cancel { border-color: #cbd5e1; color: #64748b; }
html[data-theme="light"] .utrosak-cancel:hover { background: #f1f5f9; color: #1e293b; }

/* ── Generic confirm modal ────────────────────────────────────────── */
.np2-confirm-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9500;
}
.np2-confirm-overlay.np2-confirm-anim { animation: identFadeIn  .16s ease both; }
.np2-confirm-anim .np2-confirm-box    { animation: identSlideIn .20s ease both; }
.np2-confirm-box {
    background: #1e2a3a; border: 1px solid #334155; border-radius: 16px;
    width: 360px; max-width: calc(100vw - 32px);
    padding: 28px 28px 24px; text-align: center;
    box-shadow: 0 24px 64px rgba(0,0,0,.55);
}
.np2-confirm-icon {
    display: inline-flex; width: 52px; height: 52px; border-radius: 50%;
    background: rgba(251,191,36,.12); align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.np2-confirm-icon svg { width: 28px; height: 28px; color: #fbbf24; }
.np2-confirm-msg { color: #e2e8f0; font-size: .95rem; line-height: 1.5; margin: 0 0 24px; }
.np2-confirm-actions { display: flex; gap: 10px; justify-content: center; }
.np2-confirm-btn {
    padding: 10px 26px; border-radius: 8px;
    font-size: .9rem; font-weight: 700; cursor: pointer;
    border: none; transition: background .13s, box-shadow .13s; letter-spacing: .02em;
}
.np2-confirm-cancel { background: transparent; border: 1px solid #475569; color: #94a3b8; }
.np2-confirm-cancel:hover { background: #1e293b; color: #e2e8f0; border-color: #64748b; }
.np2-confirm-ok { background: #dc2626; color: #fff; min-width: 90px; }
.np2-confirm-ok:hover { background: #ef4444; box-shadow: 0 2px 12px rgba(220,38,38,.45); }
.np2-confirm-ok:active { background: #b91c1c; }

html[data-theme="light"] .np2-confirm-box    { background: #fff; border-color: #e2e8f0; box-shadow: 0 24px 64px rgba(0,0,0,.12); }
html[data-theme="light"] .np2-confirm-msg    { color: #1e293b; }
html[data-theme="light"] .np2-confirm-cancel { border-color: #cbd5e1; color: #64748b; }
html[data-theme="light"] .np2-confirm-cancel:hover { background: #f1f5f9; color: #1e293b; }

/* ── Row action icons (confirm / edit consumption) ──────────────────── */
.np2-icon-wrap { display: contents; }

.np2-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    text-decoration: none;
    transition: background .12s;
    vertical-align: middle;
}
.np2-action-btn svg { width: 16px; height: 16px; display: block; flex-shrink: 0; }

.np2-action-check         { color: #22c55e !important; }
.np2-action-check:hover   { background: rgba(34, 197, 94, .14); }
.np2-action-check:active  { background: rgba(34, 197, 94, .22); }

.np2-action-edit          { color: #f59e0b !important; }
.np2-action-edit:hover    { background: rgba(245, 158, 11, .14); }
.np2-action-edit:active   { background: rgba(245, 158, 11, .22); }

html[data-theme="light"] .np2-action-check       { color: #16a34a !important; }
html[data-theme="light"] .np2-action-check:hover  { background: rgba(22,163,74,.12); }
html[data-theme="light"] .np2-action-edit         { color: #d97706 !important; }
html[data-theme="light"] .np2-action-edit:hover   { background: rgba(217,119,6,.12); }

/* ── Grid cards ────────────────────────────────────────────────────────── */
.np2-grid-card {
    width: 700px;
    background: #0f2237;
    border: 1px solid #2a5a84;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,.45);
}
/* UpdatePanel renders a plain <div> — don't let it collapse */
.np2-grid-card > div { display: block; }

/* Card header (title + controls) */
.np2-grid-card .np2-card-header {
    background: #071929 !important;
    border-bottom: 1px solid #2a5a84 !important;
}
.np2-grid-card .np2-card-title { color: #5ba8d8 !important; }

/* Caption = card header strip */
.np2-grid-card .grid caption {
    display: table-caption;
    background: #071929 !important;
    color: #5ba8d8 !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    padding: 11px 16px !important;
    text-align: left !important;
    caption-side: top !important;
    border-bottom: 1px solid #2a5a84 !important;
}
.np2-grid-card .grid,
.np2-grid-card table.grid {
    width: 100% !important;
    border-collapse: collapse !important;
    background: transparent !important;
    color: #d8ecff !important;
    border: none !important;
    font-size: .88rem !important;
}
.np2-grid-card .grid th[align="right"] { text-align: right !important; }
.np2-grid-card .grid th {
    padding: 10px 14px !important;
    text-align: left !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: #5ba8d8 !important;
    background: #071929 !important;
    border: none !important;
    border-bottom: 1px solid #2a5a84 !important;
    white-space: nowrap !important;
}
/* Kill legacy gridRow/gridAltRow zebra stripes */
.np2-grid-card .grid tr,
.np2-grid-card .grid tr.gridRow,
.np2-grid-card .grid tr.gridAltRow {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
}
.np2-grid-card .grid > tbody > tr > td {
    padding: 10px 14px !important;
    border: none !important;
    border-bottom: 1px solid #183452 !important;
    vertical-align: middle !important;
    color: #d8ecff !important;
    background: none !important;
    font-size: .88rem !important;
}
.np2-grid-card .grid > tbody > tr:last-child > td { border-bottom: none !important; }
.np2-grid-card .grid > tbody > tr:hover > td      { background: rgba(20,80,140,.6) !important; }

/* Group header rows: fali (missing) / potpuno (complete) */
.np2-grid-card .grid tr.fali    > td { background: rgba(220,50,50,.22)  !important; color: #ffaaaa !important; }
.np2-grid-card .grid tr.potpuno > td { background: rgba(30,190,90,.18)  !important; color: #7ee8a8 !important; }

/* Links & action images */
.np2-grid-card .grid td a:link,
.np2-grid-card .grid td a:visited { color: #60b8fa !important; text-decoration: none !important; }
.np2-grid-card .grid td a:hover   { color: #a5d8ff !important; }
.np2-grid-card .grid .smallButton { cursor: pointer; vertical-align: middle; opacity: .75; transition: opacity .12s; }
.np2-grid-card .grid .smallButton:hover { opacity: 1; }
.np2-grid-card .grid td img[src*="Ok32"],
.np2-grid-card .grid td img[src*="Pencil"] { width: 22px; height: 22px; vertical-align: middle; }

/* Empty data row */
.np2-grid-card .grid td[colspan] {
    padding: 20px !important;
    color: #4a7ea0 !important;
    font-style: italic !important;
    text-align: center !important;
}

/* ── Light theme — grid cards ── */
html[data-theme="light"] .np2-grid-card { background: #f0f6fd; border-color: #b0cceb; box-shadow: 0 4px 14px rgba(0,0,0,.1); }
html[data-theme="light"] .np2-grid-card .np2-card-header { background: #d8eaf9 !important; border-color: #b0cceb !important; }
html[data-theme="light"] .np2-grid-card .np2-card-title  { color: #1e5e99 !important; }
html[data-theme="light"] .np2-grid-card .grid caption { background: #d8eaf9 !important; color: #1e5e99 !important; border-color: #b0cceb !important; }
html[data-theme="light"] .np2-grid-card .grid th      { background: #d8eaf9 !important; color: #1e5e99 !important; border-color: #b0cceb !important; }
html[data-theme="light"] .np2-grid-card .grid > tbody > tr > td    { color: #0f2237 !important; border-color: #c0d8ee !important; }
html[data-theme="light"] .np2-grid-card .grid > tbody > tr:hover > td { background: #c0daf5 !important; }
html[data-theme="light"] .np2-grid-card .grid tr.fali    > td { background: rgba(210,30,30,.10)  !important; color: #8b0000 !important; }
html[data-theme="light"] .np2-grid-card .grid tr.potpuno > td { background: rgba(20,150,60,.12)  !important; color: #0a5c28 !important; }
html[data-theme="light"] .np2-grid-card .grid td a:link,
html[data-theme="light"] .np2-grid-card .grid td a:visited { color: #2563eb !important; }

/* ── Packaging cards section ────────────────────────────────────────── */
.np2-pkg-section {
    width: 100%;
    align-self: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
/* individual material card.
   max-width: 500px — gives the units table enough room for nowrap headers
   (RESERVED / EXPENDED) and the action column at typical font sizes.
   The .np2-pkg-units-wrap inside still scrolls horizontally as a fallback
   when the user bumps the browser font further. */
.np2-pkg-mat {
    flex: 0 1 auto;
    min-width: 280px;
    max-width: 500px;
    border: 1px solid #2a5a84;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(0,0,0,.4);
    background: #0f2237;
}
.np2-pkg-mat-hd {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px 10px 16px;
    background: #0f2237;
    border-left: 3px solid transparent;
    border-bottom: 1px solid #183452;
}
.np2-pkg-mat--fali    .np2-pkg-mat-hd { background: rgba(180,30,30,.15); border-left-color: #ef4444; }
.np2-pkg-mat--potpuno .np2-pkg-mat-hd { background: rgba(20,120,60,.15); border-left-color: #22c55e; }

.np2-pkg-mat-product { display: flex; flex-direction: column; gap: 2px; }
.np2-pkg-mat-code { font-size: .78rem; font-weight: 700; color: #60b8fa; letter-spacing: .03em; }
.np2-pkg-mat-name { font-size: .85rem; color: #d8ecff; line-height: 1.3; }

/* Stats in a horizontal row with dividers, compact */
.np2-pkg-mat-stats { display: flex; gap: 0; margin-top: 4px; border-top: 1px solid #183452; padding-top: 7px; }
.np2-pkg-stat {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    flex: 1;
    padding: 0 6px;
    border-right: 1px solid #183452;
}
.np2-pkg-stat:last-child { border-right: none; }
.np2-pkg-stat-lbl { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #4a7ea0; }
.np2-pkg-stat-val { font-size: .88rem; font-weight: 700; color: #d8ecff; white-space: nowrap; }
.np2-pkg-stat--ok   { color: #7ee8a8; }
.np2-pkg-stat--warn { color: #fbbf24; }

/* Scrollable wrapper around the units table — kicks in when the user bumps
   the browser font and the table's nowrap headers grow wider than the card.
   Keeps the action-column (edit / check) reachable instead of being clipped
   by the card's overflow:hidden. */
.np2-pkg-units-wrap { overflow-x: auto; overflow-y: visible; }
.np2-pkg-units-wrap::-webkit-scrollbar       { height: 6px; }
.np2-pkg-units-wrap::-webkit-scrollbar-track { background: transparent; }
.np2-pkg-units-wrap::-webkit-scrollbar-thumb { background: rgba(91,168,216,.35); border-radius: 6px; }
.np2-pkg-units-wrap::-webkit-scrollbar-thumb:hover { background: rgba(91,168,216,.55); }

/* units table inside each card */
.np2-pkg-units { width: 100%; border-collapse: collapse; font-size: .88rem; }
.np2-pkg-units th {
    padding: 7px 14px;
    text-align: left;
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: #5ba8d8;
    background: #071929;
    border-bottom: 1px solid #2a5a84;
    white-space: nowrap;
}
.np2-pkg-units th.np2-ra { text-align: right; }
.np2-pkg-units td {
    padding: 9px 14px;
    border-bottom: 1px solid #183452;
    color: #d8ecff;
    vertical-align: middle;
}
.np2-pkg-units tbody tr:last-child td { border-bottom: none; }
.np2-pkg-units tbody tr:hover td { background: rgba(20,80,140,.5); }
.np2-pkg-units td.np2-ra { text-align: right; white-space: nowrap; }
.np2-pkg-units .np2-pkg-empty td {
    color: #4a7ea0; font-style: italic;
    text-align: center; padding: 16px !important;
}
.np2-pkg-units .smallButton { cursor: pointer; opacity: .75; transition: opacity .12s; vertical-align: middle; }
.np2-pkg-units .smallButton:hover { opacity: 1; }
/* Reserve enough width for the action column so the 28×28 button never gets
   squeezed off-screen when the browser auto-sizes columns. */
.np2-pkg-units th:last-child,
.np2-pkg-units td:last-child { min-width: 56px; width: 56px; }

/* light theme */
html[data-theme="light"] .np2-pkg-mat { border-color: #b0cceb; box-shadow: 0 3px 10px rgba(0,0,0,.08); background: #fff; }
html[data-theme="light"] .np2-pkg-mat-hd { background: #f0f6fd; border-color: #c0d8ee; }
html[data-theme="light"] .np2-pkg-mat--fali    .np2-pkg-mat-hd { background: rgba(220,38,38,.06); border-left-color: #dc2626; }
html[data-theme="light"] .np2-pkg-mat--potpuno .np2-pkg-mat-hd { background: rgba(22,163,74,.06); border-left-color: #16a34a; }
html[data-theme="light"] .np2-pkg-mat-code { color: #1e5e99; }
html[data-theme="light"] .np2-pkg-mat-name { color: #0f2237; }
html[data-theme="light"] .np2-pkg-mat-stats { border-color: #c0d8ee; }
html[data-theme="light"] .np2-pkg-stat { border-color: #c0d8ee; }
html[data-theme="light"] .np2-pkg-stat-lbl { color: #6a9ab8; }
html[data-theme="light"] .np2-pkg-stat-val { color: #0f2237; }
html[data-theme="light"] .np2-pkg-stat--ok   { color: #15803d; }
html[data-theme="light"] .np2-pkg-stat--warn { color: #b45309; }
html[data-theme="light"] .np2-pkg-units th { background: #d8eaf9; color: #1e5e99; border-color: #b0cceb; }
html[data-theme="light"] .np2-pkg-units td { color: #0f2237; border-color: #c0d8ee; }
html[data-theme="light"] .np2-pkg-units tbody tr:hover td { background: #c0daf5; }
html[data-theme="light"] .np2-pkg-units .np2-pkg-empty td { color: #6a9ab8; }

/* ── New-unit highlight — driven entirely by JS, no CSS class needed ── */

/* Responsive */
@media (max-width: 560px) {
    .np2-grid-card { width: 100%; max-width: 700px; }
    .np2-stats-bar { height: auto; padding: 10px 16px; flex-wrap: wrap; gap: 12px; }
    .np2-stat-chip { height: auto; padding: 0 12px; }
}

/* ═══════════════════════════════════════════════════════
   Pages/Production/ProizvodnjaKompleta.aspx
   ═══════════════════════════════════════════════════════ */
/* ── ProizvodnjaKompleta — same visual language as NalogProizvodnja2 ──
   Uses the pk-* prefix (Production Kompleti) so it doesn't collide with
   np2-* / np2-* if both pages are loaded. The structure / sizing /
   colours are intentionally identical. */

/* Sticky header (toolbar + stats bar + error). */
.pk-sticky-hd {
    position: sticky;
    top: 0;
    z-index: 200;
    background: #1e2a3a;
}
html[data-theme="light"] .pk-sticky-hd { background: #e4e9f1; }


/* Toolbar */
.pk-toolbar { flex-wrap: wrap; gap: 12px; }
.pk-toolbar .ctbl-btn-exit {
    height: 36px;
    padding: 0 18px;
    line-height: 36px;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: .85rem;
    font-weight: 600;
}

.pk-btn-hold,
.pk-btn-finish {
    height: 36px;
    padding: 0 16px;
    border: none;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .03em;
    text-transform: uppercase;
    transition: background .13s;
    width: auto !important;
    box-sizing: border-box;
}
.pk-btn-hold   { background: #92400e; color: #fef3c7; }
.pk-btn-hold:hover   { background: #b45309; }
.pk-btn-finish { background: #166534; color: #dcfce7; }
.pk-btn-finish:hover { background: #15803d; }

/* Print button — small icon+text, mirrors np2-print-btn */
.pk-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid #475569;
    border-radius: 8px;
    color: #94a3b8;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
    transition: background .13s, color .13s, border-color .13s;
}
.pk-print-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.pk-print-btn:hover { background: #1e293b; color: #e2e8f0; border-color: #64748b; }
html[data-theme="light"] .pk-print-btn { border-color: #cbd5e1; color: #64748b; }
html[data-theme="light"] .pk-print-btn:hover { background: #f1f5f9; color: #1e293b; }
html[data-theme="light"] .pk-btn-hold   { background: #b45309; }
html[data-theme="light"] .pk-btn-finish { background: #15803d; }

/* Stats bar */
.pk-stats-bar {
    display: flex;
    align-items: stretch;
    padding: 0 20px;
    border-bottom: 1px solid #2d3f52;
    min-height: 60px;
    flex-shrink: 0;
}
.pk-scan-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 20px;
    border-right: 1px solid #2d3f52;
    flex-shrink: 0;
}
.pk-stats-chips {
    display: flex;
    align-items: stretch;
}
.pk-scan-bar .pk-unit-input {
    flex: none;
    min-width: 200px;
}
.pk-stat-chip {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    padding: 0 20px;
    border-right: 1px solid #2d3f52;
}
.pk-stat-chip-last { border-right: none; }
.pk-stat-lbl {
    font-size: .67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #64748b;
    line-height: 1;
}
.pk-stat-val {
    font-size: 1.35rem;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1;
}
.pk-stat-speed { color: #93c5fd; font-size: 1.05rem; }

/* View filter — sits between the stats chips and the image strip. */
.pk-view-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    margin-left: auto;
    border-left: 1px solid #2d3f52;
    flex-shrink: 0;
}
.pk-hide-done-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.pk-toggle {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    flex-shrink: 0;
}
.pk-toggle input[type="checkbox"] {
    opacity: 0 !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    z-index: 1;
}
.pk-toggle-thumb {
    position: absolute;
    inset: 0;
    background: #334155;
    border-radius: 9px;
    transition: background .18s;
    pointer-events: none;
}
.pk-toggle-thumb::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    left: 2px;
    top: 2px;
    background: #64748b;
    border-radius: 50%;
    transition: transform .18s, background .18s;
}
.pk-toggle input[type="checkbox"]:checked + .pk-toggle-thumb           { background: #2563eb; }
.pk-toggle input[type="checkbox"]:checked + .pk-toggle-thumb::before   { transform: translateX(14px); background: #fff; }
.pk-hide-done-lbl {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b;
    white-space: nowrap;
}
html[data-theme="light"] .pk-view-filter   { border-color: #e2e8f0; }
html[data-theme="light"] .pk-toggle-thumb  { background: #cbd5e1; }
html[data-theme="light"] .pk-toggle-thumb::before { background: #94a3b8; }
html[data-theme="light"] .pk-toggle input[type="checkbox"]:checked + .pk-toggle-thumb { background: #2563eb; }
html[data-theme="light"] .pk-toggle input[type="checkbox"]:checked + .pk-toggle-thumb::before { background: #fff; }
html[data-theme="light"] .pk-hide-done-lbl { color: #94a3b8; }

/* (Product + palette images moved into ctrlProizvod3 as clickable
   thumbnails with a lightbox — see .os-info-imgtile / .os-info-thumb
   in Codme.css.) */
html[data-theme="light"] .pk-stats-bar { border-color: #e2e8f0; }
html[data-theme="light"] .pk-scan-bar  { border-color: #e2e8f0; }
html[data-theme="light"] .pk-stat-chip { border-color: #e2e8f0; }
html[data-theme="light"] .pk-stat-lbl  { color: #94a3b8; }
html[data-theme="light"] .pk-stat-val  { color: #0f172a; }
html[data-theme="light"] .pk-stat-speed { color: #2563eb; }

/* Scan input wrapper (the focus-within outline lives here). */
.pk-unit-input {
    display: flex;
    align-items: stretch;
    height: 31px;
    background: #0d1f35;
    border: 1px solid #4b5563;
    border-radius: 8px;
    flex: 1;
    min-width: 180px;
    box-sizing: border-box;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
}
.pk-unit-input:focus-within {
    border-color: #f59e0b;
    outline: 2px solid rgba(245,158,11,.35);
    outline-offset: 1px;
}
.pk-scan-icon {
    display: flex;
    align-items: center;
    padding: 0 7px 0 9px;
    color: #4b5563;
    flex-shrink: 0;
    pointer-events: none;
    transition: color .15s;
}
.pk-scan-icon svg { width: 14px; height: 14px; display: block; }
.pk-unit-input:focus-within .pk-scan-icon { color: #f59e0b; }
.pk-unit-input input {
    -webkit-appearance: none !important;
    appearance: none !important;
    flex: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 10px 0 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: #e2e8f0 !important;
    font-size: .9rem !important;
    outline: 0 !important;
    box-sizing: border-box !important;
}
html[data-theme="light"] .pk-unit-input {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.07) !important;
}
html[data-theme="light"] .pk-unit-input:focus-within {
    border-color: #d97706 !important;
    outline-color: rgba(217,119,6,.3) !important;
}
html[data-theme="light"] .pk-unit-input input { color: #0f172a !important; }
html[data-theme="light"] .pk-scan-icon { color: #94a3b8; }

/* Add-unit primary button. */
.pk-btn-add {
    height: 31px;
    padding: 0 18px;
    background: #2563eb;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .13s;
    width: auto !important;
    box-sizing: border-box;
    position: relative;
}
.pk-btn-add:hover  { background: #3b82f6; }
.pk-btn-add:active { background: #1d4ed8; }

/* Loading state — applied during async postback by PageRequestManager
   hooks. Shows a small spinner inside the button and disables both
   the button and the scan input until the response arrives. */
.pk-btn-add.is-loading {
    color: transparent !important;
    cursor: wait;
    pointer-events: none;
}
.pk-btn-add.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pk-spin .7s linear infinite;
}
@keyframes pk-spin { to { transform: rotate(360deg); } }
.pk-unit-input.is-loading       { opacity: 0.6; }
.pk-unit-input.is-loading input { cursor: wait; }

/* New-unit highlight is driven entirely by JS — no CSS class needed. */

/* Inline error bar (replaces ErrorLabel rendered as plain text). */
.pk-error-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    background: rgba(220,38,38,.13);
    border-bottom: 1px solid rgba(220,38,38,.30);
}
.pk-error-icon { width: 16px; height: 16px; flex-shrink: 0; color: #f87171; }
.pk-error-msg  { color: #f87171; font-size: .875rem; font-weight: 600; }
html[data-theme="light"] .pk-error-bar  { background: rgba(220,38,38,.07); border-color: rgba(220,38,38,.22); }
html[data-theme="light"] .pk-error-icon { color: #dc2626; }
html[data-theme="light"] .pk-error-msg  { color: #dc2626; }

/* Body */
.pk-body {
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 16px;
}

/* ── Packaging cards section ────────────────────────────────────── */
.pk-pkg-section {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.pk-pkg-mat {
    flex: 0 1 auto;
    min-width: 280px;
    max-width: 500px;
    border: 1px solid #2a5a84;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(0,0,0,.4);
    background: #0f2237;
}
.pk-pkg-mat-hd {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px 10px 16px;
    background: #0f2237;
    border-left: 3px solid transparent;
    border-bottom: 1px solid #183452;
}
.pk-pkg-mat--fali    .pk-pkg-mat-hd { background: rgba(180,30,30,.15); border-left-color: #ef4444; }
.pk-pkg-mat--potpuno .pk-pkg-mat-hd { background: rgba(20,120,60,.15); border-left-color: #22c55e; }

.pk-pkg-mat-product { display: flex; flex-direction: column; gap: 2px; }
.pk-pkg-mat-code { font-size: .78rem; font-weight: 700; color: #60b8fa; letter-spacing: .03em; }
.pk-pkg-mat-name { font-size: .85rem; color: #d8ecff; line-height: 1.3; }

.pk-pkg-mat-stats { display: flex; gap: 0; margin-top: 4px; border-top: 1px solid #183452; padding-top: 7px; }
.pk-pkg-stat {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    flex: 1;
    padding: 0 6px;
    border-right: 1px solid #183452;
}
.pk-pkg-stat:last-child { border-right: none; }
.pk-pkg-stat-lbl { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #4a7ea0; }
.pk-pkg-stat-val { font-size: .88rem; font-weight: 700; color: #d8ecff; white-space: nowrap; }
.pk-pkg-stat--ok   { color: #7ee8a8; }
.pk-pkg-stat--warn { color: #fbbf24; }

.pk-pkg-units-wrap { overflow-x: auto; overflow-y: visible; }
.pk-pkg-units { width: 100%; border-collapse: collapse; font-size: .88rem; }
.pk-pkg-units th {
    padding: 7px 14px;
    text-align: left;
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: #5ba8d8;
    background: #071929;
    border-bottom: 1px solid #2a5a84;
    white-space: nowrap;
}
.pk-pkg-units th.pk-ra,
.pk-pkg-units td.pk-ra { text-align: right; }
.pk-pkg-units td {
    padding: 7px 14px;
    border-bottom: 1px solid #183452;
    color: #d8ecff;
    vertical-align: middle;
}
.pk-pkg-units tr:last-child td { border-bottom: none; }
.pk-pkg-units tr:hover td { background: rgba(20,80,140,.45); }
.pk-pkg-units .pk-pkg-empty td {
    text-align: center; color: #4a7ea0; font-style: italic; padding: 14px;
}
.pk-pkg-units td a:link,
.pk-pkg-units td a:visited { color: #60b8fa; text-decoration: none; }
.pk-pkg-units td a:hover   { color: #a5d8ff; }
.pk-row-del { display: inline-block; opacity: .8; transition: opacity .12s; }
.pk-row-del:hover { opacity: 1; }
.pk-row-del .smallButton { width: 16px; height: 16px; vertical-align: middle; cursor: pointer; }
.pk-row-comment { color: #f87171; margin-left: 6px; }

/* Light-theme variants for the cards. */
html[data-theme="light"] .pk-pkg-mat        { background: #f0f6fd; border-color: #b0cceb; box-shadow: 0 3px 12px rgba(0,0,0,.08); }
html[data-theme="light"] .pk-pkg-mat-hd     { background: #f0f6fd; border-bottom-color: #c0d8ee; }
html[data-theme="light"] .pk-pkg-mat--fali    .pk-pkg-mat-hd { background: rgba(210,30,30,.10); }
html[data-theme="light"] .pk-pkg-mat--potpuno .pk-pkg-mat-hd { background: rgba(20,150,60,.10); }
html[data-theme="light"] .pk-pkg-mat-code    { color: #1e5e99; }
html[data-theme="light"] .pk-pkg-mat-name    { color: #0f2237; }
html[data-theme="light"] .pk-pkg-mat-stats   { border-top-color: #c0d8ee; }
html[data-theme="light"] .pk-pkg-stat        { border-color: #c0d8ee; }
html[data-theme="light"] .pk-pkg-stat-lbl    { color: #94a3b8; }
html[data-theme="light"] .pk-pkg-stat-val    { color: #0f2237; }
html[data-theme="light"] .pk-pkg-stat--ok    { color: #0a5c28; }
html[data-theme="light"] .pk-pkg-stat--warn  { color: #b45309; }
html[data-theme="light"] .pk-pkg-units th    { background: #d8eaf9; color: #1e5e99; border-color: #b0cceb; }
html[data-theme="light"] .pk-pkg-units td    { color: #0f2237; border-color: #c0d8ee; }
html[data-theme="light"] .pk-pkg-units tr:hover td { background: #c0daf5; }
html[data-theme="light"] .pk-pkg-units td a:link,
html[data-theme="light"] .pk-pkg-units td a:visited { color: #2563eb; }
html[data-theme="light"] .pk-row-comment     { color: #b91c1c; }

/* Per-row action buttons (kept from the legacy CSS for reuse) */
.pk-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    text-decoration: none !important;
    transition: background .12s;
    margin: 0 1px;
    vertical-align: middle;
}
.pk-action-btn svg { width: 16px; height: 16px; display: block; flex-shrink: 0; }
.pk-action-check         { color: #22c55e !important; }
.pk-action-check:hover   { background: rgba(34, 197, 94, .14); }
.pk-action-edit          { color: #f59e0b !important; }
.pk-action-edit:hover    { background: rgba(245, 158, 11, .14); }
html[data-theme="light"] .pk-action-check       { color: #16a34a !important; }
html[data-theme="light"] .pk-action-check:hover  { background: rgba(22,163,74,.12); }
html[data-theme="light"] .pk-action-edit         { color: #d97706 !important; }
html[data-theme="light"] .pk-action-edit:hover   { background: rgba(217,119,6,.12); }

/* (legacy grid kept hidden) */
.pk-legacy-grid { display: none !important; }

/* (Old single-grid-card chrome — no longer used but kept for reference) */
.pk-grid-card {
    width: min(1100px, 100%);
    background: #0f2237;
    border: 1px solid #2a5a84;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,.45);
}
.pk-card-header {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    background: #071929;
    border-bottom: 1px solid #2a5a84;
}
.pk-card-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #5ba8d8;
}
html[data-theme="light"] .pk-grid-card { background: #f0f6fd; border-color: #b0cceb; box-shadow: 0 4px 14px rgba(0,0,0,.1); }
html[data-theme="light"] .pk-card-header { background: #d8eaf9; border-color: #b0cceb; }
html[data-theme="light"] .pk-card-title  { color: #1e5e99; }

/* Units grid — overrides legacy .grid styling. */
.pk-grid-card .pk-units-grid,
.pk-grid-card table.pk-units-grid {
    width: 100% !important;
    border-collapse: collapse !important;
    background: transparent !important;
    color: #d8ecff !important;
    border: none !important;
    font-size: .88rem !important;
}
.pk-grid-card .pk-units-grid th {
    padding: 10px 14px !important;
    text-align: left !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: #5ba8d8 !important;
    background: #071929 !important;
    border: none !important;
    border-bottom: 1px solid #2a5a84 !important;
    white-space: nowrap !important;
}
.pk-grid-card .pk-units-grid tr,
.pk-grid-card .pk-units-grid tr.gridRow,
.pk-grid-card .pk-units-grid tr.gridAltRow {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
}
.pk-grid-card .pk-units-grid > tbody > tr > td {
    padding: 10px 14px !important;
    border: none !important;
    border-bottom: 1px solid #183452 !important;
    vertical-align: middle !important;
    color: #d8ecff !important;
    background: none !important;
}
.pk-grid-card .pk-units-grid > tbody > tr:last-child > td { border-bottom: none !important; }
.pk-grid-card .pk-units-grid > tbody > tr:hover > td      { background: rgba(20,80,140,.6) !important; }

/* Group rows (fali = missing, potpuno = complete) */
.pk-grid-card .pk-units-grid tr.fali    > td { background: rgba(220,50,50,.22)  !important; color: #ffaaaa !important; }
.pk-grid-card .pk-units-grid tr.potpuno > td { background: rgba(30,190,90,.18)  !important; color: #7ee8a8 !important; }

.pk-grid-card .pk-units-grid td a:link,
.pk-grid-card .pk-units-grid td a:visited { color: #60b8fa !important; text-decoration: none !important; }
.pk-grid-card .pk-units-grid td a:hover   { color: #a5d8ff !important; }
.pk-row-comment { color: #fca5a5 !important; margin-left: 6px; }

html[data-theme="light"] .pk-grid-card .pk-units-grid th    { background: #d8eaf9 !important; color: #1e5e99 !important; border-color: #b0cceb !important; }
html[data-theme="light"] .pk-grid-card .pk-units-grid > tbody > tr > td { color: #0f2237 !important; border-color: #c0d8ee !important; }
html[data-theme="light"] .pk-grid-card .pk-units-grid > tbody > tr:hover > td { background: #c0daf5 !important; }
html[data-theme="light"] .pk-grid-card .pk-units-grid tr.fali    > td { background: rgba(210,30,30,.10)  !important; color: #8b0000 !important; }
html[data-theme="light"] .pk-grid-card .pk-units-grid tr.potpuno > td { background: rgba(20,150,60,.12)  !important; color: #0a5c28 !important; }
html[data-theme="light"] .pk-grid-card .pk-units-grid td a:link,
html[data-theme="light"] .pk-grid-card .pk-units-grid td a:visited { color: #2563eb !important; }
html[data-theme="light"] .pk-row-comment { color: #b91c1c !important; }

/* Per-row action icons (delete + confirm + edit) */
.pk-row-del { display: inline-block; opacity: .8; transition: opacity .12s; }
.pk-row-del:hover { opacity: 1; }
.pk-row-del .smallButton { width: 16px; height: 16px; vertical-align: middle; cursor: pointer; }

.pk-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    text-decoration: none !important;
    transition: background .12s;
    margin: 0 1px;
    vertical-align: middle;
}
.pk-action-icon-img { width: 22px; height: 22px; vertical-align: middle; }
.pk-action-check         { color: #22c55e; }
.pk-action-check:hover   { background: rgba(34, 197, 94, .14); }
.pk-action-edit          { color: #f59e0b; }
.pk-action-edit:hover    { background: rgba(245, 158, 11, .14); }

/* ── Utrosak modal (consumption confirm) ─────────────────────────── */
.utrosak-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9000;
}
.utrosak-box {
    background: #1e2a3a;
    border: 1px solid #334155;
    border-radius: 16px;
    width: 420px;
    max-width: calc(100vw - 32px);
    box-shadow: 0 24px 64px rgba(0,0,0,.55);
    overflow: hidden;
}
.utrosak-header {
    background: #162032;
    border-bottom: 1px solid #334155;
    padding: 18px 24px;
    display: flex; align-items: center; gap: 12px;
}
.utrosak-icon { width: 22px; height: 22px; color: #f59e0b; flex-shrink: 0; }
.utrosak-header-title {
    font-size: .95rem; font-weight: 700;
    color: #e2e8f0; letter-spacing: .06em; text-transform: uppercase;
}
.utrosak-body { padding: 20px 24px 12px; }
.utrosak-repro {
    display: block; margin-bottom: 16px;
    font-size: 1rem; font-weight: 700; color: #f59e0b;
}
.utrosak-field { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.utrosak-field-lbl {
    font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: #64748b; min-width: 90px; flex-shrink: 0;
}
.utrosak-field-val { font-size: 1rem; font-weight: 700; color: #e2e8f0; }
.utrosak-input {
    flex: 1;
    padding: 10px 14px !important;
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    border-radius: 8px !important;
    color: #e2e8f0 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    height: auto !important;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box !important;
    width: 100% !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.utrosak-input:focus { border-color: #f59e0b !important; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.utrosak-footer {
    padding: 14px 24px 18px;
    display: flex; gap: 10px; justify-content: flex-end;
    border-top: 1px solid #2d3f52;
}
.utrosak-btn {
    padding: 10px 26px; border-radius: 8px;
    font-size: .9rem; font-weight: 700; cursor: pointer;
    border: none; transition: background .13s, box-shadow .13s; letter-spacing: .02em;
}
.utrosak-cancel { background: transparent; border: 1px solid #475569; color: #94a3b8; }
.utrosak-cancel:hover { background: #1e293b; color: #e2e8f0; border-color: #64748b; }
.utrosak-ok { background: #2563eb; color: #fff; min-width: 90px; }
.utrosak-ok:hover { background: #3b82f6; box-shadow: 0 2px 12px rgba(37,99,235,.45); }
html[data-theme="light"] .utrosak-box    { background: #fff; border-color: #e2e8f0; box-shadow: 0 24px 64px rgba(0,0,0,.12); }
html[data-theme="light"] .utrosak-header { background: #f8fafc; border-color: #e2e8f0; }
html[data-theme="light"] .utrosak-header-title { color: #1e293b; }
html[data-theme="light"] .utrosak-input  { background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #0f172a !important; }
html[data-theme="light"] .utrosak-field-val { color: #1e293b; }
html[data-theme="light"] .utrosak-footer { border-color: #e2e8f0; }
html[data-theme="light"] .utrosak-cancel { border-color: #cbd5e1; color: #64748b; }
html[data-theme="light"] .utrosak-cancel:hover { background: #f1f5f9; color: #1e293b; }

/* ── Generic confirm modal (delete confirmation) ─────────────────── */
.pk-confirm-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9500;
}
.pk-confirm-box {
    background: #1e2a3a; border: 1px solid #334155; border-radius: 16px;
    width: 360px; max-width: calc(100vw - 32px);
    padding: 28px 28px 24px; text-align: center;
    box-shadow: 0 24px 64px rgba(0,0,0,.55);
}
.pk-confirm-icon {
    display: inline-flex; width: 52px; height: 52px; border-radius: 50%;
    background: rgba(251,191,36,.12); align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.pk-confirm-icon svg { width: 28px; height: 28px; color: #fbbf24; }
.pk-confirm-msg { color: #e2e8f0; font-size: .95rem; line-height: 1.5; margin: 0 0 24px; }
.pk-confirm-actions { display: flex; gap: 10px; justify-content: center; }
.pk-confirm-btn {
    padding: 10px 26px; border-radius: 8px;
    font-size: .9rem; font-weight: 700; cursor: pointer;
    border: none; transition: background .13s, box-shadow .13s; letter-spacing: .02em;
}
.pk-confirm-cancel { background: transparent; border: 1px solid #475569; color: #94a3b8; }
.pk-confirm-cancel:hover { background: #1e293b; color: #e2e8f0; border-color: #64748b; }
.pk-confirm-ok { background: #dc2626; color: #fff; min-width: 90px; }
.pk-confirm-ok:hover { background: #ef4444; box-shadow: 0 2px 12px rgba(220,38,38,.45); }
html[data-theme="light"] .pk-confirm-box    { background: #fff; border-color: #e2e8f0; box-shadow: 0 24px 64px rgba(0,0,0,.12); }
html[data-theme="light"] .pk-confirm-msg    { color: #1e293b; }
html[data-theme="light"] .pk-confirm-cancel { border-color: #cbd5e1; color: #64748b; }
html[data-theme="light"] .pk-confirm-cancel:hover { background: #f1f5f9; color: #1e293b; }

/* ═══════════════════════════════════════════════════════
   Pages/Purchase/ApprovingOrders.aspx
   ═══════════════════════════════════════════════════════ */
/* Page-scoped tweaks: most of the layout reuses ctrlTable's toolbar/
   filter classes (.ctbl-* in Codme.css) so this page lines up visually
   with every migrated list. Only the Authorize action button gets a
   bespoke green colour to signal "approve" semantics. */

.apo-btn-authorize {
    display: inline-flex; align-items: center; justify-content: center;
    background: #16a34a;
    color: #fff !important;
    border: none;
    padding: 8px 16px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
    text-decoration: none !important;
}
.apo-btn-authorize:hover  { background: #15803d; }
.apo-btn-authorize:active { background: #166534; }
.apo-btn-authorize::before { content: "\2713"; margin-right: 6px; font-size: 14px; font-weight: 700; }

.apo-grid input[type="checkbox"] { cursor: pointer; transform: scale(1.1); }

/* Drop the .ctbl-grid sticky-row link colour for the OrderNr hyperlink
   inside the grid so it matches the rest of the cell text colour. */
.apo-grid .ctbl-grid a { font-weight: 500; }

/* ═══════════════════════════════════════════════════════
   Pages/Purchase/ZatvaranjeNarudzbi.aspx
   ═══════════════════════════════════════════════════════ */
/* Page-scoped tweaks: most of the layout reuses ctrlTable's toolbar/
   filter classes (.ctbl-* in Codme.css) so this page lines up visually
   with every migrated list. Only the Close (Authorize-style) action
   button gets a bespoke green colour to signal "close" semantics. */

.zat-btn-close {
    display: inline-flex; align-items: center; justify-content: center;
    background: #16a34a;
    color: #fff !important;
    border: none;
    padding: .5em 1.1em;
    border-radius: 7px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
    text-decoration: none !important;
}
.zat-btn-close:hover  { background: #15803d; }
.zat-btn-close:active { background: #166534; }
.zat-btn-close::before { content: "\2713"; margin-right: 6px; font-size: 1.071rem; font-weight: 700; }

.zat-grid input[type="checkbox"] { cursor: pointer; transform: scale(1.1); }

/* "Received = 0" filter checkbox sits inside the filter bar like a
   regular filter item — give it the same vertical rhythm as the
   sibling dropdowns. */
.zat-filter-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    color: #cbd5e1;
    cursor: pointer;
    font-size: 1rem;
    user-select: none;
    height: 36px;
}
html[data-theme="light"] .zat-filter-toggle { color: #0f172a; }
.zat-filter-toggle input[type="checkbox"] { cursor: pointer; transform: scale(1.05); margin: 0; }

/* ═══════════════════════════════════════════════════════
   Pages/Sales/ImportSO.aspx
   ═══════════════════════════════════════════════════════ */
/* All font-size values use rem so they scale with the user's font
   preference (S/M/L/XL in app settings). The master sets the root
   html font-size to 13 / 14 / 16 / 18 px respectively, so 1rem === the
   user's chosen body size. Spacing/border values stay in px. */

.imp-page { max-width: 1100px; margin: 0 auto; padding: 16px 20px 80px; font-size: 1rem; }
.imp-card {
    background: #1e2a3a; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
    margin-bottom: 16px; padding: 14px 24px 18px;
}
html[data-theme="light"] .imp-card { background: #ffffff; box-shadow: 0 2px 8px rgba(0,0,0,.08); }

.imp-card-title {
    font-size: .929rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #3b82f6; margin: 0 0 12px;
}
html[data-theme="light"] .imp-card-title { color: #1d4ed8; }

/* Templates row */
.imp-template-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border: 1px dashed #2a3a50; border-radius: 8px;
    background: #0f1a27;
}
html[data-theme="light"] .imp-template-row {
    background: #f8fafc; border-color: #cbd5e1;
}
.imp-template-icon { font-size: 1.571rem; opacity: .85; }
.imp-template-name { flex: 1; font-size: 1rem; }
.imp-template-row a { text-decoration: none !important; }

/* Form row */
.imp-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.imp-field { display: flex; flex-direction: column; gap: 5px; }
.imp-field-org  { flex: 0 0 240px; }
.imp-field-type { flex: 0 0 240px; }
.imp-field-file { flex: 1 1 320px; min-width: 280px; }
.imp-field-label {
    font-size: .786rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: #5a7a9a;
}

/* Dropdowns reuse the .ctbl-filter-ddl class so they're visually identical
   to the filter dropdowns in ctrlTable. The parent column constrains the
   width via flex-basis, and we only need to neutralise the min-width:200px
   from the base class for tight layouts. */
.imp-field-org  .ctbl-filter-ddl,
.imp-field-type .ctbl-filter-ddl { min-width: 0 !important; width: 100%; }

/* File input — same dark surface as the select. Vertical sizing comes
   from padding (not fixed height/line-height) so the control grows with
   the user's font preference. The native "Choose File" button is
   restyled via ::file-selector-button (modern browsers) and
   ::-webkit-file-upload-button (Chrome/Edge/Safari fallback). */
.imp-file {
    background-color: #0c1420;
    color: #e2e8f0;
    border: 1px solid #2a3a50;
    border-radius: 8px;
    font-size: .929rem;
    width: 100%;
    cursor: pointer;
    box-sizing: border-box;
    padding: 4px 14px 4px 0;
    transition: border-color .15s, background-color .15s;
}
.imp-file:hover { border-color: #2563eb; background-color: #0f1926; }
.imp-file:focus { border-color: #3b82f6; outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }

.imp-file::file-selector-button {
    background: #2563eb;
    color: #fff;
    border: none;
    padding: .5em 1.1em;
    margin: 0 12px 0 0;
    border-radius: 7px 0 0 7px;
    cursor: pointer;
    font-size: .929rem;
    font-weight: 500;
    transition: background .15s;
}
.imp-file::file-selector-button:hover { background: #1d4ed8; }

.imp-file::-webkit-file-upload-button {
    background: #2563eb;
    color: #fff;
    border: none;
    padding: .5em 1.1em;
    margin: 0 12px 0 0;
    border-radius: 7px 0 0 7px;
    cursor: pointer;
    font-size: .929rem;
    font-weight: 500;
}
.imp-file::-webkit-file-upload-button:hover { background: #1d4ed8; }

html[data-theme="light"] .imp-file {
    background-color: #ffffff; color: #0f172a; border-color: #cbd5e1;
}
html[data-theme="light"] .imp-file:hover { background-color: #f1f5f9; border-color: #2563eb; }

/* Actions row */
.imp-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }

/* Status message — coloured by code-behind via ForeColor (red/green) */
.imp-status {
    display: inline-block; margin-top: 6px;
    padding: 6px 10px; border-radius: 6px;
    background: rgba(255,255,255,.04); font-size: .929rem;
}
html[data-theme="light"] .imp-status { background: rgba(0,0,0,.04); }

/* Preview grid wrapper */
.imp-grid-wrap {
    border: 1px solid #2a3a50; border-radius: 8px;
    overflow: auto; max-height: 60vh; margin-top: 4px;
}
html[data-theme="light"] .imp-grid-wrap { border-color: #cbd5e1; }

/* ═══════════════════════════════════════════════════════
   Pages/Purchase/ImportPO.aspx
   ═══════════════════════════════════════════════════════ */
/* All font-size values use rem so they scale with the user's font
   preference (S/M/L/XL in app settings). The master sets the root
   html font-size to 13 / 14 / 16 / 18 px respectively, so 1rem === the
   user's chosen body size. Spacing/border values stay in px. */

.imp-page { max-width: 1100px; margin: 0 auto; padding: 16px 20px 80px; font-size: 1rem; }
.imp-card {
    background: #1e2a3a; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
    margin-bottom: 16px; padding: 14px 24px 18px;
}
html[data-theme="light"] .imp-card { background: #ffffff; box-shadow: 0 2px 8px rgba(0,0,0,.08); }

.imp-card-title {
    font-size: .929rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #3b82f6; margin: 0 0 12px;
}
html[data-theme="light"] .imp-card-title { color: #1d4ed8; }

/* Templates row */
.imp-template-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border: 1px dashed #2a3a50; border-radius: 8px;
    background: #0f1a27;
}
html[data-theme="light"] .imp-template-row {
    background: #f8fafc; border-color: #cbd5e1;
}
.imp-template-icon { font-size: 1.571rem; opacity: .85; }
.imp-template-name { flex: 1; font-size: 1rem; }
.imp-template-row a { text-decoration: none !important; }

/* Form row */
.imp-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.imp-field { display: flex; flex-direction: column; gap: 5px; }
.imp-field-org  { flex: 0 0 240px; }
.imp-field-type { flex: 0 0 240px; }
.imp-field-file { flex: 1 1 320px; min-width: 280px; }
.imp-field-label {
    font-size: .786rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: #5a7a9a;
}

/* Dropdowns reuse the .ctbl-filter-ddl class so they're visually identical
   to the filter dropdowns in ctrlTable. The parent column constrains the
   width via flex-basis, and we only need to neutralise the min-width:200px
   from the base class for tight layouts. */
.imp-field-org  .ctbl-filter-ddl,
.imp-field-type .ctbl-filter-ddl { min-width: 0 !important; width: 100%; }

/* File input — same dark surface as the select. Vertical sizing comes
   from padding (not fixed height/line-height) so the control grows with
   the user's font preference. The native "Choose File" button is
   restyled via ::file-selector-button (modern browsers) and
   ::-webkit-file-upload-button (Chrome/Edge/Safari fallback). */
.imp-file {
    background-color: #0c1420;
    color: #e2e8f0;
    border: 1px solid #2a3a50;
    border-radius: 8px;
    font-size: .929rem;
    width: 100%;
    cursor: pointer;
    box-sizing: border-box;
    padding: 4px 14px 4px 0;
    transition: border-color .15s, background-color .15s;
}
.imp-file:hover { border-color: #2563eb; background-color: #0f1926; }
.imp-file:focus { border-color: #3b82f6; outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }

.imp-file::file-selector-button {
    background: #2563eb;
    color: #fff;
    border: none;
    padding: .5em 1.1em;
    margin: 0 12px 0 0;
    border-radius: 7px 0 0 7px;
    cursor: pointer;
    font-size: .929rem;
    font-weight: 500;
    transition: background .15s;
}
.imp-file::file-selector-button:hover { background: #1d4ed8; }

.imp-file::-webkit-file-upload-button {
    background: #2563eb;
    color: #fff;
    border: none;
    padding: .5em 1.1em;
    margin: 0 12px 0 0;
    border-radius: 7px 0 0 7px;
    cursor: pointer;
    font-size: .929rem;
    font-weight: 500;
}
.imp-file::-webkit-file-upload-button:hover { background: #1d4ed8; }

html[data-theme="light"] .imp-file {
    background-color: #ffffff; color: #0f172a; border-color: #cbd5e1;
}
html[data-theme="light"] .imp-file:hover { background-color: #f1f5f9; border-color: #2563eb; }

/* Actions row */
.imp-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }

/* Status message — coloured by code-behind via ForeColor (red/green) */
.imp-status {
    display: inline-block; margin-top: 6px;
    padding: 6px 10px; border-radius: 6px;
    background: rgba(255,255,255,.04); font-size: .929rem;
}
html[data-theme="light"] .imp-status { background: rgba(0,0,0,.04); }

/* Preview grid wrapper */
.imp-grid-wrap {
    border: 1px solid #2a3a50; border-radius: 8px;
    overflow: auto; max-height: 60vh; margin-top: 4px;
}
html[data-theme="light"] .imp-grid-wrap { border-color: #cbd5e1; }

/* ═══════════════════════════════════════════════════════
   Pages/Codebooks/Import.aspx
   ═══════════════════════════════════════════════════════ */
/* All font-size values use rem so they scale with the user's font
   preference (S/M/L/XL in app settings). The master sets the root
   html font-size to 13 / 14 / 16 / 18 px respectively, so 1rem === the
   user's chosen body size. Spacing/border values stay in px. */

.imp-page { max-width: 1100px; margin: 0 auto; padding: 16px 20px 80px; font-size: 1rem; }
.imp-card {
    background: #1e2a3a; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
    margin-bottom: 16px; padding: 14px 24px 18px;
}
html[data-theme="light"] .imp-card { background: #ffffff; box-shadow: 0 2px 8px rgba(0,0,0,.08); }

.imp-card-title {
    font-size: .929rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #3b82f6; margin: 0 0 12px;
}
html[data-theme="light"] .imp-card-title { color: #1d4ed8; }

/* Templates row */
.imp-template-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border: 1px dashed #2a3a50; border-radius: 8px;
    background: #0f1a27;
}
html[data-theme="light"] .imp-template-row {
    background: #f8fafc; border-color: #cbd5e1;
}
.imp-template-icon { font-size: 1.571rem; opacity: .85; }
.imp-template-name { flex: 1; font-size: 1rem; }
.imp-template-row a { text-decoration: none !important; }

/* Form row */
.imp-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.imp-field { display: flex; flex-direction: column; gap: 5px; }
.imp-field-type { flex: 0 0 240px; }
.imp-field-file { flex: 1 1 360px; min-width: 320px; }
.imp-field-label {
    font-size: .786rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: #5a7a9a;
}

/* Type dropdown reuses the .ctbl-filter-ddl class directly so it's
   visually identical to the filter dropdowns in ctrlTable. The parent
   .imp-field-type column constrains the width via flex-basis, and we
   only need to neutralise the min-width: 200px for tight layouts. */
.imp-field-type .ctbl-filter-ddl { min-width: 0 !important; width: 100%; }

/* File input — same dark surface as the select. Vertical sizing comes
   from padding (not fixed height/line-height) so the control grows with
   the user's font preference. The native "Choose File" button is
   restyled via ::file-selector-button (modern browsers) and
   ::-webkit-file-upload-button (Chrome/Edge/Safari fallback). */
.imp-file {
    background-color: #0c1420;
    color: #e2e8f0;
    border: 1px solid #2a3a50;
    border-radius: 8px;
    font-size: .929rem;
    width: 100%;
    cursor: pointer;
    box-sizing: border-box;
    padding: 4px 14px 4px 0;
    transition: border-color .15s, background-color .15s;
}
.imp-file:hover { border-color: #2563eb; background-color: #0f1926; }
.imp-file:focus { border-color: #3b82f6; outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }

.imp-file::file-selector-button {
    background: #2563eb;
    color: #fff;
    border: none;
    padding: .5em 1.1em;
    margin: 0 12px 0 0;
    border-radius: 7px 0 0 7px;
    cursor: pointer;
    font-size: .929rem;
    font-weight: 500;
    transition: background .15s;
}
.imp-file::file-selector-button:hover { background: #1d4ed8; }

.imp-file::-webkit-file-upload-button {
    background: #2563eb;
    color: #fff;
    border: none;
    padding: .5em 1.1em;
    margin: 0 12px 0 0;
    border-radius: 7px 0 0 7px;
    cursor: pointer;
    font-size: .929rem;
    font-weight: 500;
}
.imp-file::-webkit-file-upload-button:hover { background: #1d4ed8; }

html[data-theme="light"] .imp-file {
    background-color: #ffffff; color: #0f172a; border-color: #cbd5e1;
}
html[data-theme="light"] .imp-file:hover { background-color: #f1f5f9; border-color: #2563eb; }

/* Actions row */
.imp-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }

/* Status message — coloured by code-behind via ForeColor (red/green) */
.imp-status {
    display: inline-block; margin-top: 6px;
    padding: 6px 10px; border-radius: 6px;
    background: rgba(255,255,255,.04); font-size: .929rem;
}
html[data-theme="light"] .imp-status { background: rgba(0,0,0,.04); }

/* Preview grid wrapper */
.imp-grid-wrap {
    border: 1px solid #2a3a50; border-radius: 8px;
    overflow: auto; max-height: 60vh; margin-top: 4px;
}
html[data-theme="light"] .imp-grid-wrap { border-color: #cbd5e1; }

/* ═══════════════════════════════════════════════════════
   Pages/Codebooks/VrstaRepromaterijala_Edit.aspx
   ═══════════════════════════════════════════════════════ */
        .vr-edit .rm-tab,
        .vr-edit .rm-tab:hover,
        .vr-edit .rm-tab.active,
        html[data-theme="light"] .vr-edit .rm-tab,
        html[data-theme="light"] .vr-edit .rm-tab.active {
            border: none !important;
        }
        html[data-theme="light"] .vr-edit .rm-tab.active {
            background: var(--clr-surface) !important;
        }
        html[data-theme="dark"] body:has(.vr-edit) {
            background: var(--clr-surface) !important;
        }

/* ═══════════════════════════════════════════════════════
   Pages/Codebooks/GrupaProizvoda_Edit.aspx
   ═══════════════════════════════════════════════════════ */
        /* Strip rm-tab visible borders (light theme paints them #a8b3c2
           which clashes inside the modal frame). */
        .gp-edit .rm-tab,
        .gp-edit .rm-tab:hover,
        .gp-edit .rm-tab.active,
        html[data-theme="light"] .gp-edit .rm-tab,
        html[data-theme="light"] .gp-edit .rm-tab.active {
            border: none !important;
        }

        /* Light: pin the active tab to the SAME bg the rm-section actually
           paints (#f5efe6). The default rule says #f3f2f0 for both, but
           Chrome computes #f5efe6 on the section through the warm-cream
           --clr-surface chain — leaving the tab a hair lighter. Pinning
           tab.active to var(--clr-surface) keeps them in lockstep. */
        html[data-theme="light"] .gp-edit .rm-tab.active {
            background: var(--clr-surface) !important;
        }

        /* Dark: the modal body bg defaults to #1e2a3a, exactly the same as
           the rm-section bg, so the form merges with its surroundings. Push
           the body one shade darker (var(--clr-surface) = #0f1a27) so the
           form reads as a raised card on a deeper backdrop — same "form
           pops against contrasting surround" effect that light already has
           naturally (cool gray body vs warm cream form).
           :has() scopes to ONLY this page so OpisZastoja_Edit and other
           cedit-card modals keep their default look. */
        html[data-theme="dark"] body:has(.gp-edit) {
            background: var(--clr-surface) !important;   /* #0f1a27 */
        }

/* ═══════════════════════════════════════════════════════
   Pages/Production/PaletiranjeKompleti.aspx
   ═══════════════════════════════════════════════════════ */
.pali-print-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 14px;
    background: transparent; border: 1px solid #475569; border-radius: 7px;
    color: #94a3b8; font-size: 13px; font-weight: 500; cursor: pointer;
    box-sizing: border-box; transition: background .13s, color .13s, border-color .13s;
    white-space: nowrap;
}
.pali-print-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.pali-print-btn:hover { background: #1e293b; color: #e2e8f0; border-color: #64748b; }
html[data-theme="light"] .pali-print-btn { border-color: #cbd5e1; color: #64748b; }
html[data-theme="light"] .pali-print-btn:hover { background: #f1f5f9; color: #1e293b; }
.pali-toolbar .ctbl-btn-exit {
    height: 36px; padding: 0 16px; display: inline-flex;
    align-items: center; box-sizing: border-box; line-height: 1;
}
.pali-hdr-btn {
    height: 34px; padding: 0 16px; display: inline-flex;
    align-items: center; box-sizing: border-box; line-height: 1; font-size: 13px;
}
.pali-grid-wrap { overflow-x: auto; }
.pali-grid-wrap .ctbl-grid { min-width: 600px; }

/* ═══════════════════════════════════════════════════════
   Pages/Production/Paletiranje.aspx
   ═══════════════════════════════════════════════════════ */
/* ── Print button in toolbar ── */
.pali-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid #475569;
    border-radius: 7px;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    box-sizing: border-box;
    transition: background .13s, color .13s, border-color .13s;
    white-space: nowrap;
}
.pali-print-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.pali-print-btn:hover { background: #1e293b; color: #e2e8f0; border-color: #64748b; }
html[data-theme="light"] .pali-print-btn { border-color: #cbd5e1; color: #64748b; }
html[data-theme="light"] .pali-print-btn:hover { background: #f1f5f9; color: #1e293b; }

/* ── Normalize toolbar Exit + Print to same height ── */
.pali-toolbar .ctbl-btn-exit {
    height: 36px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    line-height: 1;
}

/* ── "+ New Pallet" and "Palletizing image" — same height ── */
.pali-hdr-btn {
    height: 34px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    line-height: 1;
    font-size: 13px;
}

/* ── Horizontal scroll when viewport is narrow ── */
.pali-grid-wrap { overflow-x: auto; }
.pali-grid-wrap .ctbl-grid { min-width: 700px; }

/* ═══════════════════════════════════════════════════════
   Pages/Production/Zastoji.aspx
   ═══════════════════════════════════════════════════════ */
    /* ── Zastoji page ──────────────────────────────────────────── */
    .zast-toolbar {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        flex-wrap: wrap;
    }

    /* Downtime type grid */
    .zast-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 10px;
        padding: 16px;
    }

    .zast-item {
        background: #1e2a3a;
        border: 1px solid #334155;
        border-radius: 10px;
        color: #e2e8f0;
        font-size: 1rem;
        font-weight: 600;
        padding: 20px 16px;
        cursor: pointer;
        text-align: left;
        line-height: 1.35;
        min-height: 72px;
        display: flex;
        align-items: center;
        transition: background .13s, border-color .13s, transform .1s;
    }
    .zast-item:hover {
        background: #263347;
        border-color: #f59e0b;
        transform: translateY(-2px);
        box-shadow: 0 4px 14px rgba(0,0,0,.3);
    }
    .zast-item:active {
        transform: translateY(0);
        background: #1a2333;
    }

    /* Active downtime banner */
    .zast-active { padding: 16px; }

    .zast-active-row {
        background: rgba(239,68,68,.1);
        border: 1px solid rgba(239,68,68,.35);
        border-radius: 12px;
        padding: 20px 24px;
        display: flex;
        align-items: center;
        gap: 24px;
        flex-wrap: wrap;
    }

    .zast-active-badge {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #f87171;
        font-size: .9rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .07em;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .zast-active-badge svg {
        width: 28px; height: 28px;
        flex-shrink: 0;
    }

    .zast-active-fields {
        display: flex;
        gap: 28px;
        flex-wrap: wrap;
        flex: 1;
    }
    .zast-active-field {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    .zast-active-label {
        font-size: .74rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .07em;
        color: #94a3b8;
    }
    .zast-active-value {
        font-size: 1.2rem;
        font-weight: 700;
        color: #fca5a5;
    }

    .zast-end-btn {
        padding: 12px 28px;
        background: #dc2626;
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: .95rem;
        font-weight: 700;
        cursor: pointer;
        letter-spacing: .03em;
        white-space: nowrap;
        flex-shrink: 0;
        transition: background .13s, box-shadow .13s;
    }
    .zast-end-btn:hover { background: #ef4444; box-shadow: 0 2px 10px rgba(220,38,38,.4); }
    .zast-end-btn:active { background: #b91c1c; }

    /* Light theme */
    html[data-theme="light"] .zast-item {
        background: #f8fafc;
        border-color: #e2e8f0;
        color: #1e293b;
    }
    html[data-theme="light"] .zast-item:hover {
        background: #fff7ed;
        border-color: #f59e0b;
        box-shadow: 0 4px 14px rgba(0,0,0,.08);
    }
    html[data-theme="light"] .zast-active-row {
        background: rgba(220,38,38,.06);
        border-color: rgba(220,38,38,.3);
    }
    html[data-theme="light"] .zast-active-badge { color: #dc2626; }
    html[data-theme="light"] .zast-active-label { color: #64748b; }
    html[data-theme="light"] .zast-active-value { color: #991b1b; }

/* ═══════════════════════════════════════════════════════
   UserControls/ctrlReproZalihe.ascx
   ═══════════════════════════════════════════════════════ */
.zal-host {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}

/* ── Warehouse card ──────────────────────────────────────────────── */
.zal-wh {
    background: #0f2237;
    border: 1px solid #2a5a84;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .35);
    transition: border-color .15s ease;
}
.zal-wh-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    background: linear-gradient(180deg, rgba(20, 50, 80, .3) 0%, rgba(15, 34, 55, .3) 100%);
    transition: background .12s ease;
}
.zal-wh-header:hover { background: rgba(20, 80, 140, .35); }
.zal-wh-name {
    flex: 1;
    font-size: .92rem;
    font-weight: 700;
    color: #d8ecff;
    min-width: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.zal-wh-stats {
    display: flex;
    gap: 18px;
    flex-shrink: 0;
}
.zal-wh-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    padding: 0 4px;
}
.zal-wh-stat-lbl {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #4a7ea0;
    line-height: 1;
}
.zal-wh-stat-val {
    font-size: .92rem;
    font-weight: 700;
    color: #d8ecff;
    line-height: 1;
    white-space: nowrap;
}
.zal-wh-stat--ok .zal-wh-stat-val { color: #7ee8a8; }
.zal-wh-toggle {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #60b8fa;
    flex-shrink: 0;
    transition: transform .18s ease;
}
.zal-wh-toggle svg { width: 14px; height: 14px; }
.zal-wh.is-open .zal-wh-toggle { transform: rotate(180deg); }

.zal-wh-body {
    display: none;
    border-top: 1px solid #183452;
    background: #08182a;
}
.zal-wh.is-open .zal-wh-body { display: block; }
.zal-units-wrap { overflow-x: auto; overflow-y: visible; }

/* ── Units table ─────────────────────────────────────────────────── */
.zal-units {
    width: 100%;
    border-collapse: collapse;
    font-size: .86rem;
}
.zal-units th {
    padding: 8px 12px;
    background: #071929;
    color: #5ba8d8;
    font-size: .67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid #2a5a84;
}
.zal-units th.zal-ra,
.zal-units td.zal-ra { text-align: right; }
.zal-units td {
    padding: 7px 12px;
    color: #d8ecff;
    border-bottom: 1px solid #183452;
    cursor: pointer;
    vertical-align: middle;
    white-space: nowrap;
    transition: background .1s ease, color .1s ease;
}
.zal-units tbody tr:last-child td { border-bottom: none; }
.zal-units tbody tr:hover td { background: rgba(20, 80, 140, .45); color: #fff; }

.zal-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    background: rgba(96, 165, 250, .15);
    color: #93c5fd;
    white-space: nowrap;
}
/* Distinct pill for tank/location rows so they stand out from pallets. */
.zal-kind {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(96, 165, 250, .15);
    color: #93c5fd;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}
.zal-kind--tank { background: rgba(56, 189, 248, .18); color: #7dd3fc; }
.zal-kind--loc  { background: rgba(168, 85, 247, .18); color: #d8b4fe; }

/* ── Empty state ────────────────────────────────────────────────── */
.zal-empty {
    padding: 28px 20px;
    text-align: center;
    color: #4a7ea0;
    font-style: italic;
    font-size: .9rem;
    background: #0f2237;
    border: 1px dashed #2a5a84;
    border-radius: 10px;
}

/* ── Light theme ─────────────────────────────────────────────────── */
html[data-theme="light"] .zal-wh        { background: #f0f6fd !important; border-color: #b0cceb; box-shadow: 0 3px 12px rgba(0, 0, 0, .08); }
html[data-theme="light"] .zal-wh-header { background: linear-gradient(180deg, #e6effa 0%, #f0f6fd 100%) !important; color: #0f2237 !important; }
html[data-theme="light"] .zal-wh-header:hover { background: #d8eaf9 !important; }
html[data-theme="light"] .zal-wh-name   { color: #0f2237 !important; }
html[data-theme="light"] .zal-wh-stat-lbl { color: #6b7d8e !important; }
html[data-theme="light"] .zal-wh-stat-val { color: #0f2237 !important; }
html[data-theme="light"] .zal-wh-stat--ok .zal-wh-stat-val { color: #0a5c28 !important; }
html[data-theme="light"] .zal-wh-toggle { color: #2563eb !important; }
html[data-theme="light"] .zal-wh-body   { background: #fafcff !important; border-top-color: #c0d8ee; }
html[data-theme="light"] .zal-units     { color: #0f2237 !important; }
html[data-theme="light"] .zal-units th  { background: #d8eaf9 !important; color: #1e5e99 !important; border-bottom-color: #b0cceb !important; }
html[data-theme="light"] .zal-units td  { color: #0f2237 !important; background: transparent !important; border-bottom-color: #c0d8ee !important; }
html[data-theme="light"] .zal-units tbody tr { background: transparent !important; color: #0f2237 !important; }
html[data-theme="light"] .zal-units tbody tr:hover td { background: #c0daf5 !important; color: #0f2237 !important; }
html[data-theme="light"] .zal-status    { background: rgba(37, 99, 235, .12) !important; color: #1e40af !important; }
html[data-theme="light"] .zal-kind      { background: rgba(37, 99, 235, .12) !important; color: #1e40af !important; }
html[data-theme="light"] .zal-kind--tank{ background: rgba(2, 132, 199, .15) !important; color: #075985 !important; }
html[data-theme="light"] .zal-kind--loc { background: rgba(126, 34, 206, .12) !important; color: #6b21a8 !important; }
html[data-theme="light"] .zal-empty     { color: #6b7d8e !important; background: #f0f6fd !important; border-color: #c0d8ee; }

/* ═══════════════════════════════════════════════════════
   UserControls/ctrlReproDobavljaci.ascx
   ═══════════════════════════════════════════════════════ */
    /* ── Toolbar / wrap ───────────────────────────────────────── */
    .rmd-wrap { display: flex; flex-direction: column; gap: 12px; position: relative; }
    .rmd-wrap > div { display: flex; flex-direction: column; gap: 16px; }
    .rmd-toolbar { margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
    .rmd-add-btn { display: inline-flex !important; align-items: center; gap: 6px; }
    .rmd-error { color: #ef4444; font-size: 12px; font-weight: 600; }

    /* Activity indicator — fullscreen, above the modal. */
    .rmd-busy {
        position: fixed; inset: 0;
        background: rgba(2, 6, 23, .55);
        z-index: 1500;
        display: flex; align-items: center; justify-content: center;
        flex-direction: column; gap: 14px;
        backdrop-filter: blur(2px);
    }
    .rmd-busy-spinner {
        width: 52px; height: 52px;
        border: 4px solid rgba(255, 255, 255, .25);
        border-top-color: #60a5fa;
        border-radius: 50%;
        animation: rmdSpin .8s linear infinite;
    }
    .rmd-busy-text { color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .3px; }
    @keyframes rmdSpin { to { transform: rotate(360deg); } }

    /* Grid card */
    .rmd-grid-card {
        background: #14233a; border: 1px solid #243349;
        border-radius: 10px; overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    }
    html[data-theme="light"] .rmd-grid-card {
        background: var(--clr-surface); border-color: #c9baa3;
    }
    .rmd-grid { width: 100%; }
    .rmd-grid .rmd-act-h, .rmd-grid .rmd-act-cell { width: 80px; text-align: left; }
    .rmd-grid .rmd-num-cell { text-align: right; font-variant-numeric: tabular-nums; }

    /* Neutralise the legacy .gridRow / .gridAltRow classes ASP.NET
       attaches via RowStyle/AlternatingRowStyle. defaultTheme.css
       declares `.gridRow { background:#333 !important; color:#fff
       !important; }` which makes row text INVISIBLE on the cream
       light theme. The .ctbl-grid selectors in Codme.css already
       provide proper theme-aware alternating bg + text colors —
       these overrides let those win. */
    .rmd-grid tbody tr.gridRow,
    .rmd-grid tbody tr.gridAltRow {
        background-color: transparent !important;
        color: inherit !important;
    }
    .rmd-grid tbody tr.gridRow td,
    .rmd-grid tbody tr.gridAltRow td {
        background-color: inherit !important;
        color: inherit !important;
    }
    html[data-theme="light"] .rmd-grid,
    html[data-theme="light"] .rmd-grid td { color: #1e293b !important; }
    html[data-theme="dark"]  .rmd-grid,
    html[data-theme="dark"]  .rmd-grid td { color: #cbd5e1 !important; }

    .rmd-act-btn {
        display: inline-flex !important; align-items: center; justify-content: center;
        width: 28px; height: 28px; padding: 0 !important;
        border: 1px solid #2a3a50; border-radius: 6px;
        background: transparent;
        text-decoration: none !important;
        transition: background .12s, border-color .12s;
        margin: 0 2px; vertical-align: middle;
    }
    .rmd-act-btn img { width: 14px; height: 14px; display: block; }
    .rmd-act-edit:hover { background: rgba(96, 165, 250, .12); border-color: #3b82f6; }
    .rmd-act-del:hover  { background: rgba(239, 68, 68, .12);  border-color: #ef4444; }
    html[data-theme="light"] .rmd-act-btn { border-color: #c9baa3; }
    html[data-theme="light"] .rmd-act-edit:hover { background: #dde9f7; border-color: #2563eb; }
    html[data-theme="light"] .rmd-act-del:hover  { background: #fee2e2; border-color: #ef4444; }

    .rmd-empty {
        text-align: center; padding: 24px 0; margin: 0;
        font-size: .95rem; color: #94a3b8; font-weight: 500;
    }

    /* Modal */
    .rmd-modal {
        position: fixed; inset: 0; z-index: 1100;
        background: rgba(2, 6, 23, .55);
        display: flex; align-items: center; justify-content: center;
        padding: 20px; box-sizing: border-box;
        backdrop-filter: blur(2px);
    }
    .rmd-modal-dialog {
        background: #1e2a3a;
        border: 1px solid #2a3a50;
        border-radius: 12px;
        box-shadow: 0 30px 60px rgba(0, 0, 0, .55);
        width: min(880px, 100%);
        max-height: 90vh;
        display: flex; flex-direction: column; overflow: hidden;
    }
    html[data-theme="light"] .rmd-modal-dialog {
        background: var(--clr-surface); border-color: #c9baa3;
    }
    .rmd-modal-title {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 18px;
        background: #14233a;
        border-bottom: 1px solid #2a3a50;
        font-size: 14px; font-weight: 700; color: #cbd5e1;
        letter-spacing: .3px;
    }
    html[data-theme="light"] .rmd-modal-title {
        background: #eef2f7; border-bottom-color: #c9baa3; color: #1e293b;
    }
    .rmd-modal-close {
        width: 28px; height: 28px; border: none; background: transparent;
        font-size: 22px; line-height: 1; color: #94a3b8;
        cursor: pointer; border-radius: 6px;
        transition: background .12s, color .12s;
    }
    .rmd-modal-close:hover { background: #2a3a50; color: #fff; }
    html[data-theme="light"] .rmd-modal-close { color: #475569; }
    html[data-theme="light"] .rmd-modal-close:hover { background: #e2e8f0; color: #0f172a; }
    .rmd-modal-body {
        padding: 18px;
        overflow-y: auto;
        flex: 1 1 auto;
        display: flex; flex-direction: column; gap: 4px;
        min-height: 280px;
    }
    .rmd-modal-footer {
        display: flex; justify-content: flex-end; gap: 8px;
        padding: 12px 18px;
        background: #14233a;
        border-top: 1px solid #2a3a50;
    }
    html[data-theme="light"] .rmd-modal-footer {
        background: #eef2f7; border-top-color: #c9baa3;
    }

    /* Modern form-control styling inside the modal — override legacy
       .floating-label .form-control (dark #333 / yellow text) so all
       inputs feel native to the rm-* design system. */
    .rmd-modal-body input[type="text"],
    .rmd-modal-body input[type="number"],
    .rmd-modal-body select,
    .rmd-modal-body textarea {
        background-color: #1e2a3a !important;
        color: #cbd5e1 !important;
        border: 1px solid #2a3a50 !important;
        border-radius: 6px !important;
        padding: 8px 12px !important;
        height: auto !important;
        font-size: 13px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        background-image: none !important;
        font-weight: 400 !important;
        line-height: 1.4 !important;
        min-height: 0 !important;
    }
    html[data-theme="light"] .rmd-modal-body input[type="text"],
    html[data-theme="light"] .rmd-modal-body input[type="number"],
    html[data-theme="light"] .rmd-modal-body select,
    html[data-theme="light"] .rmd-modal-body textarea {
        background-color: #ffffff !important;
        color: #0f172a !important;
        border-color: #a8b3c2 !important;
    }
    .rmd-modal-body input:focus,
    .rmd-modal-body select:focus,
    .rmd-modal-body textarea:focus {
        border-color: #3b82f6 !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, .2) !important;
    }
    html[data-theme="light"] .rmd-modal-body input:focus,
    html[data-theme="light"] .rmd-modal-body select:focus,
    html[data-theme="light"] .rmd-modal-body textarea:focus {
        border-color: #2563eb !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .18) !important;
    }
    .rmd-modal-body select {
        background-image: linear-gradient(45deg, transparent 50%, #94a3b8 50%),
                           linear-gradient(135deg, #94a3b8 50%, transparent 50%) !important;
        background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50% !important;
        background-size: 5px 5px, 5px 5px !important;
        background-repeat: no-repeat !important;
        padding-right: 32px !important;
    }
    html[data-theme="light"] .rmd-modal-body select {
        background-image: linear-gradient(45deg, transparent 50%, #475569 50%),
                           linear-gradient(135deg, #475569 50%, transparent 50%) !important;
    }

    /* Price+Currency inline pair (65/35). */
    .rmd-price-row { display: flex; gap: 8px; }
    .rmd-price-row > input[type="text"] { flex: 1 1 65%; }
    .rmd-price-row > select { flex: 0 0 35%; }

    /* Date input — 160 px fixed, like ctrlDateRange. */
    .rmd-modal-body input.rm-date-input.rmd-date {
        width: 160px !important;
        flex: 0 0 auto !important;
    }

    /* Main / Active checkbox row. Explicit theme-aware colors —
       `color: inherit` would fall back to the page's color which is
       white on dark theme and unset on light, making the text
       invisible on the cream modal background. */
    .rmd-flags { flex-direction: row !important; align-items: center; gap: 18px; flex-wrap: wrap; }
    .rmd-flags > .rm-lbl { width: 100%; }
    .rmd-flag {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: 13px; font-weight: 500; cursor: pointer; user-select: none;
        color: #cbd5e1;
    }
    html[data-theme="light"] .rmd-flag { color: #1e293b; }
    .rmd-flag input[type="checkbox"] { width: auto !important; margin: 0; }

    /* Default text color for everything in the modal body — covers
       not just .rmd-flag but any plain text or future controls we add. */
    .rmd-modal-body { color: #cbd5e1; }
    html[data-theme="light"] .rmd-modal-body { color: #1e293b; }

    /* Required-field asterisk marker. */
    .rm-lbl-req::after { content: ' *'; color: #ef4444; }

    /* Typeahead picker inside the modal — suppress the inherited
       chevron from .rm-supplier-picker; it's a typeahead, not a select. */
    .rmd-picker { position: relative; }
    .rmd-picker .rm-supplier-results { z-index: 1200; }
    .rmd-modal-body .rm-supplier-picker input[type="text"] {
        background-image: none !important;
        padding-right: 12px !important;
    }

/* ═══════════════════════════════════════════════════════
   UserControls/ctrlProizvodKupci.ascx
   ═══════════════════════════════════════════════════════ */
    /* ── Toolbar above the grid ───────────────────────────────── */
    /* NOTE: the toolbar + grid + modal live inside an UpdatePanel
       wrapper div, NOT as direct children of .fpk-wrap — so the
       gap: 12px on .fpk-wrap doesn't reach them. We apply the same
       flex/gap to the UpdatePanel's rendered div so the spacing
       still works, AND keep an explicit margin on .fpk-toolbar as a
       belt-and-suspenders fallback. */
    .fpk-wrap { display: flex; flex-direction: column; gap: 12px; position: relative; }
    .fpk-wrap > div { display: flex; flex-direction: column; gap: 16px; }
    .fpk-toolbar { margin-bottom: 8px; }

    /* Local activity indicator — shown while FpkUpdatePanel is in an
       async postback (Save / Delete / FpkEdit / page change). Fullscreen
       fixed with z-index ABOVE the modal (1100) so when Save fires from
       inside an open modal the spinner overlays the modal too — clear
       visual feedback that the form is busy. */
    .fpk-busy {
        position: fixed; inset: 0;
        background: rgba(2, 6, 23, .55);
        z-index: 1500;
        display: flex; align-items: center; justify-content: center;
        flex-direction: column; gap: 14px;
        backdrop-filter: blur(2px);
    }
    .fpk-busy-spinner {
        width: 52px; height: 52px;
        border: 4px solid rgba(255, 255, 255, .25);
        border-top-color: #60a5fa;
        border-radius: 50%;
        animation: fpkSpin .8s linear infinite;
    }
    .fpk-busy-text {
        color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .3px;
    }
    @keyframes fpkSpin { to { transform: rotate(360deg); } }
    .fpk-toolbar { display: flex; align-items: center; gap: 10px; padding: 0; }
    .fpk-add-btn { display: inline-flex !important; align-items: center; gap: 6px; }
    .fpk-add-icon { font-size: 16px; font-weight: 700; line-height: 1; margin-top: -1px; }

    /* ── Grid card ─────────────────────────────────────────────── */
    .fpk-grid-card {
        background: #14233a; border: 1px solid #243349;
        border-radius: 10px; overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    }
    html[data-theme="light"] .fpk-grid-card {
        background: var(--clr-surface); border-color: #c9baa3;
    }
    .fpk-grid { width: 100%; }
    .fpk-grid .fpk-act-h, .fpk-grid .fpk-act-cell { width: 80px; text-align: left; }
    .fpk-grid .fpk-num-cell { text-align: right; font-variant-numeric: tabular-nums; }

    .fpk-act-btn {
        display: inline-flex !important; align-items: center; justify-content: center;
        width: 28px; height: 28px; padding: 0 !important;
        border: 1px solid #2a3a50; border-radius: 6px;
        background: transparent;
        text-decoration: none !important;
        transition: background .12s, border-color .12s;
        margin: 0 2px; vertical-align: middle;
    }
    .fpk-act-btn img { width: 14px; height: 14px; display: block; }
    .fpk-act-edit:hover { background: rgba(96, 165, 250, .12); border-color: #3b82f6; }
    .fpk-act-del:hover  { background: rgba(239, 68, 68, .12);  border-color: #ef4444; }
    html[data-theme="light"] .fpk-act-btn { border-color: #c9baa3; }
    html[data-theme="light"] .fpk-act-edit:hover { background: #dde9f7; border-color: #2563eb; }
    html[data-theme="light"] .fpk-act-del:hover  { background: #fee2e2; border-color: #ef4444; }

    .fpk-empty {
        text-align: center; padding: 24px 0; margin: 0;
        font-size: .95rem; color: #94a3b8; font-weight: 500;
    }

    /* ── Modal ─────────────────────────────────────────────────── */
    .fpk-modal {
        position: fixed; inset: 0; z-index: 1100;
        background: rgba(2, 6, 23, .55);
        display: flex; align-items: center; justify-content: center;
        padding: 20px; box-sizing: border-box;
        backdrop-filter: blur(2px);
    }
    .fpk-modal-dialog {
        background: #1e2a3a;
        border: 1px solid #2a3a50;
        border-radius: 12px;
        box-shadow: 0 30px 60px rgba(0, 0, 0, .55);
        width: min(720px, 100%);
        max-height: 90vh;
        display: flex; flex-direction: column; overflow: hidden;
    }
    html[data-theme="light"] .fpk-modal-dialog {
        background: var(--clr-surface); border-color: #c9baa3;
    }
    .fpk-modal-title {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 18px;
        background: #14233a;
        border-bottom: 1px solid #2a3a50;
        font-size: 14px; font-weight: 700; color: #cbd5e1;
        letter-spacing: .3px;
    }
    html[data-theme="light"] .fpk-modal-title {
        background: #eef2f7; border-bottom-color: #c9baa3; color: #1e293b;
    }
    .fpk-modal-close {
        width: 28px; height: 28px; border: none; background: transparent;
        font-size: 22px; line-height: 1; color: #94a3b8;
        cursor: pointer; border-radius: 6px;
        transition: background .12s, color .12s;
    }
    .fpk-modal-close:hover { background: #2a3a50; color: #fff; }
    html[data-theme="light"] .fpk-modal-close { color: #475569; }
    html[data-theme="light"] .fpk-modal-close:hover { background: #e2e8f0; color: #0f172a; }
    .fpk-modal-body {
        padding: 18px;
        overflow: visible;  /* let .rm-supplier-results escape the body */
        flex: 1 1 auto;
        display: flex; flex-direction: column; gap: 4px;
        min-height: 280px;
    }
    .fpk-modal-footer {
        display: flex; justify-content: flex-end; gap: 8px;
        padding: 12px 18px;
        background: #14233a;
        border-top: 1px solid #2a3a50;
    }
    html[data-theme="light"] .fpk-modal-footer {
        background: #eef2f7; border-top-color: #c9baa3;
    }

    /* Required-field asterisk marker, matches rm-lbl pattern. */
    .rm-lbl-req::after { content: ' *'; color: #ef4444; }

    /* ── Modern form-control styling INSIDE the modal ─────────
       Every input/select inside this modal — including the legacy
       form-control elements that ctrlCijenaUValuti ships with —
       gets the rm-field look (slate-navy in dark, white in light
       cream). Default.css's `.floating-label input.form-control`
       forces background:#333 + yellow text, so we override with
       !important to win the cascade. The chevron on selects is
       suppressed (appearance:none) and replaced with a themed one
       drawn via background-image gradients. */
    .fpk-modal-body input[type="text"],
    .fpk-modal-body input[type="number"],
    .fpk-modal-body input.form-control,
    .fpk-modal-body select,
    .fpk-modal-body select.form-control,
    .fpk-modal-body textarea {
        background-color: #1e2a3a !important;
        color: #cbd5e1 !important;
        border: 1px solid #2a3a50 !important;
        border-radius: 6px !important;
        padding: 8px 12px !important;
        height: auto !important;
        font-size: 13px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        background-image: none !important;
        font-weight: 400 !important;
        line-height: 1.4 !important;
        min-height: 0 !important;
    }
    html[data-theme="light"] .fpk-modal-body input[type="text"],
    html[data-theme="light"] .fpk-modal-body input[type="number"],
    html[data-theme="light"] .fpk-modal-body input.form-control,
    html[data-theme="light"] .fpk-modal-body select,
    html[data-theme="light"] .fpk-modal-body select.form-control,
    html[data-theme="light"] .fpk-modal-body textarea {
        background-color: #ffffff !important;
        color: #0f172a !important;
        border-color: #a8b3c2 !important;
    }
    .fpk-modal-body input:focus,
    .fpk-modal-body select:focus,
    .fpk-modal-body textarea:focus {
        border-color: #3b82f6 !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, .2) !important;
    }
    html[data-theme="light"] .fpk-modal-body input:focus,
    html[data-theme="light"] .fpk-modal-body select:focus,
    html[data-theme="light"] .fpk-modal-body textarea:focus {
        border-color: #2563eb !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .18) !important;
    }
    /* Custom chevron for selects (we suppressed the native one above). */
    .fpk-modal-body select {
        background-image: linear-gradient(45deg, transparent 50%, #94a3b8 50%),
                           linear-gradient(135deg, #94a3b8 50%, transparent 50%) !important;
        background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50% !important;
        background-size: 5px 5px, 5px 5px !important;
        background-repeat: no-repeat !important;
        padding-right: 32px !important;
    }
    html[data-theme="light"] .fpk-modal-body select {
        background-image: linear-gradient(45deg, transparent 50%, #475569 50%),
                           linear-gradient(135deg, #475569 50%, transparent 50%) !important;
    }
    /* Suppress the legacy floating-label chrome — we use our own
       .rm-lbl headers above each field. */
    .fpk-modal-body .floating-label {
        margin: 0 !important; padding: 0 !important; position: static !important;
    }
    .fpk-modal-body .floating-label > label { display: none !important; }

    /* ── Price + Currency layout (price ~65%, currency ~35%). */
    .fpk-price-wrap > .rm-lbl { display: block; margin-bottom: 3px; }
    .fpk-price-wrap table {
        margin: 0 !important; border-collapse: collapse !important;
        width: 100% !important;
    }
    .fpk-price-wrap table tr,
    .fpk-price-wrap table td {
        padding: 0 !important; vertical-align: top !important;
        border: 0 !important; background: transparent !important;
    }
    .fpk-price-wrap table td:first-child  { width: 65%; padding-right: 8px !important; }
    .fpk-price-wrap table td:nth-child(2) { width: 35%; }

    /* ── Typeahead picker inside the modal ───────────────────── */
    .fpk-picker { position: relative; }
    .fpk-picker .rm-supplier-results { z-index: 1200; }
    /* Picker is a typeahead, not a <select>; suppress any inherited
       dropdown chevron so it doesn't read as a dropdown. */
    .fpk-modal-body .rm-supplier-picker input[type="text"] {
        background-image: none !important;
        padding-right: 12px !important;
    }

/* ═══════════════════════════════════════════════════════
   UserControls/ctrlUploadedDocuments.ascx
   ═══════════════════════════════════════════════════════ */
    .udcUploadProgress {
        margin: 8px 0 0 0;
        padding: 10px;
        border: 1px solid #2a3a50;
        border-radius: 7px;
        background: rgba(15, 26, 39, .35);
    }
    .udcUploadProgressHeader {
        display: flex; align-items: center; justify-content: space-between;
        gap: 8px; margin-bottom: 8px;
    }
    .udcUploadSummary { color: #cbd5e1; font-weight: 600; font-size: 13px; }
    .udcUploadQueue   { max-height: 230px; overflow: auto;
                         border-top: 1px solid #2a3a50; padding-top: 6px; }
    .udcUploadItem    { padding: 6px 0; border-bottom: 1px solid #1e2a3a; }
    .udcUploadItem:last-child { border-bottom: none; }
    .udcUploadItemTop {
        display: flex; align-items: center; justify-content: space-between;
        gap: 8px; margin-bottom: 4px;
    }
    .udcUploadName {
        color: #cbd5e1; font-weight: 600;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        max-width: 520px;
    }
    .udcUploadState { color: #94a3b8; font-size: 12px; white-space: nowrap; }
    .udcUploadBar {
        height: 8px; border-radius: 999px; overflow: hidden; background: #1e2a3a;
    }
    .udcUploadBarFill {
        display: block; width: 0%; height: 100%;
        background: #3b82f6; transition: width .12s linear;
    }
    /* Download icon — blue-tinted in dark theme so it matches the Edit pencil
       (color #60a5fa) used in Komercijalisti and other restyled tabs. The
       trash image stays as-is so the action column reads consistently. */
    .udc-download-icon { color: #60a5fa; text-decoration: none; }
    .udc-download-icon:hover { color: #93c5fd; }
    html[data-theme="light"] .udc-download-icon { color: #2563eb; }
    html[data-theme="light"] .udc-download-icon:hover { color: #1d4ed8; }

    /* "File not found" state — applied when the row's underlying file is gone.
       NavigateUrl is empty in that case, so HyperLink renders as a <span>
       (no <a>); the modifier just dims the icon and disables the cursor so
       the user knows the action is unavailable. The tooltip carries the
       explanation. */
    .udc-download-icon--missing { color: #6b7c93 !important; cursor: not-allowed; opacity: .55; }
    .udc-download-icon--missing:hover { color: #6b7c93 !important; }
    html[data-theme="light"] .udc-download-icon--missing { color: #94a3b8 !important; }
    html[data-theme="light"] .udc-download-icon--missing:hover { color: #94a3b8 !important; }