:root {
    --kda-bg: #e9e9e9;
    --kda-surface: #ffffff;
    --kda-red: #912836;
    --kda-text: #423b3b;
    --kda-green: #196242;
    --kda-divider: rgba(66, 59, 59, .20);
    --kda-hover: rgba(255, 255, 255, .10);
    --kda-sidebar-width: 292px;
}

html, body {
    margin: 0;
    background: var(--kda-bg);
    color: var(--kda-text);
    overflow-x: hidden;
    overflow-y: auto;
}

.kda-app-shell { min-height: 100vh; background: var(--kda-bg); }
.kda-sidebar { position: fixed; inset: 0 0 0 auto; width: var(--kda-sidebar-width); height: 100vh; background: var(--kda-bg); z-index: 1200; overflow: hidden; }
.kda-main-column { margin-right: var(--kda-sidebar-width); min-height: 100vh; display: flex; flex-direction: column; background: var(--kda-bg); }
.kda-page-content { flex: 1; min-height: 0; }
.kda-main-footer { height: 34px; flex: 0 0 34px; display: grid; place-items: center; background: var(--kda-bg); font-size: 15px; font-weight: 800; }

.kda-sidebar-shell { height: 100%; display: flex; flex-direction: column; padding: 10px 24px 8px; box-sizing: border-box; }
.kda-sidebar-user { flex: 0 0 auto; text-align: center; padding: 5px 0 10px; }
.kda-user-row { position: relative; display: flex; align-items: center; justify-content: center; min-height: 96px; }
.kda-avatar-wrap { width: 96px; height: 96px; margin: 0 auto; }
.kda-user-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid #4b4444; box-sizing: border-box; }
.kda-avatar-placeholder { display: grid; place-items: center; background: #f8f8f8; color: #777; }
.kda-avatar-placeholder .mud-icon-root { font-size: 46px; }
.kda-sidebar-bell { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); color: #4b4444; text-decoration: none; display: inline-grid; place-items: center; }
.kda-sidebar-bell .mud-icon-root { font-size: 36px; }
.kda-bell-badge { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #ef4c32; color: #fff; font-size: 11px; font-weight: 900; }
.kda-sidebar-user-name { display: block; margin-top: 5px; font-size: 19px; font-weight: 900; }
.kda-sidebar-user-role { display: block; margin-top: 1px; font-size: 15px; font-weight: 800; }

.kda-navigation { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 2px 0 6px; }
.kda-navigation::-webkit-scrollbar { width: 0; height: 0; display: none; }
.kda-nav-group { border-bottom: 1px solid var(--kda-divider); }
.kda-navigation > .kda-nav-item { border-bottom: 1px solid var(--kda-divider); }
.kda-nav-item { min-height: 43px; display: grid; grid-template-columns: 22px 1fr 17px; align-items: center; gap: 7px; padding: 0 8px; color: var(--kda-text); text-decoration: none; font-size: 15px; font-weight: 900; cursor: pointer; list-style: none; transition: background-color .16s ease, color .16s ease; }
.kda-nav-item::-webkit-details-marker { display: none; }
.kda-nav-item:hover, .kda-submenu-item:hover { background: var(--kda-hover); }
.kda-nav-item.active, .kda-submenu-item.active { background: #9dc7c3; color: #214e4a; }
.kda-expand-icon { transition: transform .18s ease; }
.kda-nav-group[open] .kda-expand-icon { transform: rotate(180deg); }
.kda-submenu { padding: 2px 28px 5px 4px; }
.kda-submenu-item { display: block; padding: 7px 8px; color: #493f3f; text-decoration: none; font-size: 12px; font-weight: 800; border-right: 2px solid rgba(145, 40, 54, .25); transition: background-color .16s ease, color .16s ease; }

.kda-menu-toggle { display: none; position: fixed; top: 12px; right: 12px; z-index: 1300; width: 42px; height: 42px; border: 0; background: var(--kda-surface); color: var(--kda-text); }
.kda-mobile-overlay { display: none; }

.kda-dashboard-page { min-height: calc(100vh - 34px); box-sizing: border-box; padding: 8px 18px 0; display: grid; grid-template-rows: 112px 158px minmax(224px, 1fr); gap: 7px; }
.kda-dashboard-header { position: relative; display: grid; grid-template-columns: 1fr 180px; align-items: end; gap: 12px; border-bottom: 4px solid #aaa; }
.kda-dashboard-title { position: absolute; right: 0; left: auto; bottom: 9px; display: flex; align-items: center; gap: 10px; padding: 0; direction: rtl; }
.kda-dashboard-title h1 { margin: 0; font-size: 25px; line-height: 1; font-weight: 900; direction: rtl; }
.kda-title-square { width: 19px; height: 19px; flex: 0 0 19px; background: var(--kda-green); }
.kda-company-block { position: absolute; left: 0; bottom: 7px; direction: rtl; text-align: center; width: 170px; }
.kda-company-block img { width: 50px; height: 50px; display: block; object-fit: contain; margin: 0 auto 2px; }
.kda-company-block strong { display: block; color: var(--kda-green); font-size: 17px; font-weight: 900; line-height: 1.05; }
.kda-company-block span { display: block; margin-top: 5px; font-size: 15px; font-weight: 900; }

.kda-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); gap: 7px 10px; direction: rtl; }
.kda-stat-card { min-width: 0; display: flex; flex-direction: row; background: var(--kda-surface); border: 2px solid #b7b7b7; box-shadow: inset 0 0 0 1px #f2f2f2; overflow: hidden; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
.kda-stat-card:hover { transform: translateY(-2px); border-color: rgba(25, 98, 66, .38); box-shadow: 0 4px 12px rgba(40, 40, 40, .10); }
.kda-stat-icon { width: 72px; flex: 0 0 72px; display: grid; place-items: center; color: #fff; }
.kda-stat-icon .mud-icon-root { font-size: 34px; }
.kda-stat-copy { min-width: 0; padding: 6px 9px 4px; display: flex; flex-direction: column; justify-content: center; }
.kda-stat-copy span { font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kda-stat-copy strong { margin-top: 3px; font-size: 21px; font-weight: 900; }
.kda-stat-teal { background: #18ae9f; }
.kda-stat-green { background: #63cb00; }
.kda-stat-orange { background: #f28b00; }
.kda-stat-lightgreen { background: #17b43d; }
.kda-stat-burnt { background: #d13a00; }
.kda-stat-red { background: #f20d24; }

.kda-dashboard-bottom { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 6px; direction: rtl; }
.kda-panel { min-height: 0; background: var(--kda-surface); border: 2px solid #aaa; border-radius: 0; padding: 8px 11px; box-sizing: border-box; overflow: hidden; }
.kda-panel-heading { height: 34px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(0,0,0,.12); }
.kda-panel-heading h2 { margin: 0; font-size: 17px; font-weight: 900; }
.kda-panel-heading .mud-icon-root { color: var(--kda-green); font-size: 21px; }
.kda-activity-list { height: calc(100% - 35px); overflow: hidden; }
.kda-activity-row { min-height: 31px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(0,0,0,.08); font-size: 15px; font-weight: 800; }
.kda-activity-row .mud-icon-root { color: var(--kda-green); font-size: 18px; }
.kda-quick-panel { display: flex; flex-direction: column; padding: 8px 13px 9px; }
.kda-quick-heading { justify-content: center; border-bottom: 0; margin-bottom: 5px; }
.kda-quick-link { flex: 0 0 29px; min-height: 29px; margin-bottom: 5px; padding: 0 9px; border: 2px solid var(--kda-green); border-radius: 11px; color: var(--kda-green); display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 13px; font-weight: 900; box-sizing: border-box; transition: background-color .16s ease, color .16s ease; }
.kda-quick-link:hover { background: var(--kda-green); color: #fff; }
.kda-dashboard-logout { flex: 0 0 29px; min-height: 29px; margin-top: 0; border: 0; border-radius: 11px; background: var(--kda-red); color: #fff; font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; }
.kda-dashboard-logout:hover { filter: brightness(1.08); }

@media (max-width: 1180px) {
    :root { --kda-sidebar-width: 265px; }
    .kda-dashboard-page { padding-left: 12px; padding-right: 12px; }
    .kda-dashboard-bottom { grid-template-columns: minmax(0, 1fr) 245px; }
    .kda-stat-copy span { font-size: 14px; }
}

@media (max-width: 900px) {
    .kda-sidebar { transform: translateX(100%); transition: transform .22s ease; }
    .kda-sidebar.is-open { transform: translateX(0); }
    .kda-main-column { margin-right: 0; }
    .kda-menu-toggle { display: grid; place-items: center; }
    .kda-mobile-overlay { display: block; position: fixed; inset: 0; border: 0; background: rgba(0,0,0,.35); z-index: 1100; }
    .kda-dashboard-page { min-height: 100vh; grid-template-rows: auto auto auto; padding-top: 58px; }
    .kda-dashboard-header { grid-template-columns: 1fr; min-height: 170px; padding-bottom: 10px; }
    .kda-dashboard-title { position: static; justify-self: center; }
    .kda-company-block { justify-self: center; }
    .kda-stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: auto; }
    .kda-stat-card { min-height: 72px; }
    .kda-dashboard-bottom { grid-template-columns: 1fr; }
    .kda-panel { min-height: 220px; }
}

@media (max-width: 590px) {
    .kda-stat-grid { grid-template-columns: 1fr; }
    .kda-dashboard-title h1 { font-size: 24px; }
}