/* Екранні стилі застосунку. Спільні для всіх сторінок.
   Витягнуто з <style> в Index.html без змін — щоб PDF і друк
   спирались на той самий файл, а не на дві копії. */
:root{
      --bg:#1b1e21;
      --panel:#24282c;
      --panel-2:#2c3135;
      --line:#383e43;
      --text:#eef1f3;
      --muted:#9aa3ab;
      --amber:#f2a900;
      --amber-dim:#7a5a10;
      --red:#d64545;
      --green:#4caf6d;
      --radius:10px;
      --logo-w-screen:170px;
      --logo-w-print:150px;
    }
    *{box-sizing:border-box;}
    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family:'Inter',sans-serif;
      -webkit-font-smoothing:antialiased;
      min-height:100vh;
    }
    .wrap{max-width:1220px;margin:0 auto;padding:32px 23px 69px;overflow-x:hidden;}

    /* ---------- Header ---------- */
    header{
      display:flex;
      align-items:center;
      gap:28px;
      margin-bottom:28px;
      flex-wrap:wrap;
    }
    .text-logo{flex-shrink:0;}
    .text-logo img{height:30px;width:auto;display:block;}
    .header-text{flex:1;min-width:220px;}

    @media (max-width:640px){
      header{flex-direction:column;align-items:center;text-align:center;gap:18px;}
      .text-logo{align-self:center;}
      .header-text{min-width:0;width:100%;}
      .sub{max-width:100%;}
    }
    .site-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap;}
    .nav-links{display:flex;gap:12px;flex-wrap:wrap;}
    .team-badge-corner{
      font-family:'IBM Plex Mono',monospace;font-size:15.4px;color:var(--amber);
      text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;
      display:flex;align-items:center;gap:7px;
    }
    .logout-link{color:var(--muted);text-decoration:none;border-bottom:1px dashed var(--muted);}
    .logout-link:hover{color:var(--red);border-bottom-color:var(--red);}
    .nav-link{
      background:transparent;border:1px solid var(--line);color:var(--muted);
      font-family:'IBM Plex Mono',monospace;text-transform:uppercase;font-size:15.4px;
      letter-spacing:.08em;padding:12px 21px;border-radius:6px;text-decoration:none;
      display:inline-block;
    }
    .nav-link.active{border-color:var(--amber);color:var(--amber);background:rgba(242,169,0,.08);}
    .nav-link:hover:not(.active){border-color:var(--amber);color:var(--amber);}
    .eyebrow{
      font-family:'IBM Plex Mono',monospace;
      font-size:15.4px;
      letter-spacing:.18em;
      color:var(--amber);
      text-transform:uppercase;
      margin:0 0 6px;
    }
    h1{
      font-family:'Oswald',sans-serif;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.02em;
      font-size:clamp(26px,5vw,38px);
      margin:0 0 10px;
      border-bottom:3px solid var(--amber);
      padding-bottom:14px;
    }
    .sub{color:var(--muted);font-size:17.9px;margin:0;max-width:560px;}

    /* ---------- Form panel ---------- */
    .panel{
      background:var(--panel);
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:25px;
      margin-bottom:24px;
    }
    .gate-panel{max-width:360px;margin:80px auto 0;}
    .gate-panel #gatePin{text-align:center;font-size:28.2px;letter-spacing:.3em;margin-top:6px;}
    .gate-panel .actions{display:flex;align-items:center;gap:16px;margin-top:16px;}
    .panel-title{
      font-family:'IBM Plex Mono',monospace;
      font-size:15.4px;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--muted);
      margin:0 0 16px;
    }
    .grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
    }
    .grid > div{min-width:0;}
    .grid > div.wide{grid-column:span 2;}
    .grid + .grid{margin-top:16px;}

    @media (max-width:820px){
      .grid{grid-template-columns:repeat(2,1fr);}
      .grid > div.wide{grid-column:span 2;}
    }
    @media (max-width:640px){
      .grid{grid-template-columns:1fr;}
      .grid > div.wide{grid-column:span 1;}
    }
    label{
      display:block;
      font-size:15.4px;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:.06em;
      margin-bottom:6px;
    }
    input, select{
      width:100%;
      min-width:0;
      background:var(--bg);
      border:1px solid var(--line);
      border-radius:6px;
      padding:13px 14px;
      color:var(--text);
      font-family:'IBM Plex Mono',monospace;
      font-size:17.9px;
      transition:border-color .15s, box-shadow .15s;
    }
    select{appearance:none;-webkit-appearance:none;
      background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3ab' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
      background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:34px;
    }
    input::placeholder{color:#5a6167;}
    input:focus, select:focus{
      outline:none;
      border-color:var(--amber);
      box-shadow:0 0 0 3px rgba(242,169,0,.18);
    }
    .actions{
      display:flex;
      align-items:center;
      gap:16px;
      margin-top:20px;
      flex-wrap:wrap;
    }
    .toggle-link{
      display:inline-flex;
      align-items:center;
      gap:7px;
      background:none;
      border:none;
      padding:0;
      margin:18px 0 0;
      color:var(--amber);
      font-family:'IBM Plex Mono',monospace;
      font-size:16.6px;
      text-transform:uppercase;
      letter-spacing:.06em;
      cursor:pointer;
    }
    .toggle-link:hover{text-decoration:underline;}
    .extra-days-section{
      display:none;
      margin-top:16px;
      padding-top:16px;
      border-top:1px dashed var(--line);
    }
    .extra-days-hint{
      font-size:15.4px;
      color:var(--muted);
      margin:0 0 14px;
      line-height:1.6;
      max-width:640px;
    }
    .extra-day-row{
      display:flex;
      gap:12px;
      align-items:center;
      margin-bottom:10px;
      flex-wrap:wrap;
    }
    .extra-day-row input[type=date]{flex:1;min-width:150px;}
    .extra-day-row select{flex:1;min-width:190px;}
    .extra-day-row .remove-row{
      background:transparent;
      border:1px solid var(--line);
      color:var(--muted);
      border-radius:6px;
      width:38px;
      height:38px;
      padding:0;
      flex-shrink:0;
      font-family:inherit;
      font-size:17.9px;
    }
    .extra-day-row .remove-row:hover{border-color:var(--red);color:var(--red);background:transparent;}
    .add-day-link{
      display:inline-flex;
      align-items:center;
      gap:7px;
      background:transparent;
      border:1px dashed var(--line);
      color:var(--text);
      border-radius:6px;
      padding:10px 18px;
      font-family:'IBM Plex Mono',monospace;
      font-size:16.6px;
      cursor:pointer;
    }
    .add-day-link:hover{border-color:var(--amber);color:var(--amber);background:transparent;}
    button{
      font-family:'Oswald',sans-serif;
      font-weight:600;
      text-transform:uppercase;
      letter-spacing:.05em;
      font-size:17.9px;
      background:var(--amber);
      color:#1b1e21;
      border:none;
      border-radius:6px;
      padding:15px 30px;
      cursor:pointer;
      transition:transform .1s, background .15s;
    }
    button:hover{background:#ffbb1a;}
    button:active{transform:scale(.98);}
    button:disabled{background:var(--amber-dim);color:#c9c1ad;cursor:wait;}
    button.secondary{
      background:transparent;
      border:1px solid var(--line);
      color:var(--text);
    }
    button.secondary:hover{border-color:var(--amber);color:var(--amber);background:transparent;}
    .error{
      color:var(--red);
      font-size:16.6px;
      font-family:'IBM Plex Mono',monospace;
      display:none;
    }
    .error.show{display:block;}
    .status-msg{
      font-size:16.6px;
      font-family:'IBM Plex Mono',monospace;
      color:var(--green);
      display:none;
    }
    .status-msg.show{display:block;}
    .status-msg.is-error{color:var(--red);}
    .status-link{display:inline-block;margin-top:6px;color:var(--amber);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;}
    .status-link:hover{opacity:.85;}

    /* Автопідказка назви виробу на «Розрахунку» */
    .product-field{position:relative;}
    .suggest-box{
      position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:50;
      background:#333a40;border:1px solid var(--line);
      border-radius:8px;max-height:240px;overflow:hidden auto;
      box-shadow:0 10px 24px rgba(0,0,0,.45);
    }
    .suggest-item{
      padding:10px 12px;cursor:pointer;font-size:15px;color:var(--text);
      border-top:1px solid var(--line);
    }
    .suggest-item:first-child{border-top:none;}
    .suggest-item:hover,.suggest-item.active{background:rgba(242,169,0,.14);color:var(--amber);}

    /* ---------- Summary cards ---------- */
    #summary{display:none;}
    .results-actions{display:flex;justify-content:flex-end;align-items:center;gap:16px;margin-bottom:8px;flex-wrap:wrap;}
    .status-row{display:flex;justify-content:flex-end;margin-bottom:14px;min-height:18px;}
    button.secondary:disabled{opacity:.5;cursor:not-allowed;border-color:var(--line);color:var(--muted);background:transparent;}
    .launch-row{
      display:flex;align-items:center;gap:12px;justify-content:flex-end;
      margin-bottom:18px;flex-wrap:wrap;
    }
    .launch-row select{max-width:220px;}
    .launch-row input{max-width:200px;}
    .cards{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
      gap:16px;
      margin-bottom:24px;
    }
    .card{
      background:var(--panel);
      border:1px solid var(--line);
      border-left:3px solid var(--amber);
      border-radius:var(--radius);
      padding:18px 21px;
    }
    .card .label{
      font-size:14.1px;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:.08em;
      margin-bottom:8px;
    }
    .card .value{
      font-family:'IBM Plex Mono',monospace;
      font-size:28.2px;
      font-weight:600;
    }
    .card.done .value{color:var(--green);}

    /* ---------- Schedule table ---------- */
    .table-wrap{
      background:var(--panel);
      border:1px solid var(--line);
      border-radius:var(--radius);
      overflow:hidden;
    }
    .table-scroll{overflow-x:auto;}
    table{width:100%;border-collapse:collapse;min-width:620px;}
    thead th{
      font-family:'IBM Plex Mono',monospace;
      font-size:14.1px;
      text-transform:uppercase;
      letter-spacing:.06em;
      color:var(--muted);
      text-align:left;
      padding:14px 16px;
      border-bottom:1px solid var(--line);
      background:var(--panel-2);
      white-space:nowrap;
    }
    tbody td{
      font-family:'IBM Plex Mono',monospace;
      font-size:16.6px;
      padding:12px 16px;
      border-bottom:1px solid var(--line);
      white-space:nowrap;
    }
    tbody tr:last-child td{border-bottom:none;}
    tbody tr.workday{opacity:0;animation:fadeIn .25s ease forwards;}
    @keyframes fadeIn{to{opacity:1;}}
    tbody tr.weekend td{
      color:#e7c9c9;
      background:repeating-linear-gradient(
        135deg,
        rgba(214,69,69,.16) 0px,
        rgba(214,69,69,.16) 8px,
        rgba(214,69,69,.05) 8px,
        rgba(214,69,69,.05) 16px
      );
    }
    tbody tr.weekend td:first-child{border-left:3px solid var(--red);}
    tbody tr.start td:first-child{border-left:3px solid var(--amber);}
    tbody tr.done td{background:rgba(76,175,109,.14);font-weight:600;}
    tbody tr.done td:first-child{border-left:3px solid var(--green);}
    .tag{
      font-size:14.1px;
      text-transform:uppercase;
      letter-spacing:.04em;
      padding:2px 9px;
      border-radius:4px;
      white-space:normal;
    }
    .tag.work{background:rgba(242,169,0,.15);color:var(--amber);}
    .tag.off{background:rgba(214,69,69,.18);color:#ff8686;}
    .tag.neutral{background:rgba(154,163,171,.15);color:var(--muted);}

    footer{margin-top:22px;color:var(--muted);font-size:15.4px;text-align:center;}

    .print-only{display:none;}

    @media (prefers-reduced-motion: reduce){
      tbody tr.workday{animation:none;opacity:1;}
    }

    /* ---------- Друк ---------- */