*,*::before,*::after{box-sizing:border-box}

:root{
    --surface-0:var(--bodyBg,#f7f7f7);
    --surface-1:var(--cardBg,#ffffff);
    --surface-2:var(--tableHeadBg,#f3f5f8);
    --surface-3:var(--tableAltBg,#f8fafc);
    --surface-hover:var(--cardHoverBg,#eef3ff);
    --surface-active:var(--cardActiveBg,#e3ebff);
    --text-1:var(--bodyText,#222222);
    --text-2:var(--cardText,var(--bodyText,#222222));
    --text-muted:#667085;
    --border-1:var(--cardBorder,#d0d7e2);
    --border-2:#d9e0ea;
    --menu-surface:var(--menuBg,var(--primary,#1a2740));
    --menu-text:var(--menuText,#ffffff);
    --input-bg:#ffffff;
    --input-text:var(--bodyText,#222222);
    --input-border:#c6cfdb;
    --btn-surface:var(--btnBg,var(--primary,#0366d6));
    --btn-text:var(--btnText,#ffffff);
    --focus-ring:rgba(37,99,235,.28);
    --shadow-sm:0 1px 2px rgba(16,24,40,.08);
    --shadow-md:0 8px 24px rgba(16,24,40,.08);
    --success:#0b6;
    --danger:#d33;
}

html[data-theme="dark"]{
    --surface-0:#0b0f19;
    --surface-1:#121a2a;
    --surface-2:#172235;
    --surface-3:#101827;
    --surface-hover:#18233a;
    --surface-active:#1d2b45;
    --text-1:#e7eaf0;
    --text-2:#f3f6fb;
    --text-muted:#a9b4c7;
    --border-1:#22304c;
    --border-2:#2d3e60;
    --input-bg:#0f1726;
    --input-text:#e7eaf0;
    --input-border:#2a3a58;
    --focus-ring:rgba(147,197,253,.28);
    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --shadow-md:0 18px 36px rgba(0,0,0,.28);
    --tableBg:#0f1726;
    --tableAltBg:#132034;
    --tableHeadBg:#1a2840;
    --tableHeadText:#e7eaf0;
}

html[data-theme="dark"] .tile .tile-ic {
    color: #e7eaf0;
}

html[data-theme="dark"] .tile:hover {
    color: #e7eaf0;
}

html,body{min-height:100%}
body{
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    margin:0;
    background:var(--surface-0);
    color:var(--text-1);
}

a{color:inherit}
.container{max-width:var(--pageWidth,1100px);margin:0 auto;padding:16px}

.top{
    background:var(--menu-surface);
    border-bottom:1px solid var(--border-1);
    box-shadow:var(--shadow-sm);
}
.top .container{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand a,.nav a{text-decoration:none;color:var(--menu-text)}
.brand a{font-weight:700}
.nav{display:flex;gap:8px;flex-wrap:wrap}
.nav-link{display:inline-flex;align-items:center;gap:8px;padding:var(--menuPadY,8px) var(--menuPadX,10px);border-radius:var(--menuItemRadius,12px);transition:background .12s ease,color .12s ease,border-color .12s ease;}
.nav-link:hover{background:var(--menuHoverBg,rgba(255,255,255,0.10))}
.nav-link:active{background:var(--menuActiveBg,rgba(255,255,255,0.16))}
.nav-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--menuIconColor,var(--menu-text));font-size:var(--menuIconSize,16px);line-height:1}
html[data-menuiconpos="none"] .nav-icon{display:none}
html[data-menuiconpos="right"] .nav-link{flex-direction:row-reverse}
.auth{display:flex;gap:10px;align-items:center}
html[data-theme="dark"][data-darkmenu="1"] .top{background:#0f1726;border-bottom-color:var(--border-1)}
html[data-theme="dark"][data-darkmenu="1"] .brand a,
html[data-theme="dark"][data-darkmenu="1"] .nav a{color:#e7eaf0}

.badge{
    background:var(--surface-2);
    border:1px solid var(--border-1);
    color:var(--text-1);
    padding:2px 8px;
    border-radius:999px;
    font-size:12px;
}
.card{
    background:var(--surface-1);
    color:var(--text-2);
    border:1px solid var(--border-1);
    border-radius:10px;
    padding:14px;
    margin:12px 0;
    box-shadow:var(--shadow-sm);
}

/* Modern big tiles */
.tile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:720px){.tile-grid{grid-template-columns:1fr}}
.tile{
    display:flex;
    gap:14px;
    align-items:flex-start;
    text-decoration:none;
    background:var(--surface-1);
    color:var(--text-2);
    border:1px solid var(--border-1);
    border-radius:var(--cardRadius,16px);
    padding:var(--cardPad,18px);
    box-shadow:var(--cardShadow,var(--shadow-md));
    transition:transform .08s ease, filter .08s ease, background .08s ease, border-color .08s ease;
}
.tile:hover{background:var(--surface-hover);color:var(--cardHoverText,var(--text-2));transform:translateY(-1px)}
.tile:active{background:var(--surface-active);color:var(--cardActiveText,var(--text-2));transform:translateY(0)}
.tile .tile-ic{flex:0 0 auto;color:var(--homeIconColor,var(--primary,#1a2740));font-size:var(--homeIconSize,28px);line-height:1;margin-top:2px}
.tile .tile-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.tile .tile-title{font-weight:800;font-size:18px;line-height:1.2}
.tile .tile-sub{font-size:13px;opacity:.85}

.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px 0}
.section-title h2{margin:0;font-size:18px}

.table{width:100%;border-collapse:separate;border-spacing:0;background:var(--tableBg,var(--surface-1));color:var(--text-1);border:1px solid var(--border-1);border-radius:14px;overflow:hidden}
.table th,.table td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-1);color:var(--text-1)}
.table thead th{background:var(--tableHeadBg,var(--surface-2));color:var(--tableHeadText,var(--text-1));font-weight:var(--tableHeadWeight,700)}
.table tbody tr{background:var(--tableBg,var(--surface-1))}
.table tbody td{background:transparent;color:var(--text-1)}
.table tbody tr:nth-child(even){background:var(--tableAltBg,var(--surface-3))}
.table tbody tr:hover{background:var(--surface-hover)}
.table tr:last-child td{border-bottom:none}
.table input,.table select,.table textarea{background:var(--input-bg);color:var(--input-text)}
html[data-theme="dark"] .table,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td{border-color:var(--border-1)}
html[data-theme="dark"] .table tbody tr:hover td{color:var(--text-2)}

.row{display:flex;gap:12px;flex-wrap:wrap}
.form-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;align-items:end}
.form-grid > *{min-width:0}
.form-col-1{grid-column:span 1}.form-col-2{grid-column:span 2}.form-col-3{grid-column:span 3}.form-col-4{grid-column:span 4}.form-col-5{grid-column:span 5}.form-col-6{grid-column:span 6}.form-col-7{grid-column:span 7}.form-col-8{grid-column:span 8}.form-col-9{grid-column:span 9}.form-col-10{grid-column:span 10}.form-col-11{grid-column:span 11}.form-col-12{grid-column:span 12}
@media (max-width:980px){.form-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.form-col-lg-6{grid-column:span 6}}
@media (max-width:720px){.form-grid{grid-template-columns:1fr}.form-grid > *{grid-column:1 / -1 !important}}

input,select,textarea,button{
    font:inherit;
    padding:10px 10px;
    border:1px solid var(--input-border);
    border-radius:12px;
}
input,select,textarea{
    background:var(--input-bg);
    color:var(--input-text);
}
input::placeholder,textarea::placeholder{color:var(--text-muted)}
input:focus,select:focus,textarea:focus,button:focus,.btn:focus,a:focus{
    outline:none;
    border-color:var(--primary,#2563eb);
    box-shadow:0 0 0 3px var(--focus-ring);
}
button{
    cursor:pointer;
    background:var(--btn-surface);
    color:var(--btn-text);
    border:1px solid var(--btn-surface);
}
button.secondary{background:var(--surface-2);color:var(--text-1);border-color:var(--border-1)}

.msg{padding:10px 12px;border-radius:12px;margin:10px 0}
.msg.ok{background:#e7f7ea;border:1px solid #b6e2c0;color:#14532d}
.msg.err{background:#fdeaea;border:1px solid #f2b8b8;color:#7f1d1d}
html[data-theme="dark"] .msg.ok{background:rgba(22,101,52,.18);border-color:rgba(34,197,94,.35);color:#bbf7d0}
html[data-theme="dark"] .msg.err{background:rgba(127,29,29,.22);border-color:rgba(248,113,113,.35);color:#fecaca}
.small{font-size:12px;color:var(--text-muted)}
.muted{color:var(--text-muted);font-size:13px}
label{display:block;margin-top:10px;margin-bottom:4px;font-weight:600;color:var(--text-1)}
.form{max-width:420px}

.btn,button,.icon-btn{
    transition:filter .12s ease,transform .04s ease,background .12s ease,border-color .12s ease,color .12s ease;
}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 14px;
    border-radius:12px;
    background:var(--btn-surface);
    color:var(--btn-text);
    text-decoration:none;
    border:1px solid var(--btn-surface);
}
.btn:hover,button:hover{filter:brightness(0.96)}
.btn:active,button:active{transform:translateY(1px)}
.btn.secondary{background:var(--accent,#2c3f63);border-color:var(--accent,#2c3f63);color:#fff}
.btn.primary{background:var(--success);border-color:var(--success);color:#fff}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}

.icon-btn{
    background:transparent;
    color:inherit;
    border:1px solid transparent;
    padding:8px;
    margin:0;
    cursor:pointer;
    font-size:20px;
    line-height:1;
    border-radius:10px;
}
.icon-btn:hover{background:rgba(127,127,127,.12)}
.icon-btn:focus{outline:none;border-color:transparent;box-shadow:0 0 0 3px var(--focus-ring)}

.results{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.results .item{background:var(--surface-2);border:1px solid var(--border-1);border-radius:8px;padding:8px;cursor:pointer;color:var(--text-1)}
.results .item:hover{background:var(--surface-hover)}

pre,code{color:inherit}
hr{border:none;border-top:1px solid var(--border-1);margin:16px 0}
/* Attachment preview modal */
.att-modal{position:fixed;inset:0;display:none;z-index:9999}
.att-modal[aria-hidden="true"]{display:none}
.att-modal.open,.att-modal[aria-hidden="false"]{display:block}
.att-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px)}
.att-modal-card{position:relative;max-width:1100px;margin:6vh auto;max-height:88vh;background:var(--cardBg,#fff);color:var(--cardText,#111);border:1px solid var(--cardBorder,#ddd);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.35);display:flex;flex-direction:column;overflow:hidden}
.att-modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 12px;border-bottom:1px solid var(--cardBorder,#ddd)}
.att-modal-title{font-weight:800}
.att-modal-body{padding:12px;overflow:auto}
@media (max-width:720px){.att-modal-card{margin:3vh 10px;max-height:94vh}}

/* OCR Upload Overlay */
.ocr-overlay{position:fixed;inset:0;z-index:9999;display:none;}
.ocr-overlay.open{display:block;}
.ocr-overlay-backdrop{position:absolute;inset:0;background:rgba(255,255,255,0.40);backdrop-filter:blur(var(--ocr-blur,10px));-webkit-backdrop-filter:blur(var(--ocr-blur,10px));}
html[data-theme="dark"] .ocr-overlay-backdrop{background:rgba(0,0,0,0.45);}
.ocr-overlay-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,92vw);border-radius:18px;border:1px solid rgba(0,0,0,0.10);background:rgba(255,255,255,0.80);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:22px;box-shadow:0 18px 50px rgba(0,0,0,0.18);display:flex;flex-direction:column;gap:18px;align-items:center;justify-content:center;}
 .ocr-overlay-card{font-size:var(--ocr-text-size,14px);}
html[data-theme="dark"] .ocr-overlay-card{background:rgba(18,26,42,0.86);border-color:#22304c;box-shadow:0 18px 50px rgba(0,0,0,0.45);}

.ocr-overlay-anim{width:100%;display:flex;align-items:center;justify-content:center;min-height:var(--ocr-spinner-size,110px);color:var(--primary,#1a2740);}
html[data-theme="dark"] .ocr-overlay-anim{color:#e7eaf0;}

.ocr-overlay-result{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--bodyText,#222)}
html[data-theme="dark"] .ocr-overlay-result{color:#e7eaf0}
.ocr-result-lines{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1}
.ocr-result-label{font-weight:800;font-size:1.1em;line-height:1.2}
.ocr-result-value{font-size:1em;opacity:0.95;word-break:break-word}
.ocr-result-icon{flex:0 0 auto;width:var(--ocr-icon-size,56px);height:var(--ocr-icon-size,56px);display:flex;align-items:center;justify-content:center;border-radius:16px;border:1px solid rgba(0,0,0,0.10)}
html[data-theme="dark"] .ocr-result-icon{border-color:#22304c}
.ocr-result-icon.ok{color:#0b6;background:rgba(11,102,0,0.08)}
.ocr-result-icon.err{color:#d33;background:rgba(221,51,51,0.08)}

.ocr-svg-check path{stroke-dasharray:90;stroke-dashoffset:90;animation:ocrDraw 700ms ease forwards;}
.ocr-svg-cross{opacity:0;animation:ocrFade 550ms ease forwards;}
@keyframes ocrDraw{to{stroke-dashoffset:0;}}
@keyframes ocrFade{to{opacity:1;}}

/* Spinners (8) */
.ocr-spinner{width:var(--ocr-spinner-size,64px);height:var(--ocr-spinner-size,64px);display:inline-block;transform-origin:center;}
.ocr-result-icon svg{width:var(--ocr-icon-size,56px);height:var(--ocr-icon-size,56px);}

.ocr-spinner-1{border:7px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ocrSpin 900ms linear infinite;}
@keyframes ocrSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

.ocr-spinner-2{position:relative;}
.ocr-spinner-2::before,.ocr-spinner-2::after{content:"";position:absolute;top:50%;left:50%;width:14px;height:14px;border-radius:50%;background:currentColor;transform:translate(-50%,-50%);opacity:.75;}
.ocr-spinner-2::before{animation:ocrBounceL 900ms ease-in-out infinite;}
.ocr-spinner-2::after{animation:ocrBounceR 900ms ease-in-out infinite;}
@keyframes ocrBounceL{0%,100%{transform:translate(-50%,-50%) translateX(-16px) scale(0.85);}50%{transform:translate(-50%,-50%) translateX(16px) scale(1.15);}}
@keyframes ocrBounceR{0%,100%{transform:translate(-50%,-50%) translateX(16px) scale(0.85);}50%{transform:translate(-50%,-50%) translateX(-16px) scale(1.15);}}

.ocr-spinner-3{position:relative;}
.ocr-spinner-3::before{content:"";position:absolute;inset:6px;border-radius:50%;border:6px dotted currentColor;animation:ocrSpin 1100ms linear infinite;opacity:.75;}

.ocr-spinner-4{display:flex;gap:6px;align-items:flex-end;justify-content:center;}
.ocr-spinner-4 span{width:8px;height:20px;border-radius:6px;background:currentColor;opacity:.75;animation:ocrBars 900ms ease-in-out infinite;}
.ocr-spinner-4 span:nth-child(2){animation-delay:120ms;}
.ocr-spinner-4 span:nth-child(3){animation-delay:240ms;}
.ocr-spinner-4 span:nth-child(4){animation-delay:360ms;}
@keyframes ocrBars{0%,100%{transform:scaleY(0.45);}50%{transform:scaleY(1.25);}}

.ocr-spinner-5{position:relative;}
.ocr-spinner-5::before{content:"";position:absolute;inset:10px;border-radius:14px;background:currentColor;opacity:.25;animation:ocrPulse 900ms ease-in-out infinite;}
@keyframes ocrPulse{0%,100%{transform:scale(0.85);}50%{transform:scale(1.08);}}

.ocr-spinner-6{position:relative;}
.ocr-spinner-6::before{content:"";position:absolute;inset:6px;border-radius:50%;border:7px solid currentColor;opacity:.25;}
.ocr-spinner-6::after{content:"";position:absolute;inset:6px;border-radius:50%;border:7px solid transparent;border-top-color:currentColor;border-left-color:currentColor;animation:ocrSpin 900ms linear infinite;}

.ocr-spinner-7{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.ocr-spinner-7 span{width:100%;height:100%;min-width:12px;min-height:12px;border-radius:6px;background:currentColor;opacity:.25;animation:ocrGrid 900ms ease-in-out infinite;}
.ocr-spinner-7 span:nth-child(2){animation-delay:100ms}
.ocr-spinner-7 span:nth-child(3){animation-delay:200ms}
.ocr-spinner-7 span:nth-child(4){animation-delay:300ms}
.ocr-spinner-7 span:nth-child(5){animation-delay:400ms}
.ocr-spinner-7 span:nth-child(6){animation-delay:500ms}
.ocr-spinner-7 span:nth-child(7){animation-delay:600ms}
.ocr-spinner-7 span:nth-child(8){animation-delay:700ms}
.ocr-spinner-7 span:nth-child(9){animation-delay:800ms}
@keyframes ocrGrid{0%,100%{opacity:.20;transform:scale(0.90);}50%{opacity:.85;transform:scale(1.10);}}

.ocr-spinner-8{display:flex;gap:8px;align-items:center;justify-content:center;}
.ocr-spinner-8 span{width:10px;height:10px;border-radius:50%;background:currentColor;opacity:.75;animation:ocrWave 800ms ease-in-out infinite;}
.ocr-spinner-8 span:nth-child(2){animation-delay:120ms}
.ocr-spinner-8 span:nth-child(3){animation-delay:240ms}
.ocr-spinner-8 span:nth-child(4){animation-delay:360ms}
@keyframes ocrWave{0%,100%{transform:translateY(8px);}50%{transform:translateY(-8px);}}

/* Ensure spinner templates that need children get them */
.ocr-spinner-4::before,.ocr-spinner-8::before,.ocr-spinner-7::before{content:none;}

.ocr-overlay-animwrap{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;}
.ocr-overlay-loadingtext{opacity:.85;text-align:center;line-height:1.25;max-width:520px;}
.ocr-overlay-confirmrow{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;}
.ocr-overlay-resulticon{line-height:1;}
.ocr-fig-cat .cat-ear{transform-origin:50% 100%;transform-box:fill-box;animation:catEar 1100ms ease-in-out infinite;}
.ocr-fig-cat .cat-whisk{animation:catWhisk 900ms ease-in-out infinite;}
 catTail{0%,100%{transform:rotate(10deg);}50%{transform:rotate(-14deg);}}
 catHead{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-2px) rotate(2deg);}}
 catEar{0%,100%{transform:rotate(0deg);}50%{transform:rotate(6deg);}}
 catWhisk{0%,100%{opacity:.16;}50%{opacity:.26;}}

/* Admin preview */
.ocr-admin-preview{display:flex;gap:18px;align-items:center;justify-content:center;color:var(--primary,#1a2740);font-size:var(--ocr-text-size,14px)}
html[data-theme="dark"] .ocr-admin-preview{color:#e7eaf0}
.ocr-fig-preview{width:180px;opacity:.9}

/* Inject missing children for some spinners in JS via CSS : we use background pseudo mostly, but for #4,#7,#8 we need spans; handled in JS if needed */

/* Copy Button Flex Fix */
.copy-button-container {
    flex: 0 0 auto !important;
    width: auto !important;
}


/* Copy button: do not stretch inside .row header (override any global .row > * rules, including Bootstrap-like defaults) */
.order-details-header-row > .copy-button-container{
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}
.order-details-header-row > .copy-button-container > .copy-order-button{
    flex: 0 0 auto !important;
    width: auto; /* actual width comes from inline style */
    max-width: none !important;
    white-space: nowrap;
}

/* PDF Preview: click anywhere to open, but allow scrolling inside iframe */
.pdf-iframe-wrap{ position: relative; }
.pdf-click-overlay{
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: transparent;
}