:root {
  --dashboard-accent: #cf0072;
  --myway-deep: #9d005c;
  --myway-soft: #fff0f7;
  --myway-pale: #fff8fb;
  --myway-ink: #392937;
  --myway-muted: #826d7c;
  --myway-border: #f1dce8;
}
html { scroll-behavior: smooth; }
body { min-height: 100vh; font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; text-align: right; color: var(--myway-ink); background: linear-gradient(145deg, #fff 35%, #fff7fb 100%); }
.myway-sidebar { background: #fff !important; border-left: 1px solid var(--myway-border); box-shadow: -12px 0 35px rgb(157 0 92 / 4%); }
.brand-mark { align-items: center; background: var(--dashboard-accent); border-radius: 50%; color: #fff; display: inline-flex; font-size: 1.5rem; height: 3rem; justify-content: center; width: 3rem; box-shadow: 0 8px 18px rgb(207 0 114 / 20%); }
.navbar-vertical .nav-section { color: #b29ca9; font-size: .72rem; padding: 1.2rem 1rem .5rem; }
.navbar-vertical .nav-link { color: #66535f; border-radius: .8rem; margin: .15rem .65rem; padding: .7rem .8rem; }
.navbar-vertical .nav-link:hover { color: var(--dashboard-accent); background: var(--myway-pale); }
.navbar-vertical .nav-link.active { color: var(--dashboard-accent); background: var(--myway-soft); font-weight: 700; box-shadow: inset -3px 0 var(--dashboard-accent); }
.navbar-vertical .nav-link-icon { color: inherit; }
.page-wrapper > .navbar { background: rgb(255 255 255 / 88%); border-bottom: 1px solid var(--myway-border); backdrop-filter: blur(12px); }
.topbar-container { align-items: center; display: flex; min-height: 4.25rem; position: relative; }
.topbar-actions { margin-left: 10.5rem; margin-right: auto; }
.topbar-brand { align-items: center; display: flex; height: 100%; justify-content: flex-start; left: 1rem; position: absolute; text-decoration: none; top: 0; width: 8.5rem; }
.topbar-brand img { display: block; height: auto; max-height: 3.25rem; object-fit: contain; object-position: left center; width: 100%; }
.topbar-title { display: flex; flex-direction: column; font-weight: 700; color: var(--myway-ink); }
.topbar-title small { color: var(--myway-muted); font-size: .75rem; font-weight: 400; }
.notification-button { position: relative; }
.notification-button span { position: absolute; width: .45rem; height: .45rem; border-radius: 50%; background: var(--dashboard-accent); top: .45rem; right: .45rem; border: 2px solid #fff; box-sizing: content-box; }
.page-body { position: relative; }
.page-body::before { content: ""; position: fixed; left: -8rem; top: 7rem; width: 24rem; height: 24rem; border-radius: 50%; background: radial-gradient(circle, rgb(255 207 230 / 45%), transparent 68%); pointer-events: none; }
.breadcrumb a { color: var(--dashboard-accent); }
.dashboard-welcome { overflow: hidden; position: relative; display: flex; align-items: center; justify-content: space-between; padding: 1.8rem 2rem; border-radius: 1.4rem; background: linear-gradient(110deg, var(--dashboard-accent), #e83b97); color: #fff; box-shadow: 0 18px 40px rgb(207 0 114 / 18%); }
.dashboard-welcome::after { content: ""; position: absolute; left: 9%; bottom: -7rem; width: 18rem; height: 18rem; border-radius: 50%; border: 2.5rem solid rgb(255 255 255 / 8%); }
.dashboard-welcome .page-pretitle { color: rgb(255 255 255 / 75%); }
.dashboard-welcome .page-title { color: #fff; font-size: 1.7rem; margin-top: .25rem; }
.dashboard-welcome p { color: rgb(255 255 255 / 80%); margin: .5rem 0 0; }
.performance-levels { background: rgb(255 255 255 / 96%); border: 1px solid var(--myway-border); border-radius: 1.15rem; display: grid; gap: .5rem; grid-template-columns: repeat(4,minmax(0,1fr)); padding: .5rem; position: sticky; top: .5rem; z-index: 20; box-shadow: 0 8px 26px rgb(112 56 88 / 6%); backdrop-filter: blur(12px); }
.performance-level { align-items: center; background: transparent; border: 0; border-radius: .85rem; color: var(--myway-muted); display: flex; gap: .7rem; padding: .8rem 1rem; text-align: right; }
.performance-level > i { font-size: 1.45rem; }.performance-level span,.performance-level strong,.performance-level small { display:block; }.performance-level small { font-size:.67rem; margin-top:.12rem; }.performance-level:hover { background:var(--myway-pale); color:var(--dashboard-accent); }.performance-level.active { background:linear-gradient(135deg,var(--myway-deep),var(--dashboard-accent)); color:#fff; box-shadow:0 8px 20px rgb(157 0 92 / 18%); }
.level-panel { min-height:24rem; }.level-loading { align-items:center; background:#fff; border:1px solid var(--myway-border); border-radius:1rem; display:flex; gap:.8rem; justify-content:center; min-height:20rem; }.level-summary { display:grid; gap:1rem; grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:1rem; }.level-summary article { background:#fff; border:1px solid var(--myway-border); border-radius:1rem; padding:1rem; }.level-summary small,.level-summary strong { display:block; }.level-summary small { color:var(--myway-muted); font-size:.7rem; }.level-summary strong { direction:ltr; font-size:1.15rem; margin-top:.35rem; text-align:right; }.performance-table-card { background:#fff; border:1px solid var(--myway-border); border-radius:1rem; overflow:hidden; }.performance-table-heading { align-items:center; display:flex; justify-content:space-between; padding:1rem 1.15rem; }.performance-table-heading h2 { font-size:1rem; margin:0; }.performance-table { margin:0; min-width:62rem; }.performance-name strong,.performance-name small { display:block; }.performance-name small { color:var(--myway-muted); font-size:.65rem; }.achievement-cell { min-width:8rem; }.achievement-cell .progress { height:.35rem; margin-top:.35rem; }.rank-number { align-items:center; background:var(--myway-soft); border-radius:50%; color:var(--dashboard-accent); display:inline-flex; height:1.8rem; justify-content:center; width:1.8rem; }
.welcome-mark { font-size: 5.5rem; color: rgb(255 255 255 / 23%); transform: rotate(-8deg); z-index: 1; }
.smart-insight { align-items: center; background: #fff; border: 1px solid var(--myway-border); border-inline-start: 4px solid #8b7c86; border-radius: 1rem; box-shadow: 0 8px 26px rgb(112 56 88 / 6%); display: flex; gap: .8rem; margin: .65rem 0 1rem; min-height: 4.4rem; padding: .8rem 1rem; }
.smart-insight-positive { background: linear-gradient(90deg, #f1fcf6, #fff 38%); border-inline-start-color: #20a66a; }
.smart-insight-warning { background: linear-gradient(90deg, #fff5f3, #fff 38%); border-inline-start-color: #d95c4f; }
.smart-insight-icon { align-items: center; background: #f1edef; border-radius: .7rem; color: #756672; display: inline-flex; flex: 0 0 auto; font-size: 1.2rem; height: 2.6rem; justify-content: center; width: 2.6rem; }
.smart-insight-positive .smart-insight-icon { background: #e3f7ec; color: #168252; }
.smart-insight-warning .smart-insight-icon { background: #fde9e6; color: #c54439; }
.smart-insight small, .smart-insight strong { display: block; }
.smart-insight small { color: var(--dashboard-accent); direction: ltr; font-size: .67rem; font-weight: 800; margin-bottom: .18rem; text-align: right; }
.smart-insight strong { color: var(--myway-ink); font-size: .88rem; }
.smart-insight-period { color: var(--myway-muted); font-size: .68rem; margin-inline-start: auto; white-space: nowrap; }
.dashboard-overview { display: grid; gap: 1rem; grid-template-columns: minmax(13rem, .8fr) minmax(13rem, .8fr) minmax(20rem, 1.4fr); }
.dashboard-status-card, .dashboard-shortcuts { align-items: center; background: rgb(255 255 255 / 92%); border: 1px solid var(--myway-border); border-radius: 1rem; box-shadow: 0 8px 26px rgb(112 56 88 / 5%); display: flex; gap: .8rem; min-height: 5.25rem; padding: 1rem 1.15rem; }
.dashboard-status-card small { color: var(--myway-muted); display: block; font-size: .72rem; margin-bottom: .2rem; }
.dashboard-status-card strong { color: var(--myway-ink); display: block; font-size: .9rem; }
.dashboard-status-icon { align-items: center; background: var(--myway-soft); border-radius: .75rem; color: var(--dashboard-accent); display: inline-flex; flex: 0 0 auto; font-size: 1.25rem; height: 2.75rem; justify-content: center; width: 2.75rem; }
.dashboard-status-link { color: inherit; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.dashboard-status-link:hover { border-color: var(--dashboard-accent); color: inherit; transform: translateY(-1px); }
.dashboard-shortcuts { flex-wrap: wrap; gap: .5rem; }
.dashboard-shortcuts > span { color: var(--myway-muted); flex-basis: 100%; font-size: .72rem; }
.dashboard-shortcuts a { align-items: center; background: var(--myway-pale); border-radius: .6rem; color: var(--myway-deep); display: inline-flex; font-size: .76rem; gap: .3rem; padding: .5rem .65rem; text-decoration: none; }
.dashboard-shortcuts a:hover { background: var(--myway-soft); color: var(--dashboard-accent); }
.card { border-color: var(--myway-border); border-radius: 1.1rem; box-shadow: 0 8px 26px rgb(112 56 88 / 6%); }
.filter-card { background: rgb(255 255 255 / 88%); }
.dashboard-kpi-filters { margin-bottom: .65rem; }
.dashboard-filter-submit { align-self: center; border-color: var(--myway-border); color: var(--myway-muted); font-size: .72rem; font-weight: 600; padding: .35rem .6rem; }
.dashboard-filter-submit:hover, .dashboard-filter-submit:focus { background: var(--myway-soft); border-color: var(--dashboard-accent); color: var(--dashboard-accent); }
.filter-heading { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1rem; margin-bottom: .25rem; border-bottom: 1px solid var(--myway-border); }
.filter-heading div { display: flex; align-items: center; gap: .5rem; color: var(--myway-deep); }
.filter-heading span { color: var(--myway-muted); font-size: .8rem; }
.form-label { color: #6c5865; font-size: .78rem; font-weight: 600; }
.form-control, .form-select { border-color: var(--myway-border); border-radius: .7rem; background-color: #fffafd; }
.form-control:focus, .form-select:focus { border-color: var(--dashboard-accent); box-shadow: 0 0 0 .2rem rgb(207 0 114 / 10%); }
.fixed-date { position: relative; }
.fixed-date-display { padding-inline-start: 2.75rem; text-align: center; }
.fixed-date-button { align-items: center; background: transparent; border: 0; color: var(--myway-ink); display: flex; font-size: 1.25rem; inset-block: 1px; inset-inline-start: 1px; justify-content: center; position: absolute; width: 2.6rem; z-index: 2; }
.fixed-date-picker { height: 1px; opacity: 0; pointer-events: none; position: absolute; width: 1px; }
.btn-primary { --tblr-btn-bg: var(--dashboard-accent); --tblr-btn-border-color: var(--dashboard-accent); --tblr-btn-hover-bg: var(--myway-deep); --tblr-btn-hover-border-color: var(--myway-deep); border-radius: .7rem; }
.performance-analysis { background: #fff; border: 1px solid var(--myway-border); border-radius: 1.25rem; box-shadow: 0 14px 36px rgb(112 56 88 / 8%); overflow: hidden; padding: 1.35rem; }
.performance-heading { align-items: center; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1.15rem; }
.performance-heading-content { flex: 1; min-width: 0; }
.performance-heading h2 { font-size: 1.25rem; margin: .2rem 0; }
.performance-forecast { align-items: center; background: var(--tone-bg); border: 1px solid var(--tone-border); border-inline-start: 4px solid var(--tone); border-radius: .75rem; color: var(--tone); display: flex; font-size: .9rem; gap: .55rem; line-height: 1.6; margin: .65rem 0 0; max-width: 48rem; padding: .65rem .8rem; }
.performance-forecast > i { flex: 0 0 auto; font-size: 1.25rem; }
.performance-forecast > strong { font-weight: 800; }
.analysis-eyebrow { color: var(--dashboard-accent); font-size: .68rem; font-weight: 800; letter-spacing: .03em; }
.performance-status, .achievement-badge { align-items: center; border-radius: 999px; display: inline-flex; font-size: .75rem; font-weight: 800; gap: .35rem; padding: .48rem .7rem; white-space: nowrap; }
.tone-good { --tone: #18794e; --tone-bg: rgb(34 197 94 / 7%); --tone-border: rgb(34 197 94 / 24%); }
.tone-watch { --tone: #946200; --tone-bg: rgb(250 204 21 / 9%); --tone-border: rgb(234 179 8 / 28%); }
.tone-risk { --tone: #b4232c; --tone-bg: rgb(239 68 68 / 7%); --tone-border: rgb(239 68 68 / 24%); }
.performance-status, .achievement-badge { background: var(--tone-bg); border: 1px solid var(--tone-border); color: var(--tone); }
.performance-legend { display: flex; flex-wrap: wrap; gap: .55rem; margin: -.35rem 0 1rem; }
.performance-legend > span { align-items: center; background: var(--tone-bg); border: 1px solid var(--tone-border); border-radius: .75rem; display: grid; gap: 0 .45rem; grid-template-columns: auto auto; padding: .45rem .65rem; }
.performance-legend i { background: var(--tone); border-radius: 50%; grid-row: 1 / 3; height: .55rem; width: .55rem; }
.performance-legend strong { color: var(--tone); font-size: .7rem; line-height: 1.35; }
.performance-legend small { color: var(--myway-muted); font-size: .63rem; font-weight: 600; line-height: 1.35; }
.analysis-grid { display: grid; gap: .9rem; grid-template-columns: minmax(18rem, 1.55fr) repeat(3, minmax(11rem, 1fr)); }
.analysis-primary { background: linear-gradient(135deg, var(--myway-deep), var(--dashboard-accent)); border-radius: 1rem; color: #fff; padding: 1.2rem; }
.analysis-primary > span, .analysis-primary > strong { display: block; }
.analysis-primary > span { color: rgb(255 255 255 / 74%); font-size: .75rem; }
.analysis-primary > strong { direction: ltr; font-size: 1.65rem; margin-top: .35rem; text-align: right; }
.analysis-primary strong small, .analysis-metric strong small { font-size: .65rem; font-weight: 600; }
.target-progress { background: rgb(255 255 255 / 20%); border-radius: 999px; height: .6rem; margin-top: 1rem; overflow: hidden; }
.target-progress i { background: #fff; border-radius: inherit; display: block; height: 100%; min-width: .25rem; }
.target-progress i.tone-good { background: #78edb5; }.target-progress i.tone-watch { background: #ffd36a; }.target-progress i.tone-risk { background: #ff9ca1; }
.progress-caption { color: rgb(255 255 255 / 75%); display: flex; font-size: .65rem; justify-content: space-between; margin-top: .5rem; }
.progress-caption b { color: #fff; direction: ltr; }
.analysis-metric { background: var(--tone-bg); border: 1px solid var(--tone-border); border-radius: 1rem; padding: 1rem; }
.analysis-metric > i { color: var(--tone); font-size: 1.35rem; }
.analysis-metric > span, .analysis-metric > strong, .analysis-metric > small { display: block; }
.analysis-metric > span { color: var(--myway-ink); font-size: .76rem; font-weight: 700; margin-top: .65rem; }
.analysis-metric > strong { color: var(--tone); direction: ltr; font-size: 1.15rem; margin-top: .25rem; text-align: right; }
.analysis-metric > small { color: var(--myway-muted); direction: rtl; font-size: .72rem; font-weight: 600; line-height: 1.55; margin-top: .45rem; text-align: right; }
.workday-notes { align-items: center; background: #f8f6f7; border: 1px dashed var(--myway-border); border-radius: .8rem; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; padding: .55rem; }
.workday-note { align-items: center; background: #fff; border: 1px solid var(--myway-border); border-radius: .65rem; display: inline-grid; gap: 0 .45rem; grid-template-columns: auto auto; padding: .42rem .65rem; }
.workday-note > i { color: var(--dashboard-accent); font-size: 1rem; grid-row: 1 / 3; }.workday-note > small { color: var(--myway-muted); font-size: .65rem; font-weight: 700; line-height: 1.2; }.workday-note > strong { color: var(--myway-ink); font-size: .8rem; line-height: 1.25; }.workday-note.is-elapsed > i { color: #2b8a6e; }.workday-note.is-remaining > i { color: #d17b24; }
.section-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: .8rem; padding-inline: .2rem; }
.section-heading span { color: var(--dashboard-accent); font-size: .66rem; font-weight: 800; }.section-heading h2 { font-size: 1.05rem; margin: .1rem 0 0; }.section-heading > small { color: var(--myway-muted); font-size: .65rem; }
.operational-kpi { background: #FFFFFF; border-color: var(--category); border-top: 3px solid var(--category); color: #2D3436; transition: transform .15s ease, box-shadow .15s ease; }.operational-kpi:hover { box-shadow: 0 12px 30px rgb(45 52 54 / 10%); transform: translateY(-2px); }
.category-sales { --category: #CF0072; }.category-members { --category: #2878D0; }.category-time { --category: #D9780D; }.category-target { --category: #168553; }
.operational-icon { align-items: center; background: #FFFFFF; border: 1px solid var(--category); border-radius: .65rem; color: var(--category); display: inline-flex; font-size: 1.1rem; height: 2.25rem; justify-content: center; width: 2.25rem; }
.operational-kpi .subheader { color: #2D3436; font-size: .76rem; font-weight: 800; line-height: 1.45; }.operational-kpi .h1, .operational-kpi .h2 { color: #1E1E1E; }.operational-unit { color: #2D3436; font-size: .75rem; font-weight: 700; }.operational-note { border-top: 1px solid var(--category); color: #2D3436; font-size: .72rem; font-weight: 600; line-height: 1.55; margin-top: .7rem; padding-top: .6rem; }
.operational-kpi .kpi-trend { background: #FFFFFF; border: 1px solid var(--category); color: var(--category); }
.operational-kpi .kpi-measures { border-top-color: var(--category); }
.operational-kpi .kpi-measures span { color: #2D3436; }
.operational-kpi .kpi-measures strong { color: #1E1E1E; }
.achievement-badge { padding: .35rem .55rem; }
.archive-quarter + .archive-quarter { border-top: 1px solid var(--myway-border); }
.archive-quarter-heading { align-items: center; background: color-mix(in srgb, var(--myway-soft) 55%, white); display: flex; justify-content: space-between; padding: .85rem 1rem; }
.archive-quarter-heading strong, .archive-quarter-heading small { display: block; }
.archive-quarter-heading small { color: var(--myway-muted); margin-top: .2rem; }
.archive-quarter-total { background: color-mix(in srgb, var(--myway-soft) 35%, white); }
.archive-quarter-total th { font-weight: 800; }
.archive-charts { background: #fffafd; display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1rem; }
.archive-chart-card { background: #fff; border: 1px solid var(--myway-border); border-radius: 1rem; display: flex; flex-direction: column; min-width: 0; padding: 1rem; }
.archive-chart-card header { min-height: 2.75rem; }.archive-chart-card header > div { align-items: center; display: flex; gap: .7rem; }.archive-chart-card h3 { color: var(--myway-ink); font-size: .92rem; font-weight: 800; line-height: 1.4; margin: 0; }.archive-chart-card p { color: var(--myway-muted); font-size: .68rem; line-height: 1.5; margin: .18rem 0 0; }
.archive-chart-icon { align-items: center; background: var(--myway-soft); border-radius: .7rem; color: var(--dashboard-accent); display: inline-flex; flex: 0 0 auto; font-size: 1.15rem; height: 2.5rem; justify-content: center; width: 2.5rem; }
.archive-chart-legend { align-items: center; display: flex; flex-wrap: wrap; gap: .8rem; min-height: 1.4rem; margin: .8rem 0 .25rem; }.archive-chart-legend span { align-items: center; color: var(--myway-muted); display: inline-flex; font-size: .65rem; font-weight: 700; gap: .3rem; }.archive-chart-legend span::before { background: var(--series-color); border-radius: 50%; content: ""; height: .55rem; width: .55rem; }.archive-chart-legend .is-sales { --series-color: #cf0072; }.archive-chart-legend .is-normal { --series-color: #2878d0; }.archive-chart-legend .is-normal::before { border-radius: .18rem; }.archive-chart-legend .is-special { --series-color: #d9780d; }.archive-chart-legend .is-special::before { background: repeating-linear-gradient(45deg, #c96800 0 2px, #f7b55d 2px 4px); border: 1px solid #b65b00; border-radius: .05rem; transform: rotate(45deg); }
.archive-chart { direction: ltr; min-height: 260px; overflow-x: auto; width: 100%; }.archive-chart svg { display: block; height: 260px; min-width: 500px; width: 100%; }.archive-chart text { fill: var(--myway-muted); font-family: "Noto Sans Arabic", "Segoe UI", sans-serif; font-size: 10px; }.archive-chart .grid-line { stroke: #f1dce8; stroke-width: 1; }.archive-chart .target-line { stroke: #826d7c; stroke-dasharray: 5 4; stroke-width: 1.2; }.archive-chart-empty { align-items: center; color: var(--myway-muted); display: flex; font-size: .8rem; height: 250px; justify-content: center; }
.executive-kpis { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1.18fr) repeat(3, minmax(0, 1fr)); }
.executive-kpi { background: linear-gradient(145deg, #fff, var(--myway-pale)); border: 1px solid var(--myway-border); border-radius: 1.25rem; box-shadow: 0 12px 32px rgb(112 56 88 / 8%); min-height: 12rem; overflow: hidden; padding: 1.35rem; position: relative; }
.executive-kpi::after { background: var(--myway-soft); border-radius: 50%; content: ""; height: 7rem; inset-inline-end: -3.5rem; position: absolute; top: -3.5rem; width: 7rem; }
.executive-kpi-sales { background: linear-gradient(135deg, var(--myway-deep), var(--dashboard-accent)); border-color: transparent; box-shadow: 0 18px 42px rgb(157 0 92 / 22%); color: #fff; }
.executive-kpi-sales::after { background: rgb(255 255 255 / 10%); }
.executive-kpi-icon { align-items: center; background: var(--myway-soft); border-radius: .75rem; color: var(--dashboard-accent); display: inline-flex; font-size: 1.25rem; height: 2.75rem; justify-content: center; margin-bottom: 1rem; position: relative; width: 2.75rem; z-index: 1; }
.executive-kpi-sales .executive-kpi-icon { background: rgb(255 255 255 / 16%); color: #fff; }
.executive-kpi-heading { color: var(--myway-muted); font-size: .82rem; font-weight: 700; }
.executive-kpi-status { background: #20b26b; border: 3px solid rgb(32 178 107 / 16%); border-radius: 50%; box-sizing: content-box; display: inline-block; height: .55rem; margin-inline-end: .45rem; vertical-align: -.05rem; width: .55rem; }
.executive-kpi-sales .executive-kpi-heading { color: rgb(255 255 255 / 78%); }
.executive-kpi-sales .executive-kpi-heading { font-size: .95rem; }
.executive-kpi-sales .executive-kpi-status { background: #66eda9; border-color: rgb(255 255 255 / 18%); }
.executive-kpi-value { color: var(--myway-ink); direction: ltr; font-size: clamp(1.75rem, 2.5vw, 2.4rem); font-weight: 800; line-height: 1.35; text-align: right; }
.executive-kpi-result, .operational-kpi-result { align-items: center; display: flex; gap: .65rem; justify-content: space-between; }
.operational-kpi-result { flex-wrap: wrap; }
.kpi-trend { border-radius: 999px; direction: ltr; display: inline-flex; flex: 0 0 auto; font-size: .78rem; font-weight: 800; justify-content: center; line-height: 1; padding: .48rem .6rem; }
.kpi-trend-up { background: #e7f8ef; color: #138a50; }
.kpi-trend-down { background: #fdebec; color: #d63939; }
.kpi-trend-neutral { background: #f0edf0; color: #756672; }
.executive-kpi-sales .kpi-trend { background: rgb(255 255 255 / 16%); color: #fff; }
.executive-kpi-value small { color: var(--myway-muted); font-size: .8rem; font-weight: 600; }
.executive-kpi-sales .executive-kpi-value, .executive-kpi-sales .executive-kpi-value small { color: #fff; }
.executive-kpi-sales .executive-kpi-value { font-size: clamp(2rem, 3vw, 2.75rem); }
.executive-kpi-note { color: var(--myway-muted); font-size: .7rem; margin-top: .45rem; }
.executive-kpi-sales .executive-kpi-note { color: rgb(255 255 255 / 72%); }
.kpi-measures { border-top: 1px solid var(--myway-border); display: grid; gap: .4rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: .85rem; padding-top: .7rem; }
.kpi-measures > div { min-width: 0; }
.kpi-measures span, .kpi-measures strong { display: block; }
.kpi-measures span { color: var(--myway-muted); direction: ltr; font-size: .62rem; font-weight: 700; text-align: right; }
.kpi-measures strong { direction: ltr; font-size: .72rem; margin-top: .15rem; overflow-wrap: anywhere; text-align: right; }
.kpi-measures strong small { font-size: .58rem; font-weight: 500; }
.executive-kpi-sales .kpi-measures { border-top-color: rgb(255 255 255 / 20%); }
.executive-kpi-sales .kpi-measures span { color: rgb(255 255 255 / 68%); }
.executive-kpi-sales .kpi-measures strong { color: #fff; }
.section-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: .9rem; }
.section-heading span { color: var(--myway-ink); display: block; font-size: 1rem; font-weight: 700; }
.section-heading small { color: var(--myway-muted); display: block; font-size: .72rem; margin-top: .15rem; }
.operational-kpis .card { min-width: 0; }
.operational-kpis .card-body { padding: 1rem; }
.operational-kpis .h1 { font-size: 1.35rem; }
.dashboard-analytics { margin-top: .5rem; }
.dashboard-charts-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-chart-card { background: rgb(255 255 255 / 94%); min-width: 0; overflow: hidden; padding: 1.15rem; }
.dashboard-chart-header { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: .4rem; }
.dashboard-chart-header > div { align-items: center; display: flex; gap: .7rem; min-width: 0; }
.dashboard-chart-header h2 { color: var(--myway-ink); font-size: .95rem; margin: 0 0 .18rem; }
.dashboard-chart-header p { color: var(--myway-muted); font-size: .7rem; margin: 0; }
.dashboard-chart-icon { align-items: center; background: var(--myway-soft); border-radius: .7rem; color: var(--dashboard-accent); display: inline-flex; flex: 0 0 auto; font-size: 1.15rem; height: 2.5rem; justify-content: center; width: 2.5rem; }
.dashboard-chart-type { background: var(--myway-pale); border: 1px solid var(--myway-border); border-radius: 999px; color: var(--myway-deep); direction: ltr; flex: 0 0 auto; font-size: .62rem; font-weight: 700; padding: .3rem .5rem; }
.dashboard-chart { min-height: 300px; }
.dashboard-chart-empty { align-items: center; color: var(--myway-muted); display: flex; flex-direction: column; gap: .65rem; height: 300px; justify-content: center; text-align: center; }
.dashboard-chart-empty i { color: var(--dashboard-accent); font-size: 2rem; opacity: .55; }
.report-loading { align-items: center; background: rgb(57 41 55 / 38%); display: flex; inset: 0; justify-content: center; opacity: 0; padding: 1.25rem; pointer-events: none; position: fixed; transition: opacity .2s ease, visibility .2s ease; visibility: hidden; z-index: 10000; }
.report-loading.is-visible { opacity: 1; pointer-events: auto; visibility: visible; }
.report-loading-card { align-items: center; background: #fff; border: 1px solid var(--myway-border); border-radius: 1.25rem; box-shadow: 0 24px 70px rgb(57 41 55 / 22%); display: flex; gap: 1rem; max-width: 34rem; padding: 1.5rem; width: 100%; }
.report-loading-icon { align-items: center; animation: report-loading-pulse 1.4s ease-in-out infinite; background: var(--myway-soft); border-radius: 1rem; color: var(--dashboard-accent); display: flex; flex: 0 0 auto; font-size: 1.75rem; height: 4rem; justify-content: center; width: 4rem; }
.report-loading-content { min-width: 0; width: 100%; }
.report-loading-content strong, .report-loading-content span, .report-loading-content small { display: block; }
.report-loading-content strong { color: var(--myway-ink); margin-bottom: .3rem; }
.report-loading-content span { color: var(--myway-muted); font-size: .83rem; }
.report-loading-content small { color: var(--myway-muted); font-size: .7rem; margin-top: .45rem; }
.report-loading-progress { background: var(--myway-soft); height: .55rem; margin-top: .9rem; overflow: hidden; }
.report-loading-progress .progress-bar { background: linear-gradient(90deg, var(--dashboard-accent), #f05aa9); border-radius: inherit; transition: width .8s ease; }
body.report-is-loading { cursor: wait; }
@keyframes report-loading-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.auth-page { background: radial-gradient(circle at 12% 18%, rgb(255 202 228 / 55%), transparent 28rem), linear-gradient(135deg, #fff 0%, var(--myway-pale) 100%); position: relative; }
.auth-main { align-items: center; display: flex; min-height: calc(100vh - 4.5rem); padding: 2rem; }
.login-shell { align-items: center; display: grid; gap: clamp(2.5rem, 7vw, 7rem); grid-template-columns: minmax(0, 1fr) minmax(20rem, 27rem); margin: auto; max-width: 68rem; position: relative; width: 100%; }
.login-analytics-pattern { color: var(--dashboard-accent); display: flex; font-size: clamp(6rem, 14vw, 12rem); gap: .15em; inset-inline-end: 1%; opacity: .04; pointer-events: none; position: fixed; top: 13%; transform: rotate(-7deg); }
.login-intro { max-width: 34rem; }
.login-breadcrumb { align-items: center; color: var(--myway-muted); display: flex; gap: .45rem; margin-bottom: 1rem; }
.login-breadcrumb a { color: var(--dashboard-accent); text-decoration: none; }
.login-breadcrumb a:hover { text-decoration: underline; }
.login-brand { align-items: center; display: flex; margin-bottom: .55rem; min-height: 4rem; position: relative; width: min(100%, 15.75rem); }
.login-brand::before { background: radial-gradient(ellipse, rgb(207 0 114 / 12%), transparent 68%); content: ""; inset: -.75rem -1.25rem; pointer-events: none; position: absolute; }
.login-logo { display: block; height: auto; max-height: 4.6rem; object-fit: contain; position: relative; width: 100%; }
.login-environment { align-items: center; color: var(--myway-muted); display: flex; font-size: .72rem; gap: .55rem; margin-bottom: 1.1rem; }
.login-environment-separator { color: var(--myway-border); }
.login-eyebrow { color: var(--dashboard-accent) !important; font-size: 1rem !important; font-weight: 700; letter-spacing: .01em; margin: 0 0 1rem !important; }
.login-intro h1 { color: var(--myway-ink); font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.25; margin: 0 0 .65rem; }
.login-intro > p { color: var(--myway-muted); font-size: 1.05rem; line-height: 1.9; margin: 0; }
.login-card { background: rgb(255 255 255 / 92%); box-shadow: 0 24px 70px rgb(157 0 92 / 13%); }
.login-card .card-body { padding: clamp(1.5rem, 5vw, 2.5rem); }
.login-card-heading { align-items: center; display: flex; gap: .9rem; margin-bottom: 2rem; }
.login-card-heading h2 { font-size: 1.35rem; margin: 0 0 .25rem; }
.login-card-heading p { color: var(--myway-muted); font-size: .82rem; margin: 0; }
.login-card-icon { align-items: center; background: var(--myway-soft); border-radius: .8rem; color: var(--dashboard-accent); display: inline-flex; flex: 0 0 auto; font-size: 1.35rem; height: 3rem; justify-content: center; width: 3rem; }
.login-card .form-control { min-height: 3rem; }
.login-card .input-icon-addon { color: var(--myway-muted); font-size: .85rem; }
.login-submit { align-items: center; display: flex; gap: .5rem; justify-content: center; min-height: 3rem; }
.login-help { align-items: center; color: var(--myway-muted); display: flex; font-size: .78rem; gap: .5rem; justify-content: center; margin-top: 1rem; }
.login-help-item { align-items: center; display: inline-flex; gap: .25rem; }
.login-support { color: var(--dashboard-accent); font-weight: 600; }
.login-support::before { color: var(--myway-border); content: "•"; margin-inline-end: .5rem; }
.card-header { border-bottom-color: var(--myway-border); }
.card-title { color: var(--myway-ink); }
.table thead th { color: var(--myway-deep); background: var(--myway-pale); }
.footer { border-top: 0; }
.app-footer { color: var(--myway-muted); padding: 1rem 0; }
.app-footer-content { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: center; text-align: center; }
.app-footer-content span + span::before { color: var(--myway-border); content: "•"; margin-inline-end: 1.5rem; }
.app-footer-credit { flex-basis: 100%; font-size: .65rem; opacity: .75; }
.chart { min-height: 320px; width: 100%; }
.nav-preview-badge { background: var(--myway-soft); color: var(--dashboard-accent); font-size: .56rem; margin-inline-start: auto; }
.design-notice { align-items: center; background: #fff9e8; border: 1px solid #f4df9b; border-radius: .8rem; color: #745d17; display: flex; gap: .75rem; margin-bottom: 1rem; padding: .7rem 1rem; }
.design-notice > i { font-size: 1.4rem; }
.design-notice strong, .design-notice span { display: block; }
.design-notice span { font-size: .72rem; opacity: .8; }
.design-hero { align-items: center; background: linear-gradient(120deg, #72003f, var(--dashboard-accent) 65%, #e83b97); border-radius: 1.35rem; box-shadow: 0 18px 40px rgb(157 0 92 / 18%); color: #fff; display: flex; justify-content: space-between; overflow: hidden; padding: 1.6rem 2rem; position: relative; }
.design-hero::after { border: 2rem solid rgb(255 255 255 / 7%); border-radius: 50%; content: ""; height: 15rem; inset-inline-end: 16%; position: absolute; top: -7rem; width: 15rem; }
.design-eyebrow { color: rgb(255 255 255 / 67%); font-size: .62rem; font-weight: 700; letter-spacing: .12em; }
.design-hero h1 { color: #fff; font-size: 1.65rem; margin: .35rem 0; }
.design-hero p { color: rgb(255 255 255 / 75%); margin: 0; }
.hero-period { align-items: center; background: rgb(255 255 255 / 13%); border: 1px solid rgb(255 255 255 / 18%); border-radius: 1rem; display: grid; grid-template-columns: auto auto; padding: .7rem 1rem; position: relative; z-index: 1; }
.hero-period i { font-size: 1.5rem; grid-row: 1 / 3; margin-inline-end: .7rem; }
.hero-period span { color: rgb(255 255 255 / 68%); font-size: .65rem; }
.dashboard-switcher { background: #fff; border: 1px solid var(--myway-border); border-radius: 1rem; display: grid; gap: .35rem; grid-template-columns: repeat(6, minmax(0,1fr)); margin: 1rem 0 1.5rem; padding: .4rem; }
.dashboard-switcher-item { align-items: center; border-radius: .7rem; color: var(--myway-muted); display: flex; font-size: .73rem; font-weight: 600; gap: .4rem; justify-content: center; min-height: 2.7rem; padding: .5rem; text-decoration: none; }
.dashboard-switcher-item i { font-size: 1rem; }
.dashboard-switcher-item:hover { background: var(--myway-pale); color: var(--dashboard-accent); }
.dashboard-switcher-item.active { background: var(--myway-soft); box-shadow: inset 0 0 0 1px rgb(207 0 114 / 10%); color: var(--dashboard-accent); }
.design-toolbar { align-items: center; display: flex; justify-content: space-between; margin-bottom: 1rem; }
.design-title { align-items: center; display: flex; gap: .7rem; }
.design-title-icon { align-items: center; background: var(--myway-soft); border-radius: .75rem; color: var(--dashboard-accent); display: flex; font-size: 1.2rem; height: 2.8rem; justify-content: center; width: 2.8rem; }
.design-title small { color: var(--myway-muted); display: block; font-size: .65rem; }
.design-title h2 { font-size: 1.15rem; margin: .1rem 0 0; }
.design-actions { display: flex; gap: .5rem; }
.design-actions .btn { align-items: center; border-color: var(--myway-border); display: flex; gap: .35rem; }
.design-kpis { display: grid; gap: 1rem; margin-bottom: 1rem; }
.design-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.design-kpi { background: #fff; border: 1px solid var(--myway-border); border-radius: 1rem; box-shadow: 0 8px 24px rgb(112 56 88 / 5%); min-width: 0; padding: 1rem; position: relative; }
.design-kpi::before { background: var(--tone, var(--dashboard-accent)); border-radius: 0 0 .35rem .35rem; content: ""; inset-block: 0 auto; inset-inline: 1rem auto; height: .23rem; width: 2.7rem; }
.design-kpi-top { align-items: center; display: flex; justify-content: space-between; }
.design-kpi-top span { align-items: center; background: color-mix(in srgb, var(--tone, var(--dashboard-accent)) 10%, white); border-radius: .65rem; color: var(--tone, var(--dashboard-accent)); display: flex; font-size: 1.1rem; height: 2.35rem; justify-content: center; width: 2.35rem; }
.design-kpi-top b { background: #eaf9f1; border-radius: 999px; color: #168553; direction: ltr; font-size: .68rem; padding: .3rem .45rem; }
.design-kpi > small { color: var(--myway-muted); display: block; font-size: .72rem; margin-top: .75rem; }
.design-kpi > strong { direction: ltr; display: block; font-size: 1.45rem; margin-top: .15rem; text-align: right; }
.design-kpi > p { color: var(--myway-muted); font-size: .65rem; margin: .3rem 0 0; }
.tone-success { --tone: #1aa36f; } .tone-violet { --tone: #7656c9; } .tone-amber { --tone: #e69b22; }
.design-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0,1fr)); }
.design-card { background: #fff; border: 1px solid var(--myway-border); border-radius: 1rem; box-shadow: 0 8px 24px rgb(112 56 88 / 5%); min-width: 0; padding: 1rem; }
.design-card.span-2 { grid-column: span 2; } .design-card.span-3 { grid-column: 1 / -1; }
.design-card-head { align-items: flex-start; display: flex; justify-content: space-between; margin-bottom: .8rem; }
.design-card-head h3 { font-size: .9rem; margin: 0; } .design-card-head p { color: var(--myway-muted); font-size: .65rem; margin: .18rem 0 0; }
.design-card-head a { color: var(--dashboard-accent); font-size: .67rem; text-decoration: none; }
.legend { color: var(--myway-muted); font-size: .62rem; } .legend i { background: var(--dashboard-accent); border-radius: 50%; display: inline-block; height: .45rem; margin-inline: .35rem .15rem; width: .45rem; } .legend i:nth-child(2) { background: #d9cbd4; }
.line-visual { min-height: 235px; padding-inline-start: 2.8rem; position: relative; }
.line-visual svg { height: 200px; overflow: visible; width: 100%; } .actual-line { fill: none; stroke: var(--dashboard-accent); stroke-linecap: round; stroke-width: 4; } .target-line { fill: none; stroke: #c9bac3; stroke-dasharray: 8 7; stroke-width: 2; } .area { fill: url(#area); }
.chart-y { color: var(--myway-muted); display: flex; flex-direction: column; font-size: .56rem; height: 205px; inset-inline-start: 0; justify-content: space-between; position: absolute; }
.chart-x { color: var(--myway-muted); display: flex; font-size: .56rem; justify-content: space-between; margin-top: .2rem; }
.donut-wrap { align-items: center; display: flex; flex-direction: column; }
.donut { align-items: center; background: conic-gradient(var(--dashboard-accent) 0 46%, #7656c9 46% 77%, #f0a43a 77% 100%); border-radius: 50%; display: flex; flex-direction: column; height: 9rem; justify-content: center; margin: .25rem; position: relative; width: 9rem; }
.donut::after { background: #fff; border-radius: 50%; content: ""; inset: 1.25rem; position: absolute; } .donut strong,.donut span { position: relative; z-index: 1; } .donut strong { font-size: 1.1rem; } .donut span { color: var(--myway-muted); font-size: .6rem; }
.member-donut { background: conic-gradient(var(--dashboard-accent) 0 74%, #f0a43a 74% 91%, #dacdd5 91%); }
.donut-legend { list-style: none; margin: .8rem 0 0; padding: 0; width: 100%; } .donut-legend li { align-items: center; display: flex; font-size: .65rem; gap: .4rem; margin-top: .4rem; } .donut-legend li i { border-radius: 50%; height: .5rem; width: .5rem; } .donut-legend li span { color: var(--myway-muted); } .donut-legend li b { margin-inline-start: auto; } .pink { background: var(--dashboard-accent); } .purple { background: #7656c9; } .orange { background: #f0a43a; } .gray { background: #dacdd5; }
.count-pill,.positive-pill { background: var(--myway-soft); border-radius: 999px; color: var(--dashboard-accent); font-size: .65rem; font-weight: 700; padding: .25rem .5rem; } .positive-pill { background: #eaf9f1; color: #168553; }
.alert-list { display: grid; gap: .55rem; }.design-alert { align-items: center; background: #faf8f9; border-radius: .7rem; display: flex; gap: .6rem; padding: .65rem; }.design-alert > i { font-size: 1.05rem; }.design-alert strong,.design-alert span { display: block; }.design-alert strong { font-size: .68rem; }.design-alert span { color: var(--myway-muted); font-size: .58rem; margin-top: .15rem; }.design-alert.critical > i { color: #d63939; }.design-alert.warning > i { color: #e69b22; }.design-alert.info > i { color: #7656c9; }
.region-bars,.category-bars { display: grid; gap: .75rem; }.region-bars > div { align-items: center; display: grid; gap: .7rem; grid-template-columns: 5rem 1fr 2.2rem; font-size: .65rem; }.region-bars b { background: #f3eaf0; border-radius: 999px; height: .5rem; overflow: hidden; }.region-bars b::after { background: linear-gradient(90deg,#e83b97,var(--dashboard-accent)); border-radius: inherit; content: ""; display: block; height: 100%; width: var(--value); }.region-bars strong { direction: ltr; color: var(--dashboard-accent); }
.sales-columns { align-items: end; border-bottom: 1px solid var(--myway-border); display: flex; gap: 3%; height: 205px; padding: 0 3%; }.sales-columns i { background: linear-gradient(0deg,var(--dashboard-accent),#ed73b5); border-radius: .3rem .3rem 0 0; flex: 1; height: var(--height); min-width: .4rem; opacity: .82; }.sales-columns i:hover { opacity: 1; }
.rank-list { display: grid; gap: .55rem; }.rank-list > div { align-items: center; border-bottom: 1px solid #f5edf2; display: grid; gap: .5rem; grid-template-columns: 1.8rem 1fr auto; padding: .45rem 0; }.rank-list > div > b { align-items: center; background: var(--myway-soft); border-radius: .5rem; color: var(--dashboard-accent); display: flex; font-size: .65rem; height: 1.7rem; justify-content: center; }.rank-list span { font-size: .68rem; }.rank-list small { color: var(--myway-muted); display: block; font-size: .57rem; }.rank-list strong { color: #168553; direction: ltr; font-size: .65rem; }.rank-list .rank-risk strong { color: #d63939; }
.quality-strip { display: grid; gap: .7rem; grid-template-columns: repeat(4,minmax(0,1fr)); }.quality-strip > div { background: var(--myway-pale); border-radius: .75rem; padding: .8rem; }.quality-strip i { color: var(--dashboard-accent); font-size: 1.15rem; }.quality-strip span,.quality-strip strong,.quality-strip small { display: block; }.quality-strip span { color: var(--myway-muted); font-size: .63rem; margin-top: .3rem; }.quality-strip strong { font-size: .85rem; margin-top: .15rem; }.quality-strip small { color: var(--myway-muted); font-size: .57rem; margin-top: .15rem; }
.member-flow { align-items: center; display: flex; justify-content: space-around; min-height: 185px; }.member-flow > div { background: var(--myway-pale); border-radius: 1rem; flex: 0 1 9rem; padding: 1rem; text-align: center; }.member-flow span,.member-flow strong,.member-flow small { display: block; }.member-flow span { color: var(--myway-muted); font-size: .65rem; }.member-flow strong { font-size: 1.1rem; margin-top: .3rem; }.member-flow small { color: #168553; direction: ltr; font-size: .6rem; }.member-flow > i { color: #d7c3cf; }
.design-table { overflow-x: auto; }.design-table > div { align-items: center; border-bottom: 1px solid #f5edf2; display: grid; font-size: .65rem; gap: .5rem; grid-template-columns: 1.4fr repeat(4,1fr); min-width: 40rem; padding: .65rem; }.design-table .table-head { background: var(--myway-pale); border-radius: .6rem; color: var(--myway-muted); font-size: .58rem; }.design-table span i { color: var(--dashboard-accent); margin-inline-end: .35rem; }.design-table strong { color: #168553; direction: ltr; }
.map-placeholder { background: radial-gradient(circle at 45% 45%,#fff 0 8%,transparent 9%),linear-gradient(145deg,#fff6fa,#f7edf4); border-radius: .8rem; height: 260px; overflow: hidden; position: relative; }.map-placeholder > i { color: var(--dashboard-accent); font-size: 15rem; inset: 50% auto auto 50%; opacity: .055; position: absolute; transform: translate(-50%,-50%); }.map-dot { background: #fff; border: 1px solid var(--myway-border); border-radius: .55rem; box-shadow: 0 6px 18px rgb(112 56 88 / 10%); font-size: .58rem; padding: .35rem .5rem; position: absolute; }.map-dot::before { background: var(--dashboard-accent); border: 3px solid #ffd2e8; border-radius: 50%; content: ""; height: .7rem; inset-inline-start: -.4rem; position: absolute; top: 40%; width: .7rem; }.map-dot b { display: block; font-size: .65rem; }.dot-1 { left: 43%; top: 30%; }.dot-2 { left: 58%; top: 15%; }.dot-3 { left: 28%; top: 66%; }.dot-4 { left: 20%; top: 19%; }
.category-bars > div { align-items: center; display: grid; font-size: .64rem; gap: .6rem; grid-template-columns: 6.5rem 1fr 2.5rem; }.category-bars b { background: #f3eaf0; border-radius: 999px; height: .7rem; overflow: hidden; }.category-bars b i { background: linear-gradient(90deg,var(--dashboard-accent),#ef78b8); border-radius: inherit; display: block; height: 100%; }.category-bars strong { direction: ltr; }
.stock-score { align-items: center; background: #eaf9f1; border-radius: 50%; display: flex; flex-direction: column; height: 8rem; justify-content: center; margin: .5rem auto 1rem; width: 8rem; }.stock-score strong { color: #168553; font-size: 1.45rem; }.stock-score span { color: #557265; font-size: .6rem; }.stock-items { display: flex; justify-content: space-around; }.stock-items span { color: var(--myway-muted); font-size: .57rem; }.stock-items i { border-radius: 50%; display: inline-block; height: .45rem; margin-inline-end: .2rem; width: .45rem; }.stock-items b { color: var(--myway-ink); display: block; font-size: .68rem; margin-top: .12rem; text-align: center; }.ok { background:#1aa36f }.warn { background:#e69b22 }.risk { background:#d63939 }
.operations { min-height: 120px; }.operations > div { align-items: center; display: grid; grid-template-columns: auto 1fr; text-align: start; }.operations > div > i { color: var(--dashboard-accent); font-size: 1.4rem; grid-row: 1 / 3; margin-inline-end: .5rem; }.operations strong { font-size: .85rem; margin: 0; }
.bonus-stack { display: flex; height: 175px; margin-top: 2rem; overflow: hidden; }.bonus-stack > div { align-items: center; color: #fff; display: flex; flex-direction: column; justify-content: center; width: var(--size); }.bonus-stack > div:nth-child(1){background:#cf0072}.bonus-stack > div:nth-child(2){background:#7656c9}.bonus-stack > div:nth-child(3){background:#e69b22}.bonus-stack > div:nth-child(4){background:#8d7b86}.bonus-stack span { font-size: .6rem; }.bonus-stack strong { direction: ltr; font-size: .8rem; margin-top: .25rem; }
.cycle-status { align-items: center; display: flex; flex-direction: column; padding: 1rem; text-align: center; }.cycle-status > i { color: #1aa36f; font-size: 3.5rem; }.cycle-status strong,.cycle-status span { display: block; }.cycle-status span,.cycle-status small { color: var(--myway-muted); font-size: .6rem; }.cycle-status > div { background: #e7f4ed; border-radius: 999px; height: .55rem; margin: 1.2rem 0 .35rem; overflow: hidden; width: 100%; }.cycle-status > div b { background:#1aa36f; display:block; height:100%; }
.report { max-width: 1280px; margin-inline: auto; }
.performance-levels { background: #fff; border: 1px solid var(--myway-border); border-radius: 1.1rem; box-shadow: 0 8px 24px rgb(112 56 88 / 5%); display: grid; gap: .45rem; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: .45rem; position: static; }
.performance-level { align-items: center; background: transparent; border: 0; border-radius: .8rem; color: var(--myway-muted); display: flex; gap: .75rem; min-height: 4.35rem; padding: .7rem 1rem; text-align: start; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.performance-level > i { align-items: center; background: var(--myway-pale); border-radius: .65rem; display: flex; flex: 0 0 auto; font-size: 1.25rem; height: 2.6rem; justify-content: center; width: 2.6rem; }
.performance-level > span { min-width: 0; }
.performance-level strong, .performance-level small { display: block; }
.performance-level strong { color: var(--myway-ink); font-size: .9rem; font-weight: 800; line-height: 1.25; }
.performance-level small { font-size: .68rem; font-weight: 600; line-height: 1.35; margin-top: .18rem; }
.performance-level:hover { background: var(--myway-pale); color: var(--dashboard-accent); }
.performance-level.active { background: linear-gradient(135deg, var(--dashboard-accent), #ae005f); box-shadow: 0 8px 20px rgb(157 0 92 / 18%); color: rgb(255 255 255 / 75%); }
.performance-level.active strong { color: #fff; }
.performance-level.active > i { background: rgb(255 255 255 / 15%); color: #fff; }
.level-panel { min-height: 18rem; }
.level-loading { align-items: center; background: #fff; border: 1px solid var(--myway-border); border-radius: 1rem; color: var(--myway-muted); display: flex; flex-direction: column; gap: .8rem; justify-content: center; min-height: 18rem; }
.level-summary { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 1rem; }
.level-summary article { background: #fff; border: 1px solid var(--myway-border); border-radius: 1rem; box-shadow: 0 8px 24px rgb(112 56 88 / 5%); min-width: 0; padding: 1.1rem; }
.level-summary article::before { background: var(--dashboard-accent); border-radius: 999px; content: ""; display: block; height: .22rem; margin-bottom: .8rem; width: 2.5rem; }
.level-summary small { color: var(--myway-muted); display: block; font-size: .7rem; }
.level-summary strong { direction: ltr; display: block; font-size: 1.25rem; margin-top: .25rem; text-align: right; }
.level-summary strong small { direction: rtl; display: inline; }
.performance-table-card { background: #fff; border: 1px solid var(--myway-border); border-radius: 1rem; box-shadow: 0 8px 24px rgb(112 56 88 / 5%); overflow: hidden; }
.performance-table-heading { align-items: center; display: flex; justify-content: space-between; min-height: 4rem; padding: .85rem 1rem; }
.performance-table-heading h2 { font-size: 1rem; margin: 0; }
.branch-table-actions, .branch-filter-controls { align-items: center; display: flex; gap: .55rem; }
.branch-table-actions label { color: var(--myway-muted); font-size: .72rem; white-space: nowrap; }
.branch-table-actions .form-select { min-width: 11.5rem; }
.branch-filter-controls { flex-wrap: wrap; justify-content: flex-end; }
.branch-performance-card { border-radius: .35rem; max-width: 100%; min-width: 0; }
.branch-table-scroll { max-height: min(65vh, 42rem); max-width: 100%; min-width: 0; overflow: auto; overscroll-behavior: contain; position: relative; scrollbar-width: thin; }
.branch-table-scroll::-webkit-scrollbar { height: .45rem; width: .55rem; }
.branch-table-scroll::-webkit-scrollbar-thumb { background: #cdbbc6; border-radius: 999px; }
.branch-results-table thead th { background: #fff; box-shadow: 0 2px 3px rgb(0 0 0 / 10%); position: sticky; top: 0; z-index: 6; }
.branch-results-table th:nth-child(1), .branch-results-table td:nth-child(1) { min-width: 4.5rem; width: 4.5rem; }
.branch-results-table th:nth-child(2), .branch-results-table td:nth-child(2) { background: #fff; min-width: 13rem; text-align: start; width: 13rem; }
.branch-results-table:not(.branch-excel-table) { font-size: clamp(.52rem, .58vw, .7rem); min-width: 0; table-layout: fixed; width: 100%; }
.branch-results-table:not(.branch-excel-table) th, .branch-results-table:not(.branch-excel-table) td { line-height: 1.3; overflow-wrap: anywhere; padding-inline: .25rem; white-space: normal; }
.branch-results-table tbody td { font-weight: 800; }
.branch-results-table tbody td:nth-child(2) { font-size: clamp(.78rem, .86vw, .96rem); }
.branch-results-table:not(.branch-excel-table) th:nth-child(1), .branch-results-table:not(.branch-excel-table) td:nth-child(1) { min-width: 0; width: 5%; }
.branch-results-table:not(.branch-excel-table) th:nth-child(2), .branch-results-table:not(.branch-excel-table) td:nth-child(2) { min-width: 0; width: 12%; }
.branch-results-table:not(.branch-excel-table) th:nth-child(12), .branch-results-table:not(.branch-excel-table) td:nth-child(12) { min-width: 0; width: 11%; }
.branch-results-table:not(.branch-excel-table) th:nth-child(13), .branch-results-table:not(.branch-excel-table) td:nth-child(13) { min-width: 0; width: 8%; }
.branch-mobile-ranking { display: none; }
.branch-total-row td { background: #eef5ff; border-top: 2px solid #8eb4e3; font-weight: 700; }
.branch-excel-table { --branch-grid-border: #8f8f8f; border-collapse: separate; border-spacing: 0; font-size: .72rem; min-width: 142rem; }
.branch-excel-table th, .branch-excel-table td { background: #fff; border-block-end: 1px solid var(--branch-grid-border); border-inline-end: 1px solid var(--branch-grid-border); height: 2.65rem; padding: .4rem .55rem; text-align: center; vertical-align: middle; white-space: nowrap; }
.branch-excel-table th:first-child, .branch-excel-table td:first-child { border-inline-start: 1px solid var(--branch-grid-border); }
.branch-excel-table thead { position: relative; z-index: 6; }
.branch-excel-table thead th { background: #e2f0d9; border-block-start: 1px solid var(--branch-grid-border); box-shadow: 0 2px 3px rgb(0 0 0 / 16%); color: #26351f; font-size: .7rem; font-weight: 800; line-height: 1.25; position: sticky; top: 0; z-index: 6; }
.branch-excel-table tbody tr:nth-child(even) td { background: #f7fbf5; }
.branch-excel-table tbody tr:hover td { background: #fff2cc; }
.branch-excel-table th:nth-child(1), .branch-excel-table td:nth-child(1) { min-width: 4.5rem; width: 4.5rem; }
.branch-excel-table th:nth-child(2), .branch-excel-table td:nth-child(2) { min-width: 13rem; text-align: start; width: 13rem; }
.branch-excel-table th:nth-child(-n+2), .branch-excel-table td:nth-child(-n+2) { inset-inline-start: auto; position: static; }
.branch-excel-table th:nth-child(3), .branch-excel-table td:nth-child(3) { min-width: 14rem; width: 14rem; }
.branch-excel-table th:nth-child(4), .branch-excel-table td:nth-child(4) { min-width: 8rem; width: 8rem; }
.branch-excel-table thead th:nth-child(-n+2) { background: #d5e8cb; }
.branch-excel-table tbody tr:nth-child(even) td:nth-child(-n+2) { background: #f7fbf5; }
.branch-excel-table tbody tr:hover td:nth-child(-n+2) { background: #fff2cc; }
.branch-excel-table .branch-total-row td:nth-child(-n+2) { background: #eef5ff; }
.branch-excel-table .rank-number { background: transparent; border-radius: 0; color: inherit; height: auto; min-width: 0; }
.branch-excel-table .achievement-badge { border-radius: .2rem; justify-content: center; min-width: 5rem; padding: .28rem .4rem; }
.company-sales-card { background: #fff; border: 1px solid var(--myway-border); border-radius: 1rem; box-shadow: 0 8px 24px rgb(112 56 88 / 5%); font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; overflow: hidden; }
.company-sales-card :where(h1, h2, h3, p, span, small, strong, em, div) { font-family: inherit; }
.company-sales-tree { align-items: center; display: flex; flex-direction: column; overflow-x: auto; padding: .7rem 1.25rem 1.5rem; }
.company-total-circle-card, .company-channel-circle { align-items: center; display: flex; flex-direction: column; text-align: center; }
.company-total-circle { align-items: center; aspect-ratio: 1; background: linear-gradient(145deg, var(--dashboard-accent), #a8005d); border: .65rem solid color-mix(in srgb, var(--dashboard-accent) 17%, white); border-radius: 50%; box-shadow: 0 10px 26px rgb(157 0 92 / 24%); color: #fff; display: flex; flex-direction: column; justify-content: center; width: 9.5rem; }
.company-total-circle i { font-size: 1.35rem; margin-bottom: .15rem; opacity: .85; }
.company-total-circle strong { direction: ltr; font-size: 1.35rem; line-height: 1.15; }
.company-total-circle small { color: rgb(255 255 255 / 80%); font-size: .62rem; }
.company-total-circle-card > span { font-size: .8rem; font-weight: 800; margin-top: .7rem; }
.company-channel-circle { --channel-color: #168f68; }
.company-channel-circle.is-shipping { --channel-color: #2779bd; }
.company-channel-circle.is-app { --channel-color: #7656c9; }
.company-channel-circle.is-call-center { --channel-color: #e69b22; }
.company-channel-circle > div { align-items: center; aspect-ratio: 1; background: var(--channel-color); border: .55rem solid color-mix(in srgb, var(--channel-color) 18%, white); border-radius: 50%; box-shadow: 0 9px 22px color-mix(in srgb, var(--channel-color) 22%, transparent); color: #fff; display: flex; flex-direction: column; justify-content: center; width: 7.5rem; }
.company-channel-circle strong { direction: ltr; font-size: 1.5rem; line-height: 1; }
.company-channel-circle small { color: rgb(255 255 255 / 84%); font-size: .7rem; margin-top: .35rem; }
.company-channel-circle > span { color: var(--channel-color); direction: ltr; font-size: .72rem; font-weight: 700; margin-top: .6rem; }
.sales-tree-root { position: relative; }
.sales-tree-root::after { background: #d8c6d1; bottom: -1.4rem; content: ""; height: 1.4rem; position: absolute; width: 2px; }
.sales-tree-children { display: flex; justify-content: center; position: relative; }
.company-split { gap: 6rem; margin-top: 2.75rem; min-width: 34rem; }
.company-split::before { background: #d8c6d1; content: ""; height: 2px; left: 25%; position: absolute; right: 25%; top: -1.35rem; }
.company-split > .company-channel-circle, .shipping-tree-branch { flex: 1 1 0; position: relative; }
.company-split > .company-channel-circle::before, .shipping-tree-branch::before { background: #d8c6d1; content: ""; height: 1.35rem; left: 50%; position: absolute; top: -1.35rem; width: 2px; }
.shipping-tree-branch { align-items: center; display: flex; flex-direction: column; }
.shipping-tree-branch > .company-channel-circle { position: relative; }
.shipping-tree-branch > .company-channel-circle::after { background: #d8c6d1; bottom: -1.4rem; content: ""; height: 1.4rem; position: absolute; width: 2px; }
.shipping-split { gap: 2.5rem; margin-top: 2.75rem; min-width: 20rem; }
.shipping-split::before { background: #d8c6d1; content: ""; height: 2px; left: 25%; position: absolute; right: 25%; top: -1.35rem; }
.shipping-split > .company-channel-circle { flex: 1 1 0; position: relative; }
.shipping-split > .company-channel-circle::before { background: #d8c6d1; content: ""; height: 1.35rem; left: 50%; position: absolute; top: -1.35rem; width: 2px; }
.sales-breakdown { background: linear-gradient(180deg, #fff, var(--myway-pale)); padding: .75rem 1.25rem 1.35rem; }
.sales-total-card { align-items: center; background: linear-gradient(135deg, var(--dashboard-accent), #9d005c); border-radius: 1rem; box-shadow: 0 12px 28px rgb(157 0 92 / 18%); color: #fff; display: grid; font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; gap: .85rem; grid-template-columns: auto minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); margin-bottom: 1rem; padding: 1rem 1.15rem; }
.sales-card-icon { align-items: center; background: rgb(255 255 255 / 15%); border-radius: .75rem; display: flex; font-size: 1.4rem; height: 3rem; justify-content: center; width: 3rem; }
.sales-total-card small, .sales-total-card strong { display: block; }
.sales-total-card small { color: rgb(255 255 255 / 82%); font-family: inherit; font-size: .8rem; font-weight: 700; }
.sales-total-card strong { direction: ltr; font-family: inherit; font-size: 1.5rem; font-weight: 900; margin-top: .15rem; text-align: right; }
.sales-headline-metric { border-inline-start: 1px solid rgb(255 255 255 / 22%); min-width: 0; padding-inline-start: .85rem; }
.sales-headline-metric small { color: rgb(255 255 255 / 92%); }
.sales-headline-metric strong { font-size: 1.4rem; font-weight: 900; }
.sales-total-card strong em { font-size: .65rem; font-style: normal; font-weight: 500; }
.sales-target-progresses { border-top: 1px solid rgb(255 255 255 / 18%); display: grid; gap: .7rem; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: .85rem; }
.sales-target-progress-label { align-items: center; display: flex; font-family: inherit; font-size: .8rem; font-weight: 700; justify-content: space-between; margin-bottom: .35rem; }
.sales-target-progress-label span { color: rgb(255 255 255 / 78%); }
.sales-target-progress-label strong { font-size: .8rem; margin: 0; }
.sales-target-track { background: rgb(255 255 255 / 20%); border-radius: 999px; height: .5rem; overflow: hidden; }
.sales-target-track i { background: #fff; border-radius: inherit; display: block; height: 100%; min-width: .2rem; }
.sales-target-track i.tone-good { background: #78edb5; }.sales-target-track i.tone-watch { background: #ffd36a; }.sales-target-track i.tone-risk { background: #ff9ca1; }
.sales-total-badge { background: #fff; border-radius: 999px; color: var(--dashboard-accent); direction: ltr; font-size: .8rem; font-weight: 800; padding: .35rem .65rem; }
.sales-channel-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sales-channel-card { --channel-color: #168f68; background: #fff; border: 1px solid color-mix(in srgb, var(--channel-color) 22%, white); border-radius: 1rem; box-shadow: 0 8px 22px rgb(112 56 88 / 6%); padding: 1.1rem; }
.sales-channel-card.is-shipping { --channel-color: #2779bd; }
.sales-channel-card header { align-items: center; display: flex; justify-content: space-between; }
.sales-channel-card header span { align-items: center; display: flex; font-size: .85rem; font-weight: 800; gap: .4rem; }
.sales-channel-card header i { color: var(--channel-color); font-size: 1.15rem; }
.sales-channel-card header strong { color: var(--channel-color); direction: ltr; font-size: 1.35rem; }
.sales-channel-value { direction: ltr; font-size: 1.15rem; font-weight: 800; margin-top: .9rem; text-align: right; }
.sales-channel-value small { color: var(--myway-muted); font-size: .62rem; font-weight: 500; }
.sales-share-track { background: color-mix(in srgb, var(--channel-color) 12%, white); border-radius: 999px; height: .48rem; margin-top: .65rem; overflow: hidden; }
.sales-share-track i { background: var(--channel-color); border-radius: inherit; display: block; height: 100%; }
.sales-channel-card > p { color: var(--myway-muted); font-size: .62rem; margin: .35rem 0 0; }
.shipping-details { border-top: 1px solid var(--myway-border); display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; margin-top: 1rem; padding-top: 1rem; }
.shipping-details > div { background: var(--myway-pale); border-inline-start: .25rem solid #7656c9; border-radius: .65rem; display: grid; grid-template-columns: 1fr auto; padding: .7rem .75rem; }
.shipping-details > .is-call-center { border-inline-start-color: #e69b22; }
.shipping-details span { font-size: .78rem; font-weight: 900; }
.shipping-details strong { color: #7656c9; direction: ltr; font-size: 1.05rem; font-weight: 900; line-height: 1.15; }
.shipping-details .is-call-center strong { color: #c47b0c; }
.shipping-details small { color: var(--myway-ink); direction: ltr; font-size: .72rem; font-weight: 800; grid-column: 1 / -1; line-height: 1.25; margin-top: .3rem; }
.shipping-details-note { color: var(--myway-muted); display: block; font-size: .58rem; margin-top: .4rem; }
@media (max-width: 991.98px) { .company-sales-card, .sales-breakdown, .sales-total-card, .sales-channel-grid, .sales-channel-card { box-sizing: border-box; min-width: 0; width: 100%; } .sales-channel-grid { grid-template-columns: minmax(0, 1fr); } .sales-total-card { grid-template-columns: auto repeat(2, minmax(0, 1fr)); max-width: 100%; } .sales-total-card > div { min-width: 0; } .sales-total-card strong { max-width: 100%; overflow-wrap: anywhere; } .sales-headline-metric { border-inline-start: 0; border-top: 1px solid rgb(255 255 255 / 18%); padding-block-start: .7rem; padding-inline-start: 0; } }
@media (max-width: 575.98px) { .company-sales-card { max-width: 100%; } .company-sales-card .performance-table-heading { padding: .85rem; } .company-sales-card .performance-table-heading span { line-height: 1.6; white-space: normal; } .sales-breakdown { max-width: 100%; padding-inline: .55rem; } .sales-total-card { grid-template-columns: auto minmax(0, 1fr); padding: .8rem; } .sales-total-card strong { overflow-wrap: anywhere; } .sales-total-badge { display: none; } .sales-total-card > div > strong { font-size: 1.15rem; } .sales-headline-metric strong { font-size: 1.1rem; } .sales-target-progress-label strong { font-size: .8rem; } .sales-target-progresses { grid-template-columns: minmax(0, 1fr); } .shipping-details { grid-template-columns: minmax(0, 1fr); } }
.performance-table { margin: 0; min-width: 68rem; }
.supervisor-performance-table { min-width: 42rem; }
.performance-table tbody tr { transition: background .15s ease; }
.performance-table tbody tr[data-region-code]:hover { background: var(--myway-pale); }
.region-performance-card { padding-bottom: 1.35rem; }
.region-circles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); padding: .6rem 1.25rem 1rem; }
.region-circle-card { --region-color: #cf0072; align-items: center; background: transparent; border: 0; border-radius: 1rem; color: var(--myway-ink); display: flex; flex-direction: column; padding: .7rem .45rem; transition: background .2s ease, transform .2s ease; }
.region-circle-card:nth-child(5n+2) { --region-color: #7656c9; }
.region-circle-card:nth-child(5n+3) { --region-color: #e69b22; }
.region-circle-card:nth-child(5n+4) { --region-color: #168f68; }
.region-circle-card:nth-child(5n+5) { --region-color: #2779bd; }
.region-circle-card:hover { background: color-mix(in srgb, var(--region-color) 7%, white); transform: translateY(-3px); }
.region-sales-circle { align-items: center; aspect-ratio: 1; background: var(--region-color); border: .55rem solid color-mix(in srgb, var(--region-color) 18%, white); border-radius: 50%; box-shadow: 0 9px 22px color-mix(in srgb, var(--region-color) 24%, transparent); color: #fff; display: flex; flex-direction: column; justify-content: center; width: 7.5rem; }
.region-sales-circle strong { direction: ltr; font-size: 1.55rem; line-height: 1; }
.region-sales-circle small { color: rgb(255 255 255 / 82%); font-size: .62rem; margin-top: .4rem; }
.region-circle-name { font-size: .86rem; font-weight: 800; margin-top: .8rem; }
.region-circle-sales { color: var(--region-color); direction: ltr; font-size: .74rem; font-weight: 700; margin-top: .15rem; }
.region-circle-target { color: var(--myway-muted); font-size: .64rem; margin-top: .35rem; }
.region-circle-target b { direction: ltr; display: inline-block; margin-inline-start: .15rem; }
.region-circle-target .tone-good { color: #168553; }
.region-circle-target .tone-watch { color: #c47b0c; }
.region-circle-target .tone-risk { color: #d63939; }
.performance-name strong, .performance-name small { display: block; }
.performance-name small { color: var(--myway-muted); font-size: .62rem; margin-top: .15rem; }
.rank-number { align-items: center; background: var(--myway-soft); border-radius: .55rem; color: var(--dashboard-accent); display: inline-flex; font-weight: 700; height: 2rem; justify-content: center; min-width: 2rem; }
.achievement-cell { min-width: 9rem; }
.achievement-cell .progress { height: .3rem; margin-top: .35rem; }
.achievement-cell .progress-bar { background: var(--dashboard-accent); }
[dir="rtl"] .report, .report:lang(ar) { font-family: "Noto Sans Arabic", "Segoe UI", sans-serif; }
.report table thead { display: table-header-group; }
.report-page-break { break-before: page; }
*:focus-visible { outline: 3px solid color-mix(in srgb, var(--dashboard-accent) 55%, transparent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (max-width: 991.98px) { .dashboard-overview { grid-template-columns: 1fr 1fr; } .dashboard-shortcuts { grid-column: 1 / -1; } .analysis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.analysis-primary { grid-column: 1 / -1; } .executive-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .level-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-switcher { grid-template-columns: repeat(3,1fr); } .design-kpis-4 { grid-template-columns: repeat(2,1fr); } .design-grid { grid-template-columns: repeat(2,1fr); } .design-card.span-3 { grid-column: 1 / -1; } }
@media (max-width: 767.98px) { .dashboard-welcome { padding: 1.35rem; } .dashboard-welcome .page-title { font-size: 1.35rem; } .welcome-mark { font-size: 3.8rem; } .dashboard-overview { grid-template-columns: 1fr; } .dashboard-shortcuts { grid-column: auto; } .dashboard-shortcuts a { flex: 1 1 8rem; justify-content: center; } .company-sales-card .performance-table-heading { align-items: flex-start; flex-direction: column; } .company-sales-tree { align-items: flex-start; padding-inline: .65rem; } .sales-tree-root { align-self: center; } .company-split { gap: 2rem; } .company-total-circle { width: 8rem; } .company-channel-circle > div { width: 6.75rem; } .filter-heading span, .topbar-title { display: none; } .topbar-container { min-height: 3.75rem; } .topbar-actions { margin-left: 8rem; margin-right: 0; } .topbar-brand { left: .75rem; width: 6.75rem; } .topbar-brand img { max-height: 2.75rem; } .auth-main { min-height: calc(100vh - 7rem); padding: 1.25rem; } .login-shell { display: block; max-width: 28rem; } .login-intro { text-align: center; } .login-brand { margin: 0 auto .5rem; min-height: 3rem; width: 11rem; } .login-logo { max-height: 3.6rem; } .login-environment { justify-content: center; } .login-intro > p:last-child { display: none; } .login-intro h1 { font-size: 1.75rem; } .login-eyebrow { margin-bottom: 1.5rem !important; } .login-card { text-align: right; } .app-footer-content { flex-direction: column; gap: .2rem; } .app-footer-content span + span::before { content: none; } }
/* Use the compact ranking only on phones. Hiding the full table at the tablet
   breakpoint made columns appear to vanish when the browser was zoomed or the
   dashboard viewport became narrower because of surrounding navigation. */
@media (max-width: 575.98px) {
  .level-panel { max-width: 100%; min-width: 0; overflow-x: clip; }
  .branch-performance-card { background: transparent; border: 0; overflow: visible; }
  .branch-performance-card .performance-table-heading { align-items: stretch; background: #fff; border: 1px solid var(--myway-border); border-radius: 1rem; flex-direction: column; gap: .75rem; margin-bottom: .75rem; }
  .branch-table-actions { width: 100%; }
  .branch-filter-controls { display: grid; grid-template-columns: auto minmax(0,1fr); width: 100%; }
  .branch-table-actions .form-select { flex: 1; min-width: 0; }
  .branch-filter-controls .btn { grid-column: 1 / -1; }
  .branch-performance-card .branch-table-scroll { display: none; }
  .branch-mobile-ranking { display: grid; gap: .65rem; max-width: 100%; min-width: 0; width: 100%; }
  .branch-rank-card { background: #fff; border: 1px solid var(--myway-border); border-radius: 1rem; box-sizing: border-box; max-width: 100%; min-width: 0; overflow: hidden; padding: .85rem; width: 100%; }
  .branch-total-card { background: #eef5ff; border-color: #8eb4e3; border-width: 2px; }
  .branch-rank-head { align-items: center; display: grid; gap: .65rem; grid-template-columns: auto minmax(0,1fr) auto; }
  .branch-rank-head > div { min-width: 0; }
  .branch-rank-head strong, .branch-rank-head small { display: block; }
  .branch-rank-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .branch-rank-head strong { font-size: 1rem; }
  .branch-rank-head small { color: var(--myway-muted); font-size: .68rem; margin-top: .15rem; }
  .branch-rank-metrics { border-top: 1px solid var(--myway-border); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: .7rem; padding-top: .65rem; row-gap: .7rem; }
  .branch-rank-metrics span { min-width: 0; overflow: hidden; padding-inline: .45rem; }
  .branch-rank-metrics span:nth-child(even) { border-inline-start: 1px solid var(--myway-border); }
  .branch-rank-metrics small, .branch-rank-metrics b { display: block; }
  .branch-rank-metrics small { color: var(--myway-muted); font-size: .62rem; }
  .branch-rank-metrics b { direction: ltr; font-size: .82rem; margin-top: .2rem; max-width: 100%; overflow-wrap: anywhere; text-align: right; }
}
@media (max-width: 575.98px) {
  .branch-performance-card .performance-table-heading { padding: .85rem; }
  .branch-rank-card { max-width: 100%; padding: .8rem; }
  .branch-rank-head { gap: .5rem; grid-template-columns: auto minmax(0,1fr) auto; }
  .branch-total-card .branch-rank-head { grid-template-columns: minmax(0,1fr) auto; }
  .branch-rank-head strong { font-size: .92rem; }
  .branch-rank-metrics span { min-width: 0; padding-inline: .35rem; }
  .branch-rank-metrics b { font-size: .78rem; overflow-wrap: anywhere; }
}
@media (max-width: 575.98px) { .smart-insight { align-items: flex-start; } .smart-insight-period { display: none; } .performance-levels { display: grid; gap: .25rem; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; padding: .3rem; } .performance-level { flex-direction: column; gap: .2rem; justify-content: center; min-height: 5.25rem; min-width: 0; padding: .4rem .12rem; text-align: center; } .performance-level > i { font-size: 1.05rem; height: 1.9rem; width: 1.9rem; } .performance-level strong { font-size: .68rem; white-space: nowrap; } .performance-level small { display: -webkit-box; font-size: .54rem; font-weight: 600; line-height: 1.25; margin-top: .1rem; min-height: 1.35rem; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .level-summary { grid-template-columns: 1fr 1fr; gap: .65rem; } .level-summary article { padding: .85rem; } .level-summary strong { font-size: 1rem; } .performance-heading { align-items: flex-start; flex-direction: column; }.analysis-grid { grid-template-columns: 1fr; }.analysis-primary { grid-column: auto; }.workday-notes { align-items: stretch; }.workday-note { flex: 1 1 calc(50% - .5rem); }.section-heading > small { display: none; } .executive-kpis, .dashboard-charts-grid { grid-template-columns: 1fr; } .executive-kpi { min-height: 10.5rem; } .dashboard-chart-card { padding: .9rem; } .dashboard-chart-header { gap: .5rem; } .dashboard-chart-header p { display: none; } .dashboard-chart { min-height: 270px; } .design-hero { padding: 1.25rem; } .design-hero p,.hero-period { display:none; } .dashboard-switcher { display:flex; overflow-x:auto; }.dashboard-switcher-item { flex:0 0 auto; padding-inline:.8rem }.design-kpis-4,.design-grid { grid-template-columns:1fr }.design-card.span-2,.design-card.span-3 { grid-column:auto }.quality-strip { grid-template-columns:repeat(2,1fr) }.member-flow { gap:.4rem; overflow-x:auto; justify-content:flex-start }.member-flow > div { flex:0 0 8rem }.design-actions .btn:first-child { display:none } }
@media (max-width: 767.98px) { .archive-charts { grid-template-columns: 1fr; padding: .75rem; }.archive-chart-card { padding: .8rem; }.archive-chart { margin-inline: -.25rem; width: calc(100% + .5rem); } }
@media print { @page { size: A4; margin: 12mm; } .navbar, .footer, .breadcrumb { display: none !important; } .page-wrapper, .page-body { margin: 0 !important; padding: 0 !important; } .container-xl { max-width: none !important; padding: 0 !important; } .card { break-inside: avoid; box-shadow: none; } tr { break-inside: avoid; } .report-chart { min-height: 260px; } }