@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

  :root{
    --bg: #14181A; --surface: #1E2427; --surface-2: #262D31; --border: #333B3F;
    --text: #E7E9E5; --muted: #8A9296;
    --accent: #4FA8A0; --accent-dim: #35706B;
    --overdue: #E4573D; --overdue-dim: #4A2C25;
    --ok: #6FBF73; --ok-dim: #2C3F2C;
    --pending: #D8B44A; --pending-dim: #3F3826;
    --lab: #A88FD8; --lab-dim: #362E4A;
  }
  *{ box-sizing: border-box; }
  html,body{ margin:0; padding:0; }
  body{ background: var(--bg); color: var(--text); font-family:'Space Grotesk',sans-serif; min-height:100vh; -webkit-font-smoothing:antialiased; }
  .mono{ font-family:'IBM Plex Mono',monospace; }
  #app{ max-width: 1040px; margin:0 auto; padding: 0 0 40px 0; }
  #view-intake{ max-width:720px; margin:0 auto; }

  header{ position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:1px solid var(--border); padding:16px 18px 0 18px; }
  .header-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand-logo{ height:26px; width:auto; display:block; }
  .brand-mark{ width:30px; height:30px; border-radius:7px; background:linear-gradient(135deg,var(--accent),var(--accent-dim)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11px; color:var(--bg); flex-shrink:0; }
  .brand-name{ font-weight:600; font-size:16px; }
  .overdue-pill{ display:flex; align-items:center; gap:6px; background:var(--overdue-dim); color:var(--overdue); border:1px solid rgba(228,87,61,0.4); border-radius:20px; padding:5px 12px 5px 10px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600; cursor:pointer; }
  .overdue-pill.hidden-pill{ display:none; }
  .overdue-dot{ width:7px; height:7px; border-radius:50%; background:var(--overdue); animation:pulse 1.4s ease-in-out infinite; }
  @keyframes pulse{ 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.4;transform:scale(.75);} }

  .tabs{ display:flex; gap:4px; }
  .tab{ flex:1; text-align:center; padding:10px 0 12px 0; font-size:13.5px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; cursor:pointer; user-select:none; }
  .tab.active{ color:var(--text); border-bottom-color:var(--accent); }

  main{ padding:18px; }

  .alert-banner{ background:var(--overdue-dim); border:1px solid rgba(228,87,61,0.45); border-radius:10px; padding:12px 14px; margin-bottom:16px; display:flex; flex-direction:column; gap:8px; }
  .alert-banner-title{ display:flex; align-items:center; gap:8px; color:var(--overdue); font-weight:600; font-size:13.5px; }
  .alert-item{ display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--text); padding:6px 0; border-top:1px solid rgba(228,87,61,0.25); }
  .alert-item .over-by{ color:var(--overdue); font-family:'IBM Plex Mono',monospace; font-size:12px; }

  .field{ margin-bottom:14px; }
  .field label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; font-weight:500; }
  .field input, .field textarea, .field select{ width:100%; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:11px 12px; color:var(--text); font-family:'Space Grotesk',sans-serif; font-size:14.5px; outline:none; }
  .field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--accent); }
  .field textarea{ resize:vertical; min-height:56px; }
  .field textarea:disabled, .field input:disabled, .field select:disabled{ opacity:.6; }
  .note-field{ margin-top:10px; margin-bottom:0; }
  .note-field label{ font-size:10.5px; margin-bottom:4px; }
  .note-field textarea{ min-height:40px; font-size:13px; padding:8px 10px; }
  .row2{ display:flex; gap:10px; }
  .row2 > div{ flex:1; }

  .deadline-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
  .deadline-chip{ padding:7px 12px; border-radius:8px; border:1px solid var(--border); font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer; }
  .deadline-chip.active{ background:var(--accent-dim); color:#BEEAE6; border-color:var(--accent); }

  .loc-toggle{ display:flex; gap:8px; margin-bottom:16px; }
  .loc-btn{ flex:1; text-align:center; padding:11px 0; border-radius:8px; border:1px solid var(--border); font-size:13.5px; font-weight:600; cursor:pointer; color:var(--muted); }
  .loc-btn.active-servisi{ background:var(--accent-dim); color:#BEEAE6; border-color:var(--accent); }
  .loc-btn.active-laboratori{ background:var(--lab-dim); color:#DCD2F2; border-color:var(--lab); }

  .submit-btn{ width:100%; padding:13px 0; border-radius:8px; border:none; background:var(--accent); color:#0E1213; font-weight:600; font-size:14.5px; cursor:pointer; font-family:'Space Grotesk',sans-serif; margin-top:4px; }
  .submit-btn:disabled{ opacity:.5; }
  .hint{ font-size:12px; color:var(--muted); margin-top:-4px; margin-bottom:16px; line-height:1.5; }

  .search-box{ margin-bottom:12px; }
  .search-box input{ width:100%; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:10px 12px; color:var(--text); font-size:14px; font-family:'Space Grotesk',sans-serif; }

  .loc-filter{ display:flex; gap:6px; margin-bottom:10px; }
  .loc-chip{ flex:1; text-align:center; padding:7px 0; border-radius:8px; border:1px solid var(--border); font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer; }
  .loc-chip.active{ background:var(--surface-2); color:var(--text); border-color:var(--text); }

  .filters{ display:flex; gap:6px; overflow-x:auto; margin-bottom:12px; padding-bottom:2px; }
  .filter-chip{ flex-shrink:0; padding:6px 13px; border-radius:20px; font-size:12.5px; font-weight:500; cursor:pointer; border:1px solid var(--border); color:var(--muted); white-space:nowrap; }
  .filter-chip.active{ background:var(--surface-2); color:var(--text); border-color:var(--accent); }

  .summary-bar{ display:flex; gap:10px; margin-bottom:16px; }
  .summary-card{ flex:1; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 14px; }
  .summary-card .num{ font-family:'IBM Plex Mono',monospace; font-size:19px; font-weight:600; }
  .summary-card .label{ font-size:11px; color:var(--muted); margin-top:2px; }
  .export-btn{ width:100%; padding:11px 0; border-radius:8px; border:1px solid var(--accent); background:transparent; color:var(--accent); font-weight:600; font-size:13.5px; cursor:pointer; font-family:'Space Grotesk',sans-serif; margin-bottom:16px; }

  .ticket{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:13px 14px; margin-bottom:10px; border-left:3px solid var(--pending); }
  .ticket.status-ne_proces{ border-left-color:var(--accent); }
  .ticket.status-ne_pritje_pjeseve{ border-left-color:var(--lab); }
  .ticket.status-gati{ border-left-color:var(--ok); }
  .ticket.status-dorezuar{ border-left-color:var(--muted); opacity:.65; }
  .ticket.overdue{ border-left-color:var(--overdue); background:rgba(228,87,61,0.06); }

  .ticket-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px; }
  .ticket-id{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--muted); }
  .ticket-customer{ font-weight:600; font-size:14.5px; margin-top:2px; }
  .ticket-device{ font-size:12.5px; color:var(--accent); margin-top:1px; }
  .badges{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
  .status-badge, .loc-badge, .cat-badge{ font-size:10px; font-weight:700; padding:3px 7px; border-radius:5px; text-transform:uppercase; letter-spacing:.3px; font-family:'IBM Plex Mono',monospace; }
  .status-badge.pritje{ background:var(--pending-dim); color:var(--pending); }
  .status-badge.ne_proces{ background:var(--accent-dim); color:#BEEAE6; }
  .status-badge.ne_pritje_pjeseve{ background:var(--lab-dim); color:#DCD2F2; }
  .status-badge.gati{ background:var(--ok-dim); color:var(--ok); }
  .status-badge.dorezuar{ background:var(--surface-2); color:var(--muted); }
  .loc-badge.servisi{ background:var(--accent-dim); color:#BEEAE6; }
  .loc-badge.laboratori{ background:var(--lab-dim); color:#DCD2F2; }
  .loc-badge.frontdesk{ background:var(--pending-dim); color:var(--pending); }
  .cat-badge{ background:var(--surface-2); color:var(--muted); text-transform:none; letter-spacing:0; }

  .dashboard-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; }
  .dashboard-title{ font-size:22px; font-weight:700; }
  .dashboard-subtitle{ font-size:12.5px; color:var(--muted); margin-top:3px; }
  .dashboard-date{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); white-space:nowrap; }
  .dashboard-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:22px; }
  .dashboard-card{ background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:15px 16px; min-height:86px; display:flex; flex-direction:column; justify-content:space-between; }
  .dashboard-card-alert{ border-color:rgba(228,87,61,.45); background:rgba(228,87,61,.06); }
  .dashboard-card-label{ font-size:11.5px; color:var(--muted); }
  .dashboard-card-value{ font-family:'IBM Plex Mono',monospace; font-size:23px; font-weight:600; margin-top:10px; }
  .dashboard-card-alert .dashboard-card-value{ color:var(--overdue); }
  .dashboard-section-title{ font-size:12px; font-weight:700; color:var(--text); margin:0 0 9px; text-transform:uppercase; letter-spacing:.5px; }
  .status-overview{ background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:14px 16px; margin-bottom:22px; }
  .status-overview-row{ padding:8px 0; }
  .status-overview-row + .status-overview-row{ border-top:1px solid var(--border); }
  .status-overview-head{ display:flex; justify-content:space-between; align-items:center; font-size:12px; margin-bottom:6px; }
  .status-overview-head strong{ font-family:'IBM Plex Mono',monospace; }
  .status-overview-track{ height:5px; border-radius:10px; background:var(--surface-2); overflow:hidden; }
  .status-overview-fill{ display:block; height:100%; min-width:0; border-radius:10px; background:var(--muted); }
  .status-fill-pritje{ background:var(--pending); }
  .status-fill-ne_proces{ background:var(--accent); }
  .status-fill-ne_pritje_pjeseve{ background:var(--lab); }
  .status-fill-gati{ background:var(--ok); }
  .status-fill-dorezuar{ background:var(--muted); }
  .dashboard-exports{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:6px; }
  .dashboard-exports .export-btn{ margin-bottom:0; }

  .printer-calibration-box{ background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:14px 16px; margin-bottom:8px; }
  .printer-calibration-copy{ font-size:12px; color:var(--muted); line-height:1.5; margin-bottom:10px; }
  .printer-calibration-box .export-btn{ margin-bottom:0; }

  .ticket{ padding:0; overflow:hidden; }
  .ticket-summary{ width:100%; border:0; background:transparent; color:var(--text); padding:13px 14px; display:flex; align-items:center; justify-content:space-between; gap:14px; text-align:left; cursor:pointer; font-family:'Space Grotesk',sans-serif; }
  .ticket-summary:hover{ background:rgba(255,255,255,.018); }
  .ticket-summary-main{ min-width:0; flex:1; }
  .ticket-summary-side{ flex-shrink:0; display:flex; align-items:center; gap:10px; }
  .ticket-chevron{ color:var(--muted); font-size:16px; line-height:1; width:14px; text-align:center; }
  .ticket-details{ border-top:1px solid var(--border); padding:13px 14px 14px; }
  .ticket-edit-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:5px; }
  .ticket-collapsed.status-dorezuar{ opacity:.78; }
  .ticket-open.status-dorezuar{ opacity:.9; }

  .ticket-problem{ font-size:13px; color:var(--text); margin:8px 0 4px 0; line-height:1.4; }
  .ticket-phone{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); margin-top:2px; }
  .ticket-meta{ display:flex; justify-content:space-between; align-items:center; font-size:11.5px; color:var(--muted); margin-top:8px; }
  .ticket-meta .deadline{ font-family:'IBM Plex Mono',monospace; }
  .ticket-meta .deadline.is-overdue{ color:var(--overdue); font-weight:600; }

  .lock-note{ font-size:10px; }
  .inline-edit{ background:transparent; border:none; border-bottom:1px dashed transparent; color:var(--text); font-family:'Space Grotesk',sans-serif; padding:2px 0; width:100%; outline:none; }
  .inline-edit:not(:disabled){ border-bottom-color:var(--border); cursor:text; }
  .inline-edit:not(:disabled):focus{ border-bottom-color:var(--accent); }
  .inline-edit:disabled{ color:var(--text); opacity:.85; cursor:default; }
  .inline-edit.name{ font-weight:600; font-size:14.5px; }
  .inline-edit.device{ font-size:12.5px; color:var(--accent); margin-top:1px; }
  .inline-edit.phone{ font-size:12px; color:var(--muted); font-family:'IBM Plex Mono',monospace; margin-top:8px; }
  select.inline-edit.cat-select{ margin-top:6px; background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:5px 8px; font-size:11.5px; color:var(--muted); width:auto; }
  select.inline-edit.cat-select:disabled{ opacity:.75; }
  .ticket-actions select:disabled, .price-field input:disabled, .warranty-row input:disabled{ opacity:.6; }

  .price-row{ display:flex; gap:8px; margin-top:10px; }
  .price-field{ flex:1; }
  .price-field label{ font-size:10.5px; color:var(--muted); display:block; margin-bottom:3px; }
  .price-field input{ width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:6px 8px; color:var(--text); font-family:'IBM Plex Mono',monospace; font-size:12.5px; }

  .warranty-row{ display:flex; align-items:center; gap:8px; margin-top:8px; }
  .warranty-row label{ font-size:10.5px; color:var(--muted); white-space:nowrap; }
  .warranty-row input{ width:60px; background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:5px 7px; color:var(--text); font-family:'IBM Plex Mono',monospace; font-size:12px; }
  .warranty-until{ font-size:11px; color:var(--ok); font-family:'IBM Plex Mono',monospace; }
  .staff-select{ flex:1; background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:6px 8px; color:var(--text); font-family:'Space Grotesk',sans-serif; font-size:12.5px; }
  .staff-select:disabled{ opacity:.6; }

  .notify-row{ display:flex; align-items:center; gap:7px; margin-top:9px; font-size:12.5px; color:var(--muted); }
  .notify-row input{ width:15px; height:15px; accent-color: var(--accent); }
  .notify-row.done{ color: var(--ok); }

  .ticket-actions{ display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
  .ticket-actions select{ flex:1; min-width:100px; background:var(--surface-2); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:7px 8px; font-size:12.5px; font-family:'Space Grotesk',sans-serif; }

  .ticket-log{ margin-top:10px; font-size:12px; }
  .ticket-log summary{ color:var(--muted); cursor:pointer; font-size:11.5px; list-style:none; }
  .ticket-log summary::-webkit-details-marker{ display:none; }
  .ticket-log summary::before{ content:'▸ '; }
  .ticket-log[open] summary::before{ content:'▾ '; }
  .log-entry{ padding:4px 0 4px 12px; color:var(--text); border-top:1px solid var(--border); font-size:12px; }
  .log-time{ color:var(--muted); font-family:'IBM Plex Mono',monospace; font-size:10.5px; margin-right:6px; }
  .icon-btn{ background:var(--surface-2); border:1px solid var(--border); color:var(--muted); border-radius:6px; padding:7px 10px; font-size:12px; cursor:pointer; }
  .icon-btn:hover{ color:var(--text); }
  .icon-btn.transfer{ color: var(--lab); border-color: var(--lab); }
  .icon-btn.print{ color: var(--accent); border-color: var(--accent); }

  .empty-state{ text-align:center; padding:50px 20px; color:var(--muted); font-size:13.5px; }
  .empty-state .big{ font-size:32px; margin-bottom:10px; }

  .footer-note{ text-align:center; font-size:11px; color:var(--muted); margin-top:24px; line-height:1.6; }
  .footer-note button{ background:none; border:none; color:var(--overdue); text-decoration:underline; cursor:pointer; font-size:11px; font-family:'Space Grotesk',sans-serif; padding:0; }

  .toast{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:var(--surface-2); border:1px solid var(--border); padding:10px 16px; border-radius:8px; font-size:13px; z-index:50; box-shadow:0 4px 20px rgba(0,0,0,.4); max-width:88%; text-align:center; }

  /* Login screen */
  #loginScreen{ position:fixed; inset:0; background:var(--bg); z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; }
  .login-mark{ width:52px; height:52px; border-radius:12px; background:linear-gradient(135deg,var(--accent),var(--accent-dim)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; color:var(--bg); margin-bottom:18px; }
  .login-title{ font-size:16px; font-weight:600; margin-bottom:6px; text-align:center; }
  .login-subtitle{ font-size:13px; color:var(--muted); margin-bottom:26px; }
  .login-logo{ width:180px; height:auto; margin-bottom:18px; }
  .role-list{ display:flex; flex-direction:column; gap:10px; width:100%; max-width:280px; }
  .role-btn{ padding:14px 0; text-align:center; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:14.5px; font-weight:600; cursor:pointer; font-family:'Space Grotesk',sans-serif; }
  .role-btn:hover{ border-color:var(--accent); }
  .pin-wrap{ display:none; flex-direction:column; gap:12px; width:100%; max-width:280px; margin-top:18px; }
  .pin-wrap input{ width:100%; text-align:center; letter-spacing:6px; font-size:20px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:13px; color:var(--text); font-family:'IBM Plex Mono',monospace; }
  .pin-error{ color:var(--overdue); font-size:12.5px; text-align:center; min-height:16px; }
  .pin-back{ background:none; border:none; color:var(--muted); font-size:12.5px; text-decoration:underline; cursor:pointer; margin-top:2px; }

  .role-badge{ font-size:11px; color:var(--muted); font-family:'IBM Plex Mono',monospace; }
  .logout-btn{ background:none; border:none; color:var(--muted); font-size:11px; text-decoration:underline; cursor:pointer; font-family:'Space Grotesk',sans-serif; padding:0; }

  #printArea{ display:none; }
  .overdue-popup{ position:fixed; top:16px; left:50%; transform:translateX(-50%); background:var(--overdue-dim); border:1px solid var(--overdue); border-radius:10px; padding:14px 16px; z-index:200; max-width:90%; width:340px; box-shadow:0 8px 30px rgba(0,0,0,.5); animation: popIn .2s ease-out; }
  .overdue-popup.hidden{ display:none; }
  .overdue-popup-title{ color:var(--overdue); font-weight:700; font-size:13.5px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; }
  .overdue-popup-close{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:15px; padding:0 4px; }
  .overdue-popup-item{ font-size:12.5px; color:var(--text); padding:5px 0; border-top:1px solid rgba(228,87,61,.25); }
  @keyframes popIn{ from{ opacity:0; transform:translate(-50%,-8px); } to{ opacity:1; transform:translate(-50%,0); } }
  @media (max-width: 760px){
    #app{ max-width:100%; }
    .dashboard-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .dashboard-exports{ grid-template-columns:1fr; }
    .dashboard-head{ align-items:flex-start; flex-direction:column; gap:6px; }
  }
  @media (max-width: 460px){
    .dashboard-grid{ grid-template-columns:1fr 1fr; gap:8px; }
    .dashboard-card{ min-height:78px; padding:12px; }
    .dashboard-card-value{ font-size:20px; }
    .ticket-summary{ padding:12px; }
  }
  @media print{
    /* Print ONLY the active document. Using visibility:hidden kept the whole app
       in the print layout and browsers generated many blank/duplicate sheets. */
    html, body{ margin:0 !important; padding:0 !important; min-height:0 !important; height:auto !important; background:#fff !important; }
    body > *:not(#printArea){ display:none !important; }
    #printArea{
      display:block !important;
      position:static !important;
      margin:0 !important;
      padding:0 !important;
      width:62mm !important;
      height:auto !important;
      overflow:hidden !important;
    }
    #printArea, #printArea *{ visibility:visible !important; }
    .print-label, .paper-doc{
      margin:0 !important;
      break-inside:avoid !important;
      page-break-inside:avoid !important;
      break-after:avoid !important;
      page-break-after:avoid !important;
    }
    @page label{ size: 62mm 29mm; margin:0; }
    @page receipt{ size: 62mm 145mm; margin:0; }
    @page warranty{ size: 62mm 110mm; margin:0; }
  }

  .paper-doc{ width:62mm; box-sizing:border-box; padding:3mm; background:#fff; color:#000; font-family:'IBM Plex Mono',monospace; }
  .paper-doc.receipt{ page:receipt; }
  .paper-doc.warranty{ page:warranty; }
  .paper-header{ text-align:center; font-size:11px; font-weight:700; letter-spacing:1px; border-bottom:1px dashed #000; padding-bottom:1.5mm; margin-bottom:1.5mm; }
  .paper-body{ font-size:9.5px; line-height:1.7; }
  .paper-body b{ font-weight:700; }
  .paper-divider{ margin-top:1.5mm; border-top:1px dashed #000; padding-top:1.5mm; }
  .paper-qr{ display:flex; justify-content:center; margin:2.5mm 0; }
  .paper-qr img, .paper-qr canvas{ width:20mm !important; height:20mm !important; }
  .paper-footer{ text-align:center; font-size:7.5px; color:#333; border-top:1px dashed #000; padding-top:1.5mm; margin-top:1.5mm; line-height:1.5; }

/* Customers CRM (v1.0.20) */
.customer-autocomplete-wrap{ position:relative; }
.customer-suggestions{ position:absolute; z-index:80; top:calc(100% + 6px); left:0; right:0; background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; box-shadow:0 12px 28px rgba(0,0,0,.35); max-height:280px; overflow-y:auto; }
.customer-suggestion{ width:100%; border:0; border-bottom:1px solid var(--border); background:transparent; color:var(--text); padding:11px 12px; display:flex; justify-content:space-between; gap:12px; align-items:center; text-align:left; cursor:pointer; font-family:'Space Grotesk',sans-serif; }
.customer-suggestion:last-child{ border-bottom:0; }
.customer-suggestion:hover,.customer-suggestion:focus{ background:var(--surface-2); outline:none; }
.customer-suggestion-name{ font-weight:600; font-size:13px; }
.customer-suggestion-meta{ color:var(--muted); font-size:11px; white-space:nowrap; }
.customer-suggestions-empty{ padding:11px 12px; color:var(--muted); font-size:12px; }
.selected-customer-hint{ margin-top:6px; color:var(--accent); font-size:11.5px; }
.customers-toolbar{ display:flex; justify-content:space-between; align-items:flex-end; gap:18px; margin:4px 0 16px; }
.customers-title{ font-size:18px; font-weight:700; }
.customers-subtitle{ color:var(--muted); font-size:11.5px; margin-top:3px; }
.customer-search-box{ flex:1; max-width:420px; margin:0; }
.customer-list{ display:flex; flex-direction:column; gap:8px; }
.customer-row{ width:100%; display:grid; grid-template-columns:minmax(180px,1.5fr) minmax(130px,1fr) repeat(2,minmax(90px,.55fr)) minmax(125px,.75fr); gap:12px; align-items:center; padding:13px 14px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text); text-align:left; cursor:pointer; font-family:'Space Grotesk',sans-serif; }
.customer-row:hover{ border-color:var(--accent-dim); background:var(--surface-2); }
.customer-row-name{ font-weight:700; font-size:13.5px; }
.customer-row-phone,.customer-row-meta{ color:var(--muted); font-size:11.5px; }
.customer-row-number{ font-family:'IBM Plex Mono',monospace; font-size:12px; text-align:right; }
.customer-row-spent{ font-weight:700; color:var(--accent); }
.customer-back-btn{ background:none; border:0; padding:0; color:var(--accent); cursor:pointer; font-family:'Space Grotesk',sans-serif; font-size:12px; margin-bottom:14px; }
.customer-profile-head{ display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:14px; }
.customer-profile-name{ font-size:20px; font-weight:700; }
.customer-profile-phone{ color:var(--muted); margin-top:4px; font-size:12px; }
.customer-profile-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
.customer-stat{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px; }
.customer-stat-label{ color:var(--muted); font-size:10.5px; }
.customer-stat-value{ font-family:'IBM Plex Mono',monospace; font-size:19px; font-weight:700; margin-top:5px; }
.customer-history-title{ font-size:13px; font-weight:700; margin:4px 0 10px; }
.customer-ticket-row{ width:100%; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--text); padding:11px 12px; display:grid; grid-template-columns:100px minmax(140px,1.2fr) minmax(130px,1fr) 120px 90px; gap:10px; align-items:center; text-align:left; cursor:pointer; font-family:'Space Grotesk',sans-serif; margin-bottom:7px; }
.customer-ticket-row:hover{ border-color:var(--accent-dim); }
.customer-ticket-id{ font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; }
.customer-ticket-muted{ color:var(--muted); font-size:11px; }
.customer-empty{ padding:28px; text-align:center; color:var(--muted); border:1px dashed var(--border); border-radius:10px; }
@media (max-width:760px){
  .customers-toolbar{ align-items:stretch; flex-direction:column; }
  .customer-search-box{ max-width:none; width:100%; }
  .customer-row{ grid-template-columns:1fr 1fr; }
  .customer-row-number{ text-align:left; }
  .customer-profile-grid{ grid-template-columns:1fr 1fr; }
  .customer-ticket-row{ grid-template-columns:1fr 1fr; }
}


/* Porosi module — v1.0.22 (additive only; existing Service print/layout rules untouched) */
.header-alerts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.order-create-panel{max-width:780px;margin:0 auto 26px}
.order-head{margin-bottom:14px}
.order-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.order-create-panel textarea{width:100%;resize:vertical;min-height:92px}
.order-deadline-row{margin-bottom:10px}
.orders-toolbar{margin-bottom:16px}
.order-filters{margin-top:10px}
.order-ticket .ticket-device{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px}
.order-ticket.status-ne_pritje{border-left-color:#d97706}
.order-ticket.status-gati{border-left-color:#16a34a}
.order-ticket.status-dorezuar{border-left-color:#64748b}
.status-badge.order-status-ne_pritje{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}
.status-badge.order-status-gati{background:#ecfdf5;color:#166534;border:1px solid #bbf7d0}
.status-badge.order-status-dorezuar{background:#f1f5f9;color:#475569;border:1px solid #cbd5e1}
.order-overdue-mini{font-size:10px;font-weight:800;letter-spacing:.04em;color:#b91c1c;background:#fee2e2;border:1px solid #fecaca;border-radius:999px;padding:4px 7px}
.order-detail-label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;margin-bottom:3px}
.order-detail-value{font-size:15px;font-weight:700;color:var(--text);line-height:1.4}
.order-detail-phone{font-size:13px;color:var(--muted);margin-top:2px}
.order-description{margin:14px 0;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:10px}
.order-actions{margin-top:14px}
.order-arrived-btn,.order-delivered-btn{font-weight:700}
@media(max-width:700px){.order-form-grid{grid-template-columns:1fr}.header-alerts{justify-content:flex-start}.order-ticket .ticket-device{max-width:180px}}