/* Shared profile photos in every role's dashboard and navigation. */
.user-profile-avatar { flex-shrink: 0; object-fit: cover; }
.dashboard-profile { display: flex; align-items: center; gap: 1rem; }
.dashboard-profile > div { min-width: 0; }
.dashboard-avatar { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: .5rem; color: #174f88; background: #fff; font-size: 1.25rem; font-weight: 750; }

/* ===== LOGIN ===== */
:root {
  --medeed-blue: #286fb7;
  --medeed-blue-dark: #174f88;
  --medeed-ink: #172433;
  --medeed-muted: #647387;
  --medeed-line: #dfe7ef;
}

html,
body {
  min-height: 100%;
}

body.login-page {
  margin: 0;
  color: var(--medeed-ink);
  background: #f5f8fb;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.login-shell {
  display: grid;
  grid-template-columns: minmax(400px, 44%) 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

.login-intro {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 5.5rem);
  color: #fff;
  background:
    radial-gradient(circle at 8% 92%, rgba(120, 190, 255, .28), transparent 28%),
    linear-gradient(145deg, #123b64 0%, #1d5e9e 52%, #286fb7 100%);
}

.login-intro::before,
.login-intro::after {
  position: absolute;
  z-index: -1;
  content: "";
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 0;
}

.login-intro::before {
  width: 28rem;
  height: 28rem;
  top: -12rem;
  left: -12rem;
}

.login-intro::after {
  width: 18rem;
  height: 18rem;
  top: -7rem;
  left: -7rem;
}

.intro-content {
  width: min(100%, 34rem);
  margin: auto 0;
}

.login-intro h1 {
  margin-bottom: 1.25rem;
  color: #fff;
  font-size: clamp(2.5rem, 4vw, 4.75rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.02;
}

.intro-copy {
  max-width: 31rem;
  margin-bottom: 2.5rem;
  color: rgba(255, 255, 255, .76);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.7;
}

.intro-footer {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: rgba(255, 255, 255, .54);
  font-size: .75rem;
}

.login-panel {
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 5rem);
  background:
    linear-gradient(rgba(40, 111, 183, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 111, 183, .025) 1px, transparent 1px),
    #f8fafc;
  background-size: 32px 32px;
}

.login-panel-inner {
  width: min(100%, 29rem);
}

.brand-header {
  margin-bottom: 2rem;
  text-align: center;
}

.brand-header img {
  width: min(250px, 72%);
  height: auto;
}

.login-card.card {
  border: 1px solid rgba(31, 52, 73, .09);
  border-radius: 0;
  box-shadow: 0 1.2rem 3.5rem rgba(29, 59, 91, .1), 0 .2rem .6rem rgba(29, 59, 91, .05);
}

.login-card .card-body {
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.login-heading {
  margin-bottom: 2rem;
}

.eyebrow {
  display: block;
  margin-bottom: .6rem;
  color: var(--medeed-blue);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.login-heading h2 {
  margin-bottom: .5rem;
  color: var(--medeed-ink);
  font-size: clamp(1.6rem, 3vw, 2rem);
  letter-spacing: -.025em;
}

.login-heading p,
.support-copy {
  color: var(--medeed-muted);
}

.login-heading p {
  margin: 0;
  font-size: .95rem;
}

.login-session-alert {
  display: grid;
  gap: .2rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(40, 111, 183, .18);
  border-left: 3px solid var(--medeed-blue);
  border-radius: 0;
  color: #315b82;
  background: rgba(40, 111, 183, .065);
}

.login-session-alert strong { font-size: .75rem; }
.login-session-alert span { font-size: .68rem; line-height: 1.55; }

body.login-page .form-label {
  margin-bottom: .5rem;
  color: #344458;
  font-weight: 600;
}

body.login-page .form-label-link {
  margin-left: auto;
  color: var(--medeed-blue);
  font-size: .8rem;
  font-weight: 500;
}

body.login-page .form-control-lg {
  min-height: 3.1rem;
  padding: .72rem .9rem;
  font-size: .9rem;
  border-color: var(--medeed-line);
  border-radius: 0;
}

body.login-page .form-control:focus {
  border-color: var(--medeed-blue);
  box-shadow: 0 0 0 .22rem rgba(40, 111, 183, .12);
}

body.login-page .input-group-flat .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.password-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  color: var(--medeed-blue);
  border-color: var(--medeed-line);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.password-toggle .icon {
  width: 1.2rem;
  height: 1.2rem;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  color: var(--medeed-blue-dark);
  background: #f1f6fb;
}

body.login-page .form-check-input:checked {
  background-color: var(--medeed-blue);
  border-color: var(--medeed-blue);
}

body.login-page .form-check-label {
  color: #58687a;
  font-size: .84rem;
}

.btn-primary.login-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: 3.15rem;
  font-size: .92rem;
  font-weight: 650;
  border-color: var(--medeed-blue);
  border-radius: 0;
  background: var(--medeed-blue);
  box-shadow: 0 .5rem 1.2rem rgba(40, 111, 183, .2);
}

.btn-primary.login-submit:hover,
.btn-primary.login-submit:focus-visible {
  border-color: var(--medeed-blue-dark);
  background: var(--medeed-blue-dark);
}

.button-arrow {
  font-size: 1.1rem;
  transition: transform .2s ease;
}

.login-submit:hover .button-arrow {
  transform: translateX(3px);
}

.support-copy {
  margin: 1.5rem 0 0;
  font-size: .8rem;
  text-align: center;
}

.support-copy a {
  color: var(--medeed-blue);
  font-weight: 600;
}

@media (max-width: 991.98px) {
  .login-shell {
    grid-template-columns: 1fr;
  }

  .login-intro {
    display: none;
  }

  .login-panel {
    min-height: 100vh;
    min-height: 100dvh;
  }
}

@media (max-width: 575.98px) {
  .login-panel {
    align-items: start;
    padding: 2rem 1rem;
    background: #f8fafc;
  }

  .brand-header {
    margin-bottom: 1.5rem;
  }

  .login-card.card {
    border-radius: 0;
    box-shadow: 0 .7rem 2rem rgba(29, 59, 91, .08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .button-arrow {
    transition: none;
  }
}

/* ===== MAIN ===== */
:root {
  --tblr-primary: #286fb7;
  --tblr-primary-rgb: 40, 111, 183;
  --tblr-link-color: #286fb7;
  --tblr-link-color-rgb: 40, 111, 183;
  --tblr-blue: #286fb7;
  --tblr-blue-rgb: 40, 111, 183;
  --medeed-primary: #286fb7;
  --medeed-primary-rgb: 40, 111, 183;
  --medeed-sidebar-width: 17.5rem;
  --medeed-header-height: 4.25rem;
  --medeed-bg: #f4f7fa;
  --medeed-surface: #fff;
  --medeed-text: #192433;
  --medeed-muted: #6c7b8d;
  --medeed-border: #e3e9ef;
  --medeed-sidebar-bg: #fff;
  --medeed-sidebar-text: #516174;
}

.bg-blue-lt,
.bg-azure-lt { color: #286fb7 !important; background: rgba(40, 111, 183, .1) !important; }
.bg-yellow-lt { color: #b37500 !important; background: rgba(245, 159, 0, .12) !important; }
.bg-green-lt { color: #248c35 !important; background: rgba(47, 179, 68, .1) !important; }

/* Tabler badges default to secondary text; solid backgrounds need contrast. */
.badge:is(.bg-primary, .bg-secondary, .bg-danger, .bg-dark, .bg-blue, .bg-indigo, .bg-purple) {
  --tblr-badge-color: #fff;
  color: #fff;
}
.badge:is(.bg-success, .bg-warning, .bg-info, .bg-green, .bg-yellow, .bg-orange, .bg-cyan, .bg-teal, .bg-lime, .bg-light) {
  --tblr-badge-color: #172433;
  color: #172433;
}

.btn:focus-visible { outline: 3px solid var(--medeed-primary); outline-offset: 3px; }
.btn svg { flex-shrink: 0; }

[data-bs-theme="dark"] {
  --medeed-bg: #0f1722;
  --medeed-surface: #182230;
  --medeed-text: #e7edf4;
  --medeed-muted: #91a0b2;
  --medeed-border: #283545;
  --medeed-sidebar-bg: #141e2b;
  --medeed-sidebar-text: #a5b1c0;
}

html,
body { min-height: 100%; }

body.app-body {
  margin: 0;
  color: var(--medeed-text);
  background: var(--medeed-bg);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-shell { min-height: 100vh; }

.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1040;
  display: block;
  width: var(--medeed-sidebar-width);
  padding: 0;
  color: var(--medeed-sidebar-text);
  border: 0;
  background: var(--medeed-sidebar-bg);
  transition: transform .25s ease;
}

/* Keep the Tabler vertical navbar width identical to the main content offset. */
.app-sidebar.navbar-vertical {
  width: var(--medeed-sidebar-width);
  max-width: var(--medeed-sidebar-width);
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--medeed-header-height);
  padding: .65rem 1.25rem;
  border-bottom: 1px solid var(--medeed-border);
}

.sidebar-brand img { width: 11.6rem; height: auto; }
.sidebar-close { display: none; }

.nav-section-label {
  color: var(--medeed-muted);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.3rem;
  scrollbar-width: thin;
}

.nav-section-label {
  display: flex;
  align-items: center;
  width: 100%;
  padding: .65rem .75rem .4rem;
  color: var(--medeed-muted);
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav-section-label::after {
  width: .45rem;
  height: .45rem;
  margin-left: auto;
  content: "";
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}
.nav-section-label[aria-expanded="false"]::after { transform: rotate(-45deg); }
.nav-section-label:hover,
.nav-section-label:focus-visible { color: var(--medeed-primary); outline: none; }
.nav-section-spaced { margin-top: .55rem; }

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 2.65rem;
  margin-bottom: .18rem;
  padding: .6rem .7rem;
  color: var(--medeed-sidebar-text);
  font-size: .82rem;
  font-weight: 500;
  border-radius: 0;
  transition: color .15s ease, background .15s ease;
}

.sidebar-nav .nav-link:hover {
  color: var(--medeed-primary);
  text-decoration: none;
  background: rgba(var(--medeed-primary-rgb), .065);
}

.sidebar-nav .nav-link.active {
  color: var(--medeed-primary);
  font-weight: 650;
  background: rgba(var(--medeed-primary-rgb), .1);
}

.nav-icon,
.header-icon,
.profile-chevron,
.dropdown-icon,
.button-icon,
.hr-icon,
.row-chevron,
.task-icon svg,
.quick-icon svg,
.stat-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-icon { width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; }
.nav-count {
  min-width: 1.35rem;
  margin-left: auto;
  padding: .15rem .35rem;
  color: var(--medeed-primary);
  font-size: .65rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  border-radius: 0;
  background: rgba(var(--medeed-primary-rgb), .1);
}
.nav-count-warning { color: #b37500; background: rgba(245, 159, 0, .13); }

.app-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-left: var(--medeed-sidebar-width);
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 1020;
  min-height: var(--medeed-header-height);
  padding: 0;
  background: color-mix(in srgb, var(--medeed-surface) 94%, transparent);
  backdrop-filter: blur(12px);
}

.app-header .container-fluid { display: flex; align-items: center; min-height: var(--medeed-header-height); padding-inline: 1.5rem; }
.sidebar-toggle { display: none; margin-right: .65rem; }
.header-icon { width: 1.25rem; height: 1.25rem; }

.header-title { display: flex; flex-direction: column; line-height: 1.2; }
.header-title span { color: var(--medeed-muted); font-size: .67rem; }
.header-title strong { color: var(--medeed-text); font-size: .92rem; }

.header-actions { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.header-clock {
  display: inline-flex;
  align-items: baseline;
  gap: .32rem;
  margin-right: .45rem;
  padding-right: .75rem;
  color: var(--medeed-muted);
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border-right: 1px solid var(--medeed-border);
}
.clock-time { color: var(--medeed-text); font-size: .76rem; font-weight: 650; }
.clock-zone { padding: .12rem .3rem; color: var(--medeed-primary); font-size: .58rem; font-weight: 700; border-radius: 0; background: rgba(var(--medeed-primary-rgb), .09); }
.header-actions .btn { color: var(--medeed-muted); border-radius: 0; transition: color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.header-actions .theme-toggle:hover,
.header-actions .theme-toggle:focus-visible,
.header-actions .notification-button:hover,
.header-actions .notification-button:focus-visible {
  color: var(--medeed-primary) !important;
  background: rgba(var(--medeed-primary-rgb), .1) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--medeed-primary-rgb), .16);
}

[data-bs-theme="dark"] .header-actions .theme-toggle:hover,
[data-bs-theme="dark"] .header-actions .theme-toggle:focus-visible,
[data-bs-theme="dark"] .header-actions .notification-button:hover,
[data-bs-theme="dark"] .header-actions .notification-button:focus-visible {
  color: #79b8f5 !important;
  background: rgba(73, 145, 216, .16) !important;
  box-shadow: inset 0 0 0 1px rgba(121, 184, 245, .2);
}
.theme-icon-dark { display: none; }
[data-bs-theme="dark"] .theme-icon-light { display: none; }
[data-bs-theme="dark"] .theme-icon-dark { display: block; }

.notification-button { position: relative; }
.notification-dot { position: absolute; top: .45rem; right: .4rem; width: .4rem; height: .4rem; border: 2px solid var(--medeed-surface); border-radius: 0; background: #d63939; box-sizing: content-box; }

.profile-button {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-left: .5rem;
  padding: .4rem .5rem;
  color: var(--medeed-text);
  border: 0;
  border-radius: 0;
  background: transparent;
}
.profile-button:hover { background: rgba(108, 123, 141, .08); }
.avatar { color: #fff; font-weight: 650; background: linear-gradient(145deg, #286fb7, #174f88); }
.profile-copy { display: flex; flex-direction: column; min-width: 8rem; text-align: left; line-height: 1.25; }
.profile-copy strong { font-size: .78rem; }
.profile-copy small { color: var(--medeed-muted); font-size: .67rem; }
.profile-chevron { width: .9rem; height: .9rem; color: var(--medeed-muted); }

.profile-menu { width: 16rem; padding: .5rem; border-color: var(--medeed-border); box-shadow: 0 .75rem 2.5rem rgba(26, 40, 56, .14); }
.profile-menu-head { display: flex; align-items: center; gap: .7rem; padding: .5rem; }
.profile-menu-head > div { min-width: 0; }
.profile-menu-head strong, .profile-menu-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu-head strong { color: var(--medeed-text); font-size: .8rem; }
.profile-menu-head small { color: var(--medeed-muted); font-size: .67rem; }
.dropdown-icon { width: 1.1rem; height: 1.1rem; margin-right: .55rem; }

.page-wrapper { flex: 1; padding: 2rem 0 2.75rem; }
.page-wrapper .container-xl, .app-footer .container-xl { max-width: 1400px; padding-inline: 1.5rem; }

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.6rem; }
.page-pretitle { margin: 0 0 .35rem; color: var(--medeed-primary); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.page-heading h1 { margin: 0 0 .35rem; color: var(--medeed-text); font-size: clamp(1.65rem, 2.5vw, 2.15rem); letter-spacing: -.03em; }
.page-description { margin: 0; color: var(--medeed-muted); font-size: .86rem; }
.page-action { display: inline-flex; align-items: center; gap: .5rem; flex: 0 0 auto; background: var(--medeed-primary); border-color: var(--medeed-primary); }
.button-icon { width: 1.1rem; height: 1.1rem; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.card { border-color: var(--medeed-border); background: var(--medeed-surface); box-shadow: 0 1px 2px rgba(18, 33, 50, .025); margin-bottom:15px }
.stat-card .card-body { display: flex; align-items: center; gap: 1rem; min-height: 7.4rem; padding: 1.2rem; }
.stat-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem; border-radius: 0; }
.stat-icon svg { width: 1.35rem; height: 1.35rem; }
.stat-main { display: flex; flex-direction: column; min-width: 0; }
.stat-main > span { overflow: hidden; color: var(--medeed-muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.stat-main strong { color: var(--medeed-text); font-size: 1.55rem; line-height: 1.25; }
.stat-main small { color: var(--medeed-muted); font-size: .68rem; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(18rem, .75fr); gap: 1rem; }
.dashboard-side { display: grid; align-content: start; gap: 1rem; }
.card-header { display: flex; align-items: center; justify-content: space-between; min-height: 4.15rem; padding: 1rem 1.2rem; border-color: var(--medeed-border); }
.card-header .card-title { margin: 0; color: var(--medeed-text); font-size: .9rem; font-weight: 650; }
.card-header p { margin: .15rem 0 0; color: var(--medeed-muted); font-size: .68rem; }
.card-link { color: var(--medeed-primary); font-size: .72rem; font-weight: 600; }

.task-item { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto 1rem; align-items: center; gap: .8rem; min-height: 4.65rem; padding: .8rem 1rem .8rem 1.2rem; color: var(--medeed-text); border-color: var(--medeed-border); background: transparent; }
.task-item:hover { color: var(--medeed-text); text-decoration: none; background: rgba(var(--medeed-primary-rgb), .035); }
.task-status { position: absolute; inset: 0 auto 0 0; width: 3px; }
.task-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; color: var(--medeed-primary); border-radius: 0; background: rgba(var(--medeed-primary-rgb), .08); }
.task-icon svg { width: 1.15rem; height: 1.15rem; }
.task-copy { min-width: 0; }
.task-copy strong, .task-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-copy strong { color: var(--medeed-text); font-size: .78rem; }
.task-copy small { margin-top: .15rem; color: var(--medeed-muted); font-size: .68rem; }
.task-item .badge { font-size: .62rem; font-weight: 600; }
.row-chevron { width: .9rem; height: .9rem; color: var(--medeed-muted); }

.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); padding: .75rem; }
.quick-grid a { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .9rem .4rem; color: var(--medeed-text); font-size: .7rem; font-weight: 600; border-radius: 0; }
.quick-grid a:hover { color: var(--medeed-primary); text-decoration: none; background: rgba(var(--medeed-primary-rgb), .055); }
.quick-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; color: var(--medeed-primary); border: 1px solid rgba(var(--medeed-primary-rgb), .13); border-radius: 0; background: rgba(var(--medeed-primary-rgb), .07); }
.quick-icon svg { width: 1.15rem; height: 1.15rem; }

.activity-card .card-body { padding: 1rem 1.2rem; }
.activity-item { position: relative; display: flex; gap: .75rem; padding: .2rem 0 1.1rem; }
.activity-item:last-child { padding-bottom: .15rem; }
.activity-item:not(:last-child)::after { position: absolute; top: .65rem; bottom: -.1rem; left: .22rem; width: 1px; content: ""; background: var(--medeed-border); }
.activity-dot { position: relative; z-index: 1; width: .48rem; height: .48rem; flex: 0 0 .48rem; margin-top: .35rem; border: 2px solid var(--medeed-surface); border-radius: 0; box-sizing: content-box; box-shadow: 0 0 0 1px var(--medeed-border); }
.activity-item strong, .activity-item small { display: block; }
.activity-item strong { color: var(--medeed-text); font-size: .73rem; }
.activity-item small { margin-top: .15rem; color: var(--medeed-muted); font-size: .65rem; }

.app-footer { padding: 1rem 0; color: var(--medeed-muted); font-size: .68rem; border-top: 1px solid var(--medeed-border); background: var(--medeed-surface); text-align: right}
.sidebar-backdrop { display: none; }

/* Open table menus are portalled to body so overflow containers cannot clip them. */
.dropdown-menu-portal {
  z-index: 2055 !important;
  max-width: calc(100vw - 1rem);
}

@media (max-width: 1199.98px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  body.sidebar-open { overflow: hidden; }
  .app-sidebar { transform: translateX(-100%); box-shadow: 1rem 0 3rem rgba(10, 22, 36, .15); }
  .app-sidebar.is-open { transform: translateX(0); }
  .sidebar-close { display: block; }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 1030; background: rgba(15, 23, 34, .42); opacity: 0; transition: opacity .25s ease; }
  body.sidebar-open .sidebar-backdrop { display: block; opacity: 1; }
  .app-main { margin-left: 0; }
  .sidebar-toggle { display: inline-flex; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .app-header .container-fluid { padding-inline: 1rem; }
  .profile-copy, .profile-chevron { display: none; }
  .profile-button { margin-left: .2rem; padding: .3rem; }
  .clock-date, .clock-separator { display: none; }
  .page-wrapper { padding-top: 1.35rem; }
  .page-wrapper .container-xl, .app-footer .container-xl { padding-inline: 1rem; }
  .page-heading { align-items: flex-start; }
  .page-action { padding-inline: .65rem; font-size: 0; }
  .page-action .button-icon { margin: 0; }
  .stats-grid { grid-template-columns: 1fr; gap: .75rem; }
  .stat-card .card-body { min-height: 6.4rem; }
  .dashboard-side { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
  .header-title span { display: none; }
  .notification-button { display: none; }
  .header-clock { margin-right: .1rem; padding-right: .45rem; }
  .clock-zone { display: none; }
  .page-description { max-width: 17rem; }
  .tasks-card .card-header p { display: none; }
  .task-item { grid-template-columns: 2.25rem minmax(0, 1fr) 1rem; gap: .65rem; }
  .task-item .badge { display: none; }
  .app-footer .container-xl { flex-direction: column; gap: .25rem; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar, .sidebar-backdrop, .sidebar-nav .nav-link { transition: none; }
}

/* ===== HR-PAGES ===== */
.hr-page { display: grid; gap: 1rem; }
.hr-page .page-heading { margin-bottom: .35rem; }
.hr-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .55rem; }
.hr-actions .btn { display: inline-flex; align-items: center; gap: .45rem; }
.hr-page .btn:not(.btn-icon) { display: inline-flex; align-items: center; justify-content: center; gap: .42rem; }
.hr-icon { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hr-stats { margin-bottom: 0; }
.hr-stats .stat-card .card-body { min-height: 6.4rem; }
.hr-filter .card-body { padding: 1rem 1.2rem; }
.hr-filter-grid { display: grid; grid-template-columns: minmax(13rem, 1.5fr) repeat(3, minmax(9rem, 1fr)); gap: .75rem; align-items: end; }
.hr-filter-grid.wide { grid-template-columns: minmax(12rem, 1.4fr) repeat(4, minmax(8rem, 1fr)); }
.hr-page .form-label { margin-bottom: .35rem; color: var(--medeed-muted); font-size: .69rem; font-weight: 650; }
.hr-page .badge { min-width: 7.25rem; border-radius: 0; }
.hr-page .form-control, .hr-page .form-select { min-height: 2.45rem; font-size: .78rem; border-color: var(--medeed-border); background-color: var(--medeed-surface); }
.hr-search { position: relative; }
.hr-search .form-control { padding-left: 2.25rem; }
.hr-search .hr-icon { position: absolute; left: .72rem; bottom: .72rem; color: var(--medeed-muted); pointer-events: none; }
.hr-reset { white-space: nowrap; }
.hr-card-title { display: flex; align-items: center; gap: .75rem; }
.hr-card-title .section-icon { display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--medeed-primary); border-radius: 0; background: rgba(var(--medeed-primary-rgb), .09); }
.hr-card-title .section-icon .hr-icon { width: 1rem; height: 1rem; }
.hr-card-title strong { display: block; font-size: .88rem; }
.hr-card-title small { display: block; margin-top: .12rem; color: var(--medeed-muted); font-size: .65rem; }
.hr-table-wrap { overflow-x: auto; }
.hr-table { min-width: 1040px; margin: 0; font-size: .75rem; }
.hr-table.wide { min-width: 1320px; }
.hr-table thead th { padding: .75rem 1rem; color: var(--medeed-muted); font-size: .61rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; white-space: nowrap; border-color: var(--medeed-border); background: color-mix(in srgb, var(--medeed-bg) 62%, transparent); }
.hr-table tbody td { padding: .78rem 1rem; vertical-align: middle; white-space: nowrap; border-color: var(--medeed-border); }
.hr-table tbody tr:hover { background: rgba(var(--medeed-primary-rgb), .025); }
.hr-person { display: flex; align-items: center; gap: .65rem; min-width: 11.5rem; }
.hr-person .avatar { width: 2.1rem; height: 2.1rem; font-size: .65rem; flex-shrink: 0; object-fit: cover; }
.hr-person strong, .hr-person small { display: block; line-height: 1.3; }
.hr-person strong { color: var(--medeed-text); font-size: .75rem; }
.hr-person small { color: var(--medeed-muted); font-size: .64rem; }
.hr-status { display: inline-flex; align-items: center; justify-content: flex-start; gap: .38rem; width: 7.25rem; min-height: 1.5rem; padding: 0 .55rem; font-size: .62rem; font-weight: 650; border-radius: 0; }
.hr-status::before { width: .38rem; height: .38rem; content: ""; border-radius: 0; background: currentColor; }
.hr-status.green { color: #248c35; background: rgba(47,179,68,.1); }
.hr-status.yellow { color: #a66c00; background: rgba(245,159,0,.12); }
.hr-status.red { color: #c03333; background: rgba(214,57,57,.1); }
.hr-status.blue { color: var(--medeed-primary); background: rgba(var(--medeed-primary-rgb),.1); }
.hr-status.gray { color: var(--medeed-muted); background: rgba(108,123,141,.1); }
.hr-table .dropdown .btn { width: 2rem; height: 2rem; padding: 0; }
.hr-table-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.2rem; border-top: 1px solid var(--medeed-border); }
.hr-table-footer small { color: var(--medeed-muted); font-size: .68rem; }

/* User administration */
.user-filter-card { margin-bottom: 1rem; }
.user-filter-grid { display: grid; grid-template-columns: minmax(16rem, 1.65fr) repeat(4, minmax(9rem, 1fr)) auto; gap: .75rem; align-items: end; }
.user-filter-submit .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-width: 7.5rem; }
.user-table { min-width: 1180px; }
.user-table-header { align-items: center; }
.user-result-count { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 .65rem; color: var(--medeed-primary); font-size: .78rem; font-weight: 750; background: rgba(var(--medeed-primary-rgb), .1); border: 1px solid rgba(var(--medeed-primary-rgb), .14); }
.user-row-inactive > td { background: rgba(108, 123, 141, .018); }
.user-person { min-width: 15rem; }
.user-avatar { flex: 0 0 auto; object-fit: cover; }
.user-person-copy { min-width: 0; }
.user-person-copy a { display: block; max-width: 15rem; margin-top: .12rem; overflow: hidden; color: var(--medeed-muted); font-size: .65rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.user-person-copy a:hover { color: var(--medeed-primary); }
.user-self-badge { padding: .18rem .4rem; font-size: .55rem; font-weight: 700; }
.user-personnel-number, .user-date { display: block; color: var(--medeed-text); font-size: .7rem; font-weight: 650; }
.user-personnel-number { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: .015em; }
.user-cell-note { display: block; margin-top: .18rem; color: var(--medeed-muted); font-size: .61rem; line-height: 1.2; }
.user-role-list { display: flex; align-items: center; gap: .3rem; max-width: 14rem; }
.user-role-badge, .user-role-more, .user-no-role, .user-never-logged-in { display: inline-flex; align-items: center; min-height: 1.45rem; padding: 0 .48rem; font-size: .61rem; font-weight: 650; white-space: nowrap; }
.user-role-badge { color: #245f9e; background: rgba(var(--medeed-primary-rgb), .085); border: 1px solid rgba(var(--medeed-primary-rgb), .12); }
.user-role-badge.is-inactive { color: var(--medeed-muted); background: rgba(108, 123, 141, .08); border-color: rgba(108, 123, 141, .12); text-decoration: line-through; }
.user-role-more { color: var(--medeed-muted); background: var(--medeed-bg); border: 1px solid var(--medeed-border); }
.user-no-role, .user-never-logged-in { color: var(--medeed-muted); background: rgba(108, 123, 141, .07); }
.user-account-status { display: flex; flex-direction: column; align-items: flex-start; gap: .28rem; min-width: 10.5rem; }
.user-account-status .hr-status { width: auto; min-width: 7.25rem; padding-right: .7rem; white-space: nowrap; }
.user-status-note { display: block; font-size: .59rem; font-weight: 600; line-height: 1.25; }
.user-status-note.is-danger { color: #c03333; }
.user-status-note.is-warning { color: #9b6908; }
.user-status-note.is-ready { color: var(--medeed-muted); }
.user-actions-dropdown .dropdown-menu { width: 17rem; padding: .45rem; }
.user-action-heading { padding: .45rem .55rem .6rem; overflow: hidden; }
.user-action-heading strong, .user-action-heading small { display: block; overflow: hidden; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.user-action-heading strong { color: var(--medeed-text); font-size: .72rem; }
.user-action-heading small { margin-top: .15rem; color: var(--medeed-muted); font-size: .61rem; }
.user-action-item { display: flex; align-items: center; gap: .55rem; min-height: 2.15rem; padding: .48rem .55rem; font-size: .7rem; }
.user-action-item .hr-icon { width: 1rem; height: 1rem; flex: 0 0 auto; }
.user-action-item.disabled { color: var(--medeed-muted); background: transparent; opacity: .58; }
.user-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; min-height: 15rem; padding: 2rem; color: var(--medeed-muted); text-align: center; white-space: normal; }
.user-empty-state strong { color: var(--medeed-text); font-size: .84rem; }
.user-empty-state > span:not(.user-empty-icon) { max-width: 28rem; font-size: .69rem; }
.user-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin-bottom: .35rem; color: var(--medeed-primary); background: rgba(var(--medeed-primary-rgb), .09); }
.user-empty-icon .hr-icon { width: 1.45rem; height: 1.45rem; }
.user-table-footer .pagination { flex-wrap: wrap; }

@media (max-width: 1399.98px) {
  .user-filter-grid { grid-template-columns: minmax(16rem, 1.5fr) repeat(2, minmax(10rem, 1fr)); }
  .user-filter-submit .btn { width: auto !important; }
}

@media (max-width: 767.98px) {
  .user-filter-grid { grid-template-columns: 1fr; }
  .user-filter-submit .btn { width: 100% !important; }
  .user-table-footer { align-items: flex-start; }
}
.hr-form { display: grid; gap: 1rem; }
.hr-form .card-body { padding: 1.2rem; }
.hr-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.hr-form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hr-form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hr-span-2 { grid-column: span 2; }
.hr-span-full { grid-column: 1 / -1; }
.hr-switches { display: flex; flex-wrap: wrap; gap: 1.5rem; padding-top: .25rem; }
.hr-form-check { display: flex; align-items: center; gap: .55rem; }
.hr-form-check label { margin: 0; color: var(--medeed-text); font-size: .76rem; }
.hr-form-footer { position: sticky; bottom: 0; z-index: 10; display: flex; justify-content: flex-end; gap: .6rem; padding: .85rem 1.2rem; border: 1px solid var(--medeed-border); border-radius: 0; background: color-mix(in srgb, var(--medeed-surface) 94%, transparent); backdrop-filter: blur(10px); box-shadow: 0 -.4rem 1.5rem rgba(25,36,51,.06); }
.hr-readonly { min-height: 2.45rem; padding: .55rem .7rem; color: var(--medeed-text); font-size: .78rem; font-weight: 600; border: 1px dashed var(--medeed-border); border-radius: 0; background: color-mix(in srgb, var(--medeed-bg) 65%, transparent); }
.profile-hero .card-body { display: flex; align-items: center; gap: 1.2rem; padding: 1.25rem; }
.profile-hero .avatar { width: 4.2rem; height: 4.2rem; flex: 0 0 4.2rem; font-size: 1.15rem; }
.profile-copy-main { min-width: 0; flex: 1; }
.profile-copy-main h1 { margin: 0 0 .25rem; font-size: 1.35rem; }
.profile-meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; color: var(--medeed-muted); font-size: .72rem; }
.profile-statuses { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; }
.hr-tabs { overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
.hr-tabs .nav { min-width: max-content; padding: 0 .6rem; }
.hr-tabs .nav-link { padding: .85rem .8rem; color: var(--medeed-muted); font-size: .71rem; font-weight: 600; border: 0; border-bottom: 2px solid transparent; background: transparent; }
.hr-tabs .nav-link.active { color: var(--medeed-primary); border-color: var(--medeed-primary); }
.hr-tab-panels > section { display: none; }
.hr-tab-panels > section.active { display: block; }
.hr-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.hr-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; padding: 1.2rem; }
.hr-kv div { min-width: 0; }
.hr-kv dt { margin-bottom: .18rem; color: var(--medeed-muted); font-size: .64rem; font-weight: 600; }
.hr-kv dd { margin: 0; color: var(--medeed-text); font-size: .76rem; font-weight: 600; overflow-wrap: anywhere; }
.hr-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.hr-summary { padding: 1rem 1.1rem; }
.hr-summary span { display: block; color: var(--medeed-muted); font-size: .66rem; }
.hr-summary strong { display: block; margin-top: .3rem; color: var(--medeed-text); font-size: 1rem; }
.hr-timeline { padding: 1.2rem; }
.hr-timeline-item { position: relative; display: grid; grid-template-columns: .65rem 1fr auto; gap: .75rem; padding-bottom: 1.25rem; }
.hr-timeline-item:last-child { padding-bottom: 0; }
.hr-timeline-item:not(:last-child)::after { position: absolute; top: .7rem; bottom: 0; left: .27rem; width: 1px; content: ""; background: var(--medeed-border); }
.hr-timeline-dot { z-index: 1; width: .55rem; height: .55rem; margin-top: .28rem; border: 2px solid var(--medeed-surface); border-radius: 0; background: var(--medeed-primary); box-shadow: 0 0 0 1px var(--medeed-primary); }
.hr-timeline-item strong, .hr-timeline-item small { display: block; }
.hr-timeline-item strong { font-size: .75rem; }
.hr-timeline-item small, .hr-timeline-item time { color: var(--medeed-muted); font-size: .65rem; }
.hr-month-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.hr-month-bar .form-group { width: 10rem; }
.hr-pay-table input { min-width: 7rem; }
.hr-total { display: flex; justify-content: flex-end; gap: 2rem; padding: 1rem 1.2rem; font-size: .8rem; border-top: 1px solid var(--medeed-border); }
.hr-total strong { font-size: 1rem; }
.document-tile { display: flex; align-items: center; gap: 1rem; padding: 1.2rem; }
.document-tile .section-icon { display: grid; place-items: center; width: 3rem; height: 3rem; color: #d63939; border-radius: 0; background: rgba(214,57,57,.09); }
.document-tile-main { min-width: 0; flex: 1; }
.document-tile-main strong, .document-tile-main small { display: block; }
.document-tile-main strong { font-size: .8rem; }
.document-tile-main small { margin-top: .2rem; color: var(--medeed-muted); font-size: .66rem; }
.document-tile .hr-actions { flex: 0 0 auto; }
@media (max-width: 1199.98px) {
  .hr-filter-grid, .hr-filter-grid.wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hr-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hr-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .hr-page .page-heading { flex-direction: column; align-items: stretch; }
  .hr-page .page-action { font-size: .75rem; }
  .hr-filter-grid, .hr-filter-grid.wide, .hr-form-grid, .hr-form-grid.cols-3, .hr-form-grid.cols-2, .hr-detail-grid { grid-template-columns: 1fr; }
  .hr-span-2 { grid-column: auto; }
  .hr-actions { justify-content: flex-start; }
  .profile-hero .card-body { align-items: flex-start; flex-wrap: wrap; }
  .profile-hero .profile-actions { width: 100%; }
  .hr-kv { grid-template-columns: 1fr; }
  .document-tile { align-items: flex-start; flex-wrap: wrap; }
  .document-tile .hr-actions { width: 100%; }
}

/* ===== LEAVE-PAGES ===== */
.leave-page { display: grid; gap: 1rem; }
.leave-page .page-heading { margin-bottom: .35rem; }
.leave-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .55rem; }
.leave-actions .btn { display: inline-flex; align-items: center; gap: .45rem; }
.leave-icon { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.leave-stats { margin-bottom: 0; }
.leave-stats .stat-card .card-body { min-height: 6.4rem; }
.leave-stats .stat-card.highlight { border-color: rgba(245,159,0,.38); }
.leave-stats .stat-card.highlight .stat-main strong { color: #a66c00; }
.leave-filter .card-body { padding: 1rem 1.2rem; }
.leave-filter-grid { display: grid; grid-template-columns: minmax(14rem,1.5fr) repeat(3,minmax(9rem,1fr)); gap: .75rem; align-items: end; }
.leave-page .form-label { margin-bottom: .35rem; color: var(--medeed-muted); font-size: .69rem; font-weight: 650; }
.leave-page .form-control,
.leave-page .form-select { min-height: 2.45rem; border-color: var(--medeed-border); background-color: var(--medeed-surface); font-size: .78rem; }
.leave-page textarea.form-control { min-height: 6.5rem; resize: vertical; }
.leave-page .hr-readonly { min-height: 2.45rem; padding: .55rem .7rem; color: var(--medeed-text); border: 1px dashed var(--medeed-border); border-radius: 0; background: color-mix(in srgb,var(--medeed-bg) 65%,transparent); font-size: .78rem; font-weight: 600; }
.leave-search { position: relative; }
.leave-search .form-control { padding-left: 2.25rem; }
.leave-search .leave-icon { position: absolute; left: .72rem; bottom: .72rem; color: var(--medeed-muted); pointer-events: none; }
.leave-table-wrap { overflow-x: auto; }
.leave-table { min-width: 1080px; margin: 0; font-size: .75rem; }
.leave-table thead th { padding: .75rem 1rem; color: var(--medeed-muted); border-color: var(--medeed-border); background: color-mix(in srgb,var(--medeed-bg) 62%,transparent); font-size: .61rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; white-space: nowrap; }
.leave-table tbody td { padding: .78rem 1rem; vertical-align: middle; border-color: var(--medeed-border); white-space: nowrap; }
.leave-table tbody tr { cursor: pointer; }
.leave-table tbody tr:hover { background: rgba(var(--medeed-primary-rgb),.025); }
.leave-person { display: flex; align-items: center; gap: .65rem; min-width: 12rem; }
.leave-person .avatar { width: 2.1rem; height: 2.1rem; font-size: .65rem; }
.leave-person strong,
.leave-person small { display: block; line-height: 1.3; }
.leave-person strong { color: var(--medeed-text); font-size: .75rem; }
.leave-person small { color: var(--medeed-muted); font-size: .64rem; }
.leave-type { display: flex; align-items: center; gap: .5rem; }
.leave-type-icon { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; color: var(--medeed-primary); border-radius: 0; background: rgba(var(--medeed-primary-rgb),.08); }
.leave-status { display: inline-flex; align-items: center; gap: .38rem; min-width: 7.5rem; min-height: 1.5rem; padding: 0 .55rem; font-size: .62rem; font-weight: 650; }
.leave-status::before { width: .38rem; height: .38rem; content: ""; border-radius: 0; background: currentColor; }
.leave-status.green { color: #248c35; background: rgba(47,179,68,.1); }
.leave-status.yellow { color: #a66c00; background: rgba(245,159,0,.12); }
.leave-status.red { color: #c03333; background: rgba(214,57,57,.1); }
.leave-status.gray { color: var(--medeed-muted); background: rgba(108,123,141,.1); }
.leave-table-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.2rem; border-top: 1px solid var(--medeed-border); }
.leave-table-footer small { color: var(--medeed-muted); font-size: .68rem; }
.leave-empty { display: none; padding: 2rem; color: var(--medeed-muted); text-align: center; font-size: .75rem; }

.leave-form-layout { display: grid; grid-template-columns: minmax(0,1fr) 19rem; gap: 1rem; align-items: start; }
.leave-form { display: grid; gap: 1rem; }
.leave-form .card-body { padding: 1.2rem; }
.leave-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.leave-span-full { grid-column: 1/-1; }
.leave-card-title { display: flex; align-items: center; gap: .75rem; }
.leave-card-title .section-icon { display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--medeed-primary); border-radius: 0; background: rgba(var(--medeed-primary-rgb),.09); }
.leave-card-title strong { display: block; font-size: .88rem; }
.leave-card-title small { display: block; margin-top: .12rem; color: var(--medeed-muted); font-size: .65rem; }
.leave-balance-card { position: sticky; top: 5.7rem; }
.leave-balance-card .card-body { display: grid; gap: 1rem; }
.leave-balance-ring { display: grid; place-items: center; width: 8rem; height: 8rem; margin: .25rem auto; border-radius: 0; background: conic-gradient(var(--medeed-primary) 0 68%,rgba(var(--medeed-primary-rgb),.12) 68%); }
.leave-balance-ring::before { grid-area: 1/1; width: 6.4rem; height: 6.4rem; content: ""; border-radius: 0; background: var(--medeed-surface); }
.leave-balance-ring div { z-index: 1; grid-area: 1/1; text-align: center; }
.leave-balance-ring strong { display: block; font-size: 1.65rem; line-height: 1; }
.leave-balance-ring span { display: block; margin-top: .3rem; color: var(--medeed-muted); font-size: .66rem; }
.leave-balance-list { display: grid; gap: .7rem; margin: 0; }
.leave-balance-list div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .65rem; border-bottom: 1px solid var(--medeed-border); }
.leave-balance-list div:last-child { padding: 0; border: 0; }
.leave-balance-list dt { color: var(--medeed-muted); font-size: .69rem; font-weight: 500; }
.leave-balance-list dd { margin: 0; font-size: .73rem; font-weight: 700; }
.leave-hint { display: flex; gap: .65rem; padding: .8rem; color: var(--medeed-muted); border-radius: 0; background: rgba(var(--medeed-primary-rgb),.055); font-size: .68rem; line-height: 1.5; }
.leave-hint .leave-icon { flex: 0 0 auto; color: var(--medeed-primary); }
.leave-form-footer { display: flex; justify-content: flex-end; gap: .6rem; padding: .85rem 1.2rem; border: 1px solid var(--medeed-border); border-radius: 0; background: var(--medeed-surface); box-shadow: 0 -.4rem 1.5rem rgba(25,36,51,.05); }
.leave-date-summary { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.leave-date-summary span { padding: .35rem .55rem; color: var(--medeed-muted); border-radius: 0; background: color-mix(in srgb,var(--medeed-bg) 72%,transparent); font-size: .66rem; }
.leave-date-summary strong { color: var(--medeed-text); }

.leave-detail-layout { display: grid; grid-template-columns: minmax(0,1fr) 21rem; gap: 1rem; align-items: start; }
.leave-detail-main { display: grid; gap: 1rem; }
.leave-request-hero .card-body { display: flex; align-items: center; gap: 1.1rem; padding: 1.2rem; }
.leave-request-hero .avatar { width: 3.5rem; height: 3.5rem; flex: 0 0 auto; font-size: .9rem; }
.leave-request-person { min-width: 0; flex: 1; }
.leave-request-person h2 { margin: 0 0 .22rem; font-size: 1rem; }
.leave-request-person p { margin: 0; color: var(--medeed-muted); font-size: .69rem; }
.leave-request-period { min-width: 14rem; padding-left: 1rem; border-left: 1px solid var(--medeed-border); }
.leave-request-period span,
.leave-request-period strong { display: block; }
.leave-request-period span { color: var(--medeed-muted); font-size: .64rem; }
.leave-request-period strong { margin: .18rem 0; font-size: .84rem; }
.leave-request-period small { color: var(--medeed-muted); font-size: .65rem; }
.leave-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; }
.leave-summary { padding: 1rem 1.1rem; }
.leave-summary span { display: block; color: var(--medeed-muted); font-size: .66rem; }
.leave-summary strong { display: block; margin-top: .3rem; color: var(--medeed-text); font-size: .92rem; }
.leave-kv { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem 1.5rem; padding: 1.2rem; }
.leave-kv dt { margin-bottom: .18rem; color: var(--medeed-muted); font-size: .64rem; font-weight: 600; }
.leave-kv dd { margin: 0; color: var(--medeed-text); font-size: .76rem; font-weight: 600; overflow-wrap: anywhere; }
.leave-note { margin: 0; padding: 1.2rem; color: var(--medeed-text); font-size: .75rem; line-height: 1.65; }
.leave-approval-card { position: sticky; top: 5.7rem; border-top: 3px solid #f59f00; }
.leave-approval-card .card-body { display: grid; gap: .9rem; }
.leave-approval-card .form-label { display: flex; justify-content: space-between; }
.leave-approval-card .form-label span { font-weight: 500; }
.leave-decision-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.leave-decision-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.leave-decision-message { display: none; padding: .75rem; border-radius: 0; font-size: .7rem; line-height: 1.45; }
.leave-decision-message.show { display: block; }
.leave-decision-message.approved { color: #1f7a2e; background: rgba(47,179,68,.1); }
.leave-decision-message.rejected { color: #ad2f2f; background: rgba(214,57,57,.1); }
.leave-timeline { padding: 1.2rem; }
.leave-timeline-item { position: relative; display: grid; grid-template-columns: .65rem 1fr auto; gap: .75rem; padding-bottom: 1.2rem; }
.leave-timeline-item:last-child { padding-bottom: 0; }
.leave-timeline-item:not(:last-child)::after { position: absolute; top: .7rem; bottom: 0; left: .27rem; width: 1px; content: ""; background: var(--medeed-border); }
.leave-timeline-dot { z-index: 1; width: .55rem; height: .55rem; margin-top: .28rem; border: 2px solid var(--medeed-surface); border-radius: 0; background: var(--medeed-primary); box-shadow: 0 0 0 1px var(--medeed-primary); }
.leave-timeline-item strong,
.leave-timeline-item small { display: block; }
.leave-timeline-item strong { font-size: .75rem; }
.leave-timeline-item small,
.leave-timeline-item time { color: var(--medeed-muted); font-size: .65rem; }

.leave-toast { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 1100; display: none; align-items: center; gap: .6rem; max-width: 23rem; padding: .85rem 1rem; color: #fff; border-radius: 0; background: #1f2937; box-shadow: 0 .8rem 2rem rgba(0,0,0,.2); font-size: .74rem; }
.leave-toast.show { display: flex; animation: leave-toast-in .18s ease-out; }
@keyframes leave-toast-in { from { opacity: 0; transform: translateY(.5rem); } }

@media (max-width:1199.98px) {
  .leave-form-layout,
  .leave-detail-layout { grid-template-columns: 1fr; }
  .leave-balance-card,
  .leave-approval-card { position: static; }
  .leave-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:767.98px) {
  .leave-page .page-heading { flex-direction: column; align-items: stretch; }
  .leave-actions { justify-content: flex-start; }
  .leave-filter-grid,
  .leave-form-grid,
  .leave-kv { grid-template-columns: 1fr; }
  .leave-span-full { grid-column: auto; }
  .leave-request-hero .card-body { align-items: flex-start; flex-wrap: wrap; }
  .leave-request-period { width: 100%; padding: .8rem 0 0; border-top: 1px solid var(--medeed-border); border-left: 0; }
  .leave-summary-grid { grid-template-columns: 1fr 1fr; }
  .leave-decision-actions { grid-template-columns: 1fr; }
}

/* ===== BILLING-PAGES ===== */
.billing-page{display:grid;gap:1rem}.billing-page .page-heading{margin-bottom:.35rem}.billing-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.55rem}.billing-actions .btn{display:inline-flex;align-items:center;gap:.4rem}.billing-icon{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.billing-page .form-label{margin-bottom:.35rem;color:var(--medeed-muted);font-size:.69rem;font-weight:650}.billing-page .form-control,.billing-page .form-select{min-height:2.45rem;border-color:var(--medeed-border);background-color:var(--medeed-surface);font-size:.78rem}.billing-page textarea.form-control{min-height:5.5rem;resize:vertical}.billing-stats{margin-bottom:0}.billing-stats .stat-card .card-body{min-height:6.4rem}.billing-filter .card-body{padding:1rem 1.2rem}.billing-filter-grid{display:grid;grid-template-columns:minmax(14rem,1.5fr) repeat(3,minmax(9rem,1fr));gap:.75rem;align-items:end}.billing-search{position:relative}.billing-search .form-control{padding-left:2.2rem}.billing-search .billing-icon{position:absolute;left:.7rem;bottom:.72rem;color:var(--medeed-muted)}.billing-table-wrap{overflow-x:auto}.billing-table{min-width:1080px;margin:0;font-size:.75rem}.billing-table.wide{min-width:1280px}.billing-table thead th{padding:.75rem 1rem;color:var(--medeed-muted);border-color:var(--medeed-border);background:color-mix(in srgb,var(--medeed-bg) 62%,transparent);font-size:.61rem;font-weight:700;letter-spacing:.045em;text-transform:uppercase;white-space:nowrap}.billing-table tbody td{padding:.78rem 1rem;vertical-align:middle;border-color:var(--medeed-border);white-space:nowrap}.billing-table tbody tr:hover{background:rgba(var(--medeed-primary-rgb),.025)}.billing-entity{display:flex;align-items:center;gap:.65rem;min-width:13rem}.billing-entity .avatar{width:2.1rem;height:2.1rem;font-size:.62rem}.billing-entity strong,.billing-entity small{display:block;line-height:1.35}.billing-entity strong{color:var(--medeed-text);font-size:.75rem}.billing-entity small{color:var(--medeed-muted);font-size:.64rem}.billing-status{display:inline-flex;align-items:center;gap:.38rem;min-width:7.4rem;min-height:1.5rem;padding:0 .55rem;font-size:.62rem;font-weight:650}.billing-status::before{width:.38rem;height:.38rem;content:"";border-radius: 0;background:currentColor}.billing-status.green{color:#248c35;background:rgba(47,179,68,.1)}.billing-status.yellow{color:#a66c00;background:rgba(245,159,0,.12)}.billing-status.red{color:#c03333;background:rgba(214,57,57,.1)}.billing-status.blue{color:var(--medeed-primary);background:rgba(var(--medeed-primary-rgb),.1)}.billing-status.gray{color:var(--medeed-muted);background:rgba(108,123,141,.1)}.billing-table-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1.2rem;border-top:1px solid var(--medeed-border)}.billing-table-footer small{color:var(--medeed-muted);font-size:.68rem}.billing-form{display:grid;gap:1rem}.billing-form .card-body{padding:1.2rem}.billing-form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.billing-form-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.billing-form-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.billing-span-2{grid-column:span 2}.billing-span-full{grid-column:1/-1}.billing-card-title{display:flex;align-items:center;gap:.75rem}.billing-card-title .section-icon{display:grid;place-items:center;width:2rem;height:2rem;color:var(--medeed-primary);border-radius: 0;background:rgba(var(--medeed-primary-rgb),.09)}.billing-card-title strong{display:block;font-size:.88rem}.billing-card-title small{display:block;margin-top:.12rem;color:var(--medeed-muted);font-size:.65rem}.billing-hint{display:flex;gap:.65rem;padding:.8rem;color:var(--medeed-muted);border-radius: 0;background:rgba(var(--medeed-primary-rgb),.055);font-size:.68rem;line-height:1.5}.billing-hint.warning{color:#8b5b00;background:rgba(245,159,0,.1)}.billing-readonly{min-height:2.45rem;padding:.55rem .7rem;color:var(--medeed-text);border:1px dashed var(--medeed-border);border-radius: 0;background:color-mix(in srgb,var(--medeed-bg) 65%,transparent);font-size:.78rem;font-weight:600}.billing-form-footer{display:flex;justify-content:flex-end;gap:.6rem;padding:.85rem 1.2rem;border:1px solid var(--medeed-border);border-radius: 0;background:var(--medeed-surface);box-shadow:0 -.4rem 1.5rem rgba(25,36,51,.05)}.billing-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:1rem;align-items:start}.billing-side-card{position:sticky;top:5.7rem}.billing-side-card .card-body{display:grid;gap:.8rem}.billing-summary-list{display:grid;gap:.7rem;margin:0}.billing-summary-list div{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding-bottom:.65rem;border-bottom:1px solid var(--medeed-border)}.billing-summary-list div:last-child{padding:0;border:0}.billing-summary-list dt{color:var(--medeed-muted);font-size:.67rem;font-weight:500}.billing-summary-list dd{margin:0;text-align:right;font-size:.72rem;font-weight:700}.billing-total{font-size:1rem!important;color:var(--medeed-primary)}
.receipt-sheet{max-width:54rem;margin:auto;padding:2rem;border-top:5px solid var(--medeed-primary);background:var(--medeed-surface)}.receipt-head{display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;padding-bottom:1.2rem;border-bottom:1px solid var(--medeed-border)}.receipt-head img{width:11rem;height:auto}.receipt-title{text-align:right}.receipt-title h2{margin:0;color:var(--medeed-primary);font-size:1.45rem}.receipt-title p{margin:.25rem 0 0;color:var(--medeed-muted);font-size:.7rem}.receipt-success{display:flex;align-items:center;gap:.75rem;margin:1.2rem 0;padding:1rem;color:#247c36;border:1px solid rgba(47,179,68,.2);background:rgba(47,179,68,.08)}.receipt-kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.5rem}.receipt-kv div{padding-bottom:.75rem;border-bottom:1px solid var(--medeed-border)}.receipt-kv span,.receipt-kv strong{display:block}.receipt-kv span{color:var(--medeed-muted);font-size:.65rem}.receipt-kv strong{margin-top:.2rem;font-size:.8rem}.receipt-amount{margin:1.2rem 0;padding:1.2rem;color:#fff;background:var(--medeed-primary);text-align:center}.receipt-amount span,.receipt-amount strong{display:block}.receipt-amount span{font-size:.68rem}.receipt-amount strong{margin-top:.25rem;font-size:1.8rem}.receipt-footer{display:flex;justify-content:space-between;gap:2rem;margin-top:1.5rem;padding-top:1rem;color:var(--medeed-muted);border-top:1px solid var(--medeed-border);font-size:.65rem;line-height:1.5}@media(max-width:1399.98px){.billing-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:1199.98px){.billing-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.billing-detail-grid{grid-template-columns:1fr}.billing-side-card{position:static}}@media(max-width:767.98px){.billing-page .page-heading{flex-direction:column;align-items:stretch}.billing-actions{justify-content:flex-start}.billing-filter-grid,.billing-form-grid,.billing-form-grid.cols-3,.billing-form-grid.cols-2,.receipt-kv{grid-template-columns:1fr}.billing-span-2{grid-column:auto}.receipt-head,.receipt-footer{flex-direction:column}.receipt-title{text-align:left}}

.billing-page .btn:not(.btn-icon),.leave-page .btn:not(.btn-icon){display:inline-flex;align-items:center;justify-content:center;gap:.42rem}.billing-page .button-icon,.leave-page .button-icon{width:1.05rem;height:1.05rem;flex:0 0 1.05rem}

/* ===== HTML SECTION REFERENCE ===== */
.pattern-page { max-width: 1200px; margin: auto; padding: 2rem 1.5rem 4rem; }
.pattern-block { margin-top: 2rem; }
.pattern-label { margin-bottom: .65rem; color: var(--medeed-primary); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.leave-request-status { margin-top: .55rem; }

/* ===== SQUARE COMPONENTS ===== */
.card,
.btn,
button,
input:not([type="radio"]),
select,
textarea,
.form-control,
.form-select,
.form-check-input:not([type="radio"]),
.input-group-text,
.dropdown-menu,
.alert,
.badge,
.page-link,
.modal-content,
.offcanvas,
.toast {
  border-radius: 0 !important;
}

/* Semantic and decorative circles must retain their intended geometry. */
.login-intro::before,
.login-intro::after,
.leave-balance-ring,
.leave-balance-ring::before,
.notification-dot,
.activity-dot,
.hr-status::before,
.leave-status::before,
.billing-status::before,
.hr-timeline-dot,
.leave-timeline-dot,
input[type="radio"],
.rounded-circle {
  border-radius: 50% !important;
}

/* ===== PERSIAN TOOLTIPS ===== */
.fa-tooltip {
  position: fixed;
  z-index: 3000;
  display: none;
  width: max-content;
  max-width: min(20rem, calc(100vw - 1rem));
  padding: .55rem .75rem;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
  background: #172433;
  box-shadow: 0 .65rem 1.8rem rgba(0, 0, 0, .24);
  direction: rtl;
  font-family: Tahoma, "Segoe UI", sans-serif;
  font-size: .75rem;
  line-height: 1.65;
  text-align: right;
  white-space: normal;
  unicode-bidi: plaintext;
  pointer-events: none;
}
.fa-tooltip.is-visible {
  display: block;
  animation: fa-tooltip-in .12s ease-out;
}
@keyframes fa-tooltip-in {
  from { opacity: 0; transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .fa-tooltip { animation: none !important; }
}

/* ===== PUBLIC INVOICE PORTAL ===== */
.invoice-portal-body{margin:0;color:#172433;background:#f3f7fb;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.invoice-portal-shell{display:flex;min-height:100vh;min-height:100dvh;flex-direction:column;background:radial-gradient(circle at 92% 4%,rgba(40,111,183,.12),transparent 26rem),linear-gradient(rgba(40,111,183,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(40,111,183,.025) 1px,transparent 1px),#f5f8fb;background-size:auto,32px 32px,32px 32px}.invoice-portal-container{width:min(100% - 2rem,1180px);margin-inline:auto}.invoice-portal-header{position:relative;z-index:10;border-bottom:1px solid rgba(31,52,73,.09);background:rgba(255,255,255,.94);box-shadow:0 .35rem 1.5rem rgba(29,59,91,.05);backdrop-filter:blur(14px)}.invoice-portal-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:5rem;gap:1.5rem}.invoice-portal-brand{display:inline-flex;width:max-content}.invoice-portal-brand img{width:10.5rem;height:auto}.invoice-portal-heading{text-align:center}.invoice-portal-heading span,.invoice-portal-heading small{display:block}.invoice-portal-heading span{color:#174f88;font-size:.9rem;font-weight:750;letter-spacing:.025em}.invoice-portal-heading small{margin-top:.15rem;color:#647387;font-size:.64rem}.invoice-portal-home{display:inline-flex;align-items:center;justify-self:end;gap:.45rem;color:#344458;font-size:.72rem;font-weight:650;text-decoration:none}.invoice-portal-home:hover{color:#286fb7}.invoice-portal-home svg,.invoice-portal-footer-note svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.invoice-portal-main{flex:1;padding:clamp(2rem,5vw,4.5rem) 0}.invoice-portal-page{gap:1.4rem}.invoice-portal-page>.page-heading{align-items:end;padding:0 .25rem}.invoice-portal-page>.page-heading h1{margin:.2rem 0 .45rem;color:#172433;font-size:clamp(1.75rem,4vw,2.65rem);letter-spacing:-.035em}.invoice-portal-page>.page-heading .page-description{max-width:44rem;color:#647387;font-size:.85rem;line-height:1.7}.invoice-portal-page>.page-heading .page-pretitle{color:#286fb7;font-size:.67rem;font-weight:750;letter-spacing:.09em;text-transform:uppercase}.invoice-portal-page>.page-heading .page-pretitle a{color:inherit;text-decoration:none}.invoice-portal-card.card{overflow:hidden;border:1px solid rgba(31,52,73,.09);border-radius:0;background:#fff;box-shadow:0 1.4rem 4rem rgba(29,59,91,.09),0 .2rem .7rem rgba(29,59,91,.04)}.invoice-portal-form-page{width:min(100%,52rem);margin-inline:auto}.invoice-portal-form-page .invoice-portal-card>.card-body{padding:clamp(1.35rem,4vw,2.4rem)}.invoice-portal-form{display:grid;gap:1.75rem}.invoice-portal-form .form-label{font-size:.72rem}.invoice-portal-form .form-control{border-radius:0;background:#fbfdff}.invoice-portal-form .form-control:focus{border-color:#286fb7;box-shadow:0 0 0 .2rem rgba(40,111,183,.1)}.invoice-portal-form .billing-form-footer{margin:0 -2.4rem -2.4rem;padding:1rem 2.4rem;border-width:1px 0 0;box-shadow:none;background:#f8fafc}.invoice-code-input{text-align:center;font-size:1.55rem!important;font-weight:750;letter-spacing:.45em;font-variant-numeric:tabular-nums}.invoice-document-card>.card-body{padding:clamp(.75rem,3vw,1.75rem);background:#eaf0f6}.invoice-public-details .receipt-sheet{max-width:60rem;padding:clamp(1.35rem,4vw,3rem);border-top-width:6px;box-shadow:0 .8rem 2.5rem rgba(29,59,91,.08)}.receipt-brand{display:grid;justify-items:start}.receipt-brand img{margin-bottom:.7rem}.receipt-brand span{color:#172433;font-size:.76rem;font-weight:700}.receipt-brand small{margin-top:.1rem;color:#647387;font-size:.62rem}.invoice-public-details .receipt-kv{margin-top:1.5rem}.invoice-public-details .billing-table-wrap{margin:1.75rem 0;border:1px solid #dfe7ef}.invoice-public-details .billing-table{min-width:700px}.invoice-public-details .receipt-amount{background:linear-gradient(135deg,#174f88,#286fb7)}.invoice-portal-footer{border-top:1px solid rgba(31,52,73,.09);background:#fff;color:#647387;font-size:.67rem}.invoice-portal-footer>.invoice-portal-container{display:flex;align-items:center;justify-content:space-between;min-height:4rem;gap:1rem}.invoice-portal-footer-note{display:inline-flex;align-items:center;gap:.4rem}
@media(max-width:760px){.invoice-portal-nav{grid-template-columns:1fr auto;min-height:4.5rem}.invoice-portal-heading{display:none}.invoice-portal-brand img{width:8.75rem}.invoice-portal-home{font-size:0}.invoice-portal-home svg{width:1.2rem;height:1.2rem}.invoice-portal-main{padding:1.5rem 0 2.5rem}.invoice-portal-form .billing-form-footer{margin:0 -1.35rem -1.35rem;padding:1rem 1.35rem;flex-direction:column-reverse}.invoice-portal-form .billing-form-footer .btn{width:100%}.invoice-portal-footer>.invoice-portal-container{min-height:4.5rem;flex-direction:column;justify-content:center}.invoice-public-details .page-heading{align-items:flex-start}.invoice-public-details .billing-actions{width:auto}.invoice-public-details .receipt-head{gap:1rem}}

/* ===== ROLE AND PERMISSION ADMINISTRATION ===== */
.security-page .btn:not(.btn-icon),
.premises-page .btn:not(.btn-icon) { display: inline-flex; align-items: center; justify-content: center; gap: .42rem; }
.security-page .form-label,
.premises-page .form-label { margin-bottom: .35rem; color: var(--medeed-muted); font-size: .69rem; font-weight: 650; }
.security-page .form-control,
.security-page .form-select,
.premises-page .form-control,
.premises-page .form-select { min-height: 2.45rem; border-color: var(--medeed-border); background-color: var(--medeed-surface); font-size: .78rem; }
.security-page .card-header p,
.premises-page .card-header p { margin: .18rem 0 0; color: var(--medeed-muted); font-size: .66rem; }

/* Roles list */
.role-filter-card { margin-bottom: 0; }
.role-filter-grid { display: grid; grid-template-columns: minmax(16rem, 1.8fr) minmax(10rem, .8fr) minmax(9rem, .7fr) auto; gap: .75rem; align-items: end; }
.role-filter-submit .btn { min-width: 7.5rem; }
.role-table { min-width: 1050px; }
.role-table-header { align-items: center; }
.role-row-inactive > td { background: rgba(108, 123, 141, .018); }
.role-person { min-width: 12rem; }
.role-avatar { color: #245f9e; border: 1px solid rgba(var(--medeed-primary-rgb), .12); background: rgba(var(--medeed-primary-rgb), .09); }
.role-description { display: block; max-width: 23rem; overflow: hidden; color: var(--medeed-text); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.role-description-empty { color: var(--medeed-muted); font-size: .66rem; font-style: italic; }
.role-metric-value { display: block; color: var(--medeed-text); font-size: .78rem; font-weight: 750; line-height: 1.1; }
.role-actions-dropdown .dropdown-menu { width: 18rem; padding: .45rem; }
.role-table .role-action-trigger { width: auto; min-width: 6.7rem; padding-inline: .65rem; }
.role-table-footer .pagination { flex-wrap: wrap; }

/* Role create and edit */
.role-form-page { max-width: 1180px; margin-inline: auto; }
.security-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1rem; align-items: start; }
.role-form-body { padding: 1.35rem; }
.role-form-body .form-control-lg { min-height: 3rem; font-size: .9rem; }
.role-form-body textarea { resize: vertical; }
.role-field-help { display: flex; justify-content: space-between; gap: 1rem; margin-top: .42rem; color: var(--medeed-muted); font-size: .63rem; line-height: 1.4; }
.role-field-help span:last-child { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.role-field-error { display: block; margin-top: .3rem; font-size: .65rem; }
.security-guidance-card { position: sticky; top: 5.7rem; }
.security-guidance-card .card-body { display: grid; gap: 1rem; }
.security-step-list { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.security-step-list li { display: grid; grid-template-columns: 1.8rem 1fr; gap: .7rem; align-items: start; }
.security-step-list li > span { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; color: var(--medeed-primary); border: 1px solid rgba(var(--medeed-primary-rgb), .18); background: rgba(var(--medeed-primary-rgb), .07); font-size: .65rem; font-weight: 750; }
.security-step-list strong,
.security-step-list small { display: block; }
.security-step-list strong { color: var(--medeed-text); font-size: .72rem; }
.security-step-list small { margin-top: .15rem; color: var(--medeed-muted); font-size: .64rem; line-height: 1.45; }
.security-info-note { display: flex; gap: .6rem; padding: .8rem; color: var(--medeed-muted); background: rgba(var(--medeed-primary-rgb), .055); font-size: .66rem; line-height: 1.5; }
.security-info-note .hr-icon { flex: 0 0 auto; color: var(--medeed-primary); }
.role-status-panel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid var(--medeed-border); background: color-mix(in srgb, var(--medeed-bg) 58%, transparent); }
.role-status-panel strong,
.role-status-panel small { display: block; }
.role-status-panel strong { font-size: .76rem; }
.role-status-panel small { margin-top: .18rem; color: var(--medeed-muted); font-size: .64rem; }
.role-status-switch { display: flex; align-items: center; gap: .55rem; margin: 0; white-space: nowrap; }
.role-status-switch .form-check-input { margin: 0; }
.role-status-switch .form-check-label { font-size: .7rem; font-weight: 700; }
.security-summary-number { padding: 1rem; color: var(--medeed-primary); border-left: 3px solid var(--medeed-primary); background: rgba(var(--medeed-primary-rgb), .06); }
.security-summary-number span,
.security-summary-number small { display: block; }
.security-summary-number span { font-size: 2rem; font-weight: 750; line-height: 1; }
.security-summary-number small { margin-top: .35rem; color: var(--medeed-muted); font-size: .65rem; }
.role-permission-copy { margin: 0; color: var(--medeed-muted); font-size: .68rem; line-height: 1.6; }
.role-form-footer { align-items: center; }

/* Permission hub */
.security-overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.security-overview-card .card-body,
.premises-overview-card .card-body { display: flex; align-items: center; gap: .85rem; min-height: 6rem; padding: 1rem 1.1rem; }
.security-overview-icon,
.premises-overview-icon { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; flex: 0 0 2.7rem; }
.security-overview-icon .hr-icon,
.premises-overview-icon .hr-icon { width: 1.25rem; height: 1.25rem; }
.security-overview-icon.blue,
.premises-overview-icon.blue { color: var(--medeed-primary); background: rgba(var(--medeed-primary-rgb), .09); }
.security-overview-icon.green,
.premises-overview-icon.green { color: #248c35; background: rgba(47, 179, 68, .1); }
.security-overview-icon.amber,
.premises-overview-icon.amber { color: #a66c00; background: rgba(245, 159, 0, .12); }
.premises-overview-icon.red { color: #c03333; background: rgba(214, 57, 57, .1); }
.premises-overview-icon.violet { color: #7048a8; background: rgba(112, 72, 168, .1); }
.security-overview-card strong,
.security-overview-card span,
.premises-overview-card strong,
.premises-overview-card span { display: block; }
.security-overview-card strong,
.premises-overview-card strong { color: var(--medeed-text); font-size: 1.25rem; font-weight: 750; line-height: 1.1; }
.security-overview-card span,
.premises-overview-card span { margin-top: .22rem; color: var(--medeed-muted); font-size: .65rem; }
.security-model-note { display: flex; align-items: flex-start; gap: .75rem; padding: .95rem 1.05rem; color: #285f8f; border: 1px solid rgba(var(--medeed-primary-rgb), .15); background: rgba(var(--medeed-primary-rgb), .055); }
.security-model-note > .hr-icon { flex: 0 0 auto; margin-top: .05rem; }
.security-model-note strong,
.security-model-note span { display: block; }
.security-model-note strong { font-size: .72rem; }
.security-model-note span { margin-top: .15rem; font-size: .66rem; line-height: 1.5; }
.permission-section-header { align-items: center; }
.permission-role-search { width: min(18rem, 100%); }
.permission-role-search .hr-icon { bottom: .68rem; }
.permission-role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.permission-role-card { display: flex; min-width: 0; flex-direction: column; gap: .8rem; padding: 1rem; border: 1px solid var(--medeed-border); background: color-mix(in srgb, var(--medeed-surface) 97%, var(--medeed-bg)); }
.permission-role-card:hover { border-color: rgba(var(--medeed-primary-rgb), .3); box-shadow: 0 .45rem 1.4rem rgba(25, 36, 51, .055); }
.permission-role-card-head { display: flex; align-items: center; gap: .65rem; }
.permission-role-card-head > div { min-width: 0; flex: 1; }
.permission-role-card-head strong { display: block; overflow: hidden; color: var(--medeed-text); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.permission-role-card-head .hr-status { width: auto; min-width: 4rem; margin-top: .3rem; }
.permission-role-card p { min-height: 2.8rem; margin: 0; overflow: hidden; color: var(--medeed-muted); font-size: .65rem; line-height: 1.45; }
.permission-role-metrics { display: flex; gap: .45rem; }
.permission-role-metrics span { flex: 1; padding: .48rem .55rem; color: var(--medeed-muted); background: color-mix(in srgb, var(--medeed-bg) 72%, transparent); font-size: .62rem; }
.permission-role-metrics strong { color: var(--medeed-text); font-size: .72rem; }
.security-empty-state { display: flex; min-height: 10rem; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; padding: 1.5rem; color: var(--medeed-muted); text-align: center; }
.security-empty-state > .hr-icon { width: 1.65rem; height: 1.65rem; margin-bottom: .3rem; color: var(--medeed-primary); }
.security-empty-state strong { color: var(--medeed-text); font-size: .78rem; }
.security-empty-state span { max-width: 28rem; font-size: .66rem; }
.permission-user-filter { padding: 1rem 1.2rem; border-bottom: 1px solid var(--medeed-border); background: color-mix(in srgb, var(--medeed-bg) 45%, transparent); }
.permission-user-filter-grid { display: grid; grid-template-columns: minmax(15rem, 1.6fr) repeat(3, minmax(9rem, .8fr)) auto; gap: .75rem; align-items: end; }
.permission-filter-actions { display: flex; gap: .45rem; }
.permission-user-table { min-width: 1020px; }
.permission-user-person { min-width: 15rem; }
.permission-user-action { white-space: nowrap; }
.permission-user-footer .pagination { flex-wrap: wrap; }

/* Permission editors */
.permission-editor-heading { align-items: flex-end; }
.permission-editor-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--medeed-border); background: var(--medeed-surface); }
.permission-editor-stats > div { padding: .9rem 1rem; border-right: 1px solid var(--medeed-border); }
.permission-editor-stats > div:last-child { border-right: 0; }
.permission-editor-stats strong,
.permission-editor-stats span { display: block; }
.permission-editor-stats strong { color: var(--medeed-text); font-size: 1.05rem; }
.permission-editor-stats span { margin-top: .18rem; color: var(--medeed-muted); font-size: .63rem; }
.user-permission-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.permission-editor-form { display: grid; gap: 1rem; }
.permission-editor-toolbar { position: sticky; top: 4.8rem; z-index: 20; box-shadow: 0 .45rem 1.4rem rgba(25, 36, 51, .05); }
.permission-toolbar-grid { display: grid; grid-template-columns: minmax(17rem, 1.5fr) minmax(11rem, .7fr) auto; gap: .75rem; align-items: end; }
.permission-bulk-actions { display: flex; gap: .45rem; }
.permission-groups { display: grid; gap: 1rem; }
.permission-group-header { align-items: center; }
.permission-group-title { display: flex; align-items: center; gap: .7rem; }
.permission-group-icon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; color: var(--medeed-primary); background: rgba(var(--medeed-primary-rgb), .085); }
.permission-group-controls { display: flex; align-items: center; gap: 1rem; }
.permission-group-controls > span,
.permission-group-effective { color: var(--medeed-muted); font-size: .65rem; font-weight: 650; }
.permission-group-controls .form-check { display: flex; align-items: center; gap: .45rem; margin: 0; }
.permission-group-controls .form-check-input { margin: 0; }
.permission-group-controls .form-check-label { font-size: .67rem; font-weight: 650; }
.role-permission-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.role-permission-option { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .65rem; align-items: center; min-height: 4rem; padding: .75rem; border: 1px solid var(--medeed-border); background: var(--medeed-surface); cursor: pointer; }
.role-permission-option:hover { border-color: rgba(var(--medeed-primary-rgb), .3); background: rgba(var(--medeed-primary-rgb), .025); }
.role-permission-option.is-selected { border-color: rgba(var(--medeed-primary-rgb), .34); background: rgba(var(--medeed-primary-rgb), .055); }
.role-permission-option > .form-check-input { margin: 0; }
.role-permission-copy { min-width: 0; }
.role-permission-copy strong,
.role-permission-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-permission-copy strong { color: var(--medeed-text); font-size: .7rem; }
.role-permission-copy small { margin-top: .2rem; color: var(--medeed-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .58rem; }
.role-permission-check { color: transparent; }
.role-permission-option.is-selected .role-permission-check { color: var(--medeed-primary); }
.permission-filter-empty { border: 1px dashed var(--medeed-border); background: var(--medeed-surface); }
.permission-save-bar { align-items: center; justify-content: space-between; }
.permission-save-bar > span { color: var(--medeed-muted); font-size: .67rem; }
.permission-save-bar > span strong { color: var(--medeed-text); }
.permission-save-bar > div { display: flex; gap: .55rem; }
.permission-user-heading { display: flex; align-items: flex-start; gap: .9rem; }
.permission-user-avatar { width: 3.4rem; height: 3.4rem; flex: 0 0 3.4rem; color: #245f9e; border: 1px solid rgba(var(--medeed-primary-rgb), .16); background: rgba(var(--medeed-primary-rgb), .09); font-size: .9rem; }
.permission-heading-roles { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.permission-inheritance-note { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--medeed-border); background: var(--medeed-surface); }
.permission-legend-item { display: grid; grid-template-columns: 2rem 1fr; gap: .65rem; align-items: start; padding: .85rem 1rem; border-right: 1px solid var(--medeed-border); }
.permission-legend-item:last-child { border-right: 0; }
.permission-legend-symbol { display: grid; place-items: center; width: 2rem; height: 2rem; font-size: 1rem; font-weight: 750; }
.permission-legend-item.inherit .permission-legend-symbol { color: var(--medeed-primary); background: rgba(var(--medeed-primary-rgb), .09); }
.permission-legend-item.allow .permission-legend-symbol { color: #248c35; background: rgba(47, 179, 68, .1); }
.permission-legend-item.deny .permission-legend-symbol { color: #c03333; background: rgba(214, 57, 57, .1); }
.permission-legend-item strong,
.permission-legend-item small { display: block; }
.permission-legend-item strong { font-size: .7rem; }
.permission-legend-item small { margin-top: .12rem; color: var(--medeed-muted); font-size: .61rem; line-height: 1.4; }
.user-permission-toolbar-grid { grid-template-columns: minmax(17rem, 1.3fr) minmax(13rem, .7fr) minmax(16rem, 1fr); }
.permission-toolbar-hint { display: flex; align-items: flex-start; gap: .55rem; min-height: 2.45rem; padding: .52rem .65rem; color: var(--medeed-muted); background: rgba(var(--medeed-primary-rgb), .045); font-size: .62rem; line-height: 1.4; }
.permission-toolbar-hint .hr-icon { flex: 0 0 auto; color: var(--medeed-primary); }
.user-permission-table { min-width: 1040px; }
.user-permission-table tbody td { white-space: normal; }
.user-permission-name { min-width: 14rem; }
.user-permission-name strong,
.user-permission-name small { display: block; }
.user-permission-name strong { font-size: .7rem; }
.user-permission-name small { margin-top: .2rem; color: var(--medeed-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .58rem; }
.permission-source-badge,
.permission-effective-badge { display: inline-flex; align-items: center; gap: .35rem; min-height: 1.55rem; padding: 0 .5rem; font-size: .61rem; font-weight: 650; white-space: nowrap; }
.permission-source-badge.is-allowed,
.permission-effective-badge.is-allowed { color: #248c35; background: rgba(47, 179, 68, .1); }
.permission-source-badge.is-denied,
.permission-effective-badge.is-denied { color: #c03333; background: rgba(214, 57, 57, .09); }
.permission-effective-badge .hr-icon { width: .85rem; height: .85rem; }
.permission-choice { display: inline-flex; border: 1px solid var(--medeed-border); background: var(--medeed-bg); }
.permission-choice-item { position: relative; margin: 0; cursor: pointer; }
.permission-choice-item input { position: absolute; opacity: 0; pointer-events: none; }
.permission-choice-item span { display: block; padding: .45rem .62rem; color: var(--medeed-muted); border-right: 1px solid var(--medeed-border); font-size: .61rem; font-weight: 650; white-space: nowrap; }
.permission-choice-item:last-child span { border-right: 0; }
.permission-choice-item.inherit.is-active span { color: var(--medeed-primary); background: rgba(var(--medeed-primary-rgb), .1); }
.permission-choice-item.allow.is-active span { color: #248c35; background: rgba(47, 179, 68, .12); }
.permission-choice-item.deny.is-active span { color: #c03333; background: rgba(214, 57, 57, .11); }
.permission-choice-item:focus-within { outline: 2px solid rgba(var(--medeed-primary-rgb), .35); outline-offset: -2px; }

/* ===== PREMISES ===== */
.premises-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.premises-rent-card { grid-column: span 2; }
.premises-rent-card strong { font-size: .95rem; line-height: 1.35; }
.premises-branch-filter-grid { display: grid; grid-template-columns: minmax(16rem, 1fr) auto; gap: .75rem; align-items: end; }
.premises-list-header { align-items: center; }
.premises-local-filters { display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(10rem, .55fr); gap: .6rem; width: min(36rem, 100%); }
.premises-local-filters .hr-search .hr-icon { bottom: .7rem; }
.premises-table { min-width: 1320px; }
.premises-property-cell { display: flex; align-items: center; gap: .65rem; min-width: 18rem; }
.premises-property-icon { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; flex: 0 0 2.15rem; color: var(--medeed-primary); background: rgba(var(--medeed-primary-rgb), .085); }
.premises-property-cell strong,
.premises-property-cell small { display: block; line-height: 1.3; }
.premises-property-cell strong { font-size: .73rem; }
.premises-property-cell small { max-width: 17rem; margin-top: .18rem; overflow: hidden; color: var(--medeed-muted); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.premises-landlord,
.premises-date-range,
.premises-amount,
.premises-deadline { display: block; color: var(--medeed-text); font-size: .7rem; font-weight: 650; }
.premises-deadline.is-urgent { color: #a66c00; }
.premises-deadline.is-expired { color: #c03333; }
.premises-open-action { white-space: nowrap; }
.premises-filter-empty { min-height: 12rem; border-top: 1px solid var(--medeed-border); }
.premises-trend-period { padding: .3rem .5rem; color: var(--medeed-primary); background: rgba(var(--medeed-primary-rgb), .08); font-size: .63rem; font-weight: 650; }
.premises-trend-table { min-width: 820px; }
.premises-trend-track { width: min(18rem, 24vw); height: .42rem; overflow: hidden; background: rgba(var(--medeed-primary-rgb), .08); }
.premises-trend-track span { display: block; height: 100%; background: var(--medeed-primary); }
.premises-change { display: inline-flex; min-width: 7.5rem; min-height: 1.5rem; align-items: center; padding: 0 .5rem; font-size: .61rem; font-weight: 650; }
.premises-change.is-increase { color: #c03333; background: rgba(214, 57, 57, .09); }
.premises-change.is-decrease { color: #248c35; background: rgba(47, 179, 68, .1); }
.premises-change.is-neutral { color: var(--medeed-muted); background: rgba(108, 123, 141, .08); }
.premises-trend-empty .card-body { display: flex; align-items: center; gap: .75rem; color: var(--medeed-muted); }
.premises-trend-empty .hr-icon { width: 1.4rem; height: 1.4rem; color: var(--medeed-primary); }
.premises-trend-empty strong,
.premises-trend-empty span { display: block; }
.premises-trend-empty strong { color: var(--medeed-text); font-size: .73rem; }
.premises-trend-empty span { margin-top: .15rem; font-size: .64rem; }

@media (max-width: 1399.98px) {
  .permission-role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role-permission-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .permission-user-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .permission-filter-actions { align-self: end; }
  .premises-overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1199.98px) {
  .security-form-layout { grid-template-columns: 1fr; }
  .security-guidance-card { position: static; }
  .permission-toolbar-grid,
  .user-permission-toolbar-grid { grid-template-columns: 1fr 1fr; }
  .permission-bulk-actions,
  .permission-toolbar-hint { grid-column: 1 / -1; }
  .premises-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .role-filter-grid { grid-template-columns: 1fr 1fr; }
  .security-overview-grid { grid-template-columns: 1fr; }
  .permission-inheritance-note { grid-template-columns: 1fr; }
  .permission-legend-item { border-right: 0; border-bottom: 1px solid var(--medeed-border); }
  .permission-legend-item:last-child { border-bottom: 0; }
  .permission-editor-toolbar { position: static; }
  .permission-editor-stats,
  .user-permission-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .permission-editor-stats > div:nth-child(2) { border-right: 0; }
  .permission-editor-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--medeed-border); }
  .premises-list-header { align-items: stretch; flex-direction: column; }
  .premises-local-filters { width: 100%; }
}

@media (max-width: 767.98px) {
  .security-page .page-heading,
  .premises-page .page-heading { align-items: stretch; flex-direction: column; }
  .security-page .hr-actions,
  .premises-page .hr-actions { justify-content: flex-start; }
  .role-filter-grid,
  .permission-user-filter-grid,
  .permission-toolbar-grid,
  .user-permission-toolbar-grid,
  .permission-role-grid,
  .role-permission-grid,
  .premises-overview-grid,
  .premises-branch-filter-grid,
  .premises-local-filters { grid-template-columns: 1fr; }
  .premises-rent-card,
  .permission-bulk-actions,
  .permission-toolbar-hint { grid-column: auto; }
  .permission-bulk-actions,
  .permission-filter-actions { flex-direction: column; }
  .permission-bulk-actions .btn,
  .permission-filter-actions .btn { width: 100%; }
  .permission-section-header,
  .permission-group-header { align-items: stretch; flex-direction: column; }
  .permission-role-search { width: 100%; }
  .permission-group-controls { justify-content: space-between; }
  .permission-save-bar { align-items: stretch; flex-direction: column; }
  .permission-save-bar > div { flex-direction: column-reverse; }
  .permission-save-bar .btn { width: 100%; }
  .permission-user-heading { align-items: flex-start; }
  .role-status-panel { align-items: flex-start; flex-direction: column; }
}

/* ===== DEPARTMENT MANAGER ===== */
.department-manager-area .page-wrapper { background: radial-gradient(circle at 88% 2%, rgba(var(--medeed-primary-rgb), .055), transparent 24rem), var(--medeed-bg); }
.department-manager-area .card { border-color: color-mix(in srgb, var(--medeed-border) 88%, transparent); box-shadow: 0 .35rem 1.5rem rgba(24, 43, 65, .045); }
.department-manager-area .card-header { min-height: 4.15rem; padding: .9rem 1.15rem; border-color: var(--medeed-border); }
.department-manager-area .card-header > div > p { margin: .18rem 0 0; color: var(--medeed-muted); font-size: .65rem; }
.department-manager-area .card-title { color: var(--medeed-text); font-size: .85rem; font-weight: 750; }
.department-manager-area .table thead th { color: var(--medeed-muted); border-color: var(--medeed-border); background: color-mix(in srgb, var(--medeed-bg) 62%, transparent); font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.department-manager-area .table tbody td { border-color: var(--medeed-border); }
.department-manager-area .btn { font-weight: 650; }
.department-manager-area .sidebar-nav .nav-icon {
  width: 1.45rem;
  height: 1.45rem;
  flex-basis: 1.45rem;
  stroke-width: 2;
}
.department-manager-area .sidebar-nav .nav-link { gap: .82rem; }
.department-manager-area .btn .hr-icon { width: 1.15rem; height: 1.15rem; }
.department-manager-area .dropdown-icon { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dm-section-kicker { display: block; margin-bottom: .2rem; color: var(--medeed-primary); font-size: .58rem; font-weight: 750; letter-spacing: .085em; }

/* Department dashboard */
.dm-dashboard { gap: 1rem; }
.dm-dashboard-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(20rem, .7fr); gap: 2rem; align-items: center; min-height: 13.5rem; padding: clamp(1.4rem, 3vw, 2.25rem); overflow: hidden; color: #fff; background: linear-gradient(125deg, #174f88 0%, #286fb7 58%, #3b82c4 100%); box-shadow: 0 1rem 2.8rem rgba(23, 79, 136, .18); }
.dm-dashboard-hero::before { position: absolute; right: -6rem; bottom: -8rem; width: 24rem; height: 24rem; content: ""; border: 1px solid rgba(255, 255, 255, .13); border-radius: 50%; box-shadow: 0 0 0 3rem rgba(255, 255, 255, .025), 0 0 0 6rem rgba(255, 255, 255, .018); }
.dm-dashboard-hero-copy { position: relative; z-index: 1; }
.dm-dashboard-hero .page-pretitle { color: rgba(255, 255, 255, .72); }
.dm-dashboard-hero h1 { margin: .2rem 0 .55rem; color: #fff; font-size: clamp(1.8rem, 3.3vw, 2.7rem); letter-spacing: -.045em; }
.dm-dashboard-hero-copy > p:not(.page-pretitle) { max-width: 47rem; margin: 0; color: rgba(255, 255, 255, .78); font-size: .82rem; line-height: 1.7; }
.dm-hero-meta { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.35rem; }
.dm-hero-meta span { display: inline-flex; align-items: center; gap: .4rem; color: rgba(255, 255, 255, .84); font-size: .68rem; font-weight: 600; }
.dm-hero-meta .hr-icon { width: .95rem; height: .95rem; }
.dm-manager-card { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: center; padding: 1rem; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .11); box-shadow: inset 0 1px rgba(255, 255, 255, .09); backdrop-filter: blur(12px); }
.dm-manager-avatar { display: grid; place-items: center; width: 3.15rem; height: 3.15rem; grid-row: span 2; object-fit: cover; color: #174f88; background: #fff; font-size: 1rem; font-weight: 750; }
.dm-manager-card > div { min-width: 0; }
.dm-manager-card span, .dm-manager-card strong, .dm-manager-card small { display: block; }
.dm-manager-card > div > span { color: rgba(255, 255, 255, .67); font-size: .58rem; letter-spacing: .055em; text-transform: uppercase; }
.dm-manager-card strong { overflow: hidden; color: #fff; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.dm-manager-card small { margin-top: .12rem; overflow: hidden; color: rgba(255, 255, 255, .7); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.dm-manager-card .btn { grid-column: 1 / -1; color: #fff; border-color: rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .08); }
.dm-manager-card .btn:hover { color: #174f88; border-color: #fff; background: #fff; }
.dm-attention-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .85rem 1rem; color: #7a5200; border: 1px solid rgba(245, 159, 0, .26); background: linear-gradient(90deg, rgba(245, 159, 0, .11), rgba(245, 159, 0, .045)); }
.dm-attention-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; background: rgba(245, 159, 0, .14); }
.dm-attention-icon .hr-icon { width: 1.35rem; height: 1.35rem; stroke-width: 2; }
.dm-attention-bar strong, .dm-attention-bar span { display: block; }
.dm-attention-bar strong { font-size: .73rem; }
.dm-attention-bar > div > span { margin-top: .12rem; color: color-mix(in srgb, #7a5200 72%, var(--medeed-muted)); font-size: .63rem; }
.dm-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.dm-kpi-card { position: relative; overflow: hidden; }
.dm-kpi-card::after { position: absolute; inset: auto 0 0; height: 2px; content: ""; background: transparent; }
.dm-kpi-card.needs-attention::after { background: #f59f00; }
.dm-kpi-card .card-body { display: flex; min-height: 7rem; align-items: center; gap: .85rem; padding: 1rem; }
.dm-kpi-icon, .dm-quick-icon { display: grid; place-items: center; }
.dm-kpi-icon { width: 3.25rem; height: 3.25rem; flex: 0 0 3.25rem; }
.dm-kpi-icon .hr-icon { width: 1.65rem; height: 1.65rem; stroke-width: 2; }
.dm-quick-icon { width: 2.9rem; height: 2.9rem; flex: 0 0 2.9rem; }
.dm-quick-icon .hr-icon { width: 1.4rem; height: 1.4rem; stroke-width: 2; }
.dm-kpi-icon.blue, .dm-quick-icon.blue { color: var(--medeed-primary); background: rgba(var(--medeed-primary-rgb), .09); }
.dm-kpi-icon.amber, .dm-quick-icon.amber { color: #a66c00; background: rgba(245, 159, 0, .11); }
.dm-kpi-icon.violet, .dm-quick-icon.violet { color: #7650a8; background: rgba(118, 80, 168, .1); }
.dm-kpi-icon.green, .dm-quick-icon.green { color: #248c35; background: rgba(47, 179, 68, .1); }
.dm-kpi-icon.cyan, .dm-quick-icon.cyan { color: #137e91; background: rgba(19, 126, 145, .1); }
.dm-kpi-card .card-body > div { min-width: 0; }
.dm-kpi-card span, .dm-kpi-card strong, .dm-kpi-card small { display: block; }
.dm-kpi-card .card-body > div > span { color: var(--medeed-muted); font-size: .64rem; font-weight: 650; }
.dm-kpi-card strong { margin: .13rem 0; color: var(--medeed-text); font-size: 1.45rem; line-height: 1.2; }
.dm-kpi-card small { overflow: hidden; color: var(--medeed-muted); font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
.dm-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(19rem, .72fr); gap: 1rem; align-items: start; }
.dm-total-badge { display: inline-flex; align-items: center; min-height: 1.7rem; padding: 0 .65rem; color: var(--medeed-primary); background: rgba(var(--medeed-primary-rgb), .09); font-size: .63rem; font-weight: 700; white-space: nowrap; }
.dm-review-list { display: grid; }
.dm-review-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; min-height: 5rem; padding: .85rem 1.15rem; color: inherit; border-bottom: 1px solid var(--medeed-border); text-decoration: none; }
.dm-review-item:last-child { border-bottom: 0; }
.dm-review-item:hover { color: inherit; background: rgba(var(--medeed-primary-rgb), .03); }
.dm-review-number { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; color: var(--medeed-primary); background: rgba(var(--medeed-primary-rgb), .09); font-size: .78rem; font-weight: 750; }
.dm-review-number.amber { color: #a66c00; background: rgba(245, 159, 0, .11); }
.dm-review-number.violet { color: #7650a8; background: rgba(118, 80, 168, .1); }
.dm-review-number.green { color: #248c35; background: rgba(47, 179, 68, .1); }
.dm-review-copy strong, .dm-review-copy small { display: block; }
.dm-review-copy strong { color: var(--medeed-text); font-size: .73rem; }
.dm-review-copy small { margin-top: .18rem; color: var(--medeed-muted); font-size: .62rem; }
.dm-review-item > .hr-icon { color: var(--medeed-muted); }
.dm-team-card .card-body { padding: 1.15rem; }
.dm-team-progress-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.dm-team-progress-head strong, .dm-team-progress-head span { display: block; }
.dm-team-progress-head > div strong { font-size: .78rem; }
.dm-team-progress-head span { margin-top: .12rem; color: var(--medeed-muted); font-size: .62rem; }
.dm-team-progress-head > strong { color: var(--medeed-primary); font-size: 1.15rem; }
.dm-team-progress { display: block; width: 100%; height: .42rem; margin: .75rem 0 1rem; overflow: hidden; border: 0; appearance: none; background: rgba(var(--medeed-primary-rgb), .08); }
.dm-team-progress::-webkit-progress-bar { background: rgba(var(--medeed-primary-rgb), .08); }
.dm-team-progress::-webkit-progress-value { background: linear-gradient(90deg, #286fb7, #49a2dc); }
.dm-team-progress::-moz-progress-bar { background: linear-gradient(90deg, #286fb7, #49a2dc); }
.dm-profile-facts { display: grid; gap: 0; margin: 0; }
.dm-profile-facts div { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-top: 1px solid var(--medeed-border); }
.dm-profile-facts dt { color: var(--medeed-muted); font-size: .63rem; font-weight: 500; }
.dm-profile-facts dd { margin: 0; text-align: right; font-size: .68rem; font-weight: 700; }
.dm-quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dm-quick-grid > a { display: flex; min-height: 5.5rem; align-items: center; gap: .75rem; padding: 1rem; color: inherit; border-right: 1px solid var(--medeed-border); text-decoration: none; }
.dm-quick-grid > a:last-child { border-right: 0; }
.dm-quick-grid > a:hover { color: inherit; background: rgba(var(--medeed-primary-rgb), .03); }
.dm-quick-grid strong, .dm-quick-grid small { display: block; }
.dm-quick-grid strong { font-size: .7rem; }
.dm-quick-grid small { margin-top: .16rem; color: var(--medeed-muted); font-size: .59rem; line-height: 1.35; }
.dm-data-freshness { display: flex; justify-content: flex-end; align-items: center; gap: .4rem; color: var(--medeed-muted); font-size: .6rem; }

/* Daily work report list */
.dm-report-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--medeed-border); background: var(--medeed-surface); box-shadow: 0 .35rem 1.5rem rgba(24, 43, 65, .035); }
.dm-report-summary article { position: relative; padding: .9rem 1rem; border-right: 1px solid var(--medeed-border); }
.dm-report-summary article:last-child { border-right: 0; }
.dm-report-summary article::before { position: absolute; inset: 0 auto 0 0; width: 2px; content: ""; background: var(--medeed-primary); }
.dm-report-summary article.amber::before { background: #f59f00; }
.dm-report-summary article.green::before { background: #2fb344; }
.dm-report-summary article.red::before { background: #d63939; }
.dm-report-summary span, .dm-report-summary strong, .dm-report-summary small { display: block; }
.dm-report-summary span { color: var(--medeed-muted); font-size: .62rem; font-weight: 650; }
.dm-report-summary strong { margin-top: .12rem; font-size: 1.15rem; }
.dm-report-summary small { margin-top: .12rem; color: var(--medeed-muted); font-size: .58rem; }
.dm-button-count { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem; color: var(--medeed-primary); background: #fff; font-size: .59rem; }
.dm-report-filter-grid { display: grid; grid-template-columns: minmax(15rem, 1.2fr) minmax(10rem, .55fr) auto; gap: .75rem; align-items: end; }
.dm-report-filter-grid .btn { min-height: 2.45rem; }
.dm-report-table { min-width: 1240px; }
.dm-report-table tbody tr.dm-report-row-pending { background: rgba(245, 159, 0, .025); box-shadow: inset 2px 0 #f59f00; }
.dm-report-date, .dm-time-range { color: var(--medeed-text); font-size: .7rem; font-weight: 650; }
.dm-cell-note { display: block; margin-top: .18rem; color: var(--medeed-muted); font-size: .59rem; font-weight: 500; }
.dm-content-preview { display: block; width: 14rem; overflow: hidden; color: var(--medeed-muted); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.dm-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; }
.dm-row-actions .btn { white-space: nowrap; }
.dm-report-empty { display: flex; min-height: 18rem; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; }
.dm-report-empty > span { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin-bottom: .8rem; color: var(--medeed-primary); background: rgba(var(--medeed-primary-rgb), .08); }
.dm-report-empty > span .hr-icon { width: 1.5rem; height: 1.5rem; }
.dm-report-empty strong { font-size: .8rem; }
.dm-report-empty p { margin: .3rem 0 .8rem; color: var(--medeed-muted); font-size: .66rem; }
.dm-decision-modal .modal-header { align-items: flex-start; }
.dm-modal-context { margin-bottom: 1rem; padding: .75rem; border-left: 2px solid var(--medeed-primary); background: rgba(var(--medeed-primary-rgb), .055); }
.dm-modal-context strong, .dm-modal-context span { display: block; }
.dm-modal-context strong { font-size: .73rem; }
.dm-modal-context span { margin-top: .15rem; color: var(--medeed-muted); font-size: .63rem; }

/* Daily work report detail */
.dm-report-detail-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(19rem, .58fr); gap: 1rem; align-items: start; }
.dm-report-detail-side { display: grid; gap: 1rem; }
.dm-report-time-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--medeed-border); }
.dm-report-time-grid article { position: relative; padding: 1.1rem; border-right: 1px solid var(--medeed-border); }
.dm-report-time-grid article:last-child { border-right: 0; }
.dm-report-time-grid article.primary { background: rgba(var(--medeed-primary-rgb), .045); }
.dm-report-time-grid span, .dm-report-time-grid strong, .dm-report-time-grid small { display: block; }
.dm-report-time-grid span { color: var(--medeed-muted); font-size: .61rem; }
.dm-report-time-grid strong { margin-top: .28rem; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.dm-report-time-grid small { color: var(--medeed-muted); font-size: .58rem; }
.dm-report-content { padding: 1.2rem; }
.dm-report-content-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.dm-report-content-head h3 { margin: 0; font-size: .8rem; }
.dm-report-content-head > span { color: var(--medeed-muted); font-size: .58rem; }
.dm-report-content-body { min-height: 14rem; padding: 1rem; white-space: pre-wrap; color: var(--medeed-text); border: 1px solid var(--medeed-border); background: color-mix(in srgb, var(--medeed-bg) 48%, transparent); font-size: .72rem; line-height: 1.75; }
.dm-rejection-note { display: grid; grid-template-columns: auto 1fr; gap: .75rem; margin: 0 1.2rem 1.2rem; padding: .9rem; color: #a62b2b; border: 1px solid rgba(214, 57, 57, .2); background: rgba(214, 57, 57, .07); }
.dm-rejection-note > span { display: grid; place-items: center; width: 2rem; height: 2rem; background: rgba(214, 57, 57, .1); }
.dm-rejection-note strong { display: block; font-size: .7rem; }
.dm-rejection-note p { margin: .2rem 0 0; white-space: pre-wrap; font-size: .65rem; line-height: 1.55; }
.dm-report-audit { display: flex; flex-wrap: wrap; gap: 1rem; padding: .7rem 1.2rem; color: var(--medeed-muted); border-top: 1px solid var(--medeed-border); font-size: .59rem; }
.dm-employee-summary > .card-body { display: flex; align-items: center; gap: .75rem; padding: 1rem; }
.dm-detail-avatar { display: grid; place-items: center; width: 3rem; height: 3rem; flex: 0 0 3rem; color: #fff; background: linear-gradient(145deg, #286fb7, #174f88); font-weight: 750; }
.dm-employee-summary-copy { min-width: 0; }
.dm-employee-summary-copy span, .dm-employee-summary-copy small { display: block; color: var(--medeed-muted); font-size: .59rem; }
.dm-employee-summary-copy h2 { margin: .15rem 0; overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.dm-employee-summary dl { margin: 0; padding: 0 1rem 1rem; }
.dm-employee-summary dl div { display: flex; justify-content: space-between; gap: .75rem; padding: .62rem 0; border-top: 1px solid var(--medeed-border); }
.dm-employee-summary dt { color: var(--medeed-muted); font-size: .62rem; font-weight: 500; }
.dm-employee-summary dd { margin: 0; text-align: right; font-size: .65rem; font-weight: 700; }
.dm-workflow-list { padding: .3rem 1rem .8rem; }
.dm-workflow-step { position: relative; display: grid; grid-template-columns: auto 1fr; gap: .7rem; min-height: 4.15rem; padding: .65rem 0; }
.dm-workflow-step:not(:last-child)::after { position: absolute; top: 2.5rem; bottom: -.2rem; left: .95rem; width: 1px; content: ""; background: var(--medeed-border); }
.dm-workflow-marker { position: relative; z-index: 1; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; color: var(--medeed-muted); border: 1px solid var(--medeed-border); background: var(--medeed-surface); font-size: .62rem; font-weight: 750; }
.dm-workflow-step.complete .dm-workflow-marker { color: #248c35; border-color: rgba(47, 179, 68, .3); background: rgba(47, 179, 68, .1); }
.dm-workflow-step.current .dm-workflow-marker { color: #a66c00; border-color: rgba(245, 159, 0, .32); background: rgba(245, 159, 0, .12); }
.dm-workflow-step.rejected .dm-workflow-marker { color: #c03333; border-color: rgba(214, 57, 57, .3); background: rgba(214, 57, 57, .1); }
.dm-workflow-step strong, .dm-workflow-step small { display: block; }
.dm-workflow-step strong { margin-top: .1rem; font-size: .68rem; }
.dm-workflow-step small { margin-top: .2rem; color: var(--medeed-muted); font-size: .58rem; line-height: 1.4; }
.dm-workflow-step.complete small { color: #248c35; }
.dm-workflow-step.current small { color: #a66c00; }
.dm-workflow-step.rejected small { color: #c03333; }

@media (max-width: 1199.98px) {
  .dm-dashboard-hero { grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr); }
  .dm-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm-dashboard-grid, .dm-report-detail-grid { grid-template-columns: 1fr; }
  .dm-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm-quick-grid > a:nth-child(2) { border-right: 0; }
  .dm-quick-grid > a:nth-child(-n+2) { border-bottom: 1px solid var(--medeed-border); }
}

@media (max-width: 991.98px) {
  .dm-dashboard-hero { grid-template-columns: 1fr; }
  .dm-manager-card { width: min(100%, 26rem); }
  .dm-report-filter-grid { grid-template-columns: 1fr 1fr; }
  .dm-report-filter-grid .btn { grid-column: 1 / -1; }
  .dm-report-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm-report-summary article:nth-child(2) { border-right: 0; }
  .dm-report-summary article:nth-child(-n+2) { border-bottom: 1px solid var(--medeed-border); }
}

@media (max-width: 767.98px) {
  .dm-dashboard-hero { gap: 1.25rem; min-height: auto; }
  .dm-hero-meta { align-items: flex-start; flex-direction: column; gap: .55rem; }
  .dm-attention-bar { grid-template-columns: auto 1fr; }
  .dm-attention-bar .btn { grid-column: 1 / -1; width: 100%; }
  .dm-kpi-grid, .dm-report-summary, .dm-report-filter-grid, .dm-report-time-grid { grid-template-columns: 1fr; }
  .dm-report-summary article, .dm-report-summary article:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--medeed-border); }
  .dm-report-summary article:last-child { border-bottom: 0; }
  .dm-report-filter-grid .btn { grid-column: auto; }
  .dm-quick-grid { grid-template-columns: 1fr; }
  .dm-quick-grid > a, .dm-quick-grid > a:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--medeed-border); }
  .dm-quick-grid > a:last-child { border-bottom: 0; }
  .dm-report-time-grid article { border-right: 0; border-bottom: 1px solid var(--medeed-border); }
  .dm-report-time-grid article:last-child { border-bottom: 0; }
  .dm-row-actions { justify-content: flex-start; }
  .dm-report-detail .hr-actions { width: 100%; }
  .dm-report-detail .hr-actions > * { flex: 1; }
  .dm-report-detail .hr-actions form .btn { width: 100%; }
}

/* Department requests, leave and managed employees */
.dm-request-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); border: 1px solid var(--medeed-border); background: var(--medeed-surface); box-shadow: 0 .35rem 1.5rem rgba(24, 43, 65, .035); }
.dm-request-summary article { position: relative; padding: .95rem 1rem; border-right: 1px solid var(--medeed-border); }
.dm-request-summary article:last-child { border-right: 0; }
.dm-request-summary article::before { position: absolute; inset: 0 auto 0 0; width: 2px; content: ""; background: var(--medeed-muted); }
.dm-request-summary article.amber::before { background: #f59f00; }
.dm-request-summary article.green::before { background: #2fb344; }
.dm-request-summary article.blue::before { background: var(--medeed-primary); }
.dm-request-summary span, .dm-request-summary strong, .dm-request-summary small { display: block; }
.dm-request-summary span { color: var(--medeed-muted); font-size: .62rem; font-weight: 650; }
.dm-request-summary strong { margin-top: .15rem; color: var(--medeed-text); font-size: 1.15rem; }
.dm-request-summary small { margin-top: .12rem; color: var(--medeed-muted); font-size: .58rem; }
.dm-request-table { min-width: 1240px; }
.dm-request-row-pending { background: rgba(245, 159, 0, .025); box-shadow: inset 2px 0 #f59f00; }
.dm-request-title { min-width: 13rem; }
.dm-request-title strong, .dm-request-title small { display: block; }
.dm-request-title strong { max-width: 18rem; overflow: hidden; font-size: .71rem; text-overflow: ellipsis; white-space: nowrap; }
.dm-request-title small { margin-top: .18rem; color: var(--medeed-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .58rem; }
.dm-request-type { display: inline-flex; align-items: center; min-height: 1.55rem; padding: 0 .55rem; color: var(--medeed-primary); background: rgba(var(--medeed-primary-rgb), .085); font-size: .61rem; font-weight: 650; white-space: nowrap; }
.dm-request-detail-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(19rem, .6fr); gap: 1rem; align-items: start; }
.dm-request-detail-main, .dm-request-detail-side { display: grid; gap: 1rem; }
.dm-request-description .card-body { padding: 1.2rem; }
.dm-request-description-text { min-height: 9rem; padding: 1rem; white-space: pre-wrap; border: 1px solid var(--medeed-border); background: color-mix(in srgb, var(--medeed-bg) 48%, transparent); font-size: .71rem; line-height: 1.7; }
.dm-request-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; margin: 1rem 0 0; }
.dm-request-facts div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--medeed-border); }
.dm-request-facts dt { color: var(--medeed-muted); font-size: .62rem; font-weight: 500; }
.dm-request-facts dd { margin: 0; text-align: right; font-size: .66rem; font-weight: 700; }
.dm-compact-empty { display: flex; min-height: 6rem; align-items: center; justify-content: center; gap: .55rem; padding: 1rem; color: var(--medeed-muted); font-size: .65rem; }
.dm-attachment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; padding: 1rem; }
.dm-attachment-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .65rem; align-items: center; padding: .75rem; color: inherit; border: 1px solid var(--medeed-border); text-decoration: none; }
.dm-attachment-item:hover { color: inherit; border-color: rgba(var(--medeed-primary-rgb), .28); background: rgba(var(--medeed-primary-rgb), .025); }
.dm-attachment-item > span { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; color: var(--medeed-primary); background: rgba(var(--medeed-primary-rgb), .08); }
.dm-attachment-item div { min-width: 0; }
.dm-attachment-item strong, .dm-attachment-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-attachment-item strong { font-size: .67rem; }
.dm-attachment-item small { margin-top: .15rem; color: var(--medeed-muted); font-size: .56rem; }
.dm-attachment-item > .hr-icon { color: var(--medeed-muted); }
.dm-history-list { padding: .4rem 1rem .8rem; }
.dm-history-list article { position: relative; display: grid; grid-template-columns: auto 1fr; gap: .75rem; padding: .75rem 0; }
.dm-history-list article:not(:last-child) { border-bottom: 1px solid var(--medeed-border); }
.dm-history-marker { width: .58rem; height: .58rem; margin-top: .28rem; background: var(--medeed-primary); box-shadow: 0 0 0 .25rem rgba(var(--medeed-primary-rgb), .08); }
.dm-history-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.dm-history-head strong { font-size: .67rem; }
.dm-history-head time, .dm-history-list article small { color: var(--medeed-muted); font-size: .57rem; }
.dm-history-list article p { margin: .45rem 0 0; padding: .55rem .65rem; white-space: pre-wrap; background: color-mix(in srgb, var(--medeed-bg) 55%, transparent); font-size: .62rem; line-height: 1.5; }
.dm-requester-card > .card-body { display: flex; align-items: center; gap: .75rem; padding: 1rem; }
.dm-requester-card .card-body > div { min-width: 0; }
.dm-requester-card .card-body span, .dm-requester-card .card-body small { display: block; color: var(--medeed-muted); font-size: .59rem; }
.dm-requester-card h2 { margin: .15rem 0; overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.dm-requester-card dl { margin: 0; padding: 0 1rem 1rem; }
.dm-requester-card dl div { display: flex; justify-content: space-between; gap: .8rem; padding: .6rem 0; border-top: 1px solid var(--medeed-border); }
.dm-requester-card dt { color: var(--medeed-muted); font-size: .61rem; font-weight: 500; }
.dm-requester-card dd { margin: 0; text-align: right; font-size: .64rem; font-weight: 700; }
.dm-decision-card .card-body { display: grid; gap: .9rem; padding: 1rem; }
.dm-decision-form { display: grid; gap: .5rem; padding-bottom: .9rem; border-bottom: 1px solid var(--medeed-border); }
.dm-decision-form:last-child { padding-bottom: 0; border-bottom: 0; }
.dm-decision-form textarea { resize: vertical; }

.dm-page-size-control { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--medeed-muted); font-size: .62rem; }
.dm-page-size-control .form-select { width: 5rem; min-height: 2rem; }
.dm-leave-table, .dm-own-leave-table { min-width: 1280px; }
.dm-days-badge { display: inline-flex; min-height: 1.55rem; align-items: center; padding: 0 .55rem; color: #7650a8; background: rgba(118, 80, 168, .1); font-size: .62rem; font-weight: 700; white-space: nowrap; }
.dm-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1rem; align-items: start; }
.dm-leave-form-card .card-body { padding: 1.2rem; }
.dm-leave-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.dm-form-span-2 { grid-column: span 2; }
.dm-form-span-full { grid-column: 1 / -1; }
.dm-leave-form textarea { resize: vertical; }
.dm-form-footer { display: flex; justify-content: flex-end; gap: .55rem; }
.dm-form-help { position: sticky; top: 5.7rem; }
.dm-form-help .card-body { padding: .35rem 1rem; }
.dm-help-item { display: grid; grid-template-columns: auto 1fr; gap: .7rem; padding: .8rem 0; border-bottom: 1px solid var(--medeed-border); }
.dm-help-item:last-child { border-bottom: 0; }
.dm-help-item > span { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; color: var(--medeed-primary); background: rgba(var(--medeed-primary-rgb), .09); font-size: .62rem; font-weight: 750; }
.dm-help-item strong, .dm-help-item small { display: block; }
.dm-help-item strong { font-size: .65rem; }
.dm-help-item small { margin-top: .18rem; color: var(--medeed-muted); font-size: .58rem; line-height: 1.5; }
.dm-leave-detail-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(18rem, .6fr); gap: 1rem; align-items: start; }
.dm-leave-detail-side { display: grid; gap: 1rem; }
.dm-leave-period { display: grid; grid-template-columns: 1fr auto 1fr 1fr; align-items: stretch; border-bottom: 1px solid var(--medeed-border); }
.dm-leave-period article { padding: 1.1rem; }
.dm-leave-period article.primary { border-left: 1px solid var(--medeed-border); background: rgba(var(--medeed-primary-rgb), .045); }
.dm-leave-period span, .dm-leave-period strong, .dm-leave-period small { display: block; }
.dm-leave-period article > span { color: var(--medeed-muted); font-size: .6rem; }
.dm-leave-period strong { margin-top: .25rem; font-size: .9rem; }
.dm-leave-period small { margin-top: .12rem; color: var(--medeed-muted); font-size: .57rem; }
.dm-period-arrow { display: grid!important; place-items: center; padding: .5rem; color: var(--medeed-muted); }
.dm-leave-facts { margin: 0; padding: .5rem 1.2rem 1rem; }
.dm-leave-facts div { display: grid; grid-template-columns: minmax(8rem, .4fr) 1fr; gap: 1rem; padding: .72rem 0; border-bottom: 1px solid var(--medeed-border); }
.dm-leave-facts div:last-child { border-bottom: 0; }
.dm-leave-facts dt { color: var(--medeed-muted); font-size: .63rem; font-weight: 500; }
.dm-leave-facts dd { margin: 0; white-space: pre-wrap; font-size: .68rem; font-weight: 650; }
.dm-medical-card .card-body { padding: 1rem; }
.dm-document-ready { display: flex; gap: .65rem; align-items: center; margin-bottom: .8rem; padding: .75rem; color: #248c35; background: rgba(47, 179, 68, .08); }
.dm-document-ready strong, .dm-document-ready small { display: block; }
.dm-document-ready strong { font-size: .67rem; }
.dm-document-ready small { margin-top: .12rem; color: var(--medeed-muted); font-size: .57rem; }
.dm-document-missing { margin: 0 0 .75rem; color: var(--medeed-muted); font-size: .64rem; }
.dm-cancel-card .card-body { padding: 1rem; }
.dm-cancel-card strong { display: block; font-size: .68rem; }
.dm-cancel-card p { margin: .2rem 0 .75rem; color: var(--medeed-muted); font-size: .6rem; }
.dm-local-search { width: min(19rem, 100%); }
.dm-local-search .hr-icon { bottom: .72rem; }
.dm-managed-employee-table { min-width: 1120px; }
.dm-request-create-form .card-body { padding: 1.2rem; }
.dm-request-form-grid { display: grid; grid-template-columns: minmax(12rem, .8fr) minmax(12rem, .8fr) minmax(10rem, .55fr); gap: 1rem; }
.dm-request-form-title { grid-column: span 2; }
.dm-request-form-full { grid-column: 1 / -1; }
.dm-request-create-form textarea { resize: vertical; }

/* Department tickets and organizational tasks */
.dm-ticket-filter-grid { display: grid; grid-template-columns: minmax(15rem, 1.4fr) repeat(3, minmax(9rem, .72fr)) auto; gap: .7rem; align-items: end; }
.dm-ticket-filter-grid .btn { min-height: 2.45rem; }
.dm-ticket-table { min-width: 1480px; }
.dm-ticket-number { color: var(--medeed-primary); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .66rem; }
.dm-critical-row { background: rgba(214, 57, 57, .025); box-shadow: inset 2px 0 #d63939; }
.dm-priority { display: inline-flex; min-width: 4.8rem; min-height: 1.5rem; align-items: center; justify-content: center; padding: 0 .5rem; color: var(--medeed-muted); background: rgba(108, 123, 141, .09); font-size: .6rem; font-weight: 700; }
.dm-priority.high { color: #a66c00; background: rgba(245, 159, 0, .11); }
.dm-priority.critical { color: #c03333; background: rgba(214, 57, 57, .1); }
.dm-priority.low { color: #248c35; background: rgba(47, 179, 68, .09); }
.dm-ticket-create-form .card-body { padding: 1.2rem; }
.dm-ticket-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.dm-ticket-form-title, .dm-ticket-form-full { grid-column: 1 / -1; }
.dm-ticket-create-form textarea { resize: vertical; }
.dm-ticket-detail-grid, .dm-task-detail-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(19rem, .58fr); gap: 1rem; align-items: start; }
.dm-ticket-detail-main, .dm-ticket-detail-side, .dm-task-detail-main, .dm-task-detail-side { display: grid; gap: 1rem; }
.dm-ticket-description .card-body, .dm-task-description .card-body { padding: 1.2rem; }
.dm-ticket-description-text { min-height: 8rem; padding: 1rem; white-space: pre-wrap; border: 1px solid var(--medeed-border); background: color-mix(in srgb, var(--medeed-bg) 48%, transparent); font-size: .71rem; line-height: 1.7; }
.dm-ticket-resolution { display: grid; grid-template-columns: auto 1fr; gap: .7rem; margin-top: 1rem; padding: .85rem; color: #248c35; border: 1px solid rgba(47, 179, 68, .18); background: rgba(47, 179, 68, .065); }
.dm-ticket-resolution strong { display: block; font-size: .68rem; }
.dm-ticket-resolution p { margin: .2rem 0 0; white-space: pre-wrap; color: var(--medeed-text); font-size: .63rem; line-height: 1.55; }
.dm-ticket-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin: 0; border-top: 1px solid var(--medeed-border); }
.dm-ticket-meta div { padding: .75rem 1rem; border-right: 1px solid var(--medeed-border); }
.dm-ticket-meta div:last-child { border-right: 0; }
.dm-ticket-meta dt, .dm-ticket-meta dd { display: block; }
.dm-ticket-meta dt { color: var(--medeed-muted); font-size: .58rem; font-weight: 500; }
.dm-ticket-meta dd { margin: .18rem 0 0; font-size: .65rem; font-weight: 700; }
.dm-ticket-comments { display: grid; padding: .4rem 1rem .9rem; }
.dm-ticket-comments article { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; padding: .8rem 0; border-bottom: 1px solid var(--medeed-border); }
.dm-ticket-comments article:last-child { border-bottom: 0; }
.dm-ticket-comments .avatar { width: 2rem; height: 2rem; font-size: .62rem; }
.dm-ticket-comments header { display: flex; justify-content: space-between; gap: 1rem; }
.dm-ticket-comments header strong { font-size: .67rem; }
.dm-ticket-comments header time { color: var(--medeed-muted); font-size: .57rem; }
.dm-ticket-comments article p { margin: .35rem 0 0; white-space: pre-wrap; font-size: .65rem; line-height: 1.6; }
.dm-comment-files { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.dm-ticket-message-form .card-body, .dm-task-complete-form .card-body { padding: 1rem 1.2rem; }
.dm-ticket-message-form textarea, .dm-task-complete-form textarea { resize: vertical; }
.dm-ticket-action-card .card-body { padding: 1rem; }
.dm-ticket-action-card strong { display: block; font-size: .69rem; }
.dm-ticket-action-card p { margin: .2rem 0 .8rem; color: var(--medeed-muted); font-size: .61rem; line-height: 1.5; }
.dm-task-filter-grid { display: grid; grid-template-columns: minmax(13rem, .7fr) minmax(18rem, 1fr) auto; gap: .75rem; align-items: end; }
.dm-overdue-check { display: flex; min-height: 2.45rem; align-items: center; gap: .65rem; margin: 0; padding: .45rem .7rem; border: 1px solid var(--medeed-border); background: var(--medeed-surface); cursor: pointer; }
.dm-overdue-check input { width: 1rem; height: 1rem; accent-color: var(--medeed-primary); }
.dm-overdue-check strong, .dm-overdue-check small { display: block; }
.dm-overdue-check strong { font-size: .65rem; }
.dm-overdue-check small { margin-top: .08rem; color: var(--medeed-muted); font-size: .56rem; }
.dm-task-table { min-width: 1400px; }
.dm-task-notes .card-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1rem; }
.dm-task-notes article { padding: .8rem; border: 1px solid var(--medeed-border); background: color-mix(in srgb, var(--medeed-bg) 48%, transparent); }
.dm-task-notes article > span { color: var(--medeed-primary); font-size: .58rem; font-weight: 750; letter-spacing: .06em; }
.dm-task-notes article p { margin: .35rem 0 0; white-space: pre-wrap; font-size: .65rem; line-height: 1.6; }
.communication-preformatted { white-space: pre-wrap; }

@media (max-width: 1199.98px) {
  .dm-request-detail-grid, .dm-leave-detail-grid, .dm-form-layout, .dm-ticket-detail-grid, .dm-task-detail-grid { grid-template-columns: 1fr; }
  .dm-form-help { position: static; }
  .dm-ticket-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm-ticket-filter-grid .btn { grid-column: 1 / -1; }
}

@media (max-width: 991.98px) {
  .dm-leave-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm-attachment-grid, .dm-request-facts { grid-template-columns: 1fr; }
  .dm-request-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm-request-form-title { grid-column: 1 / -1; }
  .dm-task-filter-grid { grid-template-columns: 1fr 1fr; }
  .dm-task-filter-grid .btn { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
  .dm-request-summary { grid-template-columns: 1fr; }
  .dm-request-summary article { border-right: 0; border-bottom: 1px solid var(--medeed-border); }
  .dm-request-summary article:last-child { border-bottom: 0; }
  .dm-leave-form-grid, .dm-leave-period, .dm-request-form-grid, .dm-ticket-form-grid, .dm-ticket-filter-grid, .dm-task-filter-grid, .dm-task-notes .card-body { grid-template-columns: 1fr; }
  .dm-form-span-2, .dm-form-span-full { grid-column: auto; }
  .dm-request-form-title, .dm-request-form-full { grid-column: auto; }
  .dm-ticket-form-title, .dm-ticket-form-full, .dm-ticket-filter-grid .btn, .dm-task-filter-grid .btn { grid-column: auto; }
  .dm-form-footer { flex-direction: column-reverse; }
  .dm-form-footer .btn { width: 100%; }
  .dm-period-arrow { display: none!important; }
  .dm-leave-period article.primary { border-top: 1px solid var(--medeed-border); border-left: 0; }
  .dm-leave-facts div { grid-template-columns: 1fr; gap: .25rem; }
  .dm-local-search { width: 100%; }
  .dm-managed-employees .card-header { align-items: stretch; flex-direction: column; }
}

/* ===== CENTRAL STATUS AND ERROR PAGES ===== */
body.portal-error-page {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  color: var(--medeed-ink);
  background: #f3f7fb;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.portal-error-shell {
  display: grid;
  grid-template-columns: minmax(22rem, 40%) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

.portal-error-visual {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4.75rem);
  color: #fff;
  background:
    linear-gradient(135deg, rgba(9, 35, 61, .08), transparent 52%),
    linear-gradient(145deg, #103a63 0%, #1b5d9c 55%, #2c79bf 100%);
}

.portal-error-visual.permission {
  background: linear-gradient(145deg, #53331d 0%, #98531d 55%, #d17b27 100%);
}

.portal-error-visual.missing {
  background: linear-gradient(145deg, #243850 0%, #3f5875 55%, #607c9b 100%);
}

.portal-error-visual.server {
  background: linear-gradient(145deg, #49253a 0%, #7b355c 55%, #a84c78 100%);
}

.portal-error-visual::before,
.portal-error-visual::after {
  position: absolute;
  z-index: -1;
  content: "";
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
}

.portal-error-visual::before {
  right: -11rem;
  bottom: -10rem;
  width: 31rem;
  height: 31rem;
  box-shadow: 0 0 0 4rem rgba(255, 255, 255, .025), 0 0 0 8rem rgba(255, 255, 255, .015);
}

.portal-error-visual::after {
  top: 18%;
  left: -8rem;
  width: 16rem;
  height: 16rem;
}

.portal-error-brand {
  display: flex;
  position: relative;
  z-index: 1;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.portal-error-brand img {
  width: min(13rem, 58%);
  height: auto;
  filter: brightness(0) invert(1);
}

.portal-error-brand span {
  color: rgba(255, 255, 255, .56);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
}

.portal-error-code-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  justify-items: start;
}

.portal-error-code {
  color: rgba(255, 255, 255, .12);
  font-size: clamp(9rem, 20vw, 18rem);
  font-weight: 800;
  letter-spacing: -.09em;
  line-height: .72;
}

.portal-error-symbol {
  position: absolute;
  left: clamp(1.2rem, 5vw, 4rem);
  width: clamp(4.5rem, 9vw, 7rem);
  height: clamp(4.5rem, 9vw, 7rem);
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portal-error-system-state {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .65rem;
  color: rgba(255, 255, 255, .66);
  font-size: .68rem;
}

.portal-error-system-state span {
  width: .5rem;
  height: .5rem;
  background: #75df9a;
  box-shadow: 0 0 0 .3rem rgba(117, 223, 154, .13);
}

.portal-error-system-state p { margin: 0; }

.portal-error-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2rem, 6vw, 6rem);
  background:
    linear-gradient(rgba(40, 111, 183, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 111, 183, .025) 1px, transparent 1px),
    #f8fafc;
  background-size: 32px 32px;
}

.portal-error-content-inner {
  width: min(100%, 43rem);
  margin: auto 0;
}

.portal-error-eyebrow {
  margin: 0 0 .75rem;
  color: var(--medeed-blue);
  font-size: .67rem;
  font-weight: 750;
  letter-spacing: .13em;
}

.portal-error-content h1 {
  max-width: 39rem;
  margin: 0;
  color: var(--medeed-ink);
  font-size: clamp(2.2rem, 5vw, 4.15rem);
  font-weight: 750;
  letter-spacing: -.055em;
  line-height: 1.02;
}

.portal-error-description {
  max-width: 37rem;
  margin: 1.25rem 0 0;
  color: #56677a;
  font-size: clamp(.95rem, 1.6vw, 1.12rem);
  line-height: 1.72;
}

.portal-error-guidance {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .8rem;
  margin-top: 2rem;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--medeed-blue);
  background: rgba(40, 111, 183, .065);
}

.portal-error-guidance svg,
.portal-error-actions svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portal-error-guidance svg { margin-top: .08rem; color: var(--medeed-blue); }
.portal-error-guidance p { margin: 0; color: #43566a; font-size: .78rem; line-height: 1.65; }

.portal-error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1.75rem;
}

.portal-error-actions .btn {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: .55rem;
  padding-inline: 1rem;
  font-weight: 650;
}

.portal-error-support {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid #dfe7ef;
}

.portal-error-support strong,
.portal-error-support span { display: block; }
.portal-error-support strong { color: #2d4055; font-size: .72rem; }
.portal-error-support span { margin-top: .25rem; color: #758497; font-size: .65rem; }
.portal-error-support code { max-width: 17rem; padding: .45rem .55rem; overflow: hidden; color: #516276; background: #edf2f7; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }

.portal-error-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  color: #8794a3;
  font-size: .61rem;
}

@media (max-width: 899.98px) {
  .portal-error-shell { grid-template-columns: 1fr; }
  .portal-error-visual { min-height: 19rem; padding: 1.5rem; }
  .portal-error-code-wrap { justify-items: center; margin: 2.5rem 0; }
  .portal-error-code { font-size: clamp(8rem, 32vw, 13rem); }
  .portal-error-symbol { left: 50%; transform: translateX(-50%); }
  .portal-error-content { min-height: calc(100vh - 19rem); padding: 2rem 1.5rem; }
}

@media (max-width: 575.98px) {
  .portal-error-brand span { display: none; }
  .portal-error-content h1 { font-size: 2.15rem; }
  .portal-error-actions { align-items: stretch; flex-direction: column; }
  .portal-error-actions .btn { justify-content: center; width: 100%; }
  .portal-error-support { align-items: flex-start; flex-direction: column; }
  .portal-error-support code { max-width: 100%; }
  .portal-error-footer { flex-direction: column; }
}