/* ui.css — center tag field between steppers (no size changes), keep steppers flush; upload theming retained */
* { box-sizing: border-box }
html, body { margin: 0; max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; touch-action: manipulation }
body { min-width: 360px }
.auth-locked #appShell { display: none !important; }
.app-booting #appShell { visibility: visible; }
.app-booting .app-header,
.app-booting .viewport-main,
.app-booting #banner { visibility: hidden; }
.app-booting #uploadSpinner,
.app-booting #projectsModal { visibility: visible !important; opacity: 1 !important; }
.hidden { display: none !important }
.init-hidden { display: none !important }
.modal[aria-hidden="true"] { display: none !important }
.test-logout-btn{ margin-left:auto; padding:6px 12px; border-radius:8px; border:1px solid var(--color-border); background:rgba(255,255,255,.08); color:var(--color-text); cursor:pointer; font-size:14px; }
.test-logout-btn:hover{ background:rgba(255,255,255,.14); }
:root {
 --color-bg:#0d1b2a;
 --color-surface:#13293d;
 --color-text:#eef2f6;
 --color-border:rgba(255,255,255,.14);
 --color-accent:#2d8cff; /* cold border */
 --color-warm:#ff9f1c; /* warm border */
 --color-contrast:#ffffff; /* digits & icon */
 --s1:4px; --s2:8px; --s3:12px; --s4:16px;
 --header-h:56px;
 --control-h:56px; /* height for tag input and steppers */
 --tag-font:1.5rem; /* tag digits & barcode icon size (unchanged) */
 --icon-gap:28px; /* doubled gap (unchanged) */
 --upload-h:64px; /* bottom buttons height (unchanged) */
}
body.app.theme-navy { background: var(--color-bg); color: var(--color-text); font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif; }
.btn i { color: currentColor; }
.btn[disabled] { opacity:.55; cursor:not-allowed }
.is-empty-project { color: var(--color-warm); }
/* Header */
.app-header { position:relative; z-index:2; border-bottom:1px solid var(--color-border); padding:8px 16px 6px 20px }
.project-title { margin:0; font-size:1.6rem; font-weight:600; color:var(--color-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; transition:color .2s ease; }
.project-title.is-empty-project { color: var(--color-warm); font-size:1.25rem; }
.project-title.is-uploading { color: #ffb347; }
/* Preview region */
.viewport-main { padding:0 }
.preview-shell { height:calc(100svh - var(--header-h)); display:grid; overflow:hidden }
.preview { position: relative; display: grid; place-items: center; border-radius: 12px; width:100%; height:100%; background: transparent; overflow:hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.preview.placeholder-box { border: 1px dashed var(--color-border); background: rgba(255,255,255,.04); color: var(--color-text); }
/* Image fit — centered, full height */
.preview-img { position:absolute; top:0; left:50%; transform:translateX(-50%); height:100%; width:auto; max-width:none; display:block; object-fit:contain; object-position:center; border-radius:12px; pointer-events:none; image-rendering:-webkit-optimize-contrast; image-rendering:crisp-edges; image-orientation:from-image; }
/* Shutter & spinner */
.shutter-btn { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); width:68px; height:68px; border-radius:50%; display:grid; place-items:center; box-shadow:0 2px 10px rgba(0,0,0,.3) }
.shutter-btn.cold{ background:var(--color-accent); border:0 }
.shutter-btn.warm{ background:var(--color-warm); border:0 }
.shutter-btn.is-disabled{ opacity:.6; cursor:not-allowed; box-shadow:none }
.shutter-btn:active{ transform:translateX(-50%) scale(.98) }
.spinner{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:14px; padding:16px; margin:auto; text-align:left; z-index:10; background:rgba(13,27,42,.4); border-radius:12px }
.spinner__icon{ width:44px; height:44px; border:3px solid rgba(255,255,255,.35); border-top-color:var(--color-accent); border-radius:50%; animation:spin .9s linear infinite }
.spinner__message{ color:var(--color-text); font-weight:700; text-shadow:0 1px 4px rgba(0,0,0,.45); line-height:1.3; min-width:0 }
@keyframes spin{ to{ transform:rotate(360deg) } }
/* Overlay layout */
.overlay-controls{ position:absolute; inset:0; width:100%; z-index:6; display:grid; grid-template-rows:auto 1fr auto; gap:8px; background:transparent; pointer-events:none; padding:12px max(12px, env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right)); }
.overlay-controls .overlay-row{ background:transparent; pointer-events:auto; width:100%; min-width:0 }
/* === Top tag row: steppers flank the tag input (sizes unchanged) === */
.overlay-controls .tag-row{
 position: relative;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: var(--s3);
}
/* Steppers fixed size and anchored beside the input */
.overlay-controls .tag-row > .btn.stepper{ width:var(--control-h); height:var(--control-h); flex: 0 0 var(--control-h); }
/* Middle group stays centered with icon + input inline */
.input-with-icon{
 position: relative;
 display: inline-flex;
 align-items: center;
 height: var(--control-h);
 }
/* Barcode icon (size/color unchanged) */
.input-with-icon .icon-left{ position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size: var(--tag-font); line-height:1; color: var(--color-contrast); pointer-events:none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); z-index:1 }
/* Tag input — sizes unchanged (7ch width, doubled icon gap) */
.tag-input{
 height:var(--control-h); line-height:var(--control-h); text-align:center;
 background:rgba(0,0,0,.28); border:2px solid rgba(255,255,255,.9); border-radius:10px; color:var(--color-contrast);
 font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; font-size:var(--tag-font); font-weight:800; letter-spacing:.02em;
 backdrop-filter:blur(6px);
 padding-left: calc(1em + var(--icon-gap)); padding-right:14px;
 width: calc(7ch + 1em + var(--icon-gap) + 14px);
 min-width: 0;
}

/* Barcode icon (inside the input border on the left) */
.input-with-icon .icon-left {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--tag-font);
  line-height: 1;
  color: var(--color-contrast);
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.45));
  z-index: 1;
}

/* Tag input — keep size, but add left padding for icon */
.tag-input {
  height: var(--control-h);
  line-height: var(--control-h);
  text-align: center;
  background: rgba(0,0,0,.28);
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 10px;
  color: var(--color-contrast);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: var(--tag-font);
  font-weight: 800;
  letter-spacing: .02em;
  backdrop-filter: blur(6px);
  padding-left: calc(1em + var(--icon-gap)); /* room for icon inside border */
  padding-right: 14px;
  width: calc(7ch + 1em + var(--icon-gap) + 14px);
  min-width: 0;
}



/* Steppers visual style (unchanged) */
.stepper{ border-radius:10px; background:rgba(0,0,0,.18); border:2px solid rgba(255,255,255,.9); color:var(--color-contrast); backdrop-filter:blur(6px); display:inline-flex; align-items:center; justify-content:center; font-size: calc(var(--tag-font) + .3rem); font-weight:900; line-height:1 }
/* --- Bottom upload row (unchanged theming from previous pass) --- */
.overlay-controls .upload-row{ display:grid; grid-template-columns: 1fr 1fr; align-self:end; align-items:stretch; width:100% }
.btn-wide-edge{ width:100%; min-width:0; justify-content:center; display:inline-flex; align-items:center; gap:var(--s2); min-height:var(--upload-h); height:var(--upload-h); border-radius:10px; padding:10px 12px; box-sizing:border-box }
.btn-glass-cold{ background:rgba(0,0,0,.18); border:2px solid var(--color-accent); color:#e8f1ff }
.btn-glass-warm{ background:rgba(0,0,0,.18); border:2px solid var(--color-warm); color:#fff1df }
.btn-glass-cold i{ color: var(--color-accent); font-size:2rem }
.btn-glass-warm i{ color: var(--color-warm); font-size:2rem }
/* Modal essentials */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:950 }
.modal:not(.hidden)[aria-hidden="false"]{ display:flex !important }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:0 }
.modal-panel{ position:relative; z-index:1; background:var(--color-surface); color:var(--color-text); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.35); width:min(92vw,620px); padding:var(--s3) }
.modal-panel.small{ width:min(92vw,440px) }
.modal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s2) }
.modal-title{ margin:0; font-size:1.1rem; opacity:.9 }
.modal-close{ width:40px; height:40px; border-radius:10px; background:transparent; border:1.5px solid var(--color-border); color:var(--color-text); display:inline-grid; place-items:center }
.modal-close i{ font-size:18px }
.modal-body{ display:grid; gap:var(--s3); max-height:70vh; overflow:auto }
.section-title{ margin:0 0 var(--s2) 0; font-size:.95rem; opacity:.8 }
.section-add{ padding-top:12px }
.modal .segmented-list{ display:grid; gap:var(--s2); max-height:calc(4 * 48px + 3 * var(--s2)); overflow:auto }
.modal .segmented-item, .modal .segmented{ display:grid; align-items:center; border:1px solid var(--color-border) !important; border-radius:12px !important; background:transparent !important }
/* ---- Projects Modal — enforce theme styles (high-specificity) ---- */
/* Rows */
#projectsModal .segmented-list{ display:grid; gap: var(--s2,8px); }
#projectsModal #projectsList{
 position:relative;
 -webkit-mask-image:none;
         mask-image:none;
 -webkit-mask-repeat:no-repeat;
         mask-repeat:no-repeat;
 transition:-webkit-mask-image 180ms ease, mask-image 180ms ease;
}
#projectsModal #projectsList.projects-scroll-fade{
 -webkit-mask-image:linear-gradient(180deg, #000 65%, rgba(0,0,0,0));
         mask-image:linear-gradient(180deg, #000 65%, rgba(0,0,0,0));
}
#projectsModal .inline-group{ display:grid; grid-template-columns:1fr auto auto; align-items:stretch; border:1px solid var(--color-border, var(--border-subtle)); border-radius:12px; background: rgba(255,255,255,.03); overflow:hidden; min-height:44px; }
#projectsModal .inline-group.two{ grid-template-columns:1fr auto; }
#projectsModal .inline-group > .group-label{ padding:10px 12px; color: var(--color-text, var(--text-default)); border-right:1px solid var(--color-border, var(--border-subtle)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; }
/* Buttons inside rows (override UA defaults) */
#projectsModal .inline-group > .group-btn,
#projectsModal .inline-group > .group-btn:focus{
 -webkit-appearance:none; appearance:none;
 background: transparent !important; color: var(--color-text, var(--text-default));
 width:44px; min-width:44px; height:100%;
 border:none !important; border-left:1px solid var(--color-border, var(--border-subtle)) !important;
 display:grid; place-items:center; cursor:pointer; box-shadow:none !important; outline:none !important;
}
#projectsModal .inline-group > .group-btn i{ color: currentColor; font-size:16px }
#projectsModal .inline-group > .group-btn:hover{ background: rgba(255,255,255,.06) }
/* Legacy Add section — style to match rows */
#projectsModal .section-add .segmented{
 display:grid !important; grid-template-columns:1fr auto !important; align-items:stretch;
 border:1px solid var(--color-border, var(--border-subtle)) !important; border-radius:12px !important;
 background: rgba(255,255,255,.03) !important; overflow:hidden; min-height:44px;
}
#projectsModal .section-add .seg-input{
 /* Keep at least 16px to prevent iOS auto-zoom when typing */
 -webkit-appearance:none; appearance:none; background: transparent !important; color: var(--color-text, var(--text-default)) !important;
 border:none !important; outline:none !important; padding:10px 12px !important;
 font-size:16px; line-height:1.4;
}
#projectsModal .section-add .seg-input::placeholder{ color: rgba(255,255,255,.55) }
#projectsModal .section-add .seg-input:focus{ background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 2px var(--focus-ring, var(--focus-ring-color)); }
#projectsModal .section-add .seg-action{
 -webkit-appearance:none; appearance:none; width:44px; min-width:44px; height:100%;
 border:none !important; border-left:1px solid var(--color-border, var(--border-subtle)) !important;
 background: transparent !important; color: var(--color-text, var(--text-default)) !important; display:grid; place-items:center; box-shadow:none !important;
}
#projectsModal .section-add .seg-action i{ color: currentColor; font-size:16px }
#projectsModal .project-tag-group{ margin-top:10px; display:grid; gap:6px; }
#projectsModal .project-tag-heading{ font-size:.95rem; font-weight:600; opacity:.85; }
#projectsModal .project-tag-radios{
 display:flex; flex-direction:column; gap:8px; align-items:flex-start;
}
#projectsModal .project-tag-radios.loading{ opacity:.65; }
#projectsModal .project-tag-option{
 display:inline-flex; align-items:center; gap:8px; padding:8px 12px;
 border:1px solid var(--color-border, var(--border-subtle)); border-radius:12px;
 background: rgba(255,255,255,.03); color: var(--color-text, var(--text-default));
 cursor:pointer; user-select:none;
}
#projectsModal .project-tag-option input[type="radio"]{
 width:16px; height:16px; margin:0; accent-color: currentColor;
}
#projectsModal .project-tag-name{ font-weight:600; font-size:.95rem; line-height:1.2; }
#projectsModal .project-tag-empty{ font-size:.9rem; opacity:.75; padding:4px 0 0; }

/* Global input sizing to avoid iOS auto-zoom */
input,
select,
textarea {
  font-size: 16px;
}