/*
 * Hamasat BrandLook — management views only.
 * Load this file after the existing application styles.  The :has() scope is
 * intentional: employees and the home screen retain the established design.
 */
:root {
  --hm-graphite: #29282b;
  --hm-graphite-2: #363438;
  --hm-paper: #fff;
  --hm-canvas: #faf9f7;
  --hm-ink: #343036;
  --hm-muted: #746f70;
  --hm-line: #e8e4de;
  --hm-coral: #e52d4f;
  --hm-coral-soft: #fff0f1;
  --hm-warm: #fff8ed;
}

/* Login cards are part of each management route, but not the employee route. */
body:has(#adminLoginView:not(.hidden)) #adminLoginView,
body:has(#supervisorLoginView:not(.hidden)) #supervisorLoginView {
  max-width: 480px;
  margin: 8vh auto;
  border: 1px solid var(--hm-line);
  border-top: 4px solid var(--hm-coral);
  border-radius: 14px;
  background: var(--hm-paper);
  box-shadow: 0 12px 35px rgb(41 40 43 / 10%);
}

body:has(#adminLoginView:not(.hidden)) #adminLoginView h2,
body:has(#supervisorLoginView:not(.hidden)) #supervisorLoginView h2 {
  color: var(--hm-ink);
}
.management-login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 25px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hm-line);
  color: var(--hm-ink);
}
.management-login-brand img { width: 42px; height: 48px; object-fit: contain; }
.management-login-brand small { display: block; font-size: 11px; font-weight: 400; color: var(--hm-muted); }

/* Authenticated admin and supervisor sessions share #adminView in ui.html. */
body:has(#adminView:not(.hidden)) .container { max-width: none; padding: 0; }
body:has(#adminView:not(.hidden)) #adminView {
  --hm-view-pad: clamp(12px, 3vw, 34px);
  max-width: 1440px;
  min-height: calc(100vh - 20px);
  margin: 0 auto;
  padding: var(--hm-view-pad);
  background: var(--hm-canvas);
  color: var(--hm-ink);
  font-family: Tajawal, Arial, Tahoma, sans-serif;
}

body:has(#adminView:not(.hidden)) #adminView > .card:first-child {
  position: sticky;
  top: 0;
  z-index: 3;
  float: right;
  width: 222px;
  min-height: calc(100vh - (var(--hm-view-pad) * 2));
  margin: 0 24px 0 28px;
  padding: 22px 12px;
  border: 0;
  border-radius: 14px;
  background: var(--hm-graphite);
  box-shadow: 0 8px 22px rgb(41 40 43 / 15%);
}

body:has(#adminView:not(.hidden)) #adminView > .card:first-child .toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  margin: 0;
}
.management-brand { display: flex; align-items: center; gap: 8px; margin: 2px 8px 26px; color: #fff; }
.management-brand img { width: 38px; height: 44px; object-fit: contain; }
.management-brand strong { display: block; font-size: 20px; }
.management-brand small { display: block; font-size: 11px; color: #ccc4c5; }
.management-label { margin: 0 8px 10px; color: #bbb4b6; font-size: 12px; }

body:has(#adminView:not(.hidden)) #adminView > .card:first-child .tab,
body:has(#adminView:not(.hidden)) #adminView > .card:first-child .danger {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 9px;
  text-align: right;
  background: transparent;
  color: #d8d5d2;
  font-weight: 500;
}

body:has(#adminView:not(.hidden)) #adminView > .card:first-child .tab:hover {
  background: var(--hm-graphite-2);
  color: #fff;
}

body:has(#adminView:not(.hidden)) #adminView > .card:first-child .tab.active {
  background: var(--hm-paper);
  color: var(--hm-coral);
}

body:has(#adminView:not(.hidden)) #adminView > .card:first-child .danger {
  margin-top: auto;
  background: transparent;
  color: #f2b7bf;
}

body:has(#adminView:not(.hidden)) #adminView > .admin-tab,
body:has(#adminView:not(.hidden)) #adminView > #commissionPayments {
  overflow: hidden;
  min-width: 0;
  margin-bottom: 16px;
  padding: clamp(16px, 2.5vw, 24px);
  border: 1px solid var(--hm-line);
  border-radius: 14px;
  background: var(--hm-paper);
  box-shadow: 0 2px 10px rgb(41 40 43 / 5%);
}

body:has(#adminView:not(.hidden)) #adminView > .admin-tab:not(.hidden) {
  min-height: 500px;
}

body:has(#adminView:not(.hidden)) #adminView h2,
body:has(#adminView:not(.hidden)) #adminView h3 {
  color: var(--hm-ink);
  font-weight: 700;
}

body:has(#adminView:not(.hidden)) #adminView label {
  color: var(--hm-muted);
  font-weight: 500;
}

body:has(#adminView:not(.hidden)) #adminView input,
body:has(#adminView:not(.hidden)) #adminView select,
body:has(#adminView:not(.hidden)) #adminView textarea {
  min-width: 0;
  border-color: var(--hm-line);
  border-radius: 8px;
  background: var(--hm-paper);
  color: var(--hm-ink);
  font-family: inherit;
}

body:has(#adminView:not(.hidden)) #adminView button {
  font-family: inherit;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

body:has(#adminView:not(.hidden)) #adminView .btn,
body:has(#adminView:not(.hidden)) #adminView .success {
  background: var(--hm-coral);
  color: #fff;
}

body:has(#adminView:not(.hidden)) #adminView .btn:hover,
body:has(#adminView:not(.hidden)) #adminView .success:hover {
  background: #c92343;
}

body:has(#adminView:not(.hidden)) #adminView .btn2 {
  background: #f5f3f0;
  color: #555154;
}

body:has(#adminView:not(.hidden)) #adminView .notice {
  border: 1px solid #f0dfbd;
  background: var(--hm-warm);
  color: #7b5b3f;
}

body:has(#adminView:not(.hidden)) #adminView .stat {
  border-color: var(--hm-line);
  border-radius: 11px;
  background: var(--hm-paper);
  text-align: right;
}

body:has(#adminView:not(.hidden)) #adminView .stat strong {
  color: var(--hm-coral);
}

body:has(#adminView:not(.hidden)) #adminView details {
  border-color: var(--hm-line);
  border-radius: 10px;
}

body:has(#adminView:not(.hidden)) #adminView summary {
  color: var(--hm-ink);
}

body:has(#adminView:not(.hidden)) #adminView th {
  background: #f7f5f1;
  color: #555154;
}

body:has(#adminView:not(.hidden)) #adminView th,
body:has(#adminView:not(.hidden)) #adminView td {
  border-bottom-color: var(--hm-line);
}

body:has(#adminView:not(.hidden)) #adminView .table-wrap {
  scrollbar-color: var(--hm-coral) #f4f1ed;
}

@media (max-width: 850px) {
  body:has(#adminView:not(.hidden)) #adminView {
    padding: 10px;
  }

  body:has(#adminView:not(.hidden)) #adminView > .card:first-child {
    position: static;
    float: none;
    width: auto;
    min-height: 0;
    margin: 0 0 12px;
    padding: 9px;
  }
  .management-brand { display: inline-flex; margin: 0 12px 8px; }
  .management-brand img { width: 25px; height: 30px; }
  .management-brand strong { font-size: 14px; }
  .management-brand small { display: none; }
  .management-label { display: block; margin: 0 12px 8px; color: #bbb4b6; font-size: 12px; }

  body:has(#adminView:not(.hidden)) #adminView > .card:first-child .toolbar {
    flex-direction: row;
    overflow-x: auto;
    align-items: stretch;
  }

  body:has(#adminView:not(.hidden)) #adminView > .card:first-child .tab,
  body:has(#adminView:not(.hidden)) #adminView > .card:first-child .danger {
    width: auto;
    flex: 0 0 auto;
    text-align: center;
    white-space: nowrap;
  }

  body:has(#adminView:not(.hidden)) #adminView > .card:first-child .danger {
    margin-top: 0;
  }
}

@media (max-width: 600px) {
  body:has(#adminView:not(.hidden)) #adminView > .admin-tab,
  body:has(#adminView:not(.hidden)) #adminView > #commissionPayments {
    padding: 14px;
  }
}

/* Approved BrandLook interior hierarchy: a graphite navigation rail, quiet
   workspace canvas, and information-dense panels. The original admin-tab
   IDs, tables, controls and inline handlers are intentionally preserved. */
body:has(#adminView:not(.hidden)) #adminView {
  background:
    radial-gradient(circle at 88% 0%, rgba(229,45,79,.045), transparent 24rem),
    var(--hm-canvas);
}
body:has(#adminView:not(.hidden)) #admin-dashboard {
  border: 0;
  background: transparent;
  box-shadow: none;
}
body:has(#adminView:not(.hidden)) #admin-dashboard > .grid2 > details,
body:has(#adminView:not(.hidden)) #admin-dashboard > details {
  border: 1px solid var(--hm-line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
body:has(#adminView:not(.hidden)) #admin-dashboard details > summary {
  background: #fff;
}
body:has(#adminView:not(.hidden)) #adminView > .management-rail {
  display: flex;
  flex-direction: column;
}
body:has(#adminView:not(.hidden)) #adminView > .management-rail .toolbar {
  flex: 1;
}
body:has(#adminView:not(.hidden)) #adminView > .management-rail .danger {
  margin-top: auto;
}
.management-page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hm-line);
}
.management-page-heading h1 {
  margin: 0;
  color: var(--hm-ink);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.2;
}
.management-page-heading p { margin: 8px 0 0; color: var(--hm-muted); }
.update-pill {
  flex: 0 0 auto;
  padding: 9px 12px;
  border-radius: 999px;
  background: #f5f3f0;
  color: var(--hm-muted);
  font-size: 12px;
  font-weight: 700;
}
body:has(#adminView:not(.hidden)) #adminView > .admin-tab > h2 {
  margin-bottom: 22px;
  font-size: clamp(22px, 2.4vw, 28px);
}
body:has(#adminView:not(.hidden)) #adminView > .admin-tab details {
  margin-top: 14px;
  background: #fff;
}
body:has(#adminView:not(.hidden)) #adminView > .admin-tab details > summary {
  padding: 13px 14px;
  border-radius: 9px;
  background: #f7f5f1;
}
body:has(#adminView:not(.hidden)) #adminView > .admin-tab .stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 20px 0;
}
body:has(#adminView:not(.hidden)) #admin-dashboard > h2 {
  margin: 0;
  color: #8c8585 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .03em;
}
body:has(#adminView:not(.hidden)) #admin-dashboard .stats {
  margin-top: 10px;
  margin-bottom: 14px;
}
body:has(#adminView:not(.hidden)) #admin-dashboard .dashboard-live-strips {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
body:has(#adminView:not(.hidden)) #admin-dashboard .dashboard-live-strips .notice {
  min-height: 0;
  margin: 0;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.55;
}
body:has(#adminView:not(.hidden)) #admin-dashboard > .grid2 {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 14px;
  align-items: start;
}
body:has(#adminView:not(.hidden)) #admin-dashboard > .grid2 > details {
  min-width: 0;
  margin-top: 0;
}
body:has(#adminView:not(.hidden)) #adminView > .admin-tab .stat {
  min-height: 108px;
  padding: 17px;
}
body:has(#adminView:not(.hidden)) #adminView > .admin-tab .stat strong {
  font-size: 29px;
}
body:has(#adminView:not(.hidden)) #adminView > .admin-tab .grid2,
body:has(#adminView:not(.hidden)) #adminView > .admin-tab .grid3 {
  align-items: start;
}
body:has(#adminView:not(.hidden)) #adminView > .admin-tab input:focus,
body:has(#adminView:not(.hidden)) #adminView > .admin-tab select:focus,
body:has(#adminView:not(.hidden)) #adminView > .admin-tab textarea:focus {
  border-color: var(--hm-coral);
  box-shadow: 0 0 0 3px rgba(229,45,79,.1);
  outline: 0;
}
body:has(#adminView:not(.hidden)) #adminView > .admin-tab .table-wrap {
  border: 1px solid var(--hm-line);
  border-radius: 10px;
  background: #fff;
}
body:has(#adminView:not(.hidden)) #adminView > .admin-tab table { margin-top: 0; }
body:has(#adminView:not(.hidden)) #adminView > .admin-tab th {
  padding-top: 13px;
  padding-bottom: 13px;
  white-space: nowrap;
}
body:has(#adminView:not(.hidden)) #adminView > .admin-tab td {
  min-height: 52px;
}

@media (max-width: 850px) {
  .management-page-heading { margin-bottom: 18px; padding-bottom: 16px; }
  .management-page-heading h1 { font-size: 25px; }
  .update-pill { font-size: 11px; }
  body:has(#adminView:not(.hidden)) #adminView > .admin-tab .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .management-page-heading { display: block; }
  .update-pill { display: inline-block; margin-top: 12px; }
  body:has(#adminView:not(.hidden)) #adminView > .admin-tab .stats {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  body:has(#adminView:not(.hidden)) #adminView > .admin-tab .stat {
    min-height: 92px;
    padding: 13px 11px;
    font-size: 12px;
  }
  body:has(#adminView:not(.hidden)) #adminView > .admin-tab .stat strong { font-size: 22px; }
  body:has(#adminView:not(.hidden)) #admin-dashboard .dashboard-live-strips,
  body:has(#adminView:not(.hidden)) #admin-dashboard > .grid2 {
    grid-template-columns: 1fr;
  }
}

/* Final interior frame: the authenticated workspace owns the viewport. The
   public shell and its old notification strip stay available everywhere else. */
body:has(#adminView:not(.hidden)) {
  background: var(--hm-canvas);
  overflow-x: hidden;
}
body:has(#adminView:not(.hidden)) > .header,
body:has(#adminView:not(.hidden)) #notificationBar {
  display: none !important;
}
body:has(#adminView:not(.hidden)) .container {
  max-width: none;
  padding: 0;
  margin: 0;
}
body:has(#adminView:not(.hidden)) #adminView {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  grid-template-rows: 74px auto;
  grid-template-areas:
    "rail topbar"
    "rail workspace";
  gap: 0;
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  padding: 0 0 0 0;
  margin: 0;
  background: var(--hm-canvas);
}
body:has(#adminView:not(.hidden)) #adminView > .management-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 0 clamp(18px, 3.4vw, 46px);
  background: var(--hm-paper);
  border-bottom: 1px solid var(--hm-line);
}
.management-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #a39a98;
  font-size: 12px;
}
.management-breadcrumb b { color: #c8c0bd; font-size: 19px; font-weight: 400; }
.management-breadcrumb strong { color: var(--hm-ink); font-weight: 700; }
.management-topbar-actions { display:flex; align-items:center; gap:20px; }
.management-notification-button {
  position: relative;
  width: 34px; height: 34px; padding: 0;
  border: 0; background: transparent; color: #746d6d;
  font-size: 22px; cursor: pointer;
}
.management-notification-button i {
  position:absolute; top:5px; right:4px; width:7px; height:7px;
  border-radius:50%; background:var(--hm-coral); border:1px solid var(--hm-paper);
}
.management-user { display:flex; align-items:center; gap:9px; }
.management-user-avatar {
  display:grid; place-items:center; width:35px; height:35px; border-radius:50%;
  background:#eeeae5; color:var(--hm-coral); font-weight:700;
}
.management-user strong,.management-user small { display:block; }
.management-user strong { font-size:12px; }
.management-user small { color:var(--hm-muted); font-size:10px; margin-top:2px; }
body:has(#adminView:not(.hidden)) #adminView > .management-rail {
  grid-area: rail;
  position: static;
  float: none;
  width: auto;
  min-height: 100dvh;
  margin: 0;
  padding: 27px 16px 20px;
  border-radius: 0;
  background: var(--hm-graphite);
  box-shadow: none;
  z-index: 2;
}
body:has(#adminView:not(.hidden)) #adminView > .management-rail .toolbar {
  flex: 1;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap: 5px;
  margin: 0;
}
body:has(#adminView:not(.hidden)) #adminView > .management-rail .danger { margin-top:auto; }
body:has(#adminView:not(.hidden)) #adminView > .admin-tab,
body:has(#adminView:not(.hidden)) #adminView > #commissionPayments {
  grid-column: 2;
  width: auto;
  max-width: 1200px;
  margin: 0 auto 16px;
  padding: clamp(20px, 2.5vw, 34px) clamp(18px, 3.4vw, 46px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body:has(#adminView:not(.hidden)) #adminView > #admin-dashboard {
  grid-area: workspace;
  min-width: 0;
  overflow: auto;
}
body:has(#adminView:not(.hidden)) #adminView > .admin-tab:not(#admin-dashboard),
body:has(#adminView:not(.hidden)) #adminView > #commissionPayments {
  grid-row: 2;
  align-self: start;
  width: 100%;
}
body:has(#adminView:not(.hidden)) #adminView > #commissionPayments {
  grid-row: 3;
}
body:has(#adminView:not(.hidden)) #admin-dashboard .management-page-heading {
  margin: 0 0 23px;
  padding: 0;
  border: 0;
}
body:has(#adminView:not(.hidden)) #admin-dashboard .management-page-heading h1 {
  font-size: clamp(25px, 2.4vw, 32px);
  letter-spacing: -.4px;
}
body:has(#adminView:not(.hidden)) #admin-dashboard > h2 {
  margin-bottom: 10px;
}
body:has(#adminView:not(.hidden)) #admin-dashboard > .stats {
  gap: 12px;
  margin: 0 0 14px;
}
body:has(#adminView:not(.hidden)) #admin-dashboard > .stats .stat {
  min-height: 110px;
  border-radius: 12px;
  padding: 17px;
}
body:has(#adminView:not(.hidden)) #admin-dashboard > .grid2 > details,
body:has(#adminView:not(.hidden)) #admin-dashboard > details {
  box-shadow: 0 2px 9px rgb(41 40 43 / 5%);
}
body:has(#adminView:not(.hidden)) #admin-dashboard .dashboard-live-strips {
  display: block;
}
body:has(#adminView:not(.hidden)) #admin-dashboard .dashboard-operational-summary {
  margin: 14px 0;
  padding: 11px 14px;
  font-size: 12px;
}
.management-topbar-navigation {
  display: flex;
  align-items: center;
  gap: 12px;
}
.management-menu-toggle {
  display: none;
}
body:has(#adminView:not(.hidden)) #adminView > .management-rail .tab,
body:has(#adminView:not(.hidden)) #adminView > .management-rail .danger {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 9px;
  text-align: right;
  background: transparent;
  color: #d8d5d2;
  font-weight: 500;
}
body:has(#adminView:not(.hidden)) #adminView > .management-rail .tab:hover {
  background: var(--hm-graphite-2);
  color: #fff;
}
body:has(#adminView:not(.hidden)) #adminView > .management-rail .tab.active {
  background: #fff;
  color: var(--hm-coral);
}
body:has(#adminView:not(.hidden)) #adminView > .management-rail .danger {
  margin-top: auto;
  color: #f2b7bf;
}

@media (max-width: 850px) {
  body:has(#adminView:not(.hidden)) #adminView {
    display:block;
    min-height:100dvh;
    padding: 0;
  }
  body:has(#adminView:not(.hidden)) #adminView > .management-topbar {
    height:64px;
    padding:0 14px;
  }
  body:has(#adminView:not(.hidden)) #adminView > .management-rail {
    display: none;
    min-height: 0;
    padding: 9px;
    border-radius: 0;
  }
  body:has(#adminView:not(.hidden)) #adminView > .management-rail.mobile-open {
    display: flex;
  }
  body:has(#adminView:not(.hidden)) #adminView > .management-rail.mobile-open .toolbar {
    flex-direction: column;
  }
  body:has(#adminView:not(.hidden)) #adminView > .management-rail.mobile-open .danger {
    margin-top: 0;
  }
  body:has(#adminView:not(.hidden)) #adminView .management-menu-toggle {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--hm-graphite);
    font-size: 22px;
    cursor: pointer;
  }
  body:has(#adminView:not(.hidden)) #adminView > #admin-dashboard,
  body:has(#adminView:not(.hidden)) #adminView > .admin-tab,
  body:has(#adminView:not(.hidden)) #adminView > #commissionPayments {
    display:block;
    padding: 20px 14px 30px;
    margin:0;
  }
  body:has(#adminView:not(.hidden)) #adminView > .admin-tab.hidden,
  body:has(#adminView:not(.hidden)) #adminView > #commissionPayments.hidden { display:none; }
  .management-topbar-actions { gap:8px; }
  .management-user span:last-child { display:none; }
}
@media (max-width: 420px) {
  .management-breadcrumb { font-size:11px; }
  .management-user-avatar { width:31px; height:31px; }
}

/* Graduated dashboard composition from admin/supervisor Proposed + BrandLook.
   The older management forms retain their original controls and IDs. */
body:has(#adminView:not(.hidden)) #adminView { --ink:#29282b;--muted:#6f6d70;--line:#e7e5e2;--paper:#fff;--canvas:#faf9f7;--coral:#e52d4f;--plum:#29282b;--sage:#6f8c80;--gold:#bd8b43;grid-template-columns:242px minmax(0,1fr);grid-template-rows:78px auto;background:var(--canvas);color:var(--ink)}
body:has(#adminView:not(.hidden)) #adminView > .management-topbar {padding:0 38px}
body:has(#adminView:not(.hidden)) #adminView > .management-rail {padding:27px 17px 20px;background:#29282b;color:#fff8fa}
body:has(#adminView:not(.hidden)) .management-brand {gap:11px;margin:0;padding:0 9px 32px}
body:has(#adminView:not(.hidden)) .management-brand img {width:40px;height:48px}
body:has(#adminView:not(.hidden)) .management-brand strong {font-size:23px;line-height:1}
body:has(#adminView:not(.hidden)) .management-brand small {color:#d5d0ca;font-size:11px;margin-top:5px}
body:has(#adminView:not(.hidden)) .management-label {color:#bbb4b6;font-size:11px;font-weight:700;margin:0;padding:0 13px 10px}
body:has(#adminView:not(.hidden)) #adminView > .management-rail .tab {min-height:44px;padding:12px 13px;border-radius:11px;color:#d8d5d2;font:500 14px Tajawal,Arial,sans-serif}
body:has(#adminView:not(.hidden)) #adminView > .management-rail .tab {display:flex;align-items:center;gap:12px}
body:has(#adminView:not(.hidden)) #adminView > .management-rail .tab svg {flex:none}
body:has(#adminView:not(.hidden)) #adminView > .management-rail .tab.active::after {content:"";width:6px;height:6px;border-radius:50%;background:#e52d4f;margin-right:auto}
body:has(#adminView:not(.hidden)) .management-mobile-mark {display:none}
body:has(#adminView:not(.hidden)) #adminView > .management-rail .tab.active {background:#fff;color:#e52d4f}
body:has(#adminView:not(.hidden)) #adminView > .management-rail .danger {font:500 13px Tajawal,Arial,sans-serif}
body:has(#adminView:not(.hidden)) #adminView > #admin-dashboard {max-width:1200px;width:100%;padding:33px 38px 50px;overflow:visible}
body:has(#adminView:not(.hidden)) #admin-dashboard .management-page-heading {display:flex;align-items:flex-end;justify-content:space-between;margin:0 0 27px;padding:0;border:0}
body:has(#adminView:not(.hidden)) #admin-dashboard .section-kicker {font-size:11px;color:#e52d4f;font-weight:700;letter-spacing:.2px;margin-bottom:7px}
body:has(#adminView:not(.hidden)) #admin-dashboard .management-page-heading h1 {font-size:27px;letter-spacing:-.5px;line-height:1.2;margin:0 0 4px;font-weight:700}
body:has(#adminView:not(.hidden)) #admin-dashboard .management-page-heading p {margin:0;color:var(--muted);font-size:13px}
body:has(#adminView:not(.hidden)) #admin-dashboard .update-pill {font-size:11px;color:var(--muted);border:1px solid var(--line);background:var(--paper);padding:10px 13px;border-radius:9px;font-weight:400}
body:has(#adminView:not(.hidden)) #admin-dashboard .update-pill b {color:var(--ink);margin-right:5px}
body:has(#adminView:not(.hidden)) #admin-dashboard .hm-metrics {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 14px}
body:has(#adminView:not(.hidden)) #admin-dashboard .hm-metric {min-height:0;padding:16px 17px;display:flex;gap:12px;align-items:flex-start;text-align:right;border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:0 2px 9px #29282b12;font-size:11px}
body:has(#adminView:not(.hidden)) #admin-dashboard .hm-metric-mark {width:4px;height:40px;border-radius:4px;flex-shrink:0}
#admin-dashboard .hm-metric-mark.coral,#admin-dashboard .hm-alert-dot.coral {background:#e52d4f}
#admin-dashboard .hm-metric-mark.plum {background:#29282b}
#admin-dashboard .hm-metric-mark.gold,#admin-dashboard .hm-alert-dot.gold {background:#bd8b43}
#admin-dashboard .hm-metric-mark.sage,#admin-dashboard .hm-alert-dot.sage {background:#6f8c80}
body:has(#adminView:not(.hidden)) #admin-dashboard .hm-metric span,body:has(#adminView:not(.hidden)) #admin-dashboard .hm-metric small {display:block;color:var(--muted);font-size:11px}
body:has(#adminView:not(.hidden)) #admin-dashboard .hm-metric strong {display:block;color:var(--ink);font-size:22px;line-height:1.2;margin:5px 0 4px;direction:rtl}
body:has(#adminView:not(.hidden)) #adminView > #admin-dashboard .hm-metric {min-height:0}
body:has(#adminView:not(.hidden)) #adminView > #admin-dashboard .hm-metric strong {color:#29282b;font-size:22px}
body:has(#adminView:not(.hidden)) #admin-dashboard .hm-metric small {font-size:10px;color:#e52d4f}
body:has(#adminView:not(.hidden)) #admin-dashboard .dashboard-live-strips {margin:0 0 15px}
body:has(#adminView:not(.hidden)) #admin-dashboard .hm-notice-strip {display:flex;align-items:center;gap:11px;background:#fff8ed;border:1px solid #f0dfbd;color:#7b5b3f;border-radius:11px;padding:11px 14px;margin:0}
#admin-dashboard .hm-notice-icon {width:31px;height:31px;border-radius:9px;background:#fff0f1;color:#e52d4f;display:grid;place-items:center;flex-shrink:0}
#admin-dashboard .hm-notice-strip > div {flex:1;font-size:12px}
#admin-dashboard .hm-notice-strip b {margin-left:10px}
#admin-dashboard .hm-notice-arrow {background:transparent;color:#7b5b3f;padding:3px;font-size:20px}
#admin-dashboard .hm-main-grid,#admin-dashboard .hm-bottom-grid {display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:15px;margin-bottom:15px}
#admin-dashboard .hm-bottom-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
#admin-dashboard .hm-section {background:#fff;border:1px solid #e7e5e2;border-radius:13px;padding:19px;box-shadow:0 2px 9px #29282b0a;min-width:0}
#admin-dashboard .hm-section-heading {display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
#admin-dashboard .hm-kicker {font-size:11px;color:#e52d4f;font-weight:700;letter-spacing:.2px;display:block;margin-bottom:7px}
#admin-dashboard .hm-section h2 {font-size:17px;margin:0;font-weight:700;color:#29282b}
#admin-dashboard .hm-text-action {display:flex;align-items:center;gap:2px;border:0;background:transparent;color:#e52d4f;font:500 11px Tajawal;cursor:pointer;padding:0;min-height:0}
#admin-dashboard .hm-table-shell {overflow:auto;border:0;border-radius:0}
#admin-dashboard .hm-table {width:100%;border-collapse:collapse;font-size:11px;white-space:nowrap;margin:0}
#admin-dashboard .hm-table th {text-align:right;color:#e52d4f;background:#fff;font-size:10px;font-weight:500;padding:7px 6px;border-bottom:1px solid #e7e5e2}
#admin-dashboard .hm-table td {padding:11px 6px;border-bottom:1px solid #f1eaeb;vertical-align:middle}
#admin-dashboard .hm-table tr:last-child td {border-bottom:0}
#admin-dashboard .hm-person {display:flex;align-items:center;gap:8px}
#admin-dashboard .hm-person b,#admin-dashboard .hm-person small {display:block}
#admin-dashboard .hm-person b {font-weight:700}
#admin-dashboard .hm-person small {font-size:9px;color:#6f6d70;margin-top:2px}
#admin-dashboard .hm-avatar {width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:#fff0f1;color:#e52d4f;font-size:12px;font-weight:700;flex:none}
#admin-dashboard .hm-money {font-weight:700;direction:rtl}
#admin-dashboard .hm-progress-line {display:flex;align-items:center;gap:6px;min-width:95px}
#admin-dashboard .hm-progress-line i {display:block;height:5px;border-radius:4px;background:#e52d4f;min-width:0}
#admin-dashboard .hm-progress-line span {font-size:10px;color:#e52d4f}
#admin-dashboard .hm-soft-tag {background:#f5f3f0;color:#555154;padding:4px 7px;border-radius:5px;font-size:10px}
#admin-dashboard .hm-status {color:#6f8c80;font-size:10px}
#admin-dashboard .hm-status.watch {color:#b17b43}
#admin-dashboard .hm-count {background:#fff0f1;color:#e52d4f;font-size:11px;padding:4px 8px;border-radius:12px}
#admin-dashboard .hm-alert {display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #f1eaeb}
#admin-dashboard .hm-alert:last-child {border:0}
#admin-dashboard .hm-alert > div {flex:1}
#admin-dashboard .hm-alert b,#admin-dashboard .hm-alert small {display:block}
#admin-dashboard .hm-alert b {font-size:11px;font-weight:700}
#admin-dashboard .hm-alert small {font-size:10px;color:#6f6d70;margin-top:3px}
#admin-dashboard .hm-alert-dot {width:8px;height:8px;border-radius:50%;flex:none}
#admin-dashboard .hm-month,#admin-dashboard .hm-readonly {border:1px solid #e7e5e2;background:#fff;color:#e52d4f;border-radius:7px;padding:7px 9px;font:500 10px Tajawal}
#admin-dashboard .hm-readonly {background:#f5f3f0;color:#555154;border:0}
#admin-dashboard .hm-target-summary > strong {display:block;font-size:28px;color:#29282b;line-height:1.1}
#admin-dashboard .hm-target-summary > span {display:block;color:#6f6d70;font-size:10px;margin:5px 0 11px}
#admin-dashboard .hm-big-progress {height:6px;background:#eae5df;border-radius:5px}
#admin-dashboard .hm-big-progress i {display:block;height:6px;border-radius:5px;background:#e52d4f}
#admin-dashboard .hm-target-summary > small {display:block;color:#e52d4f;font-size:10px;margin-top:7px}
#admin-dashboard .hm-target-row {border-top:1px solid #e7e5e2;margin-top:15px;padding-top:13px;display:flex;align-items:center;gap:8px;font-size:10px}
#admin-dashboard .hm-target-row span {color:#6f6d70;margin-left:auto}
#admin-dashboard .hm-target-row b {font-size:11px}
#admin-dashboard .hm-target-row strong {color:#29282b}
#admin-dashboard .hm-lock {margin-top:15px;padding-top:12px;border-top:1px solid #e7e5e2;font-size:10px;color:#e52d4f;display:flex;align-items:center;gap:6px}
#admin-dashboard .hm-auxiliary {border:1px solid #e7e5e2;border-radius:10px;background:#fff;padding:8px 12px;margin:12px 0}
@media(max-width:850px) {
  body:has(#adminView:not(.hidden)) #adminView {display:block}
  body:has(#adminView:not(.hidden)) .management-mobile-mark {display:block;width:25px;height:29px;object-fit:contain}
  body:has(#adminView:not(.hidden)) #adminView > .management-topbar {height:64px;padding:0 17px}
  body:has(#adminView:not(.hidden)) #adminView > .management-rail {display:none}
  body:has(#adminView:not(.hidden)) #adminView > .management-rail.mobile-open {display:flex;position:fixed;right:0;top:0;bottom:0;z-index:10;width:242px;min-height:100dvh}
  body:has(#adminView:not(.hidden)) #adminView > #admin-dashboard {padding:25px 17px 35px}
  #admin-dashboard .hm-metrics {grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #admin-dashboard .hm-main-grid,#admin-dashboard .hm-bottom-grid {grid-template-columns:1fr}
  #admin-dashboard .update-pill {display:none}
}
@media(max-width:480px) {
  body:has(#adminView:not(.hidden)) #adminView > #admin-dashboard {padding:22px 12px 30px}
  body:has(#adminView:not(.hidden)) #admin-dashboard .management-page-heading {margin-bottom:20px}
  body:has(#adminView:not(.hidden)) #admin-dashboard .management-page-heading h1 {font-size:22px}
  body:has(#adminView:not(.hidden)) #admin-dashboard .management-page-heading p {font-size:12px}
  body:has(#adminView:not(.hidden)) #admin-dashboard .hm-metrics {gap:8px}
  body:has(#adminView:not(.hidden)) #admin-dashboard .hm-metric {padding:13px 11px;gap:8px}
  body:has(#adminView:not(.hidden)) #adminView > #admin-dashboard .hm-metric strong {font-size:18px}
  body:has(#adminView:not(.hidden)) #admin-dashboard .hm-metric small {font-size:9px}
  #admin-dashboard .hm-section {padding:15px 12px}
  #admin-dashboard .hm-section h2 {font-size:15px}
  #admin-dashboard .hm-table {font-size:10px}
  #admin-dashboard .hm-table th {font-size:9px}
  #admin-dashboard .hm-person small {display:none}
  #admin-dashboard .hm-progress-line {min-width:70px}
}

/* The existing role-gated employees navigation button is hidden only for
   supervisors. Match that approved view's lighter headings without changing
   the manager's bold hierarchy or the KPI number weight. */
body:has(#adminView:not(.hidden)) #adminView:has(#managementNav [data-admin-tab="employees"].hidden) #admin-dashboard .management-page-heading h1 {
  font-weight:400;
}
body:has(#adminView:not(.hidden)) #adminView:has(#managementNav [data-admin-tab="employees"].hidden) #admin-dashboard .hm-section h2 {
  font-weight:400;
}