/* Schedule Generator v2 bridge admin pages.
   Standalone styles -- intentionally not tied to the legacy site theme,
   since these pages are short-lived and will be replaced by v2 Tailwind
   pages at cutover. Mobile-first: viewport meta + fluid widths. */

* { box-sizing: border-box; }

.sg-page {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f5f6f8;
    color: #1a1a1a;
    margin: 0;
    padding: 16px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.sg-back-bar { margin: 0 0 8px 0; }
/* No border-bottom (removed 2026-08-28). The 8px padding went with it -- it
   existed only to keep the rule off the entity name. The dark override that
   recoloured that border is gone from sg-shell.css too. */
.sg-header { margin-bottom: 16px; }
/* Size / weight / line height come from sg-shell.css's .sgs-main h1 (32px / 400
   / 42px, 2026-11-13); it was 1.6em here, 1.3em below 600px. */
.sg-header h1 { margin: 0 0 4px 0; color: #55638b; }
.sg-charter { margin: 0; color: #555; }
.sg-meta { color: #666; }
/* Explanatory prose under the page header -- currently the "what is a
   schedule run" definition on sg-runs. Deliberately NOT .sg-instructions:
   that one is a tinted callout box with its own left border, which this high
   on the page reads as a competing banner.

   margin: 0 is intentional. It sits between .sg-header (margin-bottom 16px)
   and .sg-actions (margin 16px 0), so both gaps are already provided; adding
   its own margin would collapse unevenly against them.

   max-width in ch so the measure holds at any viewport -- .sgs-main runs to
   1600px, and prose set that wide is genuinely hard to read. */
/* No `color` on purpose (2026-08-28): body.sg-page sets `var(--foreground)` at
   (0,1,1), so leaving this out inherits the right value in BOTH themes and
   needs no dark override. It used to be #555 with a muted dark counterpart,
   which made body prose read as secondary metadata alongside .sg-charter and
   .sg-meta -- those two stay muted because they genuinely are secondary. */
.sg-definition { margin: 0; line-height: 1.5; max-width: 96ch; }
.sg-instructions { background: #eef4ff; border-left: 1px solid #2d6cdf; padding: 10px 14px; margin: 0 0 16px 0; }
/* Numbered steps rendered AS an .sg-instructions callout -- the <ol> is the
   callout itself, so the list's own indent stacks on top of the callout's
   14px padding and pushes the text well right of the border. 34px = that
   14px plus room for the markers, which keeps the numbers inside the box.

   margin 30px top and bottom is MARGIN, not padding, on purpose: padding
   would stretch the tinted box and its blue bar 30px taller rather than
   putting space around them. It overrides .sg-instructions' own
   `margin: 0 0 16px 0` by source order -- both classes sit on the same
   element, so this rule must stay AFTER .sg-instructions in this file.
   Scoped to .sg-steps so sg-special-weeks' plain .sg-instructions paragraph
   keeps its original spacing. */
.sg-steps { padding-left: 34px; margin: 30px 0; }
.sg-steps li { margin: 0 0 4px 0; }
.sg-steps li:last-child { margin-bottom: 0; }

.sg-actions { margin: 16px 0; display: flex; gap: 8px; flex-wrap: wrap; }

.sg-filter-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    margin: 0 0 16px 0;
}
.sg-filter-item { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.sg-filter-item label { font-weight: 600; color: #333; }
.sg-filter-item select {
    padding: 8px 12px;
    border: 1px solid #c0c0c0;
    border-radius: 4px;
    background: white;
    min-width: 180px;
}
/* "Select All" / "Select None", sitting to the right of the Day-of-Week
   selector. .sg-filter-row is align-items: flex-end, so without the bottom
   padding these would sit on the selects' bottom edge; 10px lifts them level
   with the select's own text. No min-width, unlike .sg-filter-item -- this
   should take only the space the two links need. */
.sg-filter-actions { display: flex; align-items: center; gap: 16px; padding-bottom: 10px; }
/* Hover is a colour change, not an underline. The transition sits on the
   element itself, which is the only safe place for a `color` transition --
   putting one on an ancestor cancels and restarts every descendant's colour
   transition once per frame. `ease-in-out` here is plain CSS, so it is the
   real keyword curve, not Tailwind's differently-shaped token. */
.sg-linkbtn { color: #2d6cdf; text-decoration: none; cursor: pointer; transition: color 0.1s ease-in-out; }
.sg-linkbtn:hover { color: #e29025; }

@media (max-width: 600px) {
    .sg-filter-row { flex-direction: column; align-items: stretch; }
    .sg-filter-item, .sg-filter-item select { width: 100%; min-width: 0; }
    /* Stacked, so there is no select to line up with any more. */
    .sg-filter-actions { padding-bottom: 0; }
}
.sg-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 4px;
    border: 0;
    font-size: 1em;
    text-decoration: none;
    cursor: pointer;
    font-weight: 500;
    transition: background-color .1s ease-in-out;
}
.sg-btn-primary { background: #5a678b; color: white; }
.sg-btn-primary:hover { background: #4a5775; }
.sg-btn-secondary { background: #ddd; color: #333; }
.sg-btn-secondary:hover { background: #ccc; }
.sg-btn-danger { background: #a32e2e; color: white; }
.sg-btn-danger:hover { background: #862525; }

/* Frosted-glass confirmation modal. Backdrop captures clicks (closes the
   modal); the panel itself stops propagation so clicks on its content stay
   open. Used for destructive actions (run delete) on sg-runs and
   sg-review. */
.sg-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 28, 48, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    padding: 16px;
}
/* 🪤 `display: flex` above is an AUTHOR rule, so it BEATS the UA stylesheet's
   [hidden] { display: none }. Without this line the `hidden` attribute does
   not hide the backdrop -- it stays a full-screen, fully transparent layer at
   z-index 9000 that silently swallows every click on the page.

   The failure is invisible and does not look like a CSS problem: the page
   renders perfectly and simply stops responding. Found 2026-09-16 when a
   Playwright click reported "<div hidden ...sg-modal-backdrop> intercepts
   pointer events".

   The existing sg modals escape it only because they toggle an inline
   style="display:none" instead of using `hidden` -- so this was latent, not
   active, and it would have bitten the first person to reach for `hidden`.
   Same trap as .sg-fld on the sg-sessions warning rows. */
.sg-modal-backdrop[hidden] { display: none; }

/* Form controls inside a modal. No modal had one until the FargoRate
   entity-level "Don't need to share" note box (2026-09-16), so nothing styled
   them -- and a UA-default textarea renders WHITE on the dark panel.
   Written against theme tokens, so one rule is correct in both themes and
   there is no html.dark twin to keep in sync. */
.sg-modal textarea,
.sg-modal input[type="text"] {
    background: var(--background);
    color: var(--foreground);
    border: 1px solid var(--border);
    border-radius: 4px;
    font: inherit;
    padding: 8px 10px;
    width: 100%;
    box-sizing: border-box;
}
.sg-modal textarea { resize: vertical; }
.sg-modal textarea:focus,
.sg-modal input[type="text"]:focus { outline: 2px solid var(--input); outline-offset: 1px; }
.sg-modal {
    background: white;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    max-width: 520px;
    width: 100%;
    padding: 20px 24px;
}
/* Popup titles: 26px / 400 / 39px, the same as the sub-tournament page's
   .stn-modal h3 (Jason, 2026-11-13). Beats the bare h3 rule's 1.1em below. */
.sg-modal h3 { margin: 0 0 12px 0; color: #c62828; border-bottom: none; padding-bottom: 0; font-size: 26px; font-weight: 400; line-height: 39px; }
.sg-modal-info { margin: 0 0 16px 0; color: #333; }
.sg-modal-info dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; }
.sg-modal-info dt { font-weight: 600; color: #555; }
.sg-modal-info dd { margin: 0; }
.sg-modal-warning { background: #fde8e8; border-left: 1px solid #d33; padding: 10px 14px; margin: 12px 0 0 0; color: #800; }
/* House rule for popups on the v2-shell pages (Jason, 2026-11-11): button rows
   are CENTRED unless a popup says otherwise. Same rule as .stn-mactions on the
   sub-tournament page. */
.sg-modal-actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
/* Was an inline style="margin:12px 0 0 0; color:#555; font-size:.9em" on both
   modals. Promoted to a class purely so dark mode can reach it -- an inline
   colour beats any stylesheet rule short of !important. Values unchanged. */
.sg-modal-note { margin: 12px 0 0 0; color: #555; }

.sg-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.sg-table th, .sg-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #e8e8e8;
}
.sg-table td { transition: background 0.16s ease-in-out; }
/* Per-column alignment overrides (specificity higher than the default
   .sg-table th/td rule). Used by BoundFields via ItemStyle-CssClass /
   HeaderStyle-CssClass. */
.sg-table th.sg-text-center, .sg-table td.sg-text-center { text-align: center; }
.sg-table th {
    background: #54688d;
    color: white;
    font-weight: 600;
}
.sg-table tr:nth-child(even) td { background: #fafbfc; }
.sg-table tr:hover td { background: #ebebeb; }
.sg-table a { color: #2d6cdf; text-decoration: none; }
/* ⚠ NO underline on hover (removed 2026-09-16, Jason's call, site-wide).
   This was the ONLY `text-decoration: underline` anywhere in sg-bridge.css or
   sg-shell.css -- every other link rule in both files already sets `none`, so
   deleting it is the whole of "no underlines on links".

   Hover feedback is not lost: `.sg-table tr:hover td` fills the row, which is
   the affordance that actually matters now that whole rows are becoming
   links. Deliberately NOT replaced with a colour change -- that would need a
   `html.dark .sg-table a:hover` twin to beat `html.dark .sg-table a` (a (0,2,1)
   tie that sg-shell.css wins on source order), i.e. two rules and a landmine,
   to restate something the row fill already says. */

/* ── Scrolling table: sticky header row + sticky leading columns ──────────
   Same structure as the mfg v1 meal page (meal.aspx): a fixed-height scroll
   container, a header row that sticks to its top, and the first N columns
   frozen to its left while the rest scroll horizontally. Cells never wrap.

   Opt in by wrapping the table in <div class="sg-tbl-scroll sg-tbl-sticky-2">.
   Without the -sticky-2 modifier you get the scroll container and the sticky
   header only, which is the right choice for a table with no natural row key.

   Column widths are custom properties so a page can retune them without
   restating the selectors:
       <div class="sg-tbl-scroll sg-tbl-sticky-2" style="--sg-col1-w: 90px"> */
.sg-tbl-scroll {
    --sg-col1-w: 74px;
    --sg-col2-w: 104px;

    position: relative;
    width: 100%;
    max-height: 60vh;
    overflow: auto;
    /* Momentum scrolling inside the box on iOS. */
    -webkit-overflow-scrolling: touch;
    margin-bottom: 16px;
}
/* Taller on a phone, where 60vh is a cramped box inside a scrolling page; no
   cap when printing, or only the visible part of the table would print
   (Jason, 2026-11-10 -- the v2 table standard, same in sub-tournament-new.css).
   A page that sets its own height (sg-venue-capacities' .vc-scroll, 72vh)
   outranks the phone rule and keeps it; the print rule is !important so that
   same page-level height can't clip a printout. */
@media (max-width: 599.98px) {
    .sg-tbl-scroll { max-height: 75vh; }
}
@media print {
    .sg-tbl-scroll { max-height: none !important; overflow: visible !important; }
    /* Unpin the header row and frozen columns on paper, or the header prints
       partway down the table over whatever row the box was scrolled to (found
       on sub-tournament, 2026-11-11). */
    .sg-tbl-scroll .sg-table th,
    .sg-tbl-scroll .sg-table td { position: static !important; }
}

.sg-tbl-scroll .sg-table {
    margin-bottom: 0;
    /* ⚠️ Sticky cells and border-collapse: collapse do not mix. Collapsed
       borders belong to the TABLE, not to the cell, so they stay put while a
       sticky cell scrolls away from them -- the frozen columns lose their
       bottom rules as you scroll sideways. separate + zero spacing renders
       identically and keeps every border with its own cell.

       ⚠️ !important is load-bearing, not laziness. GridLines="None" makes
       GridView emit style="border-collapse:collapse;" INLINE on the <table>,
       and an inline style beats any normal rule. Drop the !important and this
       silently reverts to collapsed borders -- the layout still looks almost
       right, which is what makes it hard to spot. */
    border-collapse: separate !important;
    border-spacing: 0;
}

/* No wrapping anywhere. This is what the horizontal scroll exists to absorb. */
.sg-tbl-scroll .sg-table th,
.sg-tbl-scroll .sg-table td { white-space: nowrap; }

/* Same type size at every width.

   ⚠ Kept as a GUARD, not as a live override. This used to beat the <=600px
   block's `.sg-table th, td { font-size: 0.9em }`; that declaration was
   removed 2026-08-28 when nothing under the sg header was allowed below 16px
   any more, so there is currently nothing for this to win against. It stays
   because the shrink-to-fit instinct is what this container exists to refuse:
   squeezing more columns onto a narrow screen is the exact problem it solves
   by scrolling instead.

   Specificity (0,2,1) would beat a media block's (0,1,1) regardless of source
   order, so it needs no media query of its own. Padding is deliberately left
   alone -- the narrow-screen 6px/8px still helps and costs no legibility. */
.sg-tbl-scroll .sg-table th,
.sg-tbl-scroll .sg-table td { font-size: 1em; }

/* Sticky on the CELLS, never on <tr>/<thead>: a GridView renders its header as
   a bare <tr> with no <thead> at all, and sticky table rows have far patchier
   support than sticky cells regardless. */
.sg-tbl-scroll .sg-table th { position: sticky; top: 0; z-index: 3; }

/* ── Frozen columns ──
   Two modifiers, -sticky-1 and -sticky-2, freezing that many leading columns.
   Column 1 behaves identically in both, so those rules carry both selectors;
   only the divider and the extra column differ. */

/* ⚠️ `overflow: hidden` is a SAFETY NET, not decoration, and it shipped
   missing. A frozen cell is pinned to a fixed max-width and never wraps, so
   content wider than the column does not clip -- it OVERFLOWS, and because the
   next column's text is painted in its own cell, the two render on top of each
   other. It reads as a broken table rather than a too-narrow column.
   (Hit on sg-runs the first time a run had a real name, 2026-08-31: the
   column was still 190px, sized back when every run rendered as "Run #41".)
   With this, the worst case is a clean ellipsis. */
.sg-tbl-sticky-1 .sg-table th:nth-child(1),
.sg-tbl-sticky-1 .sg-table td:nth-child(1),
.sg-tbl-sticky-2 .sg-table th:nth-child(1),
.sg-tbl-sticky-2 .sg-table td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 2;
    width: var(--sg-col1-w);
    min-width: var(--sg-col1-w);
    max-width: var(--sg-col1-w);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Column 2's offset IS column 1's width -- which is why every frozen column is
   pinned to a fixed width rather than left to size itself. Columns that are NOT
   frozen are deliberately left alone to size to their content. */
.sg-tbl-sticky-2 .sg-table th:nth-child(2),
.sg-tbl-sticky-2 .sg-table td:nth-child(2) {
    position: sticky;
    left: var(--sg-col1-w);
    z-index: 2;
    width: var(--sg-col2-w);
    min-width: var(--sg-col2-w);
    max-width: var(--sg-col2-w);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Divider marking where the frozen block ends -- on the LAST frozen column,
   so it moves with the modifier. */
.sg-tbl-sticky-1 .sg-table th:nth-child(1),
.sg-tbl-sticky-1 .sg-table td:nth-child(1),
.sg-tbl-sticky-2 .sg-table th:nth-child(2),
.sg-tbl-sticky-2 .sg-table td:nth-child(2) { border-right: 1px solid #d8d8d8; }

/* Corner cells are sticky on BOTH axes, so they have to outrank the header row
   and the frozen columns alike. */
.sg-tbl-sticky-1 .sg-table th:nth-child(1),
.sg-tbl-sticky-2 .sg-table th:nth-child(1),
.sg-tbl-sticky-2 .sg-table th:nth-child(2) { z-index: 5; }

/* ⚠️ Frozen cells MUST be opaque or the scrolling columns slide visibly under
   them. .sg-table paints a background on the TABLE and on even rows only, so
   odd rows and the hover state are transparent and have to be restated here.
   .sg-bye-row already carries its own !important background and needs nothing. */
.sg-tbl-sticky-1 .sg-table td:nth-child(1),
.sg-tbl-sticky-2 .sg-table td:nth-child(1),
.sg-tbl-sticky-2 .sg-table td:nth-child(2) { background: #fff; }
.sg-tbl-sticky-1 .sg-table tr:nth-child(even) td:nth-child(1),
.sg-tbl-sticky-2 .sg-table tr:nth-child(even) td:nth-child(1),
.sg-tbl-sticky-2 .sg-table tr:nth-child(even) td:nth-child(2) { background: #fafbfc; }
.sg-tbl-sticky-1 .sg-table tr:hover td:nth-child(1),
.sg-tbl-sticky-2 .sg-table tr:hover td:nth-child(1),
.sg-tbl-sticky-2 .sg-table tr:hover td:nth-child(2) { background: #ebebeb; }

.sg-empty {
    background: white;
    padding: 24px;
    text-align: center;
    color: #888;
    border: 1px dashed #ccc;
    border-radius: 4px;
}

.sg-error {
    background: #fde8e8;
    border-left: 1px solid #d33;
    padding: 12px 16px;
    margin: 16px 0;
    color: #800;
}
.sg-error pre {
    background: #fff;
    padding: 8px;
    overflow: auto;
    margin: 8px 0 0 0;
}

.sg-warning {
    background: #fff8e1;
    border-left: 1px solid #f9a825;
    padding: 12px 16px;
    margin: 16px 0;
    color: #6b4900;
}
.sg-warning ul { margin: 8px 0 0 20px; padding: 0; }

/* Section sub-titles: #55638b in light (Jason, 2026-11-10). Dark mode is set
   separately in sg-shell.css (html.dark .sg-page h2) and is unchanged. */
h2 { color: #55638b; border-bottom: 1px solid #ddd; padding-bottom: 4px; margin-top: 24px; }
h3 { color: #555; margin-top: 16px; margin-bottom: 6px; font-size: 1.1em; }

/* ── Per-session schedule layout (mirrors v1 schedule page) ── */
.sg-session-name {
    color: #2d6cdf;
    font-size: 1.05em;
    margin: 24px 0 8px 0;
    border-bottom: 1px solid #c9d6ee;
    padding-bottom: 4px;
}

/* sg-review per-session block: meta row + stats line + actions + weeks. */
.sg-session-block-review { margin-bottom: 32px; }
.sg-session-summary { padding: 10px 14px; }
.sg-session-meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    margin-bottom: 4px;
}
.sg-session-meta > span { white-space: nowrap; }
/* 20px / 400 (Jason, 2026-11-13); the line height is the page's 1.5. The
   name is wrapped in a <strong> by sg-review.aspx.cs, so the weight has to be
   set on that too or the UA's bold wins. */
.sg-session-meta-name { font-size: 20px; color: #1a1a1a; }
.sg-session-meta-name,
.sg-session-meta-name strong { font-weight: 400; }
.sg-session-meta-id, .sg-session-meta-dates { color: #555; }

/* ── Session state chips, and the league-session picker (Part B #1/#2) ──
   ⚠ These deliberately use the SHELL'S TOKENS rather than following the
   hard-coded hex all around them. Everything else in this file needs a
   matching `html.dark` override over in sg-shell.css -- two files that have to
   be edited together, which the project notes already flag as the tidy-up
   waiting to happen. A token pair is defined for BOTH themes at :root, so one
   rule here is correct in both and there is nothing to keep in sync.

   Colour carries the meaning, and the four are ordered by how stuck a session
   is: red = played and unrecoverable, green = live, amber = generated and
   still waiting on an action, grey = nothing has happened yet. */
.sg-chip {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-weight: 600;
    /* No font-size: nothing between the sg header and footer renders below
       16px, and a chip is not the exception that proves that rule. */
    white-space: nowrap;
}
.sg-chip-played     { background: var(--destructive-bg); color: var(--destructive-fg); }
.sg-chip-published  { background: var(--success-bg);     color: var(--success-fg); }
.sg-chip-generated  { background: var(--warn-bg);        color: var(--warn-fg); }
.sg-chip-empty      { background: var(--muted);          color: var(--muted-foreground); }

/* The picker reuses .sg-filter-row / .sg-filter-item wholesale -- it is the
   same control sg-runs already uses, so it should look like it. Only the
   trailing count needs anything of its own. */
.sg-ls-count { color: #555; }

/* Guard-modal list of played sessions. Matches .sg-warning ul's indent so the
   two read as the same kind of list. */
.sg-guard-list { margin: 8px 0 12px 20px; padding: 0; }

/* ⚠ .sg-modal h3 above is red because, as its comment says, these modals only
   ever confirmed a DESTRUCTIVE action. The Adjust Run guard breaks that
   assumption -- continuing deletes nothing -- so it opts out. (0,2,1) beats the
   bare (0,1,1) rule; the dark side of this needs more care, see sg-shell.css. */
.sg-modal.sg-modal-caution h3 { color: var(--warn-fg); }
.sg-session-stats { color: #444; }
@media (max-width: 600px) {
    .sg-session-meta { flex-direction: column; gap: 2px; }
}
.sg-week-block {
    background: transparent;
    margin: 0 0 20px 0;
    padding: 0;
}
.sg-week-header {
    font-weight: 600;
    margin: 0 0 6px 0;
    color: #333;
    font-size: 1em;
}
.sg-bye-row td {
    background: #fff8e1 !important;
    font-style: italic;
    color: #6b4900;
}
/* Hover override for bye rows (otherwise the generic .sg-table tr:hover td
   rule above can't beat the !important on the bye base color). */
.sg-table tr.sg-bye-row:hover td { background: #f5ecc7 !important; }
/* Matches tables inside week blocks: fixed column widths so every week's
   table on the page lines up identically (Home Team / Visiting Team / Pool
   Place). Scoped to .sg-week-block to avoid affecting other .sg-table uses
   (sg-runs grid, sg-run-setup grid). table-layout: fixed makes the browser
   honor the percentages instead of resizing per-row content. */
.sg-week-block .sg-table { table-layout: fixed; }
.sg-week-block .sg-table th:nth-child(1),
.sg-week-block .sg-table td:nth-child(1) { width: 40%; }
.sg-week-block .sg-table th:nth-child(2),
.sg-week-block .sg-table td:nth-child(2) { width: 40%; }
.sg-week-block .sg-table th:nth-child(3),
.sg-week-block .sg-table td:nth-child(3) { width: 20%; }
.sg-week-block .sg-table td { word-wrap: break-word; overflow-wrap: anywhere; }
/* Special-week rows: no surrounding table, just a tinted label */
.sg-week-block.kind-position,
.sg-week-block.kind-exemption {
    padding: 8px 14px;
    border-radius: 4px;
    margin-bottom: 12px;
}
.sg-week-block.kind-position { background: #fff8e1; transition: background 0.16s ease-in-out; }
.sg-week-block.kind-position:hover { background: #f5ecc7; }
.sg-week-block.kind-position .sg-week-header { color: #6b4900; margin-bottom: 0; }
.sg-week-block.kind-exemption { background: #ffe8e8; transition: background 0.16s ease-in-out; }
.sg-week-block.kind-exemption:hover { background: #fcd2d2; }
.sg-week-block.kind-exemption .sg-week-header { color: #800; margin-bottom: 0; }

@media (max-width: 600px) {
    .sg-table th, .sg-table td { padding: 6px 8px; }
    .sg-btn { padding: 12px 16px; }
}