@import url("assets/vendor/fonts/google-fonts.css");

:root {
  --navy: #071a34;
  --navy-2: #102845;
  --purple: #62439f;
  --purple-soft: #f1edfa;
  --teal: #14aeb9;
  --green: #16a36a;
  --amber: #d89016;
  --red: #d34d55;
  --blue: #3478c5;
  --bg: #f5f7fb;
  --surface: #fff;
  --text: #10213b;
  --muted: #748096;
  --line: #e5e9f1;
  --shadow: 0 14px 36px rgba(22, 34, 55, .07);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif; color: var(--text); background: var(--bg); letter-spacing: 0; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
svg { width: 20px; height: 20px; stroke-width: 1.8; }

.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  width: 100%;
}
.sidebar {
  position: fixed;
  z-index: 60;
  inset-block: 0;
  inset-inline-start: 0;
  height: 100dvh;
  max-height: 100vh;
  width: 282px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  color: #dfe9f5;
  background: var(--navy);
  border-inline-end: 1px solid rgba(255,255,255,.08);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-bottom: 10px;
}
.brand-row { min-height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-row img { display: block; width: 166px; max-height: 54px; object-fit: contain; object-position: right center; }
.icon-btn { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: #fff; cursor: pointer; }
.sidebar-close { display: none; color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
.account-summary { display: flex; align-items: center; gap: 12px; padding: 22px 20px 14px; }
.account-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--purple); font-weight: 800; }
.account-summary div:last-child { display: grid; gap: 3px; }
.account-summary strong { color: #fff; font-size: 15px; }
.account-summary span { color: #9db0c7; font-size: 12px; }
.subscription { margin: 0 18px 14px; padding: 13px; border-radius: 7px; background: rgba(255,255,255,.055); }
.subscription > div:first-child { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; }
.subscription strong { color: #fff; }
.subscription small { color: #8fa4bd; font-size: 10px; }
.subscription-details-button{width:100%;min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;padding:8px 2px 0;border:0;border-top:1px solid rgba(255,255,255,.14);color:#fff;background:transparent;font:inherit;font-size:11px;font-weight:800;cursor:pointer}.subscription-details-button:hover,.subscription-details-button:focus-visible{color:#6fe0e6;outline:none}.subscription-details-button svg{width:15px;height:15px;stroke-width:2.2;transform:rotate(180deg)}
.subscription-details-modal{position:fixed;inset:0;z-index:600;display:grid;place-items:center;padding:18px;background:rgba(7,26,52,.76)}.subscription-details-modal[hidden]{display:none}.subscription-details-dialog{width:min(760px,100%);max-height:calc(100vh - 36px);overflow:auto;border-radius:9px;background:#fff;box-shadow:0 28px 80px rgba(0,0,0,.3)}.subscription-details-dialog>header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:22px 24px;border-bottom:1px solid var(--line)}.subscription-details-dialog>header small{color:var(--purple);font-size:10px;font-weight:800}.subscription-details-dialog>header h2{margin:4px 0;font-size:22px}.subscription-details-dialog>header p{margin:0;color:var(--muted);font-size:11px}.subscription-details-dialog>header button{width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto;border:1px solid var(--line);border-radius:7px;background:#fff;font-size:27px;line-height:1;cursor:pointer}.subscription-plan-summary{display:grid;grid-template-columns:1fr 1.25fr;gap:12px;padding:20px 24px}.subscription-plan-summary>div{padding:17px;border:1px solid #ddd5ed;border-radius:8px;background:#faf8fd}.subscription-plan-summary>div:last-child{color:#fff;border-color:var(--purple);background:var(--purple)}.subscription-plan-summary span,.subscription-plan-summary strong{display:block}.subscription-plan-summary span{margin-bottom:5px;font-size:10px;opacity:.78}.subscription-plan-summary strong{font-size:17px}.subscription-billing-details{margin:0 24px 22px;border:1px solid var(--line);border-radius:8px;overflow:hidden}.subscription-billing-details summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;list-style:none;cursor:pointer;background:#fbfcfe}.subscription-billing-details summary::-webkit-details-marker{display:none}.subscription-billing-details summary strong,.subscription-billing-details summary small{display:block}.subscription-billing-details summary strong{font-size:13px}.subscription-billing-details summary small{margin-top:3px;color:var(--muted);font-size:9px}.subscription-billing-details summary b{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;color:var(--purple);background:var(--purple-soft);font-size:18px}.subscription-billing-details[open] summary b{transform:rotate(45deg)}.subscription-readonly-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;padding:1px;background:var(--line)}.subscription-readonly-grid>div{padding:13px 16px;background:#fff}.subscription-readonly-grid span,.subscription-readonly-grid strong{display:block}.subscription-readonly-grid span{margin-bottom:4px;color:var(--muted);font-size:9px}.subscription-readonly-grid strong{font-size:12px}.subscription-readonly-grid .paid{color:#087556}.subscription-details-dialog>footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-top:1px solid var(--line);background:#fafbfc}.subscription-details-dialog>footer p{margin:0;color:var(--muted);font-size:9px}.subscription-details-dialog>footer button{min-height:40px;padding:0 20px;border:0;border-radius:7px;color:#fff;background:var(--purple);font:inherit;font-size:10px;font-weight:800;cursor:pointer}.subscription-modal-open{overflow:hidden}
@media(max-width:600px){.subscription-details-modal{padding:0}.subscription-details-dialog{width:100%;max-height:100vh;border-radius:0}.subscription-details-dialog>header,.subscription-details-dialog>footer{padding:16px}.subscription-plan-summary{grid-template-columns:1fr;padding:15px 16px}.subscription-billing-details{margin:0 16px 16px}.subscription-readonly-grid{grid-template-columns:1fr}.subscription-details-dialog>footer{align-items:stretch;flex-direction:column}.subscription-details-dialog>footer button{width:100%}}
.progress { height: 4px; margin: 10px 0 7px; overflow: hidden; border-radius: 5px; background: rgba(255,255,255,.1); }
.progress span { display: block; width: 72%; height: 100%; background: var(--teal); }
.side-nav {
  display: grid;
  gap: 3px;
  padding: 4px 12px 22px;
  min-height: 0;
  flex: 1;
}
.nav-item {
  width: 100%;
  min-height: 45px;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 0 13px;
  color: #b9c8d8;
  font-size: 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  text-align: right;
  cursor: pointer;
}
.nav-item:hover, .nav-item.active { color: #fff; background: rgba(255,255,255,.08); }
.nav-item.active { box-shadow: inset -3px 0 var(--teal); }
.nav-item svg { width: 18px; height: 18px; }
.nav-item .chevron { width: 15px; transition: transform .2s ease; }
.nav-item[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.nav-children { display: grid; gap: 2px; padding: 2px 46px 5px 8px; }
.nav-children[hidden] { display: none; }
.nav-children a { position: relative; padding: 8px 8px; color: #93a7bd; font-size: 13px; }
.nav-children a:hover { color: #fff; }
.nav-children b { float: left; min-width: 20px; padding: 2px 6px; border-radius: 10px; color: #fff; background: var(--purple); font-size: 10px; text-align: center; }
.message-balance { margin: auto 18px 18px; min-height: 48px; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 7px; color: #aebed0; font-size: 12px; }
.message-balance strong { color: #fff; }

.workspace {
  min-height: 100vh;
  min-height: 100dvh;
  margin-inline-start: 282px;
  min-width: 0;
}
.topbar { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 30px; background: #fff; border-bottom: 1px solid var(--line); }
.topbar-start, .topbar-actions { display: flex; align-items: center; gap: 14px; }
.topbar-start p { margin: 0 0 3px; color: var(--muted); font-size: 12px; }
.topbar-start h1 { margin: 0; font-size: 19px; }
.menu-btn { display: none; }
.search-box { width: 280px; height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid var(--line); border-radius: 7px; background: #f9fafc; }
.search-box svg { color: var(--muted); width: 18px; }
.search-box input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); }
.has-alert { position: relative; }
.has-alert span { position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: var(--red); }
.profile-btn { height: 42px; display: flex; align-items: center; gap: 7px; padding: 0 9px; border: 0; background: transparent; cursor: pointer; }
.profile-btn span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--purple); font-weight: 800; }
.profile-btn svg { width: 15px; color: var(--muted); }
.topbar-menu-wrap{position:relative}.topbar-dropdown{position:absolute;z-index:80;top:calc(100% + 10px);inset-inline-end:0;width:min(390px,calc(100vw - 24px));overflow:hidden;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:0 18px 50px rgba(14,31,53,.18)}.topbar-dropdown[hidden]{display:none}.notifications-dropdown>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 15px;border-bottom:1px solid var(--line)}.notifications-dropdown>header strong,.notifications-dropdown>header small{display:block}.notifications-dropdown>header strong{font-size:12px}.notifications-dropdown>header small{margin-top:2px;color:var(--muted);font-size:8px}.notifications-dropdown>header button{border:0;color:var(--purple);background:none;font:inherit;font-size:8px;font-weight:800;cursor:pointer}.notification-preview{max-height:350px;overflow:auto}.notification-preview>a{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}.notification-preview>a:hover{background:#faf9fc}.notification-preview>a.unread{background:#f8f5fc}.notification-icon{width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;border-radius:7px}.notification-icon svg{width:17px}.notification-icon.purple{color:var(--purple);background:var(--purple-soft)}.notification-icon.teal{color:#087a6c;background:#e1f6f1}.notification-icon.amber{color:#96620b;background:#fff1d1}.notification-preview strong{font-size:9px}.notification-preview p{margin:3px 0;color:var(--muted);font-size:8px}.notification-preview time{color:#8d98a9;font-size:7px}.notifications-dropdown>footer a{height:43px;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--purple);text-decoration:none;font-size:9px;font-weight:800}.notifications-dropdown>footer svg{width:14px}.profile-dropdown{width:285px}.profile-dropdown>header{display:flex;align-items:center;gap:10px;padding:15px;border-bottom:1px solid var(--line);background:#faf9fc}.profile-dropdown>header>span{width:39px;height:39px;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--purple);font-weight:900}.profile-dropdown>header strong,.profile-dropdown>header small{display:block}.profile-dropdown>header strong{font-size:10px}.profile-dropdown>header small{margin-top:2px;color:var(--muted);font-size:8px}.profile-dropdown nav{padding:7px}.profile-dropdown nav a{display:flex;align-items:center;gap:10px;padding:10px;border-radius:6px;color:inherit;text-decoration:none}.profile-dropdown nav a:hover{background:#f5f2fa}.profile-dropdown nav>a>svg{width:18px;color:var(--purple)}.profile-dropdown nav strong,.profile-dropdown nav small{display:block}.profile-dropdown nav strong{font-size:9px}.profile-dropdown nav small{margin-top:2px;color:var(--muted);font-size:7px}.logout-button{width:calc(100% - 14px);height:40px;display:flex;align-items:center;justify-content:center;gap:7px;margin:0 7px 7px;border:1px solid #f0cdd2;border-radius:6px;color:#b42338;background:#fff6f7;font:inherit;font-size:9px;font-weight:800;cursor:pointer}.logout-button svg{width:16px}.has-alert[aria-expanded=true],.profile-btn[aria-expanded=true]{background:#f4effa}.profile-btn[aria-expanded=true]{border-radius:7px}
.logout-confirm-layer{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:18px;background:rgba(7,29,56,.72)}.logout-confirm-layer[hidden]{display:none}.logout-confirm-dialog{width:min(440px,100%);padding:24px;border-radius:9px;background:#fff;box-shadow:0 26px 70px rgba(0,0,0,.28);text-align:center}.logout-confirm-icon{width:54px;height:54px;display:grid;place-items:center;margin:0 auto 13px;border-radius:50%;color:#b42338;background:#fdebed}.logout-confirm-icon svg{width:23px}.logout-confirm-dialog small{color:#b42338;font-size:8px;font-weight:800}.logout-confirm-dialog h2{margin:5px 0 7px;font-size:19px}.logout-confirm-dialog p{margin:0;color:var(--muted);font-size:10px;line-height:1.8}.logout-confirm-dialog footer{display:grid;grid-template-columns:1fr 1.5fr;gap:8px;margin-top:20px}.logout-confirm-dialog footer button{min-height:42px;border:1px solid var(--line);border-radius:7px;background:#fff;font:inherit;font-size:9px;font-weight:800;cursor:pointer}.logout-confirm-dialog footer .confirm-logout{display:flex;align-items:center;justify-content:center;gap:7px;color:#fff;border-color:#b42338;background:#b42338}.logout-confirm-dialog footer svg{width:15px}

.dashboard {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: clamp(18px, 2.6vw, 30px) clamp(14px, 2.5vw, 28px) 50px;
}
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.eyebrow { display: inline-block; margin-bottom: 5px; color: var(--purple); font-size: 12px; font-weight: 800; }
.page-heading h2 { margin: 0 0 5px; font-size: 27px; }
.page-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.heading-actions { display: flex; gap: 10px; }
.btn { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border: 1px solid transparent; border-radius: 7px; font-weight: 700; cursor: pointer; }
.btn svg { width: 17px; }
.btn.primary { color: #fff; background: var(--purple); }
.btn.primary:hover { background: #503381; }
.btn.secondary { background: #fff; border-color: var(--line); }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-card { min-height: 176px; display: grid; grid-template-columns: auto 1fr; gap: 13px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 8px 24px rgba(22,34,55,.035); }
.stat-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 7px; }
.stat-card.present .stat-icon { color: var(--green); background: #e8f7f0; }
.stat-card.late .stat-icon { color: var(--amber); background: #fff5df; }
.stat-card.absent .stat-icon { color: var(--red); background: #fdecef; }
.stat-card.exempt .stat-icon { color: var(--blue); background: #eaf2fc; }
.stat-card > div:nth-child(2) { display: grid; }
.stat-card span { color: var(--muted); font-size: 13px; }
.stat-card strong { margin: 5px 0 2px; font-size: 32px; line-height: 1; }
.stat-card small { color: var(--muted); font-size: 11px; }
.stat-card a { grid-column: 1 / -1; align-self: end; display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--line); color: var(--purple); font-size: 12px; font-weight: 700; }
.stat-card a svg { width: 15px; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(290px, .8fr); gap: 18px; margin-bottom: 18px; }
.panel { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.panel-head { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.panel-head h3 { margin: 0 0 3px; font-size: 17px; }
.panel-head p { margin: 0; color: var(--muted); font-size: 12px; }
.text-btn { display: inline-flex; align-items: center; gap: 7px; color: var(--purple); border: 0; background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; }
.text-btn svg { width: 15px; }
.attendance-content { min-height: 260px; display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 32px; padding: 24px 28px; }
.donut { width: 190px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--green) calc(var(--value) * 1%), #edf0f5 0); color: inherit; }
.donut::before { content: ""; grid-area: 1/1; width: 144px; aspect-ratio: 1; border-radius: 50%; background: #fff; }
.donut > div { z-index: 1; grid-area: 1/1; display: grid; text-align: center; }
.donut strong { font-size: 30px; }
.donut span { color: var(--muted); font-size: 11px; }
.attendance-legend { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.attendance-legend > a { min-height: 62px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--line); border-radius: 7px; color: inherit; transition: border-color .2s ease, background .2s ease; }
.attendance-legend > a:hover { border-color: #cfc3e8; background: #fbf9ff; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; }
.legend-dot.green { background: var(--green); }.legend-dot.amber { background: var(--amber); }.legend-dot.red { background: var(--red); }.legend-dot.blue { background: var(--blue); }
.attendance-legend p { margin: 0; color: var(--muted); font-size: 12px; }
.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 18px; }
.quick-grid a { min-height: 100px; display: grid; place-items: center; gap: 7px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: inherit; cursor: pointer; font-weight: 700; font-size: 12px; }
.quick-grid a:hover { border-color: #cfc3e8; background: #fbf9ff; }
.quick-grid span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 7px; color: var(--purple); background: var(--purple-soft); }
.quick-grid svg { width: 18px; }

.lower-grid { grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr); }
.request-list { padding: 4px 20px 10px; }
.empty-state { min-height: 230px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 28px; text-align: center; }
.empty-state > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--purple); background: var(--purple-soft); }
.empty-state strong { font-size: 14px; }
.empty-state p { max-width: 430px; margin: 0 0 6px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.empty-state .btn { font-size: 12px; }
.request-item { min-height: 73px; display: grid; grid-template-columns: minmax(220px, 1fr) 90px 100px; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); }
.request-item:last-child { border-bottom: 0; }
.employee { display: flex; align-items: center; gap: 11px; }
.employee > span { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 50%; color: var(--purple); background: var(--purple-soft); font-weight: 800; }
.employee div { display: grid; gap: 3px; }
.employee strong { font-size: 13px; }
.employee small, .date { color: var(--muted); font-size: 11px; }
.status { justify-self: start; padding: 5px 9px; border-radius: 20px; font-size: 10px; font-weight: 800; }
.status.pending { color: #99650b; background: #fff4db; }
.status.new { color: #1c6caf; background: #e8f3ff; }
.calendar-nav { display: flex; gap: 5px; }
.calendar-nav button { min-width: 31px; height: 31px; display: grid; place-items: center; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; font: inherit; font-size: 10px; }
.calendar-nav svg { width: 15px; }
.weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.weekdays { padding: 15px 16px 6px; color: var(--muted); font-size: 10px; font-weight: 700; }
.calendar-days { gap: 4px; padding: 4px 16px 18px; }
.calendar-days button { position: relative; min-width: 30px; min-height: 30px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; font: inherit; font-size: 11px; }
.calendar-days button:hover { border-color: #d8cdec; background: #faf8ff; }
.calendar-days .muted { color: #c3cad4; }
.calendar-days .today { color: #fff; background: var(--purple); font-weight: 800; }
.calendar-days .selected { border-color: var(--purple); box-shadow: inset 0 0 0 1px var(--purple); }
.calendar-days .has-events::after { content: ""; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--teal); }
.calendar-days .today.has-events::after { background: #fff; }
.calendar-events { margin: 0 16px 18px; border-top: 1px solid var(--line); }
.calendar-events > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0 9px; }
.calendar-events > header strong { font-size: 12px; }
.calendar-events > header span { color: var(--muted); font-size: 10px; }
.calendar-empty { min-height: 58px; display: flex; align-items: center; gap: 9px; color: var(--muted); }
.calendar-empty svg { width: 18px; }
.calendar-empty p { margin: 0; font-size: 11px; }
.calendar-event { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; text-align: right; cursor: pointer; }
.calendar-event + .calendar-event { margin-top: 7px; }
.calendar-event > span { padding: 3px 7px; border-radius: 5px; color: var(--purple); background: var(--purple-soft); font-size: 10px; font-weight: 700; }
.calendar-event strong { font-size: 11px; }
.calendar-event p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.calendar-event svg { width: 14px; transition: transform .2s ease; }
.calendar-event[aria-expanded="true"] svg { transform: rotate(180deg); }

.home-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr);
  gap: 18px;
  margin-top: 18px;
}

.announcement-body {
  display: grid;
  gap: 12px;
  padding: 6px 16px 16px;
}

.announcement {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.announcement-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #15294a;
  font-size: 12px;
}

.announcement-title span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f4f0fb;
  color: var(--purple);
  font-size: 11px;
}

.announcement-title strong {
  font-size: 12px;
  font-weight: 700;
}

.announcement p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.75;
}

.sidebar-overlay { display: none; }

@media (max-width: 1180px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid, .lower-grid { grid-template-columns: 1fr; }
  .quick-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
  .sidebar { transform: translateX(110%); box-shadow: -20px 0 50px rgba(7,26,52,.2); transition: transform .25s ease; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-close, .menu-btn { display: grid; }
  .sidebar-overlay { position: fixed; z-index: 50; inset: 0; background: rgba(7,26,52,.42); }
  body.sidebar-open .sidebar-overlay { display: block; }
  .workspace { margin-inline-start: 0; }
  .topbar { padding-inline: 18px; }
  .search-box { display: none; }
  .dashboard { width: 100%; }
}

@media (max-width: 1280px) {
  .home-bottom-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .topbar-start h1 { font-size: 15px; }
  .topbar-start p { display: none; }
  .profile-btn svg { display: none; }
  .topbar-dropdown{position:fixed;top:76px;right:12px;left:12px;width:auto}
  .page-heading { align-items: stretch; flex-direction: column; }
  .page-heading h2 { font-size: 23px; }
  .heading-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { min-height: 158px; padding: 14px; }
  .stat-icon { width: 36px; height: 36px; }
  .stat-card strong { font-size: 27px; }
  .stat-card small { min-height: 28px; }
  .attendance-content { grid-template-columns: 1fr; justify-items: center; padding: 22px 16px; }
  .attendance-legend { width: 100%; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .panel-head { align-items: flex-start; }
  .panel-head .text-btn { font-size: 0; }
  .panel-head .text-btn svg { width: 20px; }
  .request-list { padding-inline: 14px; }
  .request-item { grid-template-columns: 1fr auto; padding: 10px 0; }
  .request-item .date { display: none; }
  .status { grid-column: 2; grid-row: 1; }
  .home-bottom-grid { margin-top: 8px; }
  .announcement-body,
  .calendar-days,
  .calendar-events { padding-inline: 12px; }
}
@media (max-width: 420px) {
  .dashboard { width: 100%; padding-top: 22px; }
  .stats-grid { grid-template-columns: 1fr; }
  .heading-actions { grid-template-columns: 1fr; }
  .attendance-legend { grid-template-columns: 1fr; }
}

.subscription-registration-details{margin-top:-10px}.subscription-readonly-section{border-top:1px solid var(--line)}.subscription-readonly-section:first-child{border-top:0}.subscription-readonly-section>h3{margin:0;padding:12px 16px;color:var(--purple);background:#f8f6fc;font-size:11px}

/* Shared compact subscription and attendance-device connection summary. */
.sidebar .subscription.subscription--compact{margin:0 18px 12px;padding:10px 12px 8px;border-radius:6px}
.sidebar .subscription.subscription--compact .subscription__header{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px}
.sidebar .subscription.subscription--compact .progress{height:4px;margin:8px 0 7px}
.sidebar .subscription.subscription--compact .subscription__meta{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:16px}
.sidebar .subscription.subscription--compact .subscription__days{margin:0;color:#9fb2c8;font-size:10px;white-space:nowrap}
.sidebar .subscription.subscription--compact .device-status{direction:rtl;display:inline-flex;align-items:center;gap:6px;margin:0;padding:0;border:0;color:#dce9f7;font-size:10px;line-height:1;white-space:nowrap}
.sidebar .subscription.subscription--compact .device-status__dot{width:8px;height:8px;flex:0 0 8px;border:0;border-radius:50%;box-shadow:none}
.sidebar .subscription.subscription--compact .device-status--connected .device-status__dot{background:#20e312;box-shadow:0 0 0 3px rgba(32,227,18,.12)}
.sidebar .subscription.subscription--compact .device-status--disconnected .device-status__dot{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.14)}
.sidebar .subscription.subscription--compact .device-status--empty .device-status__dot{background:#94a3b8;box-shadow:0 0 0 3px rgba(148,163,184,.14)}
.sidebar .subscription.subscription--compact .subscription-details-button{min-height:30px;margin-top:8px;padding:7px 0 0;font-size:11px}
@media (max-width:860px){.sidebar .subscription.subscription--compact{margin-inline:12px}}

/* Ensure compact sidebar subscription card renders as thin status bar with inline state. */
.sidebar .subscription.subscription--compact .subscription__meta {
  gap: 12px;
}
.sidebar .subscription.subscription--compact .device-status { font-weight: 700; }