/* Scoped Phase 1 tokens/primitives. The unflagged app keeps its original styles. */
.ui-phase1 { --ui-ink:#172e30; --ui-muted:#52696a; --ui-primary:#17675a; --ui-tint:#e5f3ee; --ui-line:#d9e4e1; --ui-paper:#fff; --ui-bg:#f4f7f5; --ui-danger:#a93232; --ui-radius:12px; --ui-space:16px; color:var(--ui-ink); background:var(--ui-bg); font-family:'Cairo',system-ui,sans-serif; font-size:14px; line-height:1.55; max-width:none; padding:0 0 calc(76px + env(safe-area-inset-bottom)); margin:0; user-select:text; }
.ui-phase1.dark-mode { --ui-ink:#e6eeec; --ui-muted:#b1c4bf; --ui-primary:#8dd6bd; --ui-tint:#253e35; --ui-line:#3c514a; --ui-paper:#1c2c27; --ui-bg:#14221d; --ui-danger:#ffaaa2; }
.ui-phase1 .app-header,.ui-phase1 .desktop-sidebar,.ui-phase1 .bottom-nav,.ui-phase1 #quickFab { display:none!important; }
.ui-phase1 .screen { max-width:none!important; margin:0!important; padding:0!important; }
.ui-phase1 .ui-workspace { min-width:0; padding:20px 16px; max-width:1600px; margin:auto; }
.ui-phase1 .ui-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; background:var(--ui-paper); border-block-end:1px solid var(--ui-line); }
.ui-phase1 h1 { font-size:clamp(22px,2.4vw,30px); line-height:1.3; font-weight:800; letter-spacing:-.5px; margin:0; }
.ui-phase1 h2 { font-size:20px; line-height:1.5; }
.ui-phase1 h3 { font-size:16px; }
.ui-phase1 .ui-eyebrow { color:var(--ui-muted); font-size:12px; margin-block-end:4px; }
.ui-phase1 .ui-tools,.ui-phase1 .ui-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ui-phase1 .ui-button,.ui-phase1 .ui-link,.ui-phase1 summary { touch-action:manipulation; }
.ui-phase1 .ui-button { border:1px solid var(--ui-line); border-radius:8px; background:var(--ui-paper); color:var(--ui-ink); min-height:44px; padding:10px 14px; font:inherit; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; cursor:pointer; }
.ui-phase1 .ui-button.primary { background:var(--ui-primary); color:var(--ui-paper); border-color:var(--ui-primary); }
.ui-phase1 .ui-button.danger { color:var(--ui-danger); }
.ui-phase1 .ui-button:disabled { opacity:.55; cursor:default; }
.ui-phase1 :is(button,a,input,select,textarea,summary):focus-visible { outline:3px solid #c27a10!important; outline-offset:3px; }
.ui-phase1 input,.ui-phase1 select { font-size:16px; }
.ui-phase1 .ui-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.ui-phase1 .ui-field input,.ui-phase1 .ui-field select { width:100%; min-height:44px; border:1px solid var(--ui-line); background:var(--ui-paper); border-radius:8px; color:var(--ui-ink); padding:10px 12px; font-family:inherit; }
.ui-phase1 .ui-card { background:var(--ui-paper); border:1px solid var(--ui-line); border-radius:var(--ui-radius); padding:20px; min-width:0; }
.ui-phase1 .ui-muted { color:var(--ui-muted); }
.ui-phase1 .ui-skip { position:fixed; inset-block-start:-90px; inset-inline-start:20px; z-index:99999; background:var(--ui-paper); padding:12px; }
.ui-phase1 .ui-skip:focus { inset-block-start:10px; }
.ui-phase1 .ui-sidebar { display:none; }
.ui-phase1 .ui-sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ui-phase1 .ui-rail { display:none; }
.ui-phase1 #trialBanner { position:relative!important; z-index:1!important; background:var(--ui-tint)!important; color:var(--ui-ink)!important; border-block-end:1px solid var(--ui-line); }
.ui-phase1 #uiShell,.ui-phase1 #uiWorkspace { font-family:system-ui,'Cairo',sans-serif; }
.ui-phase1 .ui-brand { font-size:22px; font-weight:900; color:var(--ui-primary); letter-spacing:-.6px; text-decoration:none; }
.ui-phase1 .ui-store { padding:12px; border:1px solid var(--ui-line); border-radius:10px; margin-block:20px; }
.ui-phase1 .ui-nav-group { margin-block:6px; }
.ui-phase1 .ui-nav-group summary { cursor:pointer; padding:10px 12px; color:var(--ui-muted); font-weight:700; min-height:44px; }
.ui-phase1 .ui-link { padding:10px 12px; border-radius:8px; color:var(--ui-ink); text-decoration:none; display:flex; align-items:center; gap:12px; min-height:44px; }
.ui-phase1 .ui-link:hover { background:var(--ui-bg); }
.ui-phase1 .ui-link[aria-current=page] { background:var(--ui-tint); color:var(--ui-primary); font-weight:800; }
.ui-phase1 .ui-icon { width:20px; height:20px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ui-phase1 .ui-bottom { position:fixed; inset-inline:0; inset-block-end:0; background:var(--ui-paper); border-block-start:1px solid var(--ui-line); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding:6px max(4px,env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)); z-index:100; }
.ui-phase1 .ui-bottom .ui-link { flex-direction:column; gap:4px; padding:6px 2px; font-size:11px; text-align:center; justify-content:center; }
.ui-phase1 .ui-menu-dialog { border:1px solid var(--ui-line); border-radius:16px; padding:20px; width:min(440px,calc(100% - 24px)); max-height:85dvh; margin:auto; color:var(--ui-ink); background:var(--ui-paper); }
.ui-phase1 dialog::backdrop { background:rgba(15,35,30,.4); }
.ui-phase1 .ui-page-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-block-end:20px; }
.ui-phase1 .ui-search-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; margin-block:16px; }
.ui-phase1 .ui-search-row .ui-field:first-child { max-width:520px; }
.ui-phase1 .ui-products-layout { display:grid; gap:20px; align-items:start; }
.ui-phase1 .ui-table { width:100%; border-collapse:collapse; text-align:start; }
.ui-phase1 .ui-table th { font-size:12px; color:var(--ui-muted); font-weight:600; background:var(--ui-bg); }
.ui-phase1 .ui-table th,.ui-phase1 .ui-table td { padding:14px 16px; text-align:start; border-block-end:1px solid var(--ui-line); }
.ui-phase1 .ui-product-name { display:flex; gap:12px; align-items:center; min-width:0; text-decoration:none; color:var(--ui-ink); }
.ui-phase1 .ui-product-name strong { display:block; overflow-wrap:anywhere; }
.ui-phase1 .ui-thumb { width:44px; height:44px; border-radius:8px; object-fit:cover; background:var(--ui-bg); display:grid; place-items:center; flex:none; color:var(--ui-primary); }
.ui-phase1 .ui-badge { border:1px solid var(--ui-line); border-radius:6px; padding:3px 7px; font-size:11px; display:inline-block; font-weight:600; color:var(--ui-muted); }
.ui-phase1 .ui-badge.warning { background:#fff3dc; border-color:#eed0a0; color:#805113; }
.ui-phase1 .ui-badge.empty { background:#fff0ee; border-color:#edc2bb; color:#993b2e; }
.ui-phase1 .ui-detail { background:var(--ui-paper); border:1px solid var(--ui-line); border-radius:12px; padding:24px; min-width:0; }
.ui-phase1 .ui-detail h2 { margin-block:16px 4px; overflow-wrap:anywhere; }
.ui-phase1 .ui-detail .ui-thumb { width:80px; height:80px; }
.ui-phase1 .ui-detail dl { display:grid; grid-template-columns:1fr auto; gap:14px; margin-block:24px; }
.ui-phase1 .ui-detail dt { color:var(--ui-muted); }
.ui-phase1 .ui-detail dd { text-align:end; overflow-wrap:anywhere; max-width:180px; }
.ui-phase1 .ui-empty { text-align:center; padding:48px 20px; }
.ui-phase1 .ui-empty p { max-width:430px; margin:12px auto 24px; color:var(--ui-muted); }
.ui-phase1 .ui-error { border-inline-start:4px solid var(--ui-danger); padding:16px; }
.ui-phase1 .ui-skeleton { height:16px; border-radius:4px; background:var(--ui-line); margin-block:12px; }
.ui-phase1 .ui-home-grid { display:grid; gap:16px; margin-block:24px; }
.ui-phase1 .ui-home-grid .ui-card { text-decoration:none; color:var(--ui-ink); display:flex; gap:16px; align-items:start; }
.ui-phase1 .ui-home-grid p { color:var(--ui-muted); margin-block-start:6px; }
.ui-phase1 .ui-pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; }
.ui-phase1 .ui-workspace > .screen > .btn { max-width:100%; }
.ui-design .modal-overlay { padding:12px; align-items:center; }
.ui-design .modal { background:var(--ui-paper); color:var(--ui-ink); border:1px solid var(--ui-line); border-radius:14px; max-height:calc(100dvh - 24px); overflow:auto; padding:24px; width:min(560px,100%); margin:auto; }
.ui-design .modal .input,.ui-design .modal .select { min-height:44px; border-radius:8px; border:1px solid var(--ui-line); background:var(--ui-paper); color:var(--ui-ink); }
.ui-design .modal .btn { min-height:44px; box-shadow:none; border-radius:8px; }
.ui-design .modal .btn-primary { background:var(--ui-primary); color:var(--ui-paper); }
.ui-design .modal-close { min-width:44px; min-height:44px; }
.ui-design #modalAddProduct .modal-header { position:sticky; inset-block-start:-24px; background:var(--ui-paper); padding-block:12px; z-index:1; }
.ui-design #modalAddProduct .ui-advanced { border-block-start:1px solid var(--ui-line); margin-block:16px; }
.ui-design #modalAddProduct .ui-advanced summary { min-height:44px; padding-block:12px; font-weight:700; cursor:pointer; }
.ui-design #modalAddProduct .modal > .btn-primary { position:sticky; inset-block-end:-24px; width:100%; }
.ui-phase1 [hidden] { display:none!important; }
@media(max-width:699px) {
  .ui-phase1 #uiProducts:has(.has-detail) > :is(.ui-search-row,.ui-page-heading) { display:none; }
  .ui-phase1 .ui-tools .ui-full-label { display:none; }
  .ui-phase1 .ui-table thead { display:none; }
  .ui-phase1 .ui-table,.ui-phase1 .ui-table tbody { display:block; }
  .ui-phase1 .ui-table tr { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; padding:16px; border-block-end:1px solid var(--ui-line); }
  .ui-phase1 .ui-table td { display:block; border:0; padding:0; font-size:13px; }
  .ui-phase1 .ui-table td:first-child { grid-column:1/-1; }
  .ui-phase1 .ui-table td::before { content:attr(data-label); color:var(--ui-muted); margin-inline-end:6px; }
  .ui-phase1 .ui-table td:first-child::before { content:none; }
  .ui-phase1 .ui-products-layout.has-detail > .ui-list-panel { display:none; }
  .ui-phase1 .ui-search-row { grid-template-columns:1fr; }
  .ui-phase1 .ui-detail { padding:20px; }
  .ui-phase1 .ui-top { align-items:start; }
}
@media(min-width:700px) {
  body.ui-phase1 { padding-block-end:0!important; padding-inline-start:82px!important; }
  .ui-phase1 .ui-sidebar { display:flex; flex-direction:column; position:fixed; inset-block:0; inset-inline-start:0; width:82px; padding:18px 10px; background:var(--ui-paper); border-inline-end:1px solid var(--ui-line); overflow:auto; z-index:110; }
  .ui-phase1 .ui-desktop-groups { display:none; }
  .ui-phase1 .ui-rail { display:block; margin-block-start:24px; }
  .ui-phase1 .ui-sidebar .ui-nav-label,.ui-phase1 .ui-sidebar .ui-store,.ui-phase1 .ui-sidebar summary,.ui-phase1 .ui-sidebar .ui-brand-label { display:none!important; }
  .ui-phase1 .ui-sidebar .ui-link { justify-content:center; margin-block:6px; }
  .ui-phase1 .ui-sidebar details:not([open]) > :not(summary) { display:flex; }
  .ui-phase1 .ui-sidebar details { display:contents; }
  .ui-phase1 .ui-bottom { display:none; }
  .ui-phase1 .ui-workspace { padding:28px; }
  .ui-phase1 .ui-top { padding:20px 28px; }
  .ui-phase1 .ui-products-layout.has-detail { grid-template-columns:minmax(0,1fr) minmax(280px,.8fr); }
  .ui-phase1 .has-detail .ui-table .ui-cost-column { display:none; }
  .ui-phase1 .ui-home-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(min-width:1100px) {
  .ui-phase1 .ui-desktop-groups { display:block; }
  .ui-phase1 .ui-rail { display:none; }
  body.ui-phase1 { padding-inline-start:240px!important; }
  .ui-phase1 .ui-sidebar { width:240px; padding:24px 16px; }
  .ui-phase1 .ui-sidebar .ui-nav-label,.ui-phase1 .ui-sidebar .ui-store,.ui-phase1 .ui-sidebar summary,.ui-phase1 .ui-sidebar .ui-brand-label { display:block!important; }
  .ui-phase1 .ui-sidebar .ui-brand-label { display:inline!important; }
  .ui-phase1 .ui-sidebar .ui-link { justify-content:flex-start; margin-block:2px; }
  .ui-phase1 .ui-sidebar details { display:block; }
  .ui-phase1 .ui-sidebar details:not([open]) > :not(summary) { display:none; }
  .ui-phase1 .ui-workspace { padding:32px; }
  .ui-phase1 .ui-products-layout.has-detail { grid-template-columns:minmax(0,1fr) 340px; }
  .ui-phase1 .ui-home-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(prefers-reduced-motion:reduce) { .ui-phase1 * { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }
@media print { .ui-phase1 .ui-sidebar,.ui-phase1 .ui-bottom,.ui-phase1 .ui-top { display:none!important; } .ui-phase1 { padding:0!important; } }
