/* Future tickets: the New ticket dialog, draw days and the upcoming-draws list.
   Same Material-3 shapes and palette as pages.css (indigo main, peach sub). */

/* ---- New ticket dialog ---- */
.m3-dialog.tk-dialog { width: 1120px; padding: 0; gap: 0; position: relative; z-index: 1; margin: auto; }
.tk-backdrop { position: fixed; inset: 0; }

.tk-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px 16px 24px;
    background: #DCE1EF;
    color: #1F2A52;
}

.tk-head h2 { margin: 0; font-size: 19px; font-weight: 600; }
.tk-head-icon { width: 22px; height: 22px; fill: none; stroke: #2D3E73; stroke-width: 2; stroke-linejoin: round; flex-shrink: 0; }
.tk-close { margin-left: auto; }

.tk-draw {
    display: grid;
    grid-template-columns: minmax(200px, auto) auto minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding: 18px 24px;
    border-bottom: 1px solid #EDEDE8;
}

.tk-draw .m3-field { gap: 6px; }

.tk-select {
    height: 48px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid #B3BBDA;
    background: #FFFFFF;
    font: 500 15px 'IBM Plex Sans', system-ui, sans-serif;
    color: #1A1A18;
    min-width: 200px;
}

.tk-select:focus { outline: none; border: 2px solid #2D3E73; }

.tk-stepper {
    display: inline-flex;
    align-items: center;
    height: 48px;
    border-radius: 999px;
    border: 1px solid #B3BBDA;
    background: #FFFFFF;
    overflow: hidden;
}

.tk-stepper button {
    width: 46px;
    height: 46px;
    border: 0;
    background: transparent;
    color: #2D3E73;
    font-size: 20px;
    cursor: pointer;
}

.tk-stepper button:hover:not(:disabled) { background: #F6F7FB; }
.tk-stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.tk-stepper span { min-width: 40px; text-align: center; font: 600 16px 'IBM Plex Mono', ui-monospace, monospace; color: #1F2A52; }

.tk-dates { display: flex; flex-wrap: wrap; gap: 6px; min-height: 48px; align-items: center; }

.tk-date {
    font: 500 12px 'IBM Plex Mono', ui-monospace, monospace;
    padding: 6px 10px;
    border-radius: 8px;
    background: #EEF0F7;
    border: 1px solid #DCE1EF;
    color: #1F2A52;
    white-space: nowrap;
    text-transform: capitalize;
}

.tk-date.first { background: #2D3E73; border-color: #2D3E73; color: #FFFFFF; }
.tk-hint { font-size: 12px; color: #6E6E68; }

.tk-body {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 24px;
    padding: 20px 24px;
}

.tk-picker { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tk-picker .picker-col.main { flex: 3 1 360px; }
.tk-picker .picker-col.sub { flex: 1 1 160px; }
.tk-picker .picker-btn { height: 40px; }

.tk-type-toggle {
    align-self: flex-start;
    border: 0;
    background: transparent;
    padding: 4px 0;
    font: 600 12px 'IBM Plex Sans', system-ui, sans-serif;
    color: #4A5A94;
    cursor: pointer;
}

.tk-type-toggle:hover { text-decoration: underline; }
.tk-type { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }

.tk-combos { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tk-combo { display: flex; align-items: center; gap: 6px; }
.tk-idx { width: 18px; text-align: right; font: 600 11px 'IBM Plex Mono', ui-monospace, monospace; color: #8A8A82; flex-shrink: 0; }

.tk-slot {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-height: 48px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #E3E6F0;
    background: #FFFFFF;
    cursor: pointer;
    font-family: inherit;
}

.tk-slot:hover { border-color: #B3BBDA; }
.tk-slot.active { border: 2px solid #2D3E73; padding: 5px 9px; box-shadow: 0 0 0 4px rgba(45, 62, 115, 0.08); }
.tk-slot .ball-divider { height: 20px; }

.ball.tk-empty { background: transparent; box-shadow: none; border: 2px dashed #C3CAE4; box-sizing: border-box; }
.ball.sub.tk-empty { background: transparent; border-color: #F0C893; }

.tk-ok { margin-left: auto; color: #1F7A4D; font-weight: 700; padding-right: 4px; }

.tk-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 0;
    background: #DCE1EF;
    color: #2D3E73;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.tk-icon:hover { background: #CDD3E8; }
.tk-icon.plain { background: transparent; color: #4A4A45; }
.tk-icon.plain:hover { background: rgba(45, 62, 115, 0.08); }
.tk-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.tk-combo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tk-combo-actions button:disabled,
.tk-type button:disabled { opacity: 0.45; cursor: not-allowed; }

.tk-dialog > .dash-error { margin: 0 24px 12px; }

.tk-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border-top: 1px solid #EDEDE8;
    background: #F6F7FB;
}

.tk-sum { flex-grow: 1; font-size: 13px; color: #4A4A45; }
.tk-sum .warn { color: #B86E00; }

@media (max-width: 900px) {
    .tk-draw,
    .tk-body,
    .tk-type { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Draw days (master page + create dialog) ---- */
.tk-days { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

.tk-day {
    font-family: inherit;
    min-width: 52px;
    height: 38px;
    padding: 0 10px;
    border-radius: 12px;
    border: 1px solid #B3BBDA;
    background: #FFFFFF;
    color: #2D3E73;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-transform: capitalize;
}

.tk-day:hover { background: #F6F7FB; }
.tk-day.on { background: #2D3E73; border-color: #2D3E73; color: #FFFFFF; }

/* ---- Upcoming draws & tickets on the master page ---- */
.tk-rows { display: flex; flex-direction: column; border: 1px solid #EDEDE8; border-radius: 16px; overflow: hidden; }

.tk-row {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid #EDEDE8;
    background: #FFFFFF;
}

.tk-row:first-child { border-top: 0; }
.tk-row.next { background: #F6F7FB; }
.tk-row.upcoming { background: repeating-linear-gradient(135deg, #FFFFFF 0 12px, #FAFBFD 12px 24px); }
.tk-row.today,
.tk-row.due { background: #FFF3DC; }
.tk-row.missed { opacity: 0.6; }

.tk-row-date b { display: block; font-size: 14px; text-transform: capitalize; }
.tk-row-date span { font-size: 12px; color: #6E6E68; }
.tk-row.due .tk-row-date span,
.tk-row.today .tk-row-date span { color: #B86E00; font-weight: 600; }

.tk-row-main { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.tk-row-none { color: #B3BBDA; }
.tk-row-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

.tk-chip { border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.tk-chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s ease; }
.tk-chip.open svg { transform: rotate(180deg); }
.tk-row-detail + .tk-row-detail { margin-top: -8px; }
.tk-chip:hover { background: #CDD3E8; }
.tk-chip.open { background: #2D3E73; color: #FFFFFF; }
.tk-chip-static { align-self: center; white-space: nowrap; }

.tk-row-detail {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid #DCE1EF;
}

.tk-row-detail-foot { display: flex; align-items: center; gap: 12px; font-size: 12px; color: #6E6E68; }
.tk-row-detail-foot span { flex-grow: 1; font-family: 'IBM Plex Mono', ui-monospace, monospace; }

.m3-btn-text.danger { color: #B3261E; }
.m3-btn-text.danger:hover { background: #FBEDEC; color: #B3261E; }

@media (max-width: 720px) {
    .tk-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .tk-row-actions { justify-content: flex-start; }
}

/* Ticket count next to a drawn date in the highlight grid */
.tk-grid-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #E3F4EC;
    color: #1F7A4D;
    font: 600 11px 'IBM Plex Mono', ui-monospace, monospace;
    text-decoration: none;
    vertical-align: middle;
}

.tk-grid-pill svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }

.tk-lock { cursor: default; color: #8A8A82; }

/* A ticket date marked "not played" in the highlight grid */
.hg-missed .hg-date { opacity: 0.6; }
.hg-missed-cell {
    color: #8A8A82;
    font-size: 12px;
    font-style: italic;
    padding-left: 12px;
    background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(45, 62, 115, 0.04) 8px 16px);
}
.tk-row-actions .m3-icon-btn { width: 40px; height: 40px; }