/* Color themes and sizes */
    :root {
      --text:      #0f172a;
      --muted:     #6b7280;
      --line:      #e5e7eb;
      --primary:   #0ea5e9;
      --day:       #fff5b3;
      --night:     #eadbff;
      --off:       #f1f5f9;
      --header-bg: #f8fafc;
      --left-bg:   #ffffff;
      --cell-bg:   #ffffff;
      --header-row-height: 36px;
    }

    * {
      box-sizing: border-box;
    }

    html, body {
      height: 100%;
    }

    body {
      margin: 0;
      background: #fff;
      color: var(--text);
      font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      display: flex;
      flex-direction: column;
    }

    /* Upper pannel */
    header {
      position: sticky;
      top: 0;
      z-index: 10;
      background: #fff;
      border-bottom: 1px solid var(--line);
      padding: 10px 12px;
    }

    header .row {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }

    h1 {
      margin: 0 10px 0 0;
      font-size: 16px;
      white-space: nowrap;
    }

    label {
      white-space: nowrap;
      color: var(--muted);
    }

    input,
    button {
      font: inherit;
    }

    input[type="text"],
    input[type="date"] {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 7px 10px;
      background: #fff;
    }

    input[type="text"] {
      width: 240px;
    }

    .btn {
      border: 1px solid var(--primary);
      border-radius: 10px;
      padding: 7px 12px;
      cursor: pointer;
      font-weight: 700;
      color: #fff;
      background: var(--primary);
    }
    .btn.secondary {
      border-color: var(--line);
      background: #fff;
      color: #111;
    }
    .btn:active {
      transform: translateY(1px);
    }

    .toolbar {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 10px;
    }

    .toolbar .spacer {
      flex: 1 1 auto;
    }

    .kickers {
      display: flex;
      gap: 6px;
    }

    .kickers .chip {
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 4px 10px;
      user-select: none;
      cursor: pointer;
      background: #fff;
    }

    .kickers .chip.day   { background: var(--day);   }
    .kickers .chip.night { background: var(--night); }
    .kickers .chip.off   { background: var(--off);   }

    .status {
      color: #16a34a;
      font-weight: 600;
    }

    /* Main zone */
    main {
      padding: 10px 12px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .grid-wrap {
      flex: 1;
      overflow: auto;
      background: #fff;
    }

    table {
      border-collapse: separate;
      border-spacing: 0;
      width: max-content;
      min-width: 100%;
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: hidden;
      background: #fff;
    }

    /* Sticky table head */
    thead th {
      position: sticky;
      z-index: 2;
      background: var(--header-bg);
      border-bottom: 1px solid var(--line);
      border-right: 1px solid var(--line);
      padding: 8px 10px;
      white-space: nowrap;
      font-size: 13px;
    }

    thead tr:first-child th      { top: 0;                          z-index: 3; }
    thead tr.week th             { top: var(--header-row-height);   z-index: 2; color: var(--muted); font-weight: 500; }
    thead th:last-child          { border-right: 0; }
    thead tr:first-child th:first-child { left: 0; z-index: 4; }
    thead tr.week th:first-child        { left: 0; z-index: 4; }
    thead th.sticky-name {
      vertical-align: middle;
    }

    /* Table body */
    tbody th {
      position: sticky;
      left: 0;
      z-index: 1;
      background: var(--left-bg);
      font-weight: 600;
      white-space: nowrap;
      cursor: grab;
      border-right: 1px solid var(--line);
      padding: 8px 10px;
    }

    tbody td,
    tbody th {
      padding: 8px 10px;
      border-bottom: 1px solid var(--line);
      border-right: 1px solid var(--line);
      background: var(--cell-bg);
      vertical-align: top;
    }

    tbody tr:last-child td,
    tbody tr:last-child th {
      border-bottom: 0;
    }

    tbody td:last-child {
      border-right: 0;
    }

    .cell {
      min-width: 110px;
      max-width: 220px;
    }

    .pill {
      display: inline-block;
      min-width: 64px;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 5px 8px;
      text-align: center;
      background: #fff;
      cursor: text;
    }
    .pill.day   { background: var(--day);   }
    .pill.night { background: var(--night); }
    .pill.off   { background: var(--off);   }
    .pill:focus {
      outline: 2px solid #93c5fd;
      outline-offset: 2px;
    }

    .meta {
      display: flex;
      gap: 12px;
      align-items: center;
      margin: 6px 0;
      color: var(--muted);
    }

    .meta .active {
      font-weight: 600;
      color: #111;
    }

    /* DnD */
    tbody tr.dragging { opacity: 0.6; }
    tr.drop-indicator td {
      padding: 0;
      border: 0;
      background: transparent;
    }
    tr.drop-indicator td > div {
      height: 2px;
      background: var(--primary);
    }

    /* Search */
    .search {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .search input { width: 220px; }

    /* Badge */
    .badge {
      display: inline-block;
      padding: 2px 6px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: #fff;
      color: #111;
    }