/* Royal Caesar: one readable visual system for Arabic business workflows. */
:root {
  --brand-dark: #21351f;
  --brand-main: #30492a;
  --brand-accent: #a6b22a;
  --brand-soft: #eef2de;
  --ink: #243228;
  --muted: #5f6e61;
  --stroke: #dce3d8;
  --surface: #ffffff;
  --canvas: #f4f6f1;
  --danger: #b2343b;
  --success: #176b48;
  --navy: var(--brand-dark);
  --navy2: var(--brand-main);
  --gold: var(--brand-accent);
  --text: var(--ink);
  --sub: var(--muted);
  --line: var(--stroke);
  --bg: var(--canvas);
  font-family: "Dubai", "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 16px;
  color: var(--ink);
  background: var(--canvas);
}
body { color: var(--ink); background: var(--canvas); line-height: 1.65; }
button, input, select, textarea { font-family: inherit; font-size: 15px; line-height: 1.5; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid #7d902e; outline-offset: 3px; }
input:focus, select:focus, textarea:focus { border-color: #71882e !important; outline: 3px solid #a6b22a26 !important; }
.sidebar { background: var(--brand-dark); box-shadow: none; }
.brand { padding: 20px 18px; gap: 12px; min-height: 100px; }
.brand-symbol { width: 56px; height: 56px; flex: 0 0 56px; border: 0; border-radius: 12px; padding: 3px; }
.brand strong { font-family: "Segoe UI", Arial, sans-serif; font-size: 13px; letter-spacing: .65px; color: #fff; }
.brand small { font-size: 14px; color: #e1e8d9; line-height: 1.5; margin-top: 5px; }
.sidebar-scroll { padding: 8px 12px 20px; }
.nav-label { font-size: 12px; font-weight: 600; letter-spacing: 0; color: #becbb5; margin: 20px 12px 8px; }
.nav-item { min-height: 46px; padding: 10px 12px; gap: 11px; font-size: 15px; line-height: 1.55; color: #e0e8da; border-radius: 9px; }
.nav-item:hover { background: #ffffff12; color: #fff; }
.nav-item.selected { background: #edf1d4; color: #23361d; border-right: 3px solid #a6b22a; font-weight: 700; }
.sidebar-bottom { background: #182a16; color: #d2ddca; font-size: 12px; padding: 16px 20px; }
.topbar { min-height: 76px; height: auto; padding: 14px 28px; border-color: var(--stroke); box-shadow: 0 1px 3px #25381d05; }
.breadcrumbs { font-size: 14px; color: var(--muted); }
.breadcrumbs b { color: var(--ink); }
.top-user strong { font-size: 14px; color: var(--ink); }
.top-user small { font-size: 12px; color: var(--muted); }
.avatar { background: var(--brand-soft); color: #475921; }
.date-today { font-size: 13px; color: var(--muted); }
.icon-button { min-width: 40px; width: 40px; height: 40px; color: #4f6250; border-color: var(--stroke); }
.icon-button:hover { background: #f0f4e9; }
.workspace { padding: 28px; max-width: 1680px; }
.head-row { gap: 18px; align-items: flex-start; margin-bottom: 24px; }
.head-row > div:first-child { flex: 1 1 290px; }
.head-row h1 { font-size: 27px; font-weight: 700; color: var(--brand-dark); line-height: 1.45; margin-bottom: 8px; }
.eyebrow { color: #657323; font-family: "Segoe UI", Arial, sans-serif; font-size: 11px; letter-spacing: .7px; margin-bottom: 6px; }
.page-desc { font-size: 15px; line-height: 1.65; color: var(--muted); }
.head-actions { gap: 8px; align-items: center; }
.head-row > .head-actions { flex: 1 1 390px; }
.btn { min-height: 43px; font-size: 15px; font-weight: 600; padding: 9px 15px; border: 1px solid #cfd9c9; color: #334b2d; background: #fff; border-radius: 9px; line-height: 1.5; box-shadow: none; transition: background .15s, border-color .15s; }
.btn:hover { background: #f1f5e9; border-color: #9eaf8d; transform: none; filter: none; }
.btn.primary { background: var(--brand-main); color: #fff; border-color: var(--brand-main); }
.btn.primary:hover { background: #243c20; border-color: #243c20; }
.btn.gold { background: #edf1d2; color: #34441c; border-color: #cfd897; }
.btn.small { min-height: 36px; font-size: 14px; padding: 6px 11px; }
.btn:disabled { cursor: not-allowed; opacity: .55; transform: none; }
.stats { gap: 16px; margin-bottom: 24px; }
.stat { padding: 20px; border-color: var(--stroke); border-radius: 12px; min-height: 143px; }
.stat:before { height: 3px; background: #a6b22a; }
.stat.blue:before { background: #587b85; }
.stat.green:before { background: #4f8763; }
.stat.red:before { background: #c97a7a; }
.stat-label { font-size: 14px; color: var(--muted); }
.stat-label svg { color: #73876c; }
.stat-number { font-family: "Segoe UI", Tahoma, sans-serif; font-size: 29px; font-weight: 700; color: var(--ink); margin-top: 12px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.stat-unit, .stat-foot { font-size: 12px; color: var(--muted); }
.panel { border-color: var(--stroke); border-radius: 12px; box-shadow: 0 2px 8px #20351a04; }
.panel + .panel { margin-top: 18px; }
.panel-head { padding: 18px 22px; gap: 12px; }
.panel-head h2 { font-size: 18px; color: var(--ink); font-weight: 700; line-height: 1.5; }
.panel-head p { font-size: 13px; color: var(--muted); }
.panel-inner { padding: 18px 22px; }
.data-table { min-width: 560px; font-variant-numeric: tabular-nums; }
.data-table th { background: #f0f4eb; color: #40513b; font-size: 13px; font-weight: 700; padding: 13px 16px; border-color: #e0e7da; line-height: 1.6; }
.data-table td { color: #2c3b30; font-size: 15px; padding: 13px 16px; border-color: #eaf0e5; line-height: 1.65; }
.data-table tbody tr:hover { background: #f8faf4; }
.mono { font-family: "Segoe UI", Tahoma, sans-serif; font-size: 14px; font-variant-numeric: tabular-nums; }
.ghost-link { color: #355c34; font-size: 15px; }
.badge { padding: 4px 10px; font-size: 12px; font-weight: 600; background: #eaf4ed; color: #226344; }
.badge.warning { background: #fff1d5; color: #815312; }
.badge.danger { background: #fbeaec; color: #9f2935; }
.badge.neutral { background: #eef1ea; color: #4c5b45; }
.notice { background: #f5f7e7; border-color: #dce4bc; color: #48592c; font-size: 14px; line-height: 1.8; padding: 13px 16px; border-radius: 10px; }
.notice a { text-decoration: underline; text-underline-offset: 3px; }
.tabs-row { gap: 8px; margin-bottom: 16px; }
.tab-pill { font-size: 14px; min-height: 41px; padding: 8px 14px; background: #fff; color: #53654d; border-color: var(--stroke); border-radius: 9px; line-height: 1.5; }
.tab-pill:hover { background: #f1f5e9; }
.tab-pill.active { background: #eaf0d3; border-color: #b8c77d; color: #2c4322; font-weight: 700; }
.filter-row { padding: 12px 20px 18px; }
.filter-input { min-height: 45px; font-size: 15px; background: #fff; border-color: #cfd9c9; }
.quick-action { font-size: 15px; background: #f8faf4; border-color: #e1e8da; color: #35502e; }
.quick-action:hover { background: #eff3e3; border-color: #b5c38f; }
.quick-action svg { color: #7b8c2a; }
.mini-item strong, .mini-item span { font-size: 14px; }
.mini-item small { font-size: 13px; color: var(--muted); }
.empty { color: var(--muted); font-size: 15px; }
.empty strong { font-size: 17px; color: #3f5539; }
.empty p { font-size: 14px; }
.modal-layer { background: #14220fd1; }
.modal-dialog { width: min(960px, 100%); border-radius: 16px; box-shadow: 0 22px 70px #10210b30; }
.modal-top { padding: 22px 26px; border-color: var(--stroke); }
.modal-top h2 { font-size: 23px; font-weight: 700; line-height: 1.5; color: var(--brand-dark); }
.modal-top p { font-size: 14px; color: var(--muted); line-height: 1.7; margin-top: 6px; }
#modal-body { padding: 24px 26px; }
.form-grid { gap: 18px; }
label.field { font-size: 15px; font-weight: 600; line-height: 1.5; color: #354b30; }
label.field input, label.field select, label.field textarea { min-height: 46px; margin-top: 8px; padding: 10px 12px; font-size: 16px; border-color: #cad6c3; border-radius: 8px; background: #fff; color: #213526; }
label.field textarea { min-height: 92px; }
input::placeholder, textarea::placeholder { color: #75806f; opacity: 1; }
.line-grid input, .line-grid select { min-height: 44px; font-size: 15px; border-color: #cad6c3; }
.invoice-line { gap: 10px; margin-bottom: 16px; }
.invoice-line > * { min-width: 105px; flex-basis: 105px; }
.invoice-line .product-field { min-width: 200px; flex-basis: 240px; }
.invoice-line .line-delete { min-width: 38px; width: 38px; height: 43px; flex: 0 0 38px; }
.v4-line { border: 1px solid #dce3d6 !important; background: #f7f9f4; border-radius: 11px; padding: 16px !important; }
.total-strip { background: #edf3e5; padding: 16px 18px; color: #34462c; }
.total-strip strong { font-family: "Segoe UI", Tahoma, sans-serif; color: #273f20; font-size: 24px; font-variant-numeric: tabular-nums; }
.form-actions { padding-top: 18px; margin-top: 24px; border-color: var(--stroke); }
.field-error { color: var(--danger); font-size: 14px; line-height: 1.6; }
.toast { background: #263e22; font-size: 15px; border-radius: 10px; }
.toast.error { background: #a8323c; }
.profit-pos { color: var(--success) !important; }
.profit-neg { color: var(--danger) !important; }
.login-page { background: radial-gradient(ellipse at 20% 10%, #3b5330, #172915 70%); }
.login-card { width: min(465px, 100%); padding: 34px; border-radius: 18px; }
.login-logo { width: 104px; height: 82px; border: 1px solid #e2e8d7; border-radius: 12px; }
.login-card h1 { font-size: 28px; color: var(--brand-dark); }
.login-card > p { font-size: 16px; line-height: 1.65; }
.login-eyebrow { color: #617022; font-size: 11px; letter-spacing: 1.5px; }
.login-card label { font-size: 15px; color: #3c5034; }
.login-card input { min-height: 47px; font-size: 16px; border-color: #cad6c3; }
.login-card small { font-size: 12px; line-height: 1.65; color: var(--muted); }
.checklist { font-size: 15px; color: #52624a; line-height: 1.9; }
.checklist b { color: #2e4727; }
.subhead { font-size: 17px; }
.toolbar-note, .print-warning { font-size: 13px; }
.pill-info { font-size: 13px; background: #eef3e5; color: #4b633f; }
.foot-note { color: #66745f; font-size: 12px; line-height: 1.7; }
@media(min-width:901px) { .sidebar { width: 272px; flex-basis: 272px; } }
@media(min-width:901px) and (max-width:1250px) { .sidebar { width: 248px; flex-basis: 248px; } .workspace { padding: 24px; } .brand strong { font-size: 12px; } }
@media(max-width:900px) { .sidebar { width: 272px; } .workspace { padding: 24px 18px; } .topbar { padding: 12px 18px; } .head-row > .head-actions { flex-basis: 100%; } }
@media(max-width:600px) {
  .workspace { padding: 22px 12px; }
  .topbar { min-height: 66px; padding: 11px 12px; }
  .breadcrumbs { font-size: 13px; }
  .head-row h1 { font-size: 24px; }
  .page-desc { font-size: 14px; }
  .head-actions .btn { flex: 1 1 140px; white-space: normal; }
  .stats { gap: 10px; }
  .stat { padding: 16px 12px; min-height: 132px; }
  .stat-number { font-size: 24px; }
  .stat-label { font-size: 13px; }
  .panel-head { padding: 16px; }
  .panel-head h2 { font-size: 17px; }
  .data-table td { font-size: 14px; padding: 12px; }
  .tabs-row { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 6px; }
  .tabs-row > .tab-pill, .tabs-row > .btn { flex: 0 0 auto; }
  .modal-dialog { width: 100%; border-radius: 16px 16px 0 0; }
  .modal-top, #modal-body { padding: 18px 16px; }
  .modal-top h2 { font-size: 21px; }
  .form-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .invoice-line .product-field { flex-basis: 100%; min-width: 0; }
  .form-actions .btn { flex: 1; }
  .login-card { padding: 28px 22px; }
}
@media(prefers-reduced-motion:reduce) { *, *:before, *:after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
.form-grid > *, label.field { min-width: 0; }
label.field select { max-width: 100%; }
input[name="phone"], input[name="phone_secondary"], input[name="email"], input[name="company_en"], input[name="address_en"] { direction: ltr; text-align: left; }
input[type="number"], input[type="date"] { direction: ltr; font-variant-numeric: tabular-nums; }
/* User-selected appearance. Safe variables are populated by appearance.js. */
:root{--ui-scale:1;--user-font:"Dubai","Segoe UI",Tahoma,Arial,sans-serif;--ap-on-primary:#ffffff;--ap-soft:#f4f6f1;--ap-border:#dce3d8;--ap-selected:#edf1d4;--ap-muted:#5f6e61}
html,body{font-family:var(--user-font);font-size:calc(16px * var(--ui-scale));color:var(--ink);background:var(--canvas)}
button,input,select,textarea{font-family:var(--user-font)}
.sidebar,.sidebar-bottom{background:var(--brand-dark);color:var(--ap-on-primary)}
.brand strong,.brand small,.nav-item,.nav-label,.sidebar-bottom{color:var(--ap-on-primary)}
.brand strong{font-family:"Segoe UI",Arial,sans-serif}
.nav-item.selected{background:var(--ap-selected);color:var(--brand-dark);border-color:var(--brand-accent)}
.btn.primary,.btn.primary:hover{background:var(--brand-main);border-color:var(--brand-main);color:var(--ap-on-primary)}
.btn,.ghost-link,.breadcrumbs b,.head-row h1,.modal-top h2,.panel-head h2,.stat-number,.total-strip strong{color:var(--ink)}
.btn{border-color:var(--ap-border);font-size:calc(15px * var(--ui-scale))}
.btn:hover,.tab-pill:hover,.quick-action:hover{background:var(--ap-soft);border-color:var(--brand-accent)}
.tab-pill.active,.btn.gold,.avatar{background:var(--ap-selected);color:var(--ink);border-color:var(--brand-accent)}
.tab-pill{font-size:calc(14px * var(--ui-scale));color:var(--ink)}
.page-desc,.muted,.stat-label,.stat-foot,.stat-unit,.panel-head p,.modal-top p,.date-today,.breadcrumbs,.foot-note{color:var(--ap-muted)}
.panel,.data-table th,.data-table td,.modal-top,.topbar{border-color:var(--ap-border)}
.data-table th,.total-strip,.quick-action,.v4-line{background:var(--ap-soft)}
.data-table td,.data-table th,label.field,.quick-action,.checklist{color:var(--ink)}
.stat:before{background:var(--brand-accent)}
.nav-item{font-size:calc(15px * var(--ui-scale))}.nav-label{font-size:calc(12px * var(--ui-scale))}
.head-row h1{font-size:calc(27px * var(--ui-scale))}.page-desc{font-size:calc(15px * var(--ui-scale))}
.panel-head h2{font-size:calc(18px * var(--ui-scale))}.data-table td{font-size:calc(15px * var(--ui-scale))}.data-table th{font-size:calc(13px * var(--ui-scale))}
label.field{font-size:calc(15px * var(--ui-scale))}label.field input,label.field select,label.field textarea{font-size:calc(16px * var(--ui-scale));color:var(--ink);border-color:var(--ap-border)}
.stat-number{font-size:calc(29px * var(--ui-scale))}.stat-label,.notice,.modal-top p{font-size:calc(14px * var(--ui-scale))}
.modal-top h2{font-size:calc(23px * var(--ui-scale))}.btn.small,.mono,.breadcrumbs{font-size:calc(14px * var(--ui-scale))}
.data-table .mono{font-size:inherit}.line-grid input,.line-grid select{font-size:calc(15px * var(--ui-scale))}
input:focus,select:focus,textarea:focus{border-color:var(--brand-accent)!important;outline-color:var(--ap-border)!important}
.appearance-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;align-items:start}
.appearance-layout>.panel{margin-top:0}.appearance-sample h2{font-size:calc(23px * var(--ui-scale));color:var(--ink);line-height:1.6}
.appearance-color{display:flex;gap:12px;align-items:center}.appearance-color input[type=color]{width:64px;height:46px;min-height:46px;padding:4px;cursor:pointer;flex:0 0 64px}.appearance-color .mono{font-size:14px}
input[type=range]{accent-color:var(--brand-main);cursor:pointer;width:100%}
@media(max-width:1100px){.appearance-layout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.head-row h1{font-size:calc(24px * var(--ui-scale))}.stat-number{font-size:calc(24px * var(--ui-scale))}.appearance-layout{gap:16px}}
:root{--ap-on-selected:#23361d;--ap-soft-ink:#243228}
.nav-item.selected,.nav-item.selected:hover,.tab-pill.active{color:var(--ap-on-selected)}
.nav-item:hover{background:transparent;color:var(--ap-on-primary);outline:1px solid var(--brand-accent);outline-offset:-1px}
.nav-item.selected:hover{background:var(--ap-selected)}
.data-table th,.total-strip,.quick-action,.btn:hover{color:var(--ap-soft-ink)}
.btn.primary:hover{color:var(--ap-on-primary)}

/* Stage5 workspaces use the shared appearance variables. */
#t5-content { margin-top:24px; }
#t5-content .filter-row { flex-wrap:wrap; gap:10px; align-items:end; margin:16px 0; }
#t5-content .filter-row input, #t5-content .filter-row select { padding:9px 12px; min-height:44px; border:1px solid var(--border,#cfd9c9); border-radius:8px; max-width:100%; }
#t5-content .filter-row label { display:grid; gap:5px; }
#t5-form .t5-line { padding:16px; margin:12px 0; border:1px solid var(--border,#cfd9c9); border-radius:10px; }
#t5-error { color:#9f2525; min-height:1.5em; }
#t5-result details { margin:10px 0; }
#t5-result summary { cursor:pointer; font-weight:600; }
@media(max-width:700px){#t5-content .filter-row > * { flex:1 1 140px; } #t5-form .form-grid { grid-template-columns:1fr; }}