@layer system, app, components;

@import url("https://unpkg.com/@sakun/system.css") layer(system);

@layer app {
  @media (max-width: 600px) {
    body {
      margin: 0;
      background: white;
    }

    .window {
      margin: 0;
      height: 100dvh;
    }

    .window-pane {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding-top: 1.5rem;
      overscroll-behavior: contain;
    }

    .window-pane form {
      display: flex;
      flex-direction: column;
    }

    .window-pane label {
      font-weight: bold;
      font-size: 2rem;
    }

    .window-pane input {
      font-size: 1.5rem;
      padding: 1.5rem;
    }

    .window-pane .btn {
      font-size: 1.5rem;
      border: 3px solid black;
      padding: 1.5rem;
      margin-top: 2rem;
    }

    .window-pane {
      padding: 0;
      overflow-x: hidden;
    }

    .window-pane label.btn-group {
      font-size: 3ch;
    }

    .sys-table {
      display: block;
      overflow-x: auto;
    }

    .sys-table thead th,
    .sys-table td {
      font-size: 1ch;
    }

    dialog .window {
      max-width: 100%;
    }
    
    dialog input[type="date"],
    dialog input[type="time"] {
      width: 100%;
    }
    
    dialog .field-row button {
      width: 100%;
    }
  }

  .hidden {
    display: none;
  }

  .error {
    color: red;
  }

  .flex {
    display: flex;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .flex-col {
    flex-direction: column;
  }

  .justify-center {
    justify-content: center;
  }

  .align-center {
    align-items: center;
  }

  .flex-row {
    flex-direction: row;
  }

  .gap-2 {
    gap: 0.5rem;
  }

  .w-min {
    width: min-width;
  }

  .table-wrap {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sys-table {
    width: 100%;
    border: 1px solid #000;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
  }

  .sys-table thead th {
    font-weight: 700;
    border-bottom: 1px solid #000;
    padding: 4px 6px;
    text-align: left;
    white-space: nowrap;
  }

  .sys-table td {
    padding: 4px 6px;
    border-bottom: 1px solid #000;
    vertical-align: top;
  }

  .sys-table th + th,
  .sys-table td + td {
    border-left: 1px solid #000;
  }

  .sys-table tbody tr:nth-child(even) {
    background: #f2f2f2;
  }

  .sys-table tbody tr:last-child td {
    border-bottom: 0;
  }

  .sys-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .sys-table tr.is-selected {
    background: #000;
    color: #fff;
  }

  dialog {
    border: none;
    padding: 0;

    .window {
      margin: 0;
      width: 30rem;
    }
  }

  textarea {
    border: 1.5px solid #000;
    font-family: Chicago_12;
    font-size: 18px;
    padding-left: 5px;
  }

  .btn-group {
    all: unset;
    background: #fff;
    border-image: url(https://unpkg.com/@sakun/system.css@0.1.11/dist/button.svg)
      30 stretch;
    border-style: solid;
    border-width: 5.5px;
    color: #000;
    cursor: pointer;
    font-family: Chicago_12;
    font-size: 18px;
    min-height: 20px;
    min-width: 59px;
    padding: 0 20px;
    text-align: center;
    text-decoration: none;
    border-radius: 6px;

    input {
      opacity: 0;
    }

    &::before {
      all: unset;
    }

    &::after {
      all: unset;
    }
  }
}

.btn-group:has(input:focus) {
  box-shadow:
    0 0 0 2px #000,
    0 0 0 4px #4d90fe;
}

.btn-group:has(input:checked) {
  background-color: black;
  color: white;
}

.icon {
  width: 24px;
  height: 24px;
  display: block;
  cursor: pointer;
}

input[type="time"] {
  background-color: white;
  color: #111;
}

input[type="time"]:focus {
  background-color: white;
  color: #111;
  -webkit-text-fill-color: #111;
  outline: none;
  box-shadow: 0 0 0 2px oklch(from blue 90 c h);
}

@layer components {
  .calendar-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    font-family: system-ui, sans-serif;
  }

  .calendar-layout,
  .calendar-layout * {
    box-sizing: border-box;
  }

  /* mini calendar */
  .calendar-mini {
    border-right: 1px solid oklch(from grey l c h / 0.2);
    padding: 8px;
  }

  .calendar-mini header {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    margin-bottom: 8px;
  }

  .calendar-mini-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    font-size: 12px;
    text-align: center;
  }

  .calendar-mini-grid div {
    height: 32px;
    line-height: 32px;
    border-radius: 4px;
    cursor: pointer;
  }

  .calendar-mini-grid div:hover {
    background: oklch(from blue l c h / 0.3);
  }

  .calendar-mini-day-of-week {
    opacity: 0.6;
  }

  .calendar-mini-grid .is-today {
    background: oklch(from blue 0.7 c h / 0.35);
    font-weight: 600;
  }

  /* calendar expanded time grid */
  .calendar-expanded {
    display: flex;
    flex-direction: column;
  }

  .calendar-expanded-header {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    border-bottom: 1px solid oklch(from grey l c h / 0.2);
    background: oklch(from grey l c h / 0.2);
    font-weight: 500;
  }

  .calendar-expanded-day-of-week {
    text-align: center;
    padding: 8px 0;
  }

  .calendar-expanded-body {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
  }

  .calendar-expanded-hours div {
    height: 60px;
    line-height: 60px;
    text-align: right;
    padding-right: 6px;
    font-size: 12px;
    color: oklch(from black l c h);
  }

  .cell {
    height: 60px;
    border-bottom: 1px solid oklch(from grey l c h / 0.3);
    cursor: crosshair;

    position: relative;
    z-index: 1;
  }

  .calendar-expanded-day-column {
    position: relative;
    border-left: 1px solid oklch(from grey l c h / 0.3);
    background-color: white;
  }

  .calendar-expanded-day-column::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 100%;
    pointer-events: auto;
  }

  .calendar-expanded-event {
    position: absolute;
    box-sizing: border-box;

    display: block;

    min-height: 60px;
    min-width: 40px;

    background: oklch(92% 0.05 250);
    border: 1px solid oklch(70% 0.12 250);
    color: oklch(30% 0.03 250);

    border-radius: 6px;
    padding: 4px 6px;
    font-size: 12px;
    overflow: break-word;

    cursor: pointer;

    z-index: 20;
  }

  .calendar-expanded-event:hover {
    background: oklch(88% 0.07 250);
    border-color: oklch(60% 0.15 250);
  }

  .calendar-expanded-event.is-request-off {
    background: oklch(95% 0.08 90);
    border: 1px solid oklch(80% 0.15 90);
    color: oklch(35% 0.1 90);
  }
}