/* Shubh Ventures Attendance r3 island — Holidays & Leave requests (scoped polish)
 * Load AFTER sv-attendance-react-*.css. Every rule is scoped to #sv-att-hl-dialog,
 * the island's dialog host (class "att att-portal"), so Settings and the main page are unaffected.
 * Colours come from the .att theme variables only, so data-tone="dark" works automatically.
 */

/* ---------- Dialog open / close motion ---------- */
#sv-att-hl-dialog.is-closing { pointer-events: none; }
#sv-att-hl-dialog.is-closing .att-backdrop { animation: sv-hl-fade-out .16s ease forwards; }
#sv-att-hl-dialog.is-closing .att-dialog { animation: sv-hl-sink .16s var(--a-ease) forwards; }
#sv-att-hl-dialog.is-closing .sv-hl-poplayer { display: none; }
@keyframes sv-hl-fade-out { to { opacity: 0; } }
@keyframes sv-hl-sink { to { opacity: 0; transform: translate3d(0, 8px, 0) scale(.985); } }
@keyframes sv-hl-sheet-out { to { opacity: .4; transform: translate3d(0, 32px, 0); } }
@keyframes sv-hl-in { from { opacity: 0; transform: translate3d(0, 4px, 0); } to { opacity: 1; transform: none; } }

#sv-att-hl-dialog .sv-hl-content.is-first { animation: sv-hl-in .22s var(--a-ease) both; }
#sv-att-hl-dialog .att-dialog-body { transition: opacity .18s ease; }
#sv-att-hl-dialog .att-dialog[aria-busy="true"] .sv-hl-content { opacity: .55; pointer-events: none; transition: opacity .18s ease; }
#sv-att-hl-dialog .att-dialog-foot .att-muted .att-i { color: var(--a-acc); }

/* ---------- Body layout ---------- */
#sv-att-hl-dialog .sv-hl-content { display: grid; gap: 18px; align-content: start; min-width: 0; }
#sv-att-hl-dialog .sv-hl-flash:empty { display: none; }
#sv-att-hl-dialog .sv-hl-flash { padding: 12px 20px 0; }
#sv-att-hl-dialog .sv-hl-flash .att-notice,
#sv-att-hl-dialog .sv-hl-formmsg .att-notice { align-items: center; animation: sv-hl-in .2s var(--a-ease) both; }
#sv-att-hl-dialog .sv-hl-formmsg:empty { display: none; }
#sv-att-hl-dialog .sv-hl-retry { justify-self: start; margin-top: 10px; }

/* ---------- Fieldset card (real <fieldset>/<legend>, base styles from .att .att-fieldset) ---------- */
#sv-att-hl-dialog .att-fieldset { transition: border-color .15s ease, box-shadow .15s ease; }
#sv-att-hl-dialog .att-fieldset:focus-within { border-color: var(--a-line2); }
#sv-att-hl-dialog .att-fieldset legend { color: var(--a-text); }
#sv-att-hl-dialog .sv-hl-desc { margin-top: -4px; }
#sv-att-hl-dialog .att-fieldset .att-switches { margin-top: 0; }
#sv-att-hl-dialog .sv-hl-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 2px; }
#sv-att-hl-dialog .sv-hl-span2 { grid-column: 1 / -1; }

/* Fields: invalid states for the custom controls and the textarea */
#sv-att-hl-dialog .att-datebtn[aria-invalid="true"],
#sv-att-hl-dialog .att-textarea[aria-invalid="true"] { border-color: var(--a-neg-dot); }
#sv-att-hl-dialog .att-datebtn[aria-invalid="true"].is-open,
#sv-att-hl-dialog .att-select[aria-invalid="true"].is-open,
#sv-att-hl-dialog .att-input[aria-invalid="true"]:focus,
#sv-att-hl-dialog .att-textarea[aria-invalid="true"]:focus { border-color: var(--a-neg-dot); outline-color: var(--a-neg-dot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a-neg-dot) 22%, transparent); }
#sv-att-hl-dialog .att-field-error[hidden],
#sv-att-hl-dialog .att-field-hint[hidden] { display: none; }
#sv-att-hl-dialog .att-field-error { animation: sv-hl-in .16s var(--a-ease) both; }
#sv-att-hl-dialog .att-input:hover:not(:focus):not([aria-invalid="true"]),
#sv-att-hl-dialog .att-textarea:hover:not(:focus):not([aria-invalid="true"]) { border-color: var(--a-line3); }
#sv-att-hl-dialog .att-textarea { min-height: 88px; }

/* Date button (att-datebtn): fill the field, placeholder tone, focus ring like inputs */
#sv-att-hl-dialog .sv-hl-datebox { position: relative; min-width: 0; }
#sv-att-hl-dialog .att-datebtn,
#sv-att-hl-dialog .att-select { width: 100%; }
#sv-att-hl-dialog .att-datebtn-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#sv-att-hl-dialog .att-datebtn.is-placeholder .att-datebtn-text { color: var(--a-muted); font-weight: 500; }
#sv-att-hl-dialog .att-datebtn:focus-visible,
#sv-att-hl-dialog .att-select:focus-visible { outline: none; border-color: var(--a-acc); box-shadow: var(--a-ring); }

/* Switch row polish */
#sv-att-hl-dialog .att-switch-row { transition: background-color .15s ease; }
#sv-att-hl-dialog .att-switch-row:hover { background: var(--a-sunken2); }
#sv-att-hl-dialog .att-switch:hover .att-switch-thumb { box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 0 0 4px color-mix(in srgb, var(--a-acc) 12%, transparent); }

/* Danger buttons: the base .att-btn:hover rule would otherwise turn them neutral grey */
#sv-att-hl-dialog .att-btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--a-neg-dot) 16%, var(--a-neg-bg));
  border-color: color-mix(in srgb, var(--a-neg-dot) 55%, transparent);
  color: var(--a-neg);
}
#sv-att-hl-dialog .att-btn.is-spinning .att-i { animation: att-spin 1s linear infinite; }

/* ---------- Popovers (rendered in .sv-hl-poplayer, position:fixed from .att .att-pop) ---------- */
#sv-att-hl-dialog .sv-hl-poplayer { position: relative; z-index: 2147483640; }
#sv-att-hl-dialog .att-pop { background: var(--a-raised); color: var(--a-text); border-color: var(--a-line2); box-shadow: var(--a-shadow-pop); overscroll-behavior: contain; }

/* Calendar popover (att-datepop-*) */
#sv-att-hl-dialog .att-datepop { width: 296px; max-width: calc(100vw - 16px); }
#sv-att-hl-dialog .att-datepop-head { gap: 8px; }
#sv-att-hl-dialog .att-datepop-head strong { flex: 1; text-align: center; }
#sv-att-hl-dialog .att-datepop-grid > span { min-height: 36px; }
#sv-att-hl-dialog .att-datepop-day { transition: background-color .12s ease, color .12s ease, box-shadow .12s ease, transform .08s ease; }
#sv-att-hl-dialog .att-datepop-day:hover:not(:disabled):not(.is-selected) { background: var(--a-acc-soft); color: var(--a-acc-text); }
#sv-att-hl-dialog .att-datepop-day:active:not(:disabled) { transform: scale(.94); }
#sv-att-hl-dialog .att-datepop-day.is-selected { box-shadow: 0 1px 2px rgba(15, 23, 42, .18), 0 6px 14px -8px var(--a-acc); }
#sv-att-hl-dialog .att-datepop-day.is-selected:hover { background: color-mix(in srgb, var(--a-acc) 90%, #000); }
#sv-att-hl-dialog .att-datepop-day:disabled { cursor: not-allowed; }
#sv-att-hl-dialog .att-datepop-foot .att-linkbtn { transition: background-color .12s ease; }
#sv-att-hl-dialog .sv-hl-linkbtn-muted { color: var(--a-muted); }
#sv-att-hl-dialog .sv-hl-linkbtn-muted:hover:not(:disabled) { background: var(--a-hover); color: var(--a-text); }

/* Listbox popover (att-listbox / att-opt) */
#sv-att-hl-dialog .att-listpop { min-width: 180px; }
#sv-att-hl-dialog .att-listbox { margin: 0; list-style: none; }
#sv-att-hl-dialog .att-opt { transition: background-color .1s ease, color .1s ease; }
#sv-att-hl-dialog .att-opt.is-active { background: var(--a-acc-soft); }
#sv-att-hl-dialog .att-opt-check { transition: opacity .12s ease; }

/* Confirm / reason popover (replaces native confirm() and prompt()) */
#sv-att-hl-dialog .sv-hl-confirm { display: grid; gap: 10px; width: 320px; max-width: calc(100vw - 16px); padding: 14px; }
#sv-att-hl-dialog .sv-hl-confirm-title { font-size: 13.5px; font-weight: 650; line-height: 1.35; }
#sv-att-hl-dialog .sv-hl-confirm-text { margin: -4px 0 0; font-size: 12.5px; color: var(--a-muted); }
#sv-att-hl-dialog .sv-hl-confirm-actions { display: flex; justify-content: flex-end; gap: 6px; }

/* ---------- Sections + tables ---------- */
#sv-att-hl-dialog .sv-hl-section { display: grid; gap: 10px; min-width: 0; }
#sv-att-hl-dialog .sv-hl-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
#sv-att-hl-dialog .sv-hl-section-head h3 { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 13.5px; font-weight: 650; letter-spacing: -.005em; }
#sv-att-hl-dialog .sv-hl-section .att-empty { border: 1px dashed var(--a-line2); border-radius: var(--a-r-md); padding: 28px 20px 30px; }

#sv-att-hl-dialog .att-table-wrap { border: 1px solid var(--a-line); border-radius: var(--a-r-md); background: var(--a-card); overflow: auto; }
#sv-att-hl-dialog .att-table tbody tr:last-child > * { border-bottom: 0; }
#sv-att-hl-dialog .att-table thead th:first-child { border-top-left-radius: calc(var(--a-r-md) - 1px); }
#sv-att-hl-dialog .att-table thead th:last-child { border-top-right-radius: calc(var(--a-r-md) - 1px); }
#sv-att-hl-dialog .sv-hl-strong { font-weight: 600; }
#sv-att-hl-dialog .sv-hl-dates { display: grid; gap: 1px; white-space: nowrap; }
#sv-att-hl-dialog .sv-hl-dates small { font-size: 11.5px; }
#sv-att-hl-dialog .sv-hl-table th,
#sv-att-hl-dialog .sv-hl-table td { padding-left: 12px; padding-right: 12px; }
#sv-att-hl-dialog .sv-hl-reason { min-width: 140px; }
#sv-att-hl-dialog .sv-hl-reason--sm { min-width: 120px; }
/* reasons wrap to two lines then clamp (full text in the title tooltip) */
#sv-att-hl-dialog .sv-hl-clip { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
/* the review table has six columns: give that one dialog a little more room */
#sv-att-hl-dialog .att-dialog[data-tab="leaves"] { width: min(980px, 100%); }
#sv-att-hl-dialog .sv-hl-col-actions { text-align: right; }
#sv-att-hl-dialog .sv-hl-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }

/* ---------- Mobile (matches the base CSS breakpoint) ---------- */
@media (max-width: 760px) {
  #sv-att-hl-dialog.is-closing .att-dialog { animation-name: sv-hl-sheet-out; }
  #sv-att-hl-dialog .sv-hl-flash { padding: 10px 16px 0; }
  #sv-att-hl-dialog .sv-hl-form-actions .att-btn { flex: 1 1 auto; }
  #sv-att-hl-dialog .att-table-wrap { overflow: hidden; }
  #sv-att-hl-dialog .att-table tbody tr:last-child { border-bottom: 0; }
  #sv-att-hl-dialog .att-table td[data-label] { grid-template-columns: 96px minmax(0, 1fr); }
  #sv-att-hl-dialog .sv-hl-table th,
  #sv-att-hl-dialog .sv-hl-table td { padding-left: 0; padding-right: 0; }
  #sv-att-hl-dialog .sv-hl-clip { display: block; -webkit-line-clamp: unset; }
  #sv-att-hl-dialog .sv-hl-reason,
  #sv-att-hl-dialog .sv-hl-reason--sm { min-width: 0; }
  #sv-att-hl-dialog .att-dialog[data-tab="leaves"] { width: 100%; }
  #sv-att-hl-dialog .sv-hl-col-actions { text-align: left; }
  #sv-att-hl-dialog .sv-hl-actions { display: flex; width: 100%; justify-content: flex-start; }
  #sv-att-hl-dialog .sv-hl-actions .att-btn { flex: 1 1 0; }
  #sv-att-hl-dialog .att-table td[data-label] > .sv-hl-actions { justify-self: stretch; }
  #sv-att-hl-dialog .att-datepop-day { height: 40px; }
  #sv-att-hl-dialog .att-datepop-grid > span { min-height: 40px; }
  #sv-att-hl-dialog .att-dialog-foot .att-muted,
  #sv-att-hl-dialog .att-dialog-foot .att-grow { display: none; }
  #sv-att-hl-dialog .att-dialog-foot .att-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  #sv-att-hl-dialog *,
  #sv-att-hl-dialog *::before,
  #sv-att-hl-dialog *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}