@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&display=swap');

/* ===========================================================================
   DVS portal — shared design system + app shell
   Edit this file, then bump CSS_VERSION in dvs_portal_shell.py.
   =========================================================================== */

:root {
  --dvs-ink: #1F272E;
  --dvs-muted: #7C7F83;
  --dvs-faint: #9DA1A6;
  --dvs-line: #E2E4E7;
  --dvs-line-soft: #EDEFF1;
  --dvs-card: #FFFFFF;
  --dvs-raised: #FFFFFF;
  --dvs-page: #F4F5F6;
  --dvs-sunken: #FBFBFC;
  --dvs-green: #07723F;
  --dvs-green-dark: #055E32;
  --dvs-green-tint: #D6E9DE;
  --dvs-green-text: #034A2A;
  --dvs-orange: #F2601F;
  --dvs-orange-tint: #FEF0E9;
  --dvs-amber: #8A4D00;
  --dvs-amber-tint: #F3E3C9;
  --dvs-red: #96201A;
  --dvs-red-tint: #F8D8D4;
  --dvs-red-text: #8A1B14;
  --dvs-hover: #CDD1D5;
  --dvs-shadow: 0 1px 3px rgba(31,39,46,.07);
  --dvs-menu-shadow: 0 8px 28px rgba(31,39,46,.16);
  --dvs-radius: 10px;
  color-scheme: light;
}

:root[data-dvs-theme="dark"] {
  --dvs-ink: #E7EAEC;
  --dvs-muted: #9AA1A7;
  --dvs-faint: #767D83;
  --dvs-line: #2B3138;
  --dvs-line-soft: #232930;
  --dvs-card: #1A1F24;
  --dvs-raised: #1E242A;
  --dvs-page: #121619;
  --dvs-sunken: #161B20;
  --dvs-green: #3BBB7E;
  --dvs-green-dark: #2FA76E;
  --dvs-green-tint: #152C21;
  --dvs-green-text: #6FD3A2;
  --dvs-orange: #F2803F;
  --dvs-orange-tint: #2E1D13;
  --dvs-amber: #E0A24A;
  --dvs-amber-tint: #2C2214;
  --dvs-red: #E5695F;
  --dvs-red-tint: #2E1816;
  --dvs-red-text: #F0958D;
  --dvs-hover: #3A424A;
  --dvs-shadow: 0 1px 3px rgba(0,0,0,.4);
  --dvs-menu-shadow: 0 8px 28px rgba(0,0,0,.55);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-dvs-theme="light"]) {
    --dvs-ink: #E7EAEC;
    --dvs-muted: #9AA1A7;
    --dvs-faint: #767D83;
    --dvs-line: #2B3138;
    --dvs-line-soft: #232930;
    --dvs-card: #1A1F24;
    --dvs-raised: #1E242A;
    --dvs-page: #121619;
    --dvs-sunken: #161B20;
    --dvs-green: #3BBB7E;
    --dvs-green-dark: #2FA76E;
    --dvs-green-tint: #152C21;
    --dvs-green-text: #6FD3A2;
    --dvs-orange: #F2803F;
    --dvs-orange-tint: #2E1D13;
    --dvs-amber: #E0A24A;
    --dvs-amber-tint: #2C2214;
    --dvs-red: #E5695F;
    --dvs-red-tint: #2E1816;
    --dvs-red-text: #F0958D;
    --dvs-hover: #3A424A;
    --dvs-shadow: 0 1px 3px rgba(0,0,0,.4);
    --dvs-menu-shadow: 0 8px 28px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}

/* --- repoint each page's own variables ---------------------------------
   The pages declare and use their own --ink/--card/--line/etc. Rather than
   rewriting five page scripts, this changes what those names resolve to, so
   every rule inside them follows the theme untouched. */
.dvs, .dvs-portal, .dvs-leave, .dvs-exp, .dvs-chk, .dvs-ts, .dvs-at {
  --ink: var(--dvs-ink) !important;
  --muted: var(--dvs-muted) !important;
  --line: var(--dvs-line) !important;
  --card: var(--dvs-card) !important;
  --page: transparent !important;
  --dvs: var(--dvs-green) !important;
  --dvs-dark: var(--dvs-green-dark) !important;
  --green: var(--dvs-green) !important;
  --orange: var(--dvs-orange) !important;
  --open: var(--dvs-amber) !important;
  --out: var(--dvs-orange) !important;
  --ok: var(--dvs-green) !important;
  --no: var(--dvs-red) !important;
  --draft: var(--dvs-amber) !important;
  --leave: var(--dvs-amber) !important;
  --absent: var(--dvs-red) !important;
  --holiday: var(--dvs-faint) !important;
}

/* --- Frappe's stock website chrome ------------------------------------- */
header.sticky-top, .navbar, #navbar-breadcrumbs,
.web-footer, .footer, .website-footer { display: none !important; }

body {
  padding-top: 0 !important;
  background: var(--dvs-page) !important;
  color: var(--dvs-ink) !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

body.dvs-shell { padding-top: 56px !important; padding-bottom: 72px !important; }

/* ===========================================================================
   App shell
   =========================================================================== */

.dvs-appbar {
  position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 900;
  display: flex; align-items: center; gap: 12px; padding: 0 14px;
  background: var(--dvs-card); border-bottom: 1px solid var(--dvs-line);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.dvs-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
.dvs-brand:hover { text-decoration: none; color: inherit; }
.dvs-brand-mark {
  width: 30px; height: 30px; border-radius: 8px; overflow: hidden; flex: none;
  background: #FFFFFF; border: 1px solid var(--dvs-line);
  display: flex; align-items: center; justify-content: center; padding: 3px;
}
.dvs-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.dvs-brand-name { display: none; font-size: 14px; font-weight: 600; letter-spacing: -.2px; }

.dvs-appbar-title {
  flex: 1; min-width: 0; font-size: 16px; font-weight: 600; letter-spacing: -.25px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}

.dvs-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none; cursor: pointer;
  border: 1px solid var(--dvs-line); background: var(--dvs-green-tint);
  color: var(--dvs-green-text); font-family: inherit; font-size: 12.5px; font-weight: 600;
  letter-spacing: .2px; display: flex; align-items: center; justify-content: center;
}
.dvs-avatar:hover { border-color: var(--dvs-hover); }

.dvs-menu {
  position: absolute; top: 50px; right: 12px; width: 252px; z-index: 950;
  background: var(--dvs-raised); border: 1px solid var(--dvs-line);
  border-radius: 12px; box-shadow: var(--dvs-menu-shadow);
  padding: 6px; display: none;
}
.dvs-menu.open { display: block; }

.dvs-menu-who {
  display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px;
  border-bottom: 1px solid var(--dvs-line-soft); margin-bottom: 5px;
}
.dvs-menu-av {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--dvs-green-tint); color: var(--dvs-green-text);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
}
.dvs-menu-who b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.dvs-menu-who small { display: block; font-size: 11.5px; color: var(--dvs-muted); margin-top: 1px; }

.dvs-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px; border: none; background: none; border-radius: 8px;
  font-family: inherit; font-size: 13.5px; color: var(--dvs-ink);
  text-decoration: none; cursor: pointer; text-align: left;
}
.dvs-menu-item:hover { background: var(--dvs-page); color: var(--dvs-ink); text-decoration: none; }
.dvs-menu-item svg { width: 17px; height: 17px; flex: none; color: var(--dvs-muted); }
.dvs-menu-item.danger { color: var(--dvs-red); margin-top: 4px; border-top: 1px solid var(--dvs-line-soft); border-radius: 0 0 8px 8px; }
.dvs-menu-item.danger svg { color: var(--dvs-red); }

.dvs-theme { padding: 10px 10px 8px; }
.dvs-theme-label {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--dvs-muted); margin-bottom: 7px;
}
.dvs-seg { display: flex; gap: 3px; background: var(--dvs-page); border-radius: 8px; padding: 3px; }
.dvs-seg-btn {
  flex: 1; border: none; background: none; border-radius: 6px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 500; padding: 7px 4px;
  color: var(--dvs-muted);
}
.dvs-seg-btn.on { background: var(--dvs-card); color: var(--dvs-ink); box-shadow: var(--dvs-shadow); font-weight: 600; }

.dvs-tabs {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 900; display: flex;
  background: var(--dvs-card); border-top: 1px solid var(--dvs-line);
  padding-bottom: env(safe-area-inset-bottom, 0);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.dvs-tab {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 9px 2px 10px; text-decoration: none; color: var(--dvs-muted);
  border-top: 2px solid transparent; margin-top: -1px;
}
.dvs-tab:hover { color: var(--dvs-ink); text-decoration: none; }
.dvs-tab svg { width: 21px; height: 21px; }
.dvs-tab span { font-size: 10px; font-weight: 500; letter-spacing: .1px; }
.dvs-tab.on { color: var(--dvs-green) !important; border-top-color: var(--dvs-green); }

/* --- laptop: tabs become a sidebar -------------------------------------- */
@media (min-width: 900px) {
  .dvs-brand-name { display: block; }
  .dvs-appbar-title { text-align: left; padding-left: 12px; }
  body.dvs-shell { padding-bottom: 0 !important; padding-left: 208px !important; }
  .dvs-tabs {
    top: 56px; bottom: 0; right: auto; width: 208px; display: block;
    border-top: none; border-right: 1px solid var(--dvs-line); padding: 12px 10px;
  }
  .dvs-tab {
    flex-direction: row; justify-content: flex-start; gap: 11px;
    padding: 10px 12px; border-top: none; margin: 0 0 2px; border-radius: 9px;
  }
  .dvs-tab span { font-size: 13.5px; }
  .dvs-tab:hover { background: var(--dvs-page); }
  .dvs-tab.on { background: var(--dvs-green-tint); border-top-color: transparent; }
  .dvs-menu { right: 16px; }
}

/* Frappe's base stylesheet sets a heading colour, so h1/h2 don't inherit
   ours and turn near-invisible in dark mode. */
.dvs h1, .dvs h2, .dvs h3,
.dvs-portal h1, .dvs-leave h1, .dvs-exp h1,
.dvs-chk h1, .dvs-ts h1, .dvs-at h1,
.dvs-head h1 { color: var(--dvs-ink) !important; }
.dvs .dvs-head span { color: var(--dvs-muted) !important; }
.dvs .dvs-txt b { color: var(--dvs-ink) !important; }
.dvs .dvs-txt small { color: var(--dvs-muted) !important; }

/* --- the app bar replaces each page's own header ------------------------ */
.dvs-leave .dl-top, .dvs-exp .dx-top, .dvs-chk .dc-top,
.dvs-ts .dt-top, .dvs-at .da-top, .dvs .dvs-top { display: none !important; }

/* ===========================================================================
   Page components
   =========================================================================== */

.dvs-portal, .dvs-leave, .dvs-exp, .dvs-ts, .dvs-at {
  background: transparent !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: var(--dvs-ink) !important;
  max-width: 620px !important; margin: 0 auto !important; padding: 22px 16px 40px !important;
}
.dvs-ts { max-width: 760px !important; }
.dvs { padding-top: 22px !important; }

.dvs-leave .dl-head, .dvs-exp .dx-head, .dvs-chk .dc-head,
.dvs-ts .dt-head, .dvs-at .da-head, .dvs .dvs-sec {
  font-size: 11px !important; font-weight: 600 !important; letter-spacing: .6px !important;
  text-transform: uppercase !important; color: var(--dvs-muted) !important; margin: 28px 0 12px !important;
}

.dvs-leave .dl-item, .dvs-exp .dx-item, .dvs-ts .dt-item,
.dvs-chk .dc-punch, .dvs-at .da-punch, .dvs .dvs-card {
  background: var(--dvs-card) !important;
  border: 1px solid var(--dvs-line) !important;
  border-left: 1px solid var(--dvs-line) !important;
  border-radius: var(--dvs-radius) !important;
  padding: 14px 16px !important; margin-bottom: 10px !important;
  color: var(--dvs-ink) !important;
}
.dvs-leave .dl-item:hover, .dvs-exp .dx-item:hover,
.dvs-ts .dt-item:hover, .dvs .dvs-card:hover {
  border-color: var(--dvs-hover) !important; box-shadow: var(--dvs-shadow) !important;
}
.dvs .dvs-mark {
  background: #FFFFFF !important; border: 1px solid var(--dvs-line) !important;
  padding: 3px !important;
}
.dvs .dvs-ico { background: var(--dvs-green-tint) !important; color: var(--dvs-green) !important; }
.dvs .dvs-ico.o { background: var(--dvs-orange-tint) !important; color: var(--dvs-orange) !important; }
.dvs .dvs-tip {
  background: var(--dvs-sunken) !important; border-color: var(--dvs-line) !important;
  color: var(--dvs-muted) !important; border-radius: var(--dvs-radius) !important;
}
.dvs .dvs-tip b { color: var(--dvs-ink) !important; }
.dvs .dvs-arrow { color: var(--dvs-faint) !important; }

.dvs-leave .dl-form, .dvs-exp .dx-form, .dvs-ts .dt-form {
  background: var(--dvs-card) !important; border: 1px solid var(--dvs-line) !important;
  border-radius: 12px !important; padding: 20px !important; margin: 4px 0 10px !important;
  box-shadow: var(--dvs-shadow) !important;
}

.dvs-leave .dl-empty, .dvs-exp .dx-empty, .dvs-ts .dt-empty, .dvs-chk .dc-empty {
  background: var(--dvs-card) !important; border: 1px dashed var(--dvs-line) !important;
  border-radius: var(--dvs-radius) !important; padding: 28px 18px !important;
  color: var(--dvs-muted) !important; font-size: 13.5px !important;
}

.dvs-leave .dl-status, .dvs-exp .dx-status {
  margin-left: auto !important; font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .3px !important; text-transform: uppercase !important;
  padding: 4px 9px !important; border-radius: 20px !important; white-space: nowrap !important;
}
.dvs-leave .is-open .dl-status, .dvs-exp .is-open .dx-status {
  background: var(--dvs-amber-tint) !important; color: var(--dvs-amber) !important;
}
.dvs-leave .is-ok .dl-status, .dvs-exp .is-ok .dx-status {
  background: var(--dvs-green-tint) !important; color: var(--dvs-green-text) !important;
}
.dvs-leave .is-no .dl-status, .dvs-exp .is-no .dx-status {
  background: var(--dvs-red-tint) !important; color: var(--dvs-red-text) !important;
}

.dvs-leave .dl-dates, .dvs-exp .dx-amt {
  font-size: 15.5px !important; font-weight: 600 !important; letter-spacing: -.15px !important;
}
.dvs-leave .dl-meta, .dvs-exp .dx-meta, .dvs-ts .dt-item small {
  font-size: 12.5px !important; color: var(--dvs-muted) !important;
}
.dvs-leave .dl-reason {
  font-size: 13.5px !important; margin-top: 10px !important; padding-top: 10px !important;
  border-top: 1px solid var(--dvs-line-soft) !important; color: var(--dvs-ink) !important;
}

.dvs-leave .dl-btn, .dvs-exp .dx-btn, .dvs-ts .dt-btn, .dvs-chk .dc-btn {
  font-family: inherit !important; font-size: 15px !important; font-weight: 600 !important;
  letter-spacing: -.1px !important; border-radius: var(--dvs-radius) !important;
  padding: 14px 18px !important; border: 1px solid transparent !important;
}
.dvs-leave .dl-primary, .dvs-exp .dx-primary, .dvs-ts .dt-primary, .dvs-chk .dc-btn.in {
  background: var(--dvs-green) !important; color: #fff !important;
}
.dvs-leave .dl-primary:hover, .dvs-exp .dx-primary:hover,
.dvs-ts .dt-primary:hover, .dvs-chk .dc-btn.in:hover { background: var(--dvs-green-dark) !important; }
.dvs-leave .dl-ghost, .dvs-exp .dx-ghost, .dvs-ts .dt-ghost {
  background: var(--dvs-card) !important; color: var(--dvs-muted) !important;
  border-color: var(--dvs-line) !important;
}
.dvs-ts .dt-small {
  font-size: 12.5px !important; padding: 7px 13px !important; border-radius: 7px !important;
  border: 1px solid var(--dvs-line) !important; color: var(--dvs-ink) !important;
  background: var(--dvs-card) !important;
}

.dvs-leave .dl-field input, .dvs-leave .dl-field select, .dvs-leave .dl-field textarea,
.dvs-exp .dx-field input, .dvs-exp .dx-field select,
.dvs-ts .dt-field input, .dvs-ts .dt-field select, .dvs-ts .dt-field textarea,
.dvs-ts .dt-times input, .dvs-ts .dt-day textarea, .dvs-ts .dt-day-state select {
  font-family: inherit !important; font-size: 15px !important;
  color: var(--dvs-ink) !important; background: var(--dvs-card) !important;
  border: 1px solid var(--dvs-line) !important; border-radius: 9px !important;
  padding: 11px 12px !important;
}
.dvs-leave .dl-field input:focus, .dvs-leave .dl-field select:focus, .dvs-leave .dl-field textarea:focus,
.dvs-exp .dx-field input:focus, .dvs-exp .dx-field select:focus,
.dvs-ts .dt-field input:focus, .dvs-ts .dt-field select:focus, .dvs-ts .dt-field textarea:focus,
.dvs-ts .dt-times input:focus, .dvs-ts .dt-day textarea:focus, .dvs-ts .dt-day-state select:focus {
  outline: none !important; border-color: var(--dvs-green) !important;
  box-shadow: 0 0 0 3px rgba(10,138,78,.14) !important;
}
.dvs-leave .dl-field select, .dvs-exp .dx-field select,
.dvs-ts .dt-field select, .dvs-ts .dt-day-state select {
  appearance: none !important; -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C7F83' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 11px center !important;
  background-size: 15px !important; padding-right: 34px !important;
}
.dvs-leave .dl-field label, .dvs-exp .dx-field label, .dvs-ts .dt-field label {
  font-size: 12px !important; font-weight: 500 !important;
  color: var(--dvs-muted) !important; margin-bottom: 6px !important;
}

.dvs-leave .dl-note, .dvs-exp .dx-note, .dvs-chk .dc-note, .dvs-ts .dt-note, .dvs-at .da-note {
  border-radius: 9px !important; padding: 12px 14px !important;
  font-size: 13.5px !important; line-height: 1.5 !important; border: 1px solid transparent !important;
}
.dvs-leave .dl-note.bad, .dvs-exp .dx-note.bad, .dvs-chk .dc-note.bad,
.dvs-ts .dt-note.bad, .dvs-at .da-note.bad {
  background: var(--dvs-red-tint) !important; color: var(--dvs-red-text) !important;
  border-color: var(--dvs-red-tint) !important;
}
.dvs-leave .dl-note.good, .dvs-exp .dx-note.good, .dvs-chk .dc-note.good, .dvs-ts .dt-note.good {
  background: var(--dvs-green-tint) !important; color: var(--dvs-green-text) !important;
  border-color: var(--dvs-green-tint) !important;
}
.dvs-at .da-note.info {
  background: var(--dvs-sunken) !important; color: var(--dvs-muted) !important;
  border-color: var(--dvs-line) !important;
}

.dvs-leave .dl-bal {
  display: grid !important; grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important; overflow: visible !important; margin-bottom: 6px !important;
}
.dvs-leave .dl-bal-item {
  min-width: 0 !important; background: var(--dvs-card) !important;
  border: 1px solid var(--dvs-line) !important; border-radius: var(--dvs-radius) !important;
  padding: 15px 16px !important;
}
.dvs-leave .dl-bal-n {
  font-size: 27px !important; font-weight: 650 !important; letter-spacing: -.9px !important;
  line-height: 1 !important; color: var(--dvs-green) !important;
}
.dvs-leave .dl-bal-t { font-size: 12px !important; color: var(--dvs-muted) !important; margin-top: 5px !important; }
.dvs-leave .dl-open-row { margin: 18px 0 4px !important; }

.dvs-chk .dc-state {
  border-radius: 14px !important; padding: 28px 20px !important;
  border: 1px solid var(--dvs-line) !important; background: var(--dvs-card) !important;
  box-shadow: var(--dvs-shadow) !important;
}
.dvs-chk .dc-state.in { background: var(--dvs-green-tint) !important; border-color: var(--dvs-green-tint) !important; }
.dvs-chk .dc-state.in .dc-state-value { color: var(--dvs-green-text) !important; }
.dvs-chk .dc-state-label {
  font-size: 11px !important; font-weight: 600 !important; letter-spacing: .6px !important;
  text-transform: uppercase !important; color: var(--dvs-muted) !important;
}
.dvs-chk .dc-state-value { font-size: 29px !important; font-weight: 650 !important; letter-spacing: -.8px !important; }
.dvs-chk .dc-btn { font-size: 17px !important; padding: 19px 18px !important; border-radius: 12px !important; }
.dvs-chk .dc-btn.out { background: var(--dvs-orange) !important; color: #fff !important; }
.dvs-chk .dc-flag {
  border-radius: var(--dvs-radius) !important; padding: 15px 16px !important;
  background: var(--dvs-card) !important; border: 1px solid var(--dvs-line) !important;
}
.dvs-chk .dc-flag b { font-size: 14.5px !important; font-weight: 600 !important; }
.dvs-chk .dc-flag small { font-size: 12.5px !important; color: var(--dvs-muted) !important; }
.dvs-chk .dc-geo { font-size: 12.5px !important; color: var(--dvs-faint) !important; }

.dvs-ts .dt-day {
  background: var(--dvs-sunken) !important; border: 1px solid var(--dvs-line-soft) !important;
  border-radius: var(--dvs-radius) !important; padding: 12px 14px !important; margin-bottom: 8px !important;
}
.dvs-ts .dt-day.on {
  background: var(--dvs-card) !important; border-color: var(--dvs-line) !important;
  box-shadow: var(--dvs-shadow) !important;
}
.dvs-ts .dt-day-name { font-size: 14px !important; font-weight: 600 !important; }
.dvs-ts .dt-day-date { font-size: 12px !important; color: var(--dvs-muted) !important; }
.dvs-ts .dt-day-state select { font-size: 13px !important; padding: 7px 30px 7px 11px !important; }
.dvs-ts .dt-day:not(.on) .dt-times, .dvs-ts .dt-day:not(.on) textarea { display: none !important; }
.dvs-ts .dt-day-head { margin-bottom: 0 !important; }
.dvs-ts .dt-day.on .dt-day-head { margin-bottom: 11px !important; }

.dvs-at .da-grid {
  border-radius: 12px !important; padding: 14px !important;
  background: var(--dvs-card) !important; border: 1px solid var(--dvs-line) !important;
  box-shadow: var(--dvs-shadow) !important;
}
.dvs-at .da-month { font-size: 16px !important; font-weight: 650 !important; }
.dvs-at .da-nav button {
  border-radius: 9px !important; border: 1px solid var(--dvs-line) !important;
  background: var(--dvs-card) !important; color: var(--dvs-ink) !important;
}
.dvs-at .da-sum {
  border-radius: var(--dvs-radius) !important; border: 1px solid var(--dvs-line) !important;
  background: var(--dvs-card) !important; padding: 14px 16px !important;
}
.dvs-at .da-sum b { font-size: 25px !important; letter-spacing: -.8px !important; }
.dvs-at .da-sum small { font-size: 11.5px !important; color: var(--dvs-muted) !important; }
.dvs-at .da-cell { border-radius: 9px !important; font-size: 13.5px !important; }
.dvs-at .da-cell.none { color: var(--dvs-muted) !important; }
.dvs-at .da-cell.today { border-color: var(--dvs-ink) !important; }
.dvs-at .da-cell.present { background: var(--dvs-green-tint) !important; color: var(--dvs-green-text) !important; }
.dvs-at .da-cell.leave { background: var(--dvs-amber-tint) !important; color: var(--dvs-amber) !important; }
.dvs-at .da-cell.absent { background: var(--dvs-red-tint) !important; color: var(--dvs-red-text) !important; }
.dvs-at .da-cell.holiday { background: var(--dvs-sunken) !important; color: var(--dvs-faint) !important; }
.dvs-at .da-legend { font-size: 12px !important; color: var(--dvs-muted) !important; margin: 4px 0 18px !important; }
.dvs-at .da-swatch.present { background: var(--dvs-green-tint) !important; border-color: var(--dvs-green-tint) !important; }
.dvs-at .da-swatch.leave { background: var(--dvs-amber-tint) !important; border-color: var(--dvs-amber-tint) !important; }
.dvs-at .da-swatch.holiday { background: var(--dvs-sunken) !important; border-color: var(--dvs-line) !important; }

@media (max-width: 400px) {
  .dvs-leave .dl-bal { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  .dvs-portal *, .dvs-leave *, .dvs-exp *, .dvs-ts *, .dvs-at *, .dvs * { transition: none !important; }
}

/* Full tab labels need a little more room on a narrow phone. */
.dvs-tab span { white-space: nowrap !important; }
@media (max-width: 420px) {
  .dvs-tab span { font-size: 9px !important; letter-spacing: 0 !important; }
  .dvs-tab svg { width: 19px !important; height: 19px !important; }
}

/* --- tile component ------------------------------------------------------
   These rules used to live inside /home's own <style> block. When /home was
   rebuilt as the dashboard they went with it, and an <svg> with no width
   renders at its natural size — which is why the icons filled the screen.
   They belong here: a tile is a component, not one page's markup. */

.dvs-card,
.dvs-dash .dvs-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 15px 16px !important;
  border-radius: var(--dvs-radius) !important;
  text-decoration: none !important;
  color: var(--dvs-ink) !important;
  background: var(--dvs-card) !important;
  border: 1px solid var(--dvs-line) !important;
  margin-bottom: 9px !important;
}
.dvs-card:hover {
  border-color: var(--dvs-hover) !important;
  text-decoration: none !important;
  color: var(--dvs-ink) !important;
}

.dvs-ico {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 9px !important;
  flex: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--dvs-green-tint) !important;
  color: var(--dvs-green) !important;
}
.dvs-ico.o {
  background: var(--dvs-orange-tint) !important;
  color: var(--dvs-orange) !important;
}
.dvs-ico svg {
  width: 19px !important;
  height: 19px !important;
  stroke-width: 1.7 !important;
  flex: none !important;
}

.dvs-txt { flex: 1 !important; min-width: 0 !important; }
.dvs-txt b {
  display: block !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: -.15px !important;
  line-height: 1.35 !important;
  color: var(--dvs-ink) !important;
}
.dvs-txt small {
  display: block !important;
  font-size: 12.5px !important;
  color: var(--dvs-muted) !important;
  line-height: 1.45 !important;
  margin-top: 2px !important;
}

.dvs-arrow { flex: none !important; color: var(--dvs-faint) !important; }
.dvs-arrow svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2 !important;
  flex: none !important;
}
.dvs-card:hover .dvs-arrow { color: var(--dvs-muted) !important; }

/* Belt and braces: no loose SVG anywhere in the portal should be able to
   size itself. This is what turned a layout slip into an unusable page. */
.dvs-portal svg:not([width]):not([height]) { max-width: 100% !important; }

/* --- taller account menu -------------------------------------------------
   Six entries plus the theme toggle and log out is more than fits above the
   fold on a small phone. Cap it and let it scroll. */
.dvs-menu {
  max-height: calc(100vh - 76px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
.dvs-menu-item { padding: 9px 10px !important; }

/* --- notification bell --------------------------------------------------- */
.dvs-bell {
  position: relative; width: 34px; height: 34px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--dvs-muted); text-decoration: none;
}
.dvs-bell:hover { background: var(--dvs-page); color: var(--dvs-ink); text-decoration: none; }
.dvs-bell svg { width: 19px; height: 19px; }
.dvs-bell-dot {
  position: absolute; top: 6px; right: 7px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--dvs-orange);
  border: 2px solid var(--dvs-card);
}
.dvs-bell-dot[hidden] { display: none; }

/* ===========================================================================
   card grid for record lists
   Every record page renders its records as siblings inside one container, so
   making that container a grid rearranges them with no change to any page's
   markup or JavaScript.
   =========================================================================== */

@media (min-width: 700px) {

  /* Let the pages use the width. */
  .dvs-leave, .dvs-exp, .dvs-ts, .dvs-sr, .dvs-co, .dvs-ar, .dvs-sup, .dvs-nt {
    max-width: 1060px !important;
  }

  #dl-list, #dx-list, #dt-list, #sr-list,
  #cf-eligible, #cf-list, #ar-list, #su-list, #nt-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 10px !important;
    align-items: start !important;
  }

  /* Cards stop carrying their own bottom margin — the grid gap does it. */
  .dvs-leave .dl-item, .dvs-exp .dx-item, .dvs-ts .dt-item,
  .dvs-sr .sr-item, .dvs-co .cf-day, .dvs-ar .ar-item,
  .dvs-sup .su-item, .dvs-nt .nt-item {
    margin-bottom: 0 !important;
  }

  /* Headings and empty states are not records — they span the row. */
  .dvs-nt .nt-head,
  #dl-list > .dl-empty, #dx-list > .dx-empty, #dt-list > .dt-empty,
  #sr-list > .sr-empty, #cf-eligible > .cf-empty, #cf-list > .cf-empty,
  #ar-list > .ar-empty, #su-list > .su-empty, #nt-list > .nt-empty,
  .dvs-leave .dl-loading, .dvs-exp .dx-loading, .dvs-ts .dt-loading {
    grid-column: 1 / -1 !important;
  }

  /* A card is taller than a row, so the pieces inside need room. */
  .dvs-ts .dt-item, .dvs-sr .sr-item {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }
  .dvs-ts .dt-item-acts, .dvs-sr .sr-acts {
    width: 100% !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--dvs-line-soft) !important;
  }
  .dvs-ts .dt-item input[type=checkbox] { margin-top: 2px !important; }

  /* Comp off claims: the reason box sits under the row, not beside it. */
  .dvs-co .cf-day { flex-wrap: wrap !important; }

  /* Full-width green bars are a phone pattern. On a laptop the primary
     action is sized to its text and sits at the top of the page. */
  #dl-open, #dx-open, #dt-new, #sr-new {
    width: auto !important;
    min-width: 230px !important;
  }
}

@media (min-width: 1000px) {
  #dl-list, #dx-list, #dt-list, #sr-list,
  #cf-eligible, #cf-list, #ar-list, #su-list, #nt-list {
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
  }
}

/* ===========================================================================
   wide pages
   .dvs-portal is capped at 620px, which is right for a form and wrong for a
   page built around a table or a grid. Widening by name rather than loosening
   the cap, so the narrow pages keep it.
   =========================================================================== */

@media (min-width: 700px) {
  .dvs-wk  { max-width: 1140px !important; }
  .dvs-pro { max-width: 980px !important; }
  .dvs-con { max-width: 900px !important; }
}

/* Below that the row is meant to wrap — that IS the phone layout. */
@media (max-width: 699px) {
  .dvs-wk .wk-times { flex: 1 1 100% !important; }
  .dvs-wk .wk-times input { width: 100% !important; }
}