/* Стилі сторінки. Витягнуто з <style> у Calendar.html без змін. */
:root{
      --bg:#1b1e21;
      --panel:#24282c;
      --panel-2:#2c3135;
      --line:#383e43;
      --text:#eef1f3;
      --muted:#9aa3ab;
      --amber:#f2a900;
      --amber-dim:#7a5a10;
      --red:#d64545;
      --green:#4caf6d;
      --blue:#4a86e8;
      --radius:10px;
    }
    *{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;
      overflow-x:hidden;
    }
    .wrap{max-width:1220px;margin:0 auto;padding:32px 23px 69px;}

    header{display:flex;align-items:center;gap:25px;margin-bottom:24px;flex-wrap:wrap;}
    .text-logo{flex-shrink:0;}
    .text-logo img{height:30px;width:auto;display:block;}
    .header-text{flex:1;min-width:220px;}
    .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(22px,5vw,30px);margin:0 0 10px;
      border-bottom:3px solid var(--amber);padding-bottom:12px;
    }
    .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);}

    .panel{
      background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
      padding:25px;margin-bottom:20px;
    }
    .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;
    }
    label{
      display:block;font-size:15.4px;color:var(--muted);text-transform:uppercase;
      letter-spacing:.06em;margin-bottom:6px;
    }
    input{
      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;
    }
    input::placeholder{color:#5a6167;}
    input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(242,169,0,.18);}

    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:14px 28px;cursor:pointer;
      transition:transform .1s, background .15s;
    }
    button:hover{background:#ffbb1a;}
    button:active{transform:scale(.98);}
    button.secondary{background:transparent;border:1px solid var(--line);color:var(--text);}
    button.secondary:hover{border-color:var(--amber);color:var(--amber);background:transparent;}

    .msg{font-size:16.6px;font-family:'IBM Plex Mono',monospace;margin-top:12px;display:none;}
    .msg.show{display:block;}
    .msg.err{color:var(--red);}

    /* ---------- Логін ---------- */
    #loginView .panel{max-width:380px;margin:60px auto 0;}
    #loginView .actions{display:flex;align-items:center;gap:16px;margin-top:16px;}
    #pinInput{text-align:center;font-size:28.2px;letter-spacing:.3em;}

    /* ---------- Панель керування ---------- */
    .controls-row{
      display:flex;justify-content:space-between;align-items:center;gap:18px;
      flex-wrap:wrap;margin-bottom:16px;
    }
    .view-toggle{display:flex;gap:9px;}
    .view-toggle button{padding:10px 21px;font-size:16.6px;}
    .team-filter-row{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px;}
    .filter-pill{
      background:transparent;border:1px solid var(--line);color:var(--muted);
      font-family:'IBM Plex Mono',monospace;font-weight:400;text-transform:uppercase;font-size:14.1px;
      letter-spacing:.06em;padding:8px 16px;border-radius:20px;cursor:pointer;
    }
    .filter-pill.active{border-color:var(--amber);color:var(--amber);background:rgba(242,169,0,.1);}
    .filter-pill:hover:not(.active){border-color:var(--amber);color:var(--amber);}

    .month-nav{display:flex;align-items:center;gap:16px;}
    .month-nav button{padding:9px 16px;font-size:20.5px;line-height:1;}
    .month-label{
      font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;
      font-size:23px;letter-spacing:.03em;min-width:190px;text-align:center;
    }

    .legend{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:10px;font-family:'IBM Plex Mono',monospace;font-size:14.1px;color:var(--muted);}
    .legend-item{display:flex;align-items:center;gap:7px;}
    .legend-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
    .legend-dot.status-new{background:var(--muted);}
    .legend-dot.status-progress{background:var(--amber);}
    .legend-dot.status-done{background:var(--green);}
    .legend-swatch-hatched{
      width:16px;height:9px;border-radius:2px;flex-shrink:0;
      background-color:rgba(154,163,171,.4);
      background-image:repeating-linear-gradient(45deg, rgba(0,0,0,.38) 0px, rgba(0,0,0,.38) 3px, transparent 3px, transparent 6px);
    }
    .team-legend{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:18px;font-family:'IBM Plex Mono',monospace;font-size:14.1px;color:var(--muted);}
    .team-legend-item{display:flex;align-items:center;gap:7px;}
    .team-legend-swatch{width:10px;height:10px;border-radius:3px;flex-shrink:0;}

    /* ---------- Місячний календар ---------- */
    .cal-grid-wrap{
      border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--line);
    }
    .cal-cols{grid-template-columns:1.15fr 1.15fr 1.15fr 1.15fr 1.15fr .7fr .7fr;}
    .cal-weekday-row{display:grid;gap:1px;}
    .cal-weekday{
      background:var(--panel-2);color:var(--muted);font-family:'IBM Plex Mono',monospace;
      font-size:14.1px;text-transform:uppercase;letter-spacing:.06em;text-align:center;padding:12px 5px;
      min-width:0;
    }
    .cal-weekday.weekend-col{color:#7d5a5a;}
    .cal-week-row{display:grid;gap:1px;position:relative;}
    .cal-day{
      background:var(--panel);padding:7px 9px;position:relative;min-width:0;overflow:hidden;
    }
    .cal-day.empty{background:var(--bg);}
    .cal-day.today{background:rgba(74,134,232,.1);box-shadow:inset 0 0 0 2px var(--blue);}
    .cal-day.weekend-col{background:#202226;}
    .cal-day.weekend-col.empty{background:var(--bg);}
    .cal-day-num{font-family:'IBM Plex Mono',monospace;font-size:15.4px;color:var(--muted);}
    .cal-day.today .cal-day-num{color:var(--blue);font-weight:600;}

    .cal-week-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;}
    .cal-bar{
      position:absolute;height:21px;border-radius:4px;font-size:13.4px;
      display:flex;align-items:center;gap:5px;padding:0 7px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
      cursor:pointer;pointer-events:auto;color:#f5f6f7;
    }
    .cal-bar:hover{filter:brightness(1.25);}
    .cal-bar.extra-day-bar{
      background-image:repeating-linear-gradient(45deg, rgba(0,0,0,.38) 0px, rgba(0,0,0,.38) 4px, transparent 4px, transparent 8px);
    }
    .bar-status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
    .bar-status-dot.status-new{background:var(--muted);}
    .bar-status-dot.status-progress{background:var(--amber);}
    .bar-status-dot.status-done{background:var(--green);}
    /* clip-path для .torn-left / .torn-right рахується динамічно в JS (applyTornEdges),
       щоб розмір "розриву" був фіксований у пікселях, а не масштабувався з довжиною смуги */

    /* ---------- Гант ---------- */
    .gantt-wrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);}
    .gantt-scroll{overflow-x:auto;}
    .gantt-inner{display:inline-block;min-width:100%;}
    .gantt-month-row{display:flex;position:sticky;top:0;z-index:2;background:var(--panel-2);}
    .gantt-month-cell{
      flex-shrink:0;text-align:center;font-family:'Oswald',sans-serif;font-weight:600;
      text-transform:uppercase;letter-spacing:.04em;font-size:14.1px;color:var(--amber);
      padding:7px 0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
      overflow:hidden;white-space:nowrap;
    }
    .gantt-header-row{display:flex;position:sticky;top:24px;z-index:2;background:var(--panel-2);border-bottom:1px solid var(--line);}
    .gantt-label-col{
      width:270px;flex-shrink:0;padding:12px 16px;font-family:'IBM Plex Mono',monospace;
      font-size:14.1px;text-transform:uppercase;color:var(--muted);letter-spacing:.06em;
      position:sticky;left:0;background:var(--panel-2);z-index:3;border-right:1px solid var(--line);
    }
    .gantt-day-col{
      flex-shrink:0;text-align:center;font-family:'IBM Plex Mono',monospace;
      font-size:14.1px;color:var(--muted);padding:7px 0;border-right:1px solid rgba(255,255,255,.03);
    }
    .gantt-day-col.weekend{background:rgba(214,69,69,.05);}
    .gantt-day-col.today{background:rgba(74,134,232,.12);color:var(--blue);font-weight:600;}
    .gantt-row{display:flex;border-bottom:1px solid var(--line);}
    .gantt-row:last-child{border-bottom:none;}
    .gantt-row-label{
      width:270px;flex-shrink:0;padding:14px 16px;font-size:16.6px;
      position:sticky;left:0;background:var(--panel);z-index:1;border-right:1px solid var(--line);
      overflow:hidden;
    }
    .gantt-row-label .title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .gantt-row-label .sub{font-family:'IBM Plex Mono',monospace;font-size:14.1px;color:var(--muted);margin-top:2px;}
    .gantt-track{position:relative;display:flex;}
    .gantt-cell{flex-shrink:0;border-right:1px solid rgba(255,255,255,.03);}
    .gantt-cell.weekend{background:rgba(214,69,69,.04);}
    .gantt-cell.today{background:rgba(74,134,232,.08);}
    .gantt-bar{
      position:absolute;top:10px;height:30px;border-radius:5px;cursor:pointer;
      display:flex;align-items:center;gap:6px;padding:0 9px;font-size:14.1px;color:#f5f6f7;
      overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
      transition:filter .1s;
    }
    .gantt-bar:hover{filter:brightness(1.15);}
    .gantt-bar-weekend{position:absolute;top:10px;height:30px;background:rgba(0,0,0,.32);pointer-events:none;}
    .gantt-bar-extra{
      position:absolute;top:10px;height:30px;pointer-events:none;
      background-image:repeating-linear-gradient(45deg, rgba(0,0,0,.38) 0px, rgba(0,0,0,.38) 4px, transparent 4px, transparent 8px);
    }

    .empty-state{padding:46px;text-align:center;color:var(--muted);font-size:16.6px;}

    /* ---------- Модалка "більше замовлень за день" ---------- */
    .modal-overlay{
      display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);
      z-index:50;align-items:center;justify-content:center;padding:23px;
    }
    .modal-overlay.show{display:flex;}
    .modal-box{
      background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
      max-width:420px;width:100%;max-height:80vh;overflow-y:auto;padding:23px;
    }
    .modal-box h3{margin:0 0 14px;font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:20.5px;}
    .modal-close{width:100%;margin-top:10px;}

/* Кольорова крапка команди в чіпі фільтра — замінює окрему легенду кольорів. */
.filter-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;
  vertical-align:baseline;flex:none;}
.filter-pill{display:inline-flex;align-items:center;}