/* Admin-only phone layout; original desktop styles remain the default. */ #legacy-root[data-view="dashboard"] .mobileAdminBar, #legacy-root[data-view="dashboard"] .mobileAdminBottom, #legacy-root[data-view="dashboard"] .mobileNavBackdrop, #legacy-root[data-view="dashboard"] .mobileDrawerClose { display:none; } @media screen and (max-width:900px) { #legacy-root[data-view="dashboard"] { --mobile-ink:#253651; --mobile-line:#dfe5ef; } #legacy-root[data-view="dashboard"] .shell { display:block; min-width:0; padding-top:calc(64px + env(safe-area-inset-top,0px)); padding-bottom:calc(82px + env(safe-area-inset-bottom,0px)); } #legacy-root[data-view="dashboard"] .shell > main { width:100%; min-width:0; margin:0; } #legacy-root[data-view="dashboard"] .mobileAdminBar { position:fixed; inset:0 0 auto; z-index:700; display:flex; align-items:center; gap:10px; height:calc(64px + env(safe-area-inset-top,0px)); padding:calc(10px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 10px max(12px,env(safe-area-inset-left,0px)); background:#192b49; color:#fff; box-sizing:border-box; box-shadow:0 3px 16px #16274426; } #legacy-root[data-view="dashboard"] .mobileAdminBar > div { flex:1; min-width:0; display:grid; gap:3px; } #legacy-root[data-view="dashboard"] .mobileAdminBar strong { color:#fff; font-size:15px; } #legacy-root[data-view="dashboard"] .mobileAdminBar span { color:#cfdaed; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #legacy-root[data-view="dashboard"] .mobileMenuButton { display:grid; place-items:center; width:44px; min-height:44px; flex-shrink:0; padding:8px; border:1px solid #ffffff38; border-radius:12px; color:#fff; background:#ffffff0d; } #legacy-root[data-view="dashboard"] .mobileWorkerLink { display:flex; align-items:center; min-height:44px; padding:8px; color:#dce8ff; font-size:12px; text-decoration:none; white-space:nowrap; } #legacy-root[data-view="dashboard"] .shell > .sidebar { display:flex; position:fixed; z-index:1100; inset:0 0 0 auto; width:min(340px,calc(100vw - 44px)); height:100dvh; padding:calc(18px + env(safe-area-inset-top,0px)) 18px calc(24px + env(safe-area-inset-bottom,0px)); border:0; overflow-y:auto; overscroll-behavior:contain; transform:translateX(110%); visibility:hidden; transition:transform .2s ease,visibility .2s; box-sizing:border-box; } #legacy-root[data-view="dashboard"] .shell[data-mobile-open="true"] > .sidebar { transform:translateX(0); visibility:visible; } #legacy-root[data-view="dashboard"] .mobileDrawerClose { display:block; width:100%; min-height:44px; margin-bottom:20px; padding:10px 14px; color:#fff; background:#ffffff12; border:1px solid #ffffff35; border-radius:12px; text-align:right; font-size:14px; } #legacy-root[data-view="dashboard"] .sidebar nav.groupedNav { display:flex; flex-direction:column; width:100%; margin-top:20px; padding:0; overflow:visible; gap:8px; } #legacy-root[data-view="dashboard"] .sidebar .navGroup { width:100%; min-width:0; } #legacy-root[data-view="dashboard"] .sidebar nav.groupedNav button { width:100%; min-height:48px; padding:12px; white-space:normal; font-size:14px; text-align:right; border:1px solid #ffffff1a; border-radius:12px; } #legacy-root[data-view="dashboard"] .sidebar .navGroupItems { margin:8px 14px 10px 0; padding-right:10px; } #legacy-root[data-view="dashboard"] .sidebar .navGroupItems:not([hidden]) { display:grid; grid-template-columns:1fr; gap:6px; } #legacy-root[data-view="dashboard"] .sidebar .navGroupItems[hidden] { display:none; } #legacy-root[data-view="dashboard"] .sidebar .navLabel { display:none; } #legacy-root[data-view="dashboard"] .mobileNavBackdrop { display:block; position:fixed; inset:0; z-index:1050; width:100%; height:100dvh; margin:0; padding:0; border:0; border-radius:0; background:#0e1d386b; backdrop-filter:blur(2px); } #legacy-root[data-view="dashboard"] .mobileAdminBottom { position:fixed; inset:auto 0 0; z-index:750; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; height:calc(74px + env(safe-area-inset-bottom,0px)); padding:6px max(7px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(7px,env(safe-area-inset-left,0px)); border-top:1px solid var(--mobile-line); background:#fffffff5; backdrop-filter:blur(16px); box-shadow:0 -5px 22px #2135520b; box-sizing:border-box; margin:0; overflow:visible; } #legacy-root[data-view="dashboard"] .mobileAdminBottom button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:100%; min-width:0; min-height:54px; padding:5px 2px; border:0; border-radius:12px; color:#65728a; background:transparent; font-size:11px; white-space:normal; } #legacy-root[data-view="dashboard"] .mobileAdminBottom button.is-current { color:#4e54a7; background:#edf0ff; font-weight:700; box-shadow:none; } #legacy-root[data-view="dashboard"] .mobileAdminBottom button:nth-child(3) { color:#fff; background:#5264c7; box-shadow:0 3px 10px #5264c72b; } #legacy-root[data-view="dashboard"] .mobileAdminBottom svg { width:22px; height:22px; flex-shrink:0; } #legacy-root[data-view="dashboard"] main > header { position:static; height:auto; min-height:48px; padding:8px 14px; background:#ffffffad; } #legacy-root[data-view="dashboard"] .breadcrumb { display:none; } #legacy-root[data-view="dashboard"] header .status { justify-content:space-between; flex-wrap:wrap; width:100%; gap:8px; font-size:12px; } #legacy-root[data-view="dashboard"] header .status button { min-height:40px; min-width:40px; padding:8px 10px; } #legacy-root[data-view="dashboard"] .content { padding:20px 14px; min-width:0; } #legacy-root[data-view="dashboard"] .heading { flex-wrap:wrap; gap:12px; } #legacy-root[data-view="dashboard"] .heading h1 { font-size:25px; line-height:1.4; } #legacy-root[data-view="dashboard"] .headActions { flex-wrap:wrap; width:100%; gap:8px; } #legacy-root[data-view="dashboard"] .headActions > button { flex:1; } #legacy-root[data-view="dashboard"] .shell button { touch-action:manipulation; } #legacy-root[data-view="dashboard"] .content button, #legacy-root[data-view="dashboard"] .modal button, #legacy-root[data-view="dashboard"] .content summary { min-height:44px; font-size:13px; } #legacy-root[data-view="dashboard"] button:focus-visible, #legacy-root[data-view="dashboard"] a:focus-visible { outline:3px solid #729aff; outline-offset:3px; } #legacy-root[data-view="dashboard"] .content :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea), #legacy-root[data-view="dashboard"] .modal :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { min-height:46px; max-width:100%; font-size:16px; } #legacy-root[data-view="dashboard"] input[type="checkbox"], #legacy-root[data-view="dashboard"] input[type="radio"] { width:22px; height:22px; accent-color:#5264c7; } #legacy-root[data-view="dashboard"] .ccToolbar, #legacy-root[data-view="dashboard"] .ccPanelHead, #legacy-root[data-view="dashboard"] .ledgerTop, #legacy-root[data-view="dashboard"] .inventoryHeading, #legacy-root[data-view="dashboard"] .assetFilters { flex-wrap:wrap; gap:10px; } #legacy-root[data-view="dashboard"] .ccToolbar > div:last-child { width:100%; flex-wrap:wrap; } #legacy-root[data-view="dashboard"] .ccToolbar input { flex:1; width:auto; min-width:140px; } #legacy-root[data-view="dashboard"] .ccMetrics, #legacy-root[data-view="dashboard"] .cards, #legacy-root[data-view="dashboard"] .financeStrip { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } #legacy-root[data-view="dashboard"] .ccMetric { padding:16px 12px; gap:8px; } #legacy-root[data-view="dashboard"] .ccMetric > strong { font-size:21px; overflow-wrap:anywhere; } #legacy-root[data-view="dashboard"] .ccMetric > span { font-size:12px; } #legacy-root[data-view="dashboard"] .ccGrid, #legacy-root[data-view="dashboard"] .advisorGrid { grid-template-columns:minmax(0,1fr); gap:12px; } #legacy-root[data-view="dashboard"] .ccPanel { padding:17px 14px; border-radius:16px; } #legacy-root[data-view="dashboard"] .ccQuick { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } #legacy-root[data-view="dashboard"] .ccQuick > button { width:100%; white-space:normal; } #legacy-root[data-view="dashboard"] .advisorItem { min-width:0; } #legacy-root[data-view="dashboard"] .advisorItem :is(p,strong,small) { overflow-wrap:anywhere; line-height:1.9; } #legacy-root[data-view="dashboard"] .advisorItem > button { width:100%; } #legacy-root[data-view="dashboard"] .tableWrap { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } #legacy-root[data-view="dashboard"] .tableWrap:has(table:not([data-mobile-cards]))::before { content:'اسحب الجدول جانبياً لعرض جميع الأعمدة ←'; display:block; padding:9px 12px; color:#68768e; background:#f2f5fa; font-size:12px; white-space:normal; } #legacy-root[data-view="dashboard"] .overlay { position:fixed; inset:0; z-index:2000; align-items:flex-end; padding:18px 0 0; overflow:auto; overscroll-behavior:contain; } #legacy-root[data-view="dashboard"] .modal { width:100%; max-width:100%; max-height:calc(100dvh - 18px); margin:0; padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px)); border-radius:22px 22px 0 0; overflow-y:auto; overscroll-behavior:contain; scroll-padding-bottom:100px; } #legacy-root[data-view="dashboard"] .modalHead { position:sticky; top:-20px; z-index:5; margin-top:-1px; padding:12px 0; background:#fff; } #legacy-root[data-view="dashboard"] .modalHead h2 { font-size:19px; } #legacy-root[data-view="dashboard"] .modalHead button { min-width:44px; } #legacy-root[data-view="dashboard"] .formGrid { grid-template-columns:1fr; gap:16px; } #legacy-root[data-view="dashboard"] .formGrid label { font-size:14px; } #legacy-root[data-view="dashboard"] .formBottom { flex-wrap:wrap; gap:12px; } #legacy-root[data-view="dashboard"] .formBottom > .primary { width:100%; min-height:50px; font-size:16px; } #legacy-root[data-view="dashboard"] .invoiceLine { grid-template-columns:1fr 1fr; gap:12px; } #legacy-root[data-view="dashboard"] .invoiceLine > label:first-child { grid-column:1/-1; } #legacy-root[data-view="dashboard"] .assetFilters :is(input,select), #legacy-root[data-view="dashboard"] .accountSelect select { flex:1; min-width:0; width:100%; } #legacy-root[data-view="dashboard"] .search { margin:12px; max-width:none; padding:5px 10px; } #legacy-root[data-view="dashboard"] .search input { width:100%; } #legacy-root[data-view="dashboard"] .rowActions { flex-wrap:wrap; gap:8px; } #legacy-root[data-view="dashboard"] .toast { bottom:calc(88px + env(safe-area-inset-bottom,0px)); max-width:calc(100vw - 28px); } #legacy-root[data-view="dashboard"] footer { padding-bottom:14px; } } @media screen and (max-width:600px) { #legacy-root[data-view="dashboard"] .tableWrap table[data-mobile-cards] { display:block; width:100%; min-width:0; padding:10px; border:0; white-space:normal; box-sizing:border-box; } #legacy-root[data-view="dashboard"] table[data-mobile-cards] thead { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; } #legacy-root[data-view="dashboard"] table[data-mobile-cards] tbody { display:grid; width:100%; gap:12px; } #legacy-root[data-view="dashboard"] table[data-mobile-cards] tbody tr { display:block; border:1px solid #e0e6ef; border-radius:13px; overflow:hidden; background:#fff; } #legacy-root[data-view="dashboard"] table[data-mobile-cards] tbody td { display:block; position:relative; width:100%; min-width:0; max-width:none; min-height:42px; padding:12px calc(35% + 12px) 12px 12px; box-sizing:border-box; text-align:right; white-space:normal; overflow-wrap:anywhere; border:0; border-bottom:1px solid #edf0f5; font-size:14px; line-height:1.7; } #legacy-root[data-view="dashboard"] table[data-mobile-cards] tbody td::before { content:attr(data-label); position:absolute; inset:12px 12px auto auto; width:calc(35% - 12px); color:#68768b; font-size:12px; font-weight:500; } #legacy-root[data-view="dashboard"] table[data-mobile-cards] tbody td:last-child { border-bottom:0; } #legacy-root[data-view="dashboard"] table[data-mobile-cards] td small { white-space:normal; line-height:1.7; } #legacy-root[data-view="dashboard"] table[data-mobile-cards] .rowActions button { min-width:44px; } #legacy-root[data-view="dashboard"] .partnerCards, #legacy-root[data-view="dashboard"] .capitalCards { grid-template-columns:1fr; } #legacy-root[data-view="dashboard"] .financeStrip { padding:14px 10px; } #legacy-root[data-view="dashboard"] .financeStrip > div { padding:8px; min-width:0; } } @media screen and (max-width:359px) { #legacy-root[data-view="dashboard"] .mobileWorkerLink { font-size:11px; padding:4px; } #legacy-root[data-view="dashboard"] .ccMetrics { grid-template-columns:1fr; } #legacy-root[data-view="dashboard"] .mobileAdminBottom button { font-size:10px; } } @media (prefers-reduced-motion:reduce) { #legacy-root[data-view="dashboard"] .sidebar { transition:none; } } @media print { #legacy-root[data-view="dashboard"] :is(.mobileAdminBar,.mobileAdminBottom,.mobileNavBackdrop,.mobileDrawerClose) { display:none!important; } #legacy-root[data-view="dashboard"] .shell { padding:0!important; } }