/* Phone app layout (body.app-shell) — see mobile.js */
body.app-shell { display: block !important; height: auto !important; min-height: 100vh; padding-top: 56px; padding-bottom: calc(66px + env(safe-area-inset-bottom)); background: #eef1f5; -webkit-tap-highlight-color: transparent; }
body.app-shell .topbar { display: none !important; }
body.app-shell .layout { display: block !important; height: auto !important; }

.m-bar { position: fixed; top: 0; inset-inline: 0; height: 56px; z-index: 35; display: flex; align-items: center; gap: 10px; padding: 0 12px;
  background: linear-gradient(135deg, #0f766e, #115e59); color: #fff; box-shadow: 0 2px 10px rgba(15, 23, 42, .2); }
.m-logo { width: 32px; height: 32px; border-radius: 9px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.m-title { flex: 1; font-weight: 700; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-bar .user-btn { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); color: #fff; padding: 3px; }
.m-bar #userName { display: none; }
.m-bar .avatar { background: #fff; color: #0f766e; }
.m-bar .user-drop { color: var(--text); }

.m-nav { position: fixed; bottom: 0; inset-inline: 0; z-index: 35; display: flex; background: #fff; border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 12px rgba(15, 23, 42, .06); }
.m-nav button { position: relative; flex: 1 1 0; min-width: 0; height: 64px; border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: #64748b; font-size: 11.5px; font-weight: 700; padding: 0 2px; }
.m-nav button span:not(.i) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.m-nav button .i { font-size: 22px; line-height: 1; filter: grayscale(1); opacity: .7; transition: .15s; }
.m-nav button.active { color: #0f766e; }
.m-nav button.active .i { filter: none; opacity: 1; transform: translateY(-1px) scale(1.08); }
.m-nav button.active::before { content: ''; position: absolute; top: 0; inset-inline: 22%; height: 3px; border-radius: 0 0 3px 3px; background: #0f766e; }
.m-dot { position: absolute; top: 10px; inset-inline-end: calc(50% - 18px); width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; border: 2px solid #fff; }

/* screens */
body.app-shell[data-screen="paper"] .side { display: none !important; }
body.app-shell:not([data-screen="paper"]) .work { display: none !important; }
body.app-shell .side { border: 0 !important; background: transparent; padding: 12px; overflow: visible; }
body.app-shell .side .panel:not(.hidden) { background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 6px 18px rgba(15,23,42,.05); margin-bottom: 12px; }
body.app-shell .side .panel h3 { font-size: 15px; color: #0f172a; }
body.app-shell .panel input:not([type=checkbox]), body.app-shell .panel select, body.app-shell .panel textarea { padding: 11px 12px; border-radius: 12px; font-size: 15px; }
body.app-shell .primary.wide { padding: 14px; border-radius: 14px; font-size: 16px; }
body.app-shell .drop { padding: 30px 14px; border-radius: 16px; }
body.app-shell .scan-btns .btn-like.big { padding: 22px 6px; border-radius: 16px; font-size: 15px; flex-direction: column; gap: 6px; }
body.app-shell .scan-pages { grid-template-columns: repeat(2, 1fr); }
body.app-shell .counts { grid-template-columns: repeat(3, 1fr); }

/* paper screen */
body.app-shell .work { display: block; }
body.app-shell .toolbar { position: sticky; top: 56px; z-index: 25; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding: 6px 8px; scrollbar-width: none; }
body.app-shell .toolbar::-webkit-scrollbar { display: none; }
body.app-shell .toolbar .grp { flex-shrink: 0; }
body.app-shell .toolbar button { min-width: 38px; min-height: 38px; }
body.app-shell .pages-scroll { overflow: visible; padding: 12px 0 96px; }
body.app-shell .empty { padding: 50px 24px; }

.m-quick { display: none; }
body.app-shell[data-screen="paper"] .m-quick { display: flex; position: fixed; z-index: 30; inset-inline: 12px; bottom: calc(74px + env(safe-area-inset-bottom)); gap: 8px; }
.m-quick button { flex: 1; padding: 12px 6px; border-radius: 14px; font-weight: 700; font-size: 15px; box-shadow: 0 4px 14px rgba(15,23,42,.18); }
.m-quick .ghost { background: #fff; }

/* actions sheet */
.m-sheet { position: fixed; inset: 0; z-index: 60; background: rgba(15,23,42,.45); display: flex; align-items: flex-end; }
.m-sheet[hidden] { display: none; }
.m-sheet-card { background: #fff; width: 100%; border-radius: 22px 22px 0 0; padding: 8px 16px calc(20px + env(safe-area-inset-bottom)); animation: m-up .18s ease-out; }
@keyframes m-up { from { transform: translateY(40%); opacity: .6; } to { transform: none; opacity: 1; } }
.m-grab { width: 42px; height: 5px; border-radius: 3px; background: #cbd5e1; margin: 4px auto 10px; }
.m-sheet h4 { margin: 8px 2px; color: var(--muted); font-size: 13px; }
.m-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-grid > * { display: flex !important; align-items: center; justify-content: center; text-align: center; padding: 14px 8px !important; border-radius: 14px !important; font-size: 14px !important; font-weight: 600; min-height: 52px; }
.m-grid select { width: 100%; max-width: none !important; }
.m-grid[hidden], .m-sheet h4[hidden] { display: none !important; }

/* dialogs feel like app screens */
body.app-shell .modal { border-radius: 18px; }
body.app-shell .overlay { padding: 10px; }
body.app-shell .toast { bottom: calc(84px + env(safe-area-inset-bottom)); border-radius: 14px; }
body.app-shell .auth-screen { z-index: 95; }

/* = sidebar (side drawer) = everything, organized */
.m-drawer { position: fixed; inset: 0; z-index: 70; }
.m-drawer[hidden] { display: none; }
.m-d-backdrop { position: absolute; inset: 0; background: rgba(4, 12, 24, .55); }
.m-d-card { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: min(84vw, 330px); display: flex; flex-direction: column;
  background: #fff; box-shadow: 22px 0 44px rgba(4, 12, 24, .25); animation: m-slide .16s ease-out; }
@keyframes m-slide { from { transform: translateX(var(--m-in, -30px)); opacity: .5; } to { transform: none; opacity: 1; } }
.m-drawer { --m-in: 40px; }
.m-d-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: linear-gradient(135deg, #0f766e, #115e59); color: #fff; cursor: pointer; }
.m-d-head img { width: 36px; height: 36px; border-radius: 9px; background: #fff; }
.m-d-head b { flex: 1; font-size: 16.5px; }
.m-d-body { flex: 1; overflow-y: auto; padding: 12px 12px 26px; }
.m-d-body h5 { margin: 14px 2px 7px; font-size: 12.5px; color: #0f766e; }
.m-d-body h5:first-child { margin-top: 4px; }
.m-d-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; margin-bottom: 5px;
  border: 1px solid var(--border, #e2e8f0); background: #f8fafc; border-radius: 12px; font-size: 14px; font-weight: 600; color: #0f172a; text-align: start; }
.m-d-row .i { width: 22px; text-align: center; flex: none; }
.m-d-row small { color: #64748b; font-weight: 500; }
.m-d-row.active { background: #dcfce7; border-color: #0f766e; color: #065f46; }
.m-d-row .m-cur { margin-inline-start: auto; font-size: 12px; color: #0f766e; }
.m-d-foot { color: #94a3b8; font-size: 11.5px; line-height: 1.5; margin-top: 10px; }

/* one-line bottom-tab label (no wrapping — ever) */
body.app-shell .m-nav button .l { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10.8px; line-height: 1.35; }

/* الحصص اللي كانت بتتسحب يمين وشمال → عمودية بعيد تحت (scroll down) */
body.app-shell .tch-weekgrid { display: block !important; overflow: visible !important; padding-bottom: 0; }
body.app-shell .tch-weekgrid .tch-col { margin-bottom: 8px; }
body.app-shell .tch-monthgrid { gap: 3px; }
body.app-shell .tch-cell { min-height: 44px; }

/* dark theme on the phone too */
html[data-theme="dark"] body.app-shell { background: #0b1220; }
html[data-theme="dark"] .m-nav { background: #101a2b; border-top-color: #1e2b45; }
html[data-theme="dark"] .m-nav button { color: #8ba0bd; }
html[data-theme="dark"] .m-nav button.active { color: #34d399; }
html[data-theme="dark"] .m-nav button.active::before { background: #34d399; }
html[data-theme="dark"] .m-dot { border-color: #101a2b; }
html[data-theme="dark"] body.app-shell .side .panel:not(.hidden) { background: #101a2b; }
html[data-theme="dark"] .m-sheet-card { background: #101a2b; color: #e6edf6; }
html[data-theme="dark"] .m-d-card { background: #0e1729; }
html[data-theme="dark"] .m-d-row { background: #131f33; border-color: #233350; color: #e6edf6; }
html[data-theme="dark"] .m-d-row.active { background: #103626; border-color: #34d399; color: #a7f3d0; }
html[data-theme="dark"] .m-d-body h5 { color: #34d399; }