/* AYIN Dashboard / Account Identity Alignment R27D
 * Additive frontend layer. Does not target Filament or admin-preview.
 */
:root {
    --r27d-navy: #061f43;
    --r27d-navy-deep: #04172f;
    --r27d-navy-soft: #0b315f;
    --r27d-blue: #1559b7;
    --r27d-gold: #efc75e;
    --r27d-gold-soft: #f9e9b7;
    --r27d-cream: #fffdf8;
    --r27d-line: #e6dcc8;
    --r27d-ink: #0a2447;
    --r27d-muted: #738096;
    --r27d-header: 64px;
    --r27d-sidebar: 252px;
    --r27d-shadow: 0 16px 42px rgba(5, 31, 67, .08);
    --r27d-shadow-strong: 0 22px 55px rgba(5, 31, 67, .15);
}

body.ayin-page.ayin-account-shell-page {
    --r27c-header-height: var(--r27d-header);
}

/* Compact admin-like header: sidebar is the primary navigation. */
body.ayin-page.ayin-account-shell-page .ayin-topbar {
    min-height: var(--r27d-header);
    border-bottom: 1px solid rgba(239, 199, 94, .13);
    background:
        linear-gradient(90deg, rgba(255,255,255,.018), transparent 32%),
        var(--r27d-navy-deep);
    box-shadow: 0 8px 24px rgba(2, 18, 39, .16);
}

body.ayin-page.ayin-account-shell-page .ayin-topbar-inner {
    min-height: var(--r27d-header) !important;
    justify-content: space-between;
    gap: 16px;
}

body.ayin-page.ayin-account-shell-page .ayin-nav {
    display: none !important;
}

body.ayin-page.ayin-account-shell-page .ayin-brand img,
body.ayin-page.ayin-account-shell-page .ayin-brand svg {
    max-height: 43px;
    width: auto;
}

body.ayin-page.ayin-account-shell-page .ayin-top-actions {
    gap: 8px;
    margin-inline-start: 0;
}

body.ayin-page.ayin-account-shell-page .ayin-icon-btn {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 12px;
    border-color: rgba(255, 255, 255, .13);
    background: rgba(255, 255, 255, .045);
}

body.ayin-page.ayin-account-shell-page .ayin-icon-btn svg {
    width: 20px;
    height: 20px;
}

body.ayin-page.ayin-account-shell-page .ayin-account-link {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    max-width: 230px;
    padding: 5px 12px 5px 8px;
    border: 1px solid rgba(239, 199, 94, .38);
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, rgba(239,199,94,.17), rgba(255,255,255,.055));
    box-shadow: none;
}

body.ayin-page.ayin-account-shell-page .ayin-account-link:hover {
    border-color: rgba(239, 199, 94, .62);
    background: linear-gradient(135deg, rgba(239,199,94,.23), rgba(255,255,255,.075));
}

body.ayin-page.ayin-account-shell-page .ayin-top-avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 10px;
    object-fit: cover;
}

body.ayin-page.ayin-account-shell-page .ayin-top-avatar-fallback {
    display: grid;
    place-items: center;
    color: var(--r27d-navy-deep);
    background: linear-gradient(145deg, #ffe59b, #d7ad4e);
    font-weight: 900;
}

body.ayin-page.ayin-account-shell-page .ayin-account-copy {
    min-width: 0;
    display: grid;
    line-height: 1.1;
}

body.ayin-page.ayin-account-shell-page .ayin-account-copy strong {
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ayin-page.ayin-account-shell-page .ayin-account-copy small {
    margin-block-start: 4px;
    color: rgba(255,255,255,.56);
    font-size: 10px;
    direction: ltr;
    text-align: start;
}

/* Shared account shell + full sidebar. */
body.ayin-page .dashboard-shell {
    grid-template-columns: var(--r27d-sidebar) minmax(0, 1fr);
    gap: 20px;
    padding-block: 22px 46px;
}

body.ayin-page .side-panel.ayin-side-panel-r27d {
    position: sticky;
    inset-block-start: calc(var(--r27d-header) + 14px);
    max-height: none;
    overflow: visible;
    padding: 12px;
    border-color: rgba(220, 207, 181, .86);
    border-radius: 18px;
    background: rgba(255,255,255,.985);
    box-shadow: var(--r27d-shadow);
}

body.ayin-page .ayin-motif-sidebar {
    isolation: isolate;
}

body.ayin-page .ayin-motif-sidebar::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset-inline-start: 0;
    inset-block-start: 0;
    width: 100%;
    height: 142px;
    border-radius: 17px 17px 0 0;
    background: url('../images/ayin/motifs/sidebar-corner-r27d.svg') left top / 100% auto no-repeat;
    pointer-events: none;
}

body.ayin-page .side-panel.ayin-side-panel-r27d .side-user {
    position: relative;
    gap: 10px;
    min-height: 78px;
    padding: 11px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--r27d-navy-deep), var(--r27d-navy-soft));
    box-shadow: 0 12px 28px rgba(5,31,67,.14);
}

body.ayin-page .side-panel.ayin-side-panel-r27d .side-user:hover strong {
    color: var(--r27d-gold-soft);
}

body.ayin-page .side-panel.ayin-side-panel-r27d .side-user .avatar {
    width: 45px;
    height: 45px;
    flex-basis: 45px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 13px;
    color: var(--r27d-navy-deep);
    background: linear-gradient(145deg, #ffe59c, #d8ad4d);
}

body.ayin-page .side-user-copy {
    min-width: 0;
    display: grid;
}

body.ayin-page .side-user-copy strong {
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ayin-page .side-user-copy .ayin-muted {
    margin-block-start: 3px;
    color: rgba(255,255,255,.56);
    font-size: 10px;
    direction: ltr;
    text-align: start;
}

body.ayin-page .side-user-status {
    width: max-content;
    margin-block-start: 5px;
    padding: 3px 7px;
    border-radius: 999px;
    color: #bcefc9;
    background: rgba(42, 193, 91, .15);
    font-size: 9px;
    font-weight: 800;
}

body.ayin-page .side-user-arrow {
    width: 16px;
    height: 16px;
    margin-inline-start: auto;
    color: rgba(255,255,255,.45);
    transform: scaleX(-1);
}

body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu {
    gap: 3px;
    margin-block-start: 9px;
}

body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu-label {
    margin: 8px 10px 3px;
    color: #9b824b;
    font-size: 9px;
    letter-spacing: .03em;
}

body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu a {
    min-height: 38px;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 10px;
    color: #607087;
    font-size: 13px;
}

body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu a span {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #54708f;
    background: #f1f5fa;
}

body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu a span svg {
    width: 16px;
    height: 16px;
}

body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu a:hover {
    color: var(--r27d-ink);
    background: #f5f8fc;
    translate: -1px 0;
}

body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu a.active {
    border-color: rgba(220, 181, 82, .4);
    color: var(--r27d-ink);
    background: linear-gradient(90deg, #eaf2fd, #fff7df);
    box-shadow: inset -3px 0 0 var(--r27d-gold);
}

body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu a.active span {
    color: var(--r27d-navy);
    background: linear-gradient(145deg, #f8e9b9, #e4bd59);
}

body.ayin-page .side-support-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-block-start: 10px;
    padding: 10px;
    border: 1px solid #dbe6f4;
    border-radius: 12px;
    color: var(--r27d-ink);
    background: linear-gradient(135deg, #f3f8ff, #fffaf0);
}

body.ayin-page .side-support-note > span {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    flex: 0 0 31px;
    border-radius: 9px;
    color: var(--r27d-blue);
    background: #e6f0ff;
}

body.ayin-page .side-support-note svg {
    width: 17px;
    height: 17px;
}

body.ayin-page .side-support-note strong,
body.ayin-page .side-support-note small {
    display: block;
}

body.ayin-page .side-support-note strong {
    font-size: 11px;
}

body.ayin-page .side-support-note small {
    margin-block-start: 2px;
    color: var(--r27d-muted);
    font-size: 9px;
}

/* Actual SVG corner motif hierarchy. */
body.ayin-page .ayin-block {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

body.ayin-page .ayin-block > * {
    position: relative;
    z-index: 2;
}

body.ayin-page .ayin-motif-primary::before,
body.ayin-page .ayin-motif-secondary::before,
body.ayin-page .ayin-motif-stat::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset-inline-start: 0;
    inset-block-start: 0;
    pointer-events: none;
}

body.ayin-page .ayin-motif-primary::before {
    width: 360px;
    height: 220px;
    background: url('../images/ayin/motifs/primary-corner-r27d.svg') left top / contain no-repeat;
}

body.ayin-page .ayin-motif-secondary::before {
    width: 220px;
    height: 150px;
    opacity: .7;
    background: url('../images/ayin/motifs/secondary-corner-r27d.svg') left top / contain no-repeat;
}

body.ayin-page .ayin-motif-stat::before {
    width: 150px;
    height: 110px;
    opacity: .78;
    background: url('../images/ayin/motifs/stat-corner-r27d.svg') left top / contain no-repeat;
}

/* Dashboard hierarchy. */
body.dashboard-page .hero-dashboard.ayin-block-primary {
    min-height: 166px;
    gap: 22px;
    padding: 24px 27px;
    border-radius: 20px;
    background: linear-gradient(112deg, #10283f 0%, #082f5f 57%, #061f43 100%);
    box-shadow: var(--r27d-shadow-strong);
}

body.dashboard-page .hero-dashboard::after {
    width: 250px;
    height: 250px;
    inset-inline-end: -130px;
    inset-block-start: -145px;
}

body.dashboard-page .hero-dashboard .ayin-hero-copy {
    flex: 1 1 auto;
    min-width: 0;
}

body.dashboard-page .hero-dashboard h1 {
    margin: 5px 0 7px;
    font-size: clamp(30px, 3vw, 42px);
}

body.dashboard-page .hero-dashboard p {
    max-width: 560px;
    font-size: 14px;
    line-height: 1.75;
}

body.dashboard-page .ayin-referral-card {
    width: min(310px, 38%);
    padding: 13px;
    border-radius: 14px;
    background: rgba(255,255,255,.085);
}

body.dashboard-page .ayin-referral-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-block-end: 9px;
}

body.dashboard-page .ayin-referral-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    border-radius: 10px;
    color: var(--r27d-gold-soft);
    background: rgba(239,199,94,.14);
}

body.dashboard-page .ayin-referral-icon svg {
    width: 18px;
    height: 18px;
}

body.dashboard-page .ayin-referral-heading strong,
body.dashboard-page .ayin-referral-heading small {
    display: block;
}

body.dashboard-page .ayin-referral-heading strong {
    color: #fff;
    font-size: 13px;
}

body.dashboard-page .ayin-referral-heading small {
    margin-block-start: 2px;
    color: rgba(255,255,255,.58);
    font-size: 10px;
}

body.dashboard-page .ayin-referral-card .referral-code {
    max-height: 42px;
    overflow: hidden;
    padding: 9px 10px;
    border-radius: 9px;
    font-size: 11px;
    line-height: 1.45;
}

body.dashboard-page .ayin-referral-card .ayin-btn {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-block-start: 7px;
    padding: 7px 11px;
    font-size: 11px;
}

body.dashboard-page .ayin-referral-card .ayin-btn svg {
    width: 15px;
    height: 15px;
}

body.dashboard-page .stats-grid {
    gap: 12px;
    margin-block: 16px;
}

body.dashboard-page .stat-card.ayin-block-kpi {
    min-height: 118px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 11px;
    padding: 17px;
    border-radius: 15px;
}

body.dashboard-page .stat-card .stat-icon {
    grid-row: 1 / 3;
    align-self: center;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--r27d-blue);
    background: #eaf2ff;
}

body.dashboard-page .stat-card.gold .stat-icon { color: #a57400; background: #fff3c9; }
body.dashboard-page .stat-card.green .stat-icon { color: #158647; background: #e7f8ed; }
body.dashboard-page .stat-card.blue .stat-icon { color: #1559b7; background: #e7f1ff; }

body.dashboard-page .stat-card .stat-icon svg {
    width: 21px;
    height: 21px;
}

body.dashboard-page .stat-card span {
    align-self: end;
    color: var(--r27d-muted);
    font-size: 12px;
    font-weight: 800;
}

body.dashboard-page .stat-card strong {
    align-self: start;
    margin-block-start: 3px;
    font-size: clamp(20px, 1.8vw, 27px);
}

body.dashboard-page .ayin-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, .78fr);
    gap: 16px;
}

body.dashboard-page .ayin-dashboard-grid > .ayin-card {
    min-height: 0;
    padding: 19px;
    border-radius: 17px;
}

body.dashboard-page .ayin-section-head {
    margin-block-end: 13px;
}

body.dashboard-page .ayin-section-title {
    font-size: clamp(23px, 2vw, 30px);
}

body.dashboard-page .ayin-section-note {
    color: var(--r27d-muted);
    font-size: 11px;
}

body.dashboard-page .services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body.dashboard-page .service-card {
    min-height: 100px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 6px;
    padding: 12px 8px;
    border-radius: 13px;
    color: #5f6e82;
}

body.dashboard-page .service-card b {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--r27d-blue);
    background: #eaf2ff;
}

body.dashboard-page .service-card b svg {
    width: 19px;
    height: 19px;
}

body.dashboard-page .service-card span {
    color: #4f6178;
    font-size: 13px;
    font-weight: 900;
}

body.dashboard-page .service-card small {
    min-height: 13px;
    font-size: 9px;
}

body.dashboard-page .service-card:hover {
    border-color: rgba(21,89,183,.28);
    color: var(--r27d-navy);
}

body.dashboard-page .service-card-soon {
    cursor: default;
    border-style: dashed;
    color: #9c875d;
    background: linear-gradient(180deg, #fffaf0, #fffdf9);
}

body.dashboard-page .service-card-soon b {
    color: #a57813;
    background: #fff0bd;
}

body.dashboard-page .service-card-soon span {
    color: #806b3d;
}

body.dashboard-page .service-card-soon small {
    width: max-content;
    min-height: 0;
    padding: 2px 7px;
    border-radius: 999px;
    color: #8f6d19;
    background: #fff0bd;
    font-weight: 900;
}

body.dashboard-page .ayin-activity-panel .ayin-section-head a,
body.dashboard-page .ayin-dashboard-orders .ayin-section-head a {
    color: var(--r27d-blue);
    font-size: 11px;
    font-weight: 900;
}

body.dashboard-page .ayin-empty-compact {
    min-height: 250px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    padding: 20px 12px;
}

body.dashboard-page .ayin-empty-compact > span {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #76869b;
    background: #f0f4f8;
}

body.dashboard-page .ayin-empty-compact svg {
    width: 23px;
    height: 23px;
}

body.dashboard-page .ayin-empty-compact strong {
    color: var(--r27d-ink);
    font-size: 14px;
}

body.dashboard-page .ayin-empty-compact small {
    color: var(--r27d-muted);
    font-size: 10px;
}

/* Smart RTL select: keeps native select as the form value, replaces only the popup UI. */
body.ayin-page .ayin-smart-select-native {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip: rect(0 0 0 0) !important;
}

body.ayin-page .ayin-smart-select {
    position: relative;
    min-width: 0;
    flex: 1 1 auto;
    align-self: stretch;
}

body.ayin-page .ayin-smart-select-trigger {
    width: 100%;
    height: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 4px 0 10px;
    border: 0;
    outline: 0;
    color: var(--r27d-ink);
    background: transparent;
    text-align: start;
    font-weight: 700;
}

body.ayin-page .ayin-smart-select-trigger.is-placeholder {
    color: #a0aabd;
    font-weight: 500;
}

body.ayin-page .ayin-smart-select-chevron {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: #718096;
    transition: transform .18s ease;
}

body.ayin-page .ayin-smart-select.is-open .ayin-smart-select-chevron {
    transform: rotate(180deg);
}

body.ayin-page .ayin-smart-select-menu {
    position: absolute;
    z-index: 5000;
    inset-inline: -42px -8px;
    inset-block-start: calc(100% + 8px);
    display: none;
    padding: 9px;
    border: 1px solid #d9e1ec;
    border-radius: 14px;
    color: var(--r27d-ink);
    background: rgba(255,255,255,.995);
    box-shadow: 0 22px 55px rgba(5,31,67,.18);
}

body.ayin-page .ayin-smart-select.is-open .ayin-smart-select-menu {
    display: block;
}

body.ayin-page .ayin-smart-select-search-wrap {
    position: relative;
    margin-block-end: 7px;
}

body.ayin-page .ayin-smart-select-search {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #dce3ec !important;
    border-radius: 10px;
    color: var(--r27d-ink);
    background: #f8fafc;
    box-shadow: none !important;
}

body.ayin-page .ayin-smart-select-options {
    max-height: 245px;
    overflow-y: auto;
    display: grid;
    gap: 3px;
    padding-inline-end: 2px;
    scrollbar-width: thin;
    scrollbar-color: #aeb8c7 #f1f4f7;
}

body.ayin-page .ayin-smart-select-option {
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border: 0;
    border-radius: 9px;
    color: #53647a;
    background: transparent;
    text-align: start;
    font-weight: 700;
}

body.ayin-page .ayin-smart-select-option:hover,
body.ayin-page .ayin-smart-select-option.is-focused {
    color: var(--r27d-ink);
    background: #eef5ff;
}

body.ayin-page .ayin-smart-select-option.is-selected {
    color: var(--r27d-navy);
    background: linear-gradient(90deg, #e8f1ff, #fff7dc);
    font-weight: 900;
}

body.ayin-page .ayin-smart-select-option.is-selected::after {
    content: '✓';
    color: #158647;
}

body.ayin-page .ayin-smart-select-empty {
    padding: 18px 10px;
    color: var(--r27d-muted);
    text-align: center;
    font-size: 12px;
}

body.ayin-page .auth-input-wrap:has(.ayin-smart-select.is-open),
body.ayin-page .profile-field:has(.ayin-smart-select.is-open),
body.ayin-page .checkout-form-grid label:has(.ayin-smart-select.is-open) {
    border-color: var(--r27d-blue) !important;
    box-shadow: 0 0 0 3px rgba(21,89,183,.15) !important;
}

@media (max-width: 1180px) {
    :root { --r27d-sidebar: 228px; }
    body.dashboard-page .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.dashboard-page .ayin-dashboard-grid { grid-template-columns: minmax(0, 1.35fr) minmax(260px, .8fr); }
}

@media (max-width: 960px) {
    body.ayin-page.ayin-account-shell-page .ayin-topbar-inner { flex-wrap: nowrap; }
    body.ayin-page .side-panel.ayin-side-panel-r27d { display: none; }
    body.dashboard-page .hero-dashboard.ayin-block-primary { min-height: 156px; }
}

@media (max-width: 760px) {
    body.ayin-page.ayin-account-shell-page .ayin-topbar { position: sticky; }
    body.ayin-page.ayin-account-shell-page .ayin-brand img,
    body.ayin-page.ayin-account-shell-page .ayin-brand svg { max-width: 122px; }
    body.ayin-page.ayin-account-shell-page .ayin-account-copy small { display: none; }
    body.ayin-page.ayin-account-shell-page .ayin-account-link { max-width: 44vw; }
    body.dashboard-page .hero-dashboard.ayin-block-primary { padding: 21px 18px; }
    body.dashboard-page .ayin-referral-card { width: 100%; }
    body.dashboard-page .ayin-dashboard-grid { grid-template-columns: 1fr; }
    body.dashboard-page .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.dashboard-page .ayin-empty-compact { min-height: 150px; }
    body.ayin-page .ayin-smart-select-menu { inset-inline: -42px -8px; }
}

@media (max-width: 540px) {
    body.dashboard-page .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.dashboard-page .service-card-soon { grid-column: 1 / -1; min-height: 76px; grid-template-columns: 36px auto auto; justify-content: center; }
    body.dashboard-page .stats-grid { grid-template-columns: 1fr; }
    body.dashboard-page .stat-card.ayin-block-kpi { min-height: 104px; }
    body.ayin-page .ayin-smart-select-menu { position: fixed; inset-inline: 14px; inset-block-start: 50%; transform: translateY(-50%); max-height: min(72vh, 520px); }
    body.ayin-page .ayin-smart-select-options { max-height: min(52vh, 360px); }
}

@media (prefers-reduced-motion: reduce) {
    body.ayin-page .ayin-smart-select-chevron { transition: none; }
}

/* AYIN Dashboard Visual Polish R27E
 * Targeted refinement requested after R27D visual review.
 * Keeps R27D structure and changes only sidebar hierarchy/interaction and dashboard headings.
 */
body.ayin-page .side-user-copy .ayin-muted {
    margin-block-start: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .015em;
}

body.ayin-page .side-user-status {
    margin-block-start: 6px;
    padding: 4px 9px;
    font-size: 10.5px;
    line-height: 1.2;
}

body.ayin-page .side-user-arrow {
    width: 18px;
    height: 18px;
}

body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu-label {
    margin: 11px 10px 5px;
    font-size: 10.5px;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: .015em;
}

body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu a:hover {
    border-color: rgba(239, 199, 94, .42);
    color: var(--r27d-ink);
    background: linear-gradient(90deg, #f3f7fd, #fff8e6);
    box-shadow: inset -3px 0 0 var(--r27d-gold);
    translate: -1px 0;
}

body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu a:hover span,
body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu a.active span {
    color: var(--r27d-navy-deep);
    background: var(--r27d-gold);
    box-shadow: 0 5px 13px rgba(191, 143, 30, .19);
}

body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu a.active {
    border-color: rgba(220, 181, 82, .48);
    background: linear-gradient(90deg, #eaf2fd, #fff7df);
    box-shadow: inset -3px 0 0 var(--r27d-gold);
}

body.dashboard-page .ayin-section-title {
    font-size: clamp(20px, 1.6vw, 25px);
    line-height: 1.25;
}

body.dashboard-page .ayin-section-head {
    margin-block-end: 11px;
}

@media (max-width: 1180px) {
    body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu-label {
        font-size: 10px;
    }
}

/* AYIN Dashboard Visual Balance R27F
 * Final targeted refinements after R27E visual review.
 * Beige sidebar state, bottom corner motifs, referral readability, and hero title scale.
 */
:root {
    --r27f-beige-accent: #dcc486;
    --r27f-beige-soft: #f7f1e3;
    --r27f-beige-soft-strong: #f2e7ca;
    --r27f-beige-border: #d4b86f;
}

/* Keep hover and active states in one beige family, without the blue cast. */
body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu a:hover,
body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu a.active {
    border-color: rgba(212, 184, 111, .56);
    color: var(--r27d-ink);
    background: linear-gradient(90deg, #fbf9f3, var(--r27f-beige-soft));
    box-shadow: inset -3px 0 0 var(--r27f-beige-accent);
}

body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu a:hover span,
body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu a.active span {
    color: var(--r27d-navy-deep);
    background: var(--r27f-beige-accent);
    box-shadow: 0 5px 13px rgba(139, 111, 48, .16);
}

body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu a.active {
    font-weight: 900;
}

/* Move block motifs from the upper corner to the lower corner. */
body.ayin-page .ayin-motif-primary::before,
body.ayin-page .ayin-motif-secondary::before,
body.ayin-page .ayin-motif-stat::before {
    inset-block-start: auto;
    inset-block-end: 0;
}

body.ayin-page .ayin-motif-primary::before {
    opacity: 1;
    background: url('../images/ayin/motifs/primary-corner-r27d.svg') right bottom / contain no-repeat;
}

body.ayin-page .ayin-motif-secondary::before {
    opacity: .9;
    background: url('../images/ayin/motifs/secondary-corner-r27d.svg') right bottom / contain no-repeat;
}

body.ayin-page .ayin-motif-stat::before {
    opacity: .92;
    background: url('../images/ayin/motifs/stat-corner-r27d.svg') right bottom / contain no-repeat;
}

/* Referral link is 15 percent larger; welcome title is approximately 20 percent smaller. */
body.dashboard-page .ayin-referral-card .referral-code {
    max-height: 46px;
    font-size: 13px;
    line-height: 1.5;
}

body.dashboard-page .hero-dashboard h1 {
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.2;
}

@media (max-width: 760px) {
    body.dashboard-page .hero-dashboard h1 {
        font-size: clamp(23px, 7vw, 30px);
    }
}

/* AYIN Dashboard Final Layout R27H
 * Requested final corrections after R27F visual review.
 * 1) Active sidebar matches hover exactly (no blue translucent cast).
 * 2) KPI motif fills the complete card height.
 * 3) Services and latest-activity motifs return to the upper corner.
 */

/* Active and hover are intentionally identical. Strong overrides remove the old blue cast. */
body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu a:hover,
body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu a.active,
body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu a.active:hover,
body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu a[aria-current="page"] {
    border-color: rgba(212, 184, 111, .66) !important;
    color: var(--r27d-ink) !important;
    background: linear-gradient(90deg, #f7f0dc 0%, #ead7a5 100%) !important;
    box-shadow: inset -3px 0 0 var(--r27f-beige-accent) !important;
}

body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu a:hover span,
body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu a.active span,
body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu a.active:hover span,
body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu a[aria-current="page"] span {
    color: var(--r27d-navy-deep) !important;
    background: var(--r27f-beige-accent) !important;
    box-shadow: 0 5px 13px rgba(139, 111, 48, .16) !important;
}

/* KPI cards: the SVG motif stretches to the complete block height with no white strip above or below. */
body.dashboard-page .stat-card.ayin-motif-stat::before {
    inset-block-start: 0 !important;
    inset-block-end: 0 !important;
    width: 46% !important;
    height: 100% !important;
    opacity: .94 !important;
    background-position: right center !important;
    background-size: auto 100% !important;
    background-repeat: no-repeat !important;
}

/* Services and latest activity: motif belongs in the upper corner, not the lower corner. */
body.dashboard-page .ayin-services-panel.ayin-motif-secondary::before,
body.dashboard-page .ayin-activity-panel.ayin-motif-secondary::before {
    inset-block-start: 0 !important;
    inset-block-end: auto !important;
    width: 230px !important;
    height: 158px !important;
    opacity: .9 !important;
    background-position: right top !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

@media (max-width: 760px) {
    body.dashboard-page .stat-card.ayin-motif-stat::before {
        width: 54% !important;
    }

    body.dashboard-page .ayin-services-panel.ayin-motif-secondary::before,
    body.dashboard-page .ayin-activity-panel.ayin-motif-secondary::before {
        width: 190px !important;
        height: 132px !important;
    }
}



/* R27H — Sidebar section labels removal and spacing cleanup.
 * Removes decorative group captions and the empty gap below the user card.
 */
body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu-label {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body.ayin-page .side-panel.ayin-side-panel-r27d .side-menu {
    gap: 3px;
    margin-block-start: 3px !important;
}

/* =========================================================
   AYIN Dashboard R27I — KPI & Microcopy Refinement
   - Extend KPI motifs beyond the card edge.
   - Increase KPI label readability.
   - Navy icon backgrounds with white icons.
   - Increase small supporting text sizes.
   ========================================================= */

/* 1) تمديد زخرفة SVG داخل بطاقات الإحصائيات وتحريكها قليلًا خارج الطرف. */
body.dashboard-page .stat-card.ayin-motif-stat::before {
    inset-inline-start: auto !important;
    inset-inline-end: -18px !important;
    inset-block-start: -5px !important;
    inset-block-end: auto !important;
    width: 56% !important;
    height: calc(100% + 10px) !important;
    opacity: .96 !important;
    background-position: right center !important;
    background-size: auto 108% !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
}

body.dashboard-page .stat-card.ayin-block-kpi {
    position: relative !important;
    overflow: hidden !important;
}

/* 2) تكبير عناوين بطاقات الإحصائيات الأربع قرابة 50%. */
body.dashboard-page .stat-card span {
    position: relative;
    z-index: 3;
    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    color: #66758a !important;
}

/* 3) خلفية أيقونات الإحصائيات كحلية والأيقونات بيضاء. */
body.dashboard-page .stat-card .stat-icon,
body.dashboard-page .stat-card.gold .stat-icon,
body.dashboard-page .stat-card.green .stat-icon,
body.dashboard-page .stat-card.blue .stat-icon {
    position: relative;
    z-index: 3;
    color: #ffffff !important;
    background: linear-gradient(145deg, var(--r27d-navy-soft), var(--r27d-navy-deep)) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    box-shadow: 0 9px 20px rgba(4, 23, 47, .18), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

body.dashboard-page .stat-card .stat-icon svg {
    color: #ffffff !important;
}
body.dashboard-page .stat-card .stat-icon svg [stroke]:not([stroke="none"]) {
    stroke: #ffffff !important;
}
body.dashboard-page .stat-card .stat-icon svg [fill]:not([fill="none"]) {
    fill: #ffffff !important;
}
body.dashboard-page .stat-card strong {
    position: relative;
    z-index: 3;
}

/* 4) تكبير النصوص المساندة المحددة. */
body.dashboard-page .ayin-section-note {
    font-size: 13px !important;
    line-height: 1.65 !important;
    color: #65748a !important;
}
body.dashboard-page .ayin-empty-compact small {
    font-size: 12px !important;
    line-height: 1.7 !important;
    color: #718096 !important;
}
body.dashboard-page .service-card small {
    min-height: 16px !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    color: #748197 !important;
}
body.ayin-page .side-support-note small {
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: #68778d !important;
}

@media (max-width: 760px) {
    body.dashboard-page .stat-card span {
        font-size: 16px !important;
    }
    body.dashboard-page .stat-card.ayin-motif-stat::before {
        inset-inline-end: -14px !important;
        width: 61% !important;
        background-size: auto 106% !important;
    }
    body.dashboard-page .ayin-section-note {
        font-size: 12px !important;
    }
}



/* =========================================================
   AYIN Dashboard R27L — KPI Right Edge & Label Weight Fix
   - Anchor KPI motif physically to the far-right card wall in RTL.
   - Keep the four KPI labels at regular 400 weight.
   ========================================================= */

/* Physical right is used intentionally; logical inline-end points left in RTL. */
body.dashboard-page .stat-card.ayin-motif-stat::before {
    left: auto !important;
    right: -18px !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    background-position: right center !important;
}

/* The four KPI labels should be readable but not bold. */
body.dashboard-page .stat-card span {
    font-weight: 400 !important;
}

@media (max-width: 760px) {
    body.dashboard-page .stat-card.ayin-motif-stat::before {
        left: auto !important;
        right: -14px !important;
        inset-inline-start: auto !important;
        inset-inline-end: auto !important;
    }
}

/* =========================================================
   AYIN Dashboard R27L — Main Content Background Fix
   - Preserves the approved desktop identity from R27J.
   - Tablet: compact header, hidden sidebar, bottom navigation.
   - Mobile: stacked hero, 2-column KPI/services app-like grids.
   - Small phones: safe text sizing and overflow protection.
   ========================================================= */

/* Prevent accidental horizontal overflow at every viewport. */
body.dashboard-page,
body.dashboard-page main,
body.dashboard-page .dashboard-shell,
body.dashboard-page .main-content {
    max-width: 100%;
    overflow-x: clip;
}

body.dashboard-page .hero-dashboard,
body.dashboard-page .stat-card,
body.dashboard-page .ayin-dashboard-grid > .ayin-card,
body.dashboard-page .service-card {
    min-width: 0;
}

/* Desktop and compact laptop refinement. */
@media (max-width: 1180px) and (min-width: 961px) {
    :root {
        --r27d-sidebar: 220px;
    }

    body.dashboard-page .dashboard-shell {
        gap: 16px;
        padding-block: 18px 38px;
    }

    body.dashboard-page .hero-dashboard.ayin-block-primary {
        gap: 18px;
        padding: 22px;
    }

    body.dashboard-page .hero-dashboard h1 {
        font-size: clamp(24px, 2.5vw, 32px);
    }

    body.dashboard-page .ayin-referral-card {
        width: min(292px, 39%);
    }

    body.dashboard-page .stat-card.ayin-block-kpi {
        min-height: 110px;
        padding: 15px;
    }

    body.dashboard-page .services-grid {
        gap: 9px;
    }
}

/* Tablet: the full desktop sidebar is replaced by the bottom navigation. */
@media (max-width: 960px) {
    body.dashboard-page {
        padding-block-end: calc(82px + env(safe-area-inset-bottom, 0px));
    }

    body.dashboard-page .ayin-topbar {
        position: sticky !important;
        inset-block-start: 0;
        z-index: 80;
    }

    body.dashboard-page .ayin-topbar-inner {
        min-height: 62px !important;
        padding-block: 7px !important;
    }

    body.dashboard-page .dashboard-shell {
        display: block !important;
        padding-block: 18px 28px;
    }

    body.dashboard-page .side-panel.ayin-side-panel-r27d {
        display: none !important;
    }

    body.dashboard-page .main-content {
        width: 100%;
    }

    body.dashboard-page .hero-dashboard.ayin-block-primary {
        min-height: auto;
        align-items: stretch;
        gap: 16px;
        padding: 22px;
    }

    body.dashboard-page .hero-dashboard .ayin-hero-copy {
        align-self: center;
    }

    body.dashboard-page .hero-dashboard h1 {
        font-size: clamp(25px, 4.2vw, 34px);
    }

    body.dashboard-page .hero-dashboard p {
        max-width: none;
        font-size: 13px;
    }

    body.dashboard-page .ayin-referral-card {
        width: min(300px, 42%);
        flex: 0 0 auto;
    }

    body.dashboard-page .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-block: 14px;
    }

    body.dashboard-page .ayin-dashboard-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    body.dashboard-page .ayin-empty-compact {
        min-height: 150px;
    }

    /* Ensure the mobile/tablet navigation is always available once the sidebar disappears. */
    body.dashboard-page .mobile-bottom-nav {
        position: fixed;
        z-index: 120;
        inset-inline: 14px;
        inset-block-end: max(10px, env(safe-area-inset-bottom, 0px));
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
        padding: 7px;
        border: 1px solid rgba(220, 196, 134, .48);
        border-radius: 18px;
        background: rgba(4, 23, 47, .96);
        box-shadow: 0 18px 45px rgba(4, 23, 47, .27);
        backdrop-filter: blur(14px);
    }

    body.dashboard-page .mobile-bottom-nav a {
        min-width: 0;
        min-height: 52px;
        display: grid;
        place-items: center;
        align-content: center;
        gap: 2px;
        padding: 5px 3px;
        border: 1px solid transparent;
        border-radius: 12px;
        color: rgba(255, 255, 255, .72);
        font-size: 10px;
        font-weight: 800;
        line-height: 1.15;
        text-align: center;
    }

    body.dashboard-page .mobile-bottom-nav a b {
        display: block;
        font-size: 17px;
        line-height: 1;
        filter: saturate(.75);
    }

    body.dashboard-page .mobile-bottom-nav a.active,
    body.dashboard-page .mobile-bottom-nav a[aria-current="page"] {
        border-color: rgba(239, 199, 94, .62);
        color: var(--r27d-navy-deep);
        background: linear-gradient(145deg, #f8e8b8, #d8b357);
        box-shadow: 0 8px 18px rgba(0, 0, 0, .16);
    }
}

/* Phones and portrait tablets. */
@media (max-width: 760px) {
    body.dashboard-page .ayin-container {
        width: min(100% - 22px, 1240px) !important;
    }

    body.dashboard-page .ayin-topbar-inner {
        gap: 7px;
    }

    body.dashboard-page .ayin-brand img,
    body.dashboard-page .ayin-brand svg {
        max-width: 112px;
        max-height: 38px;
    }

    body.dashboard-page .ayin-top-actions {
        gap: 5px;
    }

    body.dashboard-page .ayin-icon-btn {
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }

    body.dashboard-page .ayin-icon-btn svg {
        width: 18px;
        height: 18px;
    }

    body.dashboard-page .ayin-account-link {
        max-width: min(49vw, 190px);
        min-height: 38px;
        padding: 4px 8px;
        gap: 6px;
    }

    body.dashboard-page .ayin-top-avatar {
        width: 29px;
        height: 29px;
        flex-basis: 29px;
    }

    body.dashboard-page .ayin-account-copy strong {
        font-size: 11px;
    }

    body.dashboard-page .dashboard-shell {
        padding-block-start: 13px;
    }

    body.dashboard-page .hero-dashboard.ayin-block-primary {
        flex-direction: column;
        gap: 14px;
        padding: 19px 17px;
        border-radius: 18px;
    }

    body.dashboard-page .hero-dashboard h1 {
        margin-block: 3px 5px;
        font-size: clamp(23px, 7vw, 29px);
    }

    body.dashboard-page .hero-dashboard p {
        font-size: 12px;
        line-height: 1.7;
    }

    body.dashboard-page .ayin-referral-card {
        width: 100%;
        padding: 11px;
    }

    body.dashboard-page .ayin-referral-card .referral-code {
        max-height: none;
        font-size: 12px;
        overflow-wrap: anywhere;
    }

    body.dashboard-page .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
    }

    body.dashboard-page .stat-card.ayin-block-kpi {
        min-height: 108px;
        grid-template-columns: 38px minmax(0, 1fr);
        column-gap: 8px;
        padding: 13px 12px;
        border-radius: 14px;
    }

    body.dashboard-page .stat-card .stat-icon {
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }

    body.dashboard-page .stat-card .stat-icon svg {
        width: 19px;
        height: 19px;
    }

    body.dashboard-page .stat-card span {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }

    body.dashboard-page .stat-card strong {
        font-size: clamp(18px, 5vw, 23px);
        overflow-wrap: anywhere;
    }

    body.dashboard-page .stat-card.ayin-motif-stat::before {
        right: -12px !important;
        width: 68% !important;
        height: calc(100% + 8px) !important;
        background-size: auto 105% !important;
    }

    body.dashboard-page .ayin-dashboard-grid > .ayin-card {
        padding: 16px;
        border-radius: 15px;
    }

    body.dashboard-page .ayin-section-head {
        align-items: flex-start;
        gap: 8px;
        margin-block-end: 10px;
    }

    body.dashboard-page .ayin-section-title {
        font-size: 21px;
    }

    body.dashboard-page .ayin-section-note {
        max-width: 44%;
        font-size: 11px !important;
        line-height: 1.5 !important;
        text-align: end;
    }

    body.dashboard-page .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px;
    }

    body.dashboard-page .service-card {
        min-height: 92px;
        gap: 5px;
        padding: 10px 6px;
        border-radius: 12px;
    }

    body.dashboard-page .service-card b {
        width: 34px;
        height: 34px;
    }

    body.dashboard-page .service-card span {
        font-size: 12px;
    }

    body.dashboard-page .service-card small {
        font-size: 10px !important;
    }

    body.dashboard-page .service-card-soon {
        grid-column: auto;
        min-height: 92px;
        display: grid;
        grid-template-columns: 1fr;
    }

    body.dashboard-page .ayin-empty-compact {
        min-height: 135px;
        padding: 16px 10px;
    }

    body.dashboard-page .ayin-services-panel.ayin-motif-secondary::before,
    body.dashboard-page .ayin-activity-panel.ayin-motif-secondary::before {
        width: 155px !important;
        height: 110px !important;
        opacity: .72 !important;
    }
}

/* Very small phones: preserve the app-like 2-column layout when possible. */
@media (max-width: 420px) {
    body.dashboard-page .ayin-container {
        width: min(100% - 16px, 1240px) !important;
    }

    body.dashboard-page .ayin-brand {
        max-width: 94px;
    }

    body.dashboard-page .ayin-account-link {
        max-width: 44vw;
    }

    body.dashboard-page .ayin-account-copy strong {
        max-width: 90px;
    }

    body.dashboard-page .hero-dashboard.ayin-block-primary {
        padding: 17px 14px;
    }

    body.dashboard-page .stats-grid {
        gap: 8px;
    }

    body.dashboard-page .stat-card.ayin-block-kpi {
        min-height: 101px;
        grid-template-columns: 34px minmax(0, 1fr);
        column-gap: 6px;
        padding: 11px 9px;
    }

    body.dashboard-page .stat-card .stat-icon {
        width: 34px;
        height: 34px;
    }

    body.dashboard-page .stat-card span {
        font-size: 12px !important;
    }

    body.dashboard-page .stat-card strong {
        font-size: 18px;
    }

    body.dashboard-page .services-grid {
        gap: 8px;
    }

    body.dashboard-page .service-card {
        min-height: 86px;
    }

    body.dashboard-page .mobile-bottom-nav {
        inset-inline: 8px;
        gap: 2px;
        padding: 6px 4px;
        border-radius: 15px;
    }

    body.dashboard-page .mobile-bottom-nav a {
        min-height: 48px;
        font-size: 9px;
    }
}

/* Emergency fallback for exceptionally narrow screens. */
@media (max-width: 340px) {
    body.dashboard-page .stats-grid {
        grid-template-columns: 1fr !important;
    }

    body.dashboard-page .stat-card.ayin-block-kpi {
        min-height: 92px;
    }

    body.dashboard-page .ayin-brand {
        display: none;
    }

    body.dashboard-page .ayin-account-link {
        max-width: 58vw;
    }
}

/* Touch devices must not retain a sticky desktop hover appearance. */
@media (hover: none) {
    body.dashboard-page .service-card:hover,
    body.dashboard-page .stat-card:hover {
        translate: none;
    }
}

/* Landscape phones and short tablets. */
@media (max-width: 960px) and (max-height: 560px) and (orientation: landscape) {
    body.dashboard-page .mobile-bottom-nav {
        inset-inline: 20%;
    }

    body.dashboard-page .hero-dashboard.ayin-block-primary {
        flex-direction: row;
    }

    body.dashboard-page .ayin-referral-card {
        width: min(280px, 42%);
    }
}



/* =========================================================
   AYIN Dashboard R27L - Main Content Background Hotfix
   Removes the newly visible grey bands between dashboard
   sections without changing cards, sidebar, header, or data.
   ========================================================= */
body.dashboard-page .main-content {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Keep child cards and decorative motifs isolated above the surface. */
body.dashboard-page .main-content > * {
    position: relative;
}

/* =========================================================
   AYIN Dashboard R27M - Desktop Top Gap Cleanup
   Removes only the newly visible surface strip between the
   fixed top header and the dashboard hero/sidebar on desktop.
   Tablet and mobile spacing from R27K remains unchanged.
   ========================================================= */
@media (min-width: 961px) {
    body.dashboard-page .dashboard-shell {
        padding-block-start: 0 !important;
        margin-block-start: 0 !important;
        background-color: transparent !important;
        background-image: none !important;
    }
}

/* =========================================================
   AYIN Dashboard R27O - Desktop Surface & Spacing Final Fix
   - Restores a clean white 16px gap below the desktop header.
   - Removes the remaining grey/blue surface below dashboard cards.
   - Preserves cards, sidebar, hero, data, and responsive layouts.
   ========================================================= */
@media (min-width: 961px) {
    body.dashboard-page,
    body.dashboard-page main,
    body.dashboard-page .dashboard-shell,
    body.dashboard-page .main-content {
        background-color: #ffffff !important;
        background-image: none !important;
    }

    body.dashboard-page .dashboard-shell {
        padding-block-start: 16px !important;
        padding-block-end: 0 !important;
        margin-block-start: 0 !important;
        margin-block-end: 0 !important;
    }

    body.dashboard-page .main-content {
        padding-block-end: 0 !important;
        margin-block-end: 0 !important;
    }
}

/* =========================================================
   AYIN Dashboard R27O - Desktop Surface Balance Final Fix
   - Keeps all exposed dashboard surfaces pure white.
   - Removes residual background layers between sections.
   - Applies equal 28px spacing above and below the desktop dashboard.
   - Does not alter cards, sidebar, hero, or responsive layouts.
   ========================================================= */
@media (min-width: 961px) {
    body.dashboard-page,
    body.dashboard-page main,
    body.dashboard-page .dashboard-shell,
    body.dashboard-page .main-content,
    body.dashboard-page .stats-grid,
    body.dashboard-page .ayin-dashboard-grid {
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    body.dashboard-page .dashboard-shell {
        padding-block-start: 28px !important;
        padding-block-end: 28px !important;
        margin-block: 0 !important;
    }

    body.dashboard-page .main-content {
        padding-block: 0 !important;
        margin-block: 0 !important;
    }

    body.dashboard-page .stats-grid,
    body.dashboard-page .ayin-dashboard-grid {
        isolation: isolate;
    }

    body.dashboard-page .dashboard-shell::before,
    body.dashboard-page .dashboard-shell::after,
    body.dashboard-page .main-content::before,
    body.dashboard-page .main-content::after,
    body.dashboard-page .stats-grid::before,
    body.dashboard-page .stats-grid::after,
    body.dashboard-page .ayin-dashboard-grid::before,
    body.dashboard-page .ayin-dashboard-grid::after {
        content: none !important;
        display: none !important;
        background: none !important;
    }
}

/* =========================================================
   AYIN Dashboard R27Q - Transparent Exposed Surfaces
   - Removes assigned colors from dashboard layout wrappers.
   - Keeps approved top/bottom spacing from R27O unchanged.
   - Does not alter cards, hero, sidebar, SVG motifs, or data.
   ========================================================= */
@media (min-width: 961px) {
    body.dashboard-page main,
    body.dashboard-page .dashboard-shell,
    body.dashboard-page .main-content,
    body.dashboard-page .stats-grid,
    body.dashboard-page .ayin-dashboard-grid {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    body.dashboard-page .dashboard-shell::before,
    body.dashboard-page .dashboard-shell::after,
    body.dashboard-page .main-content::before,
    body.dashboard-page .main-content::after,
    body.dashboard-page .stats-grid::before,
    body.dashboard-page .stats-grid::after,
    body.dashboard-page .ayin-dashboard-grid::before,
    body.dashboard-page .ayin-dashboard-grid::after {
        content: none !important;
        display: none !important;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
    }
}

/* =========================================================
   AYIN Dashboard R27Q - Neutral Statistics Gap Surface Fix
   - Keeps the main dashboard wrapper transparent.
   - Converts the statistics section's external margins into
     internal white spacing so the body gradient cannot appear
     between the hero, KPI cards, and the following section.
   - Covers the gaps between KPI cards without changing cards.
   ========================================================= */
@media (min-width: 961px) {
    body.dashboard-page .stats-grid.ayin-live-stats {
        margin-block: 0 !important;
        padding-block: 16px !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    body.dashboard-page .stats-grid.ayin-live-stats::before,
    body.dashboard-page .stats-grid.ayin-live-stats::after {
        content: none !important;
        display: none !important;
        background: none !important;
    }
}

/* =========================================================
   AYIN Dashboard R27R — Unified Canvas Final Fix
   - Removes the visible statistics-section background rectangle.
   - Uses one uniform dashboard canvas color behind every section.
   - Restores spacing as transparent layout gap, not a colored block.
   - Preserves cards, hero, sidebar, SVG motifs, and responsive rules.
   ========================================================= */
@media (min-width: 961px) {
    body.dashboard-page,
    body.dashboard-page #ayin-main-content {
        background: #fbfbfa !important;
        background-color: #fbfbfa !important;
        background-image: none !important;
    }

    body.dashboard-page .dashboard-shell,
    body.dashboard-page .main-content,
    body.dashboard-page .stats-grid.ayin-live-stats,
    body.dashboard-page .ayin-dashboard-grid {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        filter: none !important;
    }

    body.dashboard-page .stats-grid.ayin-live-stats {
        margin-block: 22px !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    body.dashboard-page .dashboard-shell {
        padding-block-start: 28px !important;
        padding-block-end: 28px !important;
    }

    body.dashboard-page .dashboard-shell::before,
    body.dashboard-page .dashboard-shell::after,
    body.dashboard-page .main-content::before,
    body.dashboard-page .main-content::after,
    body.dashboard-page .stats-grid.ayin-live-stats::before,
    body.dashboard-page .stats-grid.ayin-live-stats::after,
    body.dashboard-page .ayin-dashboard-grid::before,
    body.dashboard-page .ayin-dashboard-grid::after {
        content: none !important;
        display: none !important;
        background: none !important;
        box-shadow: none !important;
    }
}