/* ============================================================
   Мобилен интерфейс — самостоятелен навигационен/визуален слой,
   НЕ responsive свиване на desktop оформлението (виж брифа).
   Всички класове тук са с префикс "m-", за да не се застъпват
   по никакъв начин с desktop класовете от style.css (напр. .card,
   .tag, .mini-stat вече означават нещо друго там).
   Използва същите CSS променливи (--ink, --paper, --glass-bg, ...)
   вече дефинирани в :root на style.css.
   ============================================================ */

/* ---- Превключване между desktop/mobile shell (авто, по ширина) ----
   Условието включва и "телефон в landscape" (max-height:500px при
   landscape ориентация) — иначе при завъртане телефонът просто минава
   прага от 768px по ширина и виждаш направо desktop оформлението. */
#appShell{ display:none; }
#mobileShell{ display:none; }
body.logged-in #appShell{ display:flex; }

@media (max-width: 768px), screen and (orientation: landscape) and (max-height: 500px){
  body.logged-in #appShell{ display:none; }
  body.logged-in #mobileShell{ display:flex; }
}

/* ---- "Заключване" на ориентацията към портрет (само за телефони) ----
   iOS Safari не поддържа Screen Orientation Lock API за PWA/сайтове, затова
   визуално завъртаме цялата страница обратно с CSS, вместо да разчитаме на
   истинско заключване на устройството. Условието max-height:500px гарантира,
   че засяга само телефони в landscape, не desktop прозорци с широк аспект. */
@media screen and (orientation: landscape) and (max-height: 500px){
  html:not(.force-desktop-view){
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

/* ---- Ръчно форсиране на изгледа (Настройки → Изглед, или ?view=…) ----
   "Мобилен" на десктоп — за презентации/видео разговори на голям екран,
   показва мобилното изживяване в рамка на телефон по средата на страницата.
   "Десктоп" на телефон — за изключения, когато ти трябва widescreen изглед
   (напр. таблица) дори на малък екран. И двете независимо от реалната
   ширина на прозореца/устройството. */
html.force-mobile-view body.logged-in #appShell{ display:none !important; }
html.force-mobile-view body.logged-in{
  display:flex; justify-content:center; align-items:flex-start;
  min-height:100vh; padding:24px 0;
  background: radial-gradient(circle at 50% 15%, rgba(99,102,241,0.18), transparent 60%), #0a0a14;
}
html.force-mobile-view body.logged-in #mobileShell{
  display:flex !important;
  position:relative !important; inset:auto !important;
  width:412px; height:890px; max-height:calc(100vh - 48px);
  border-radius:44px; border:10px solid #050508;
  box-shadow: 0 40px 90px rgba(0,0,0,0.55), 0 0 0 2px rgba(var(--tint-rgb),0.06);
  overflow:hidden; flex-shrink:0;
}

html.force-desktop-view body.logged-in #mobileShell{ display:none !important; }
html.force-desktop-view body.logged-in #appShell{ display:flex !important; }

.m-shell{
  position: fixed; inset:0;
  flex-direction: column;
  background: var(--paper);
  color: var(--text);
  z-index: 1;
}

/* ---- Top bar ---- */
.m-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: calc(14px + env(safe-area-inset-top)) 18px 10px 18px;
  flex-shrink:0;
}
.m-eyebrow{ text-transform:uppercase; letter-spacing:0.1em; font-size:10.5px; font-weight:700; color:var(--amber); }
.m-title{ font-size:22px; font-weight:800; margin:1px 0 0 0; letter-spacing:-0.01em; font-family: var(--font-display); }
.m-menu-btn{
  width:38px; height:38px; border-radius:12px; background:rgba(var(--tint-rgb),0.06);
  border:1px solid var(--line); color:var(--text); display:flex; align-items:center; justify-content:center;
  font-size:18px; cursor:pointer; flex-shrink:0;
}

/* ---- Segmented control ---- */
.m-segment{
  display:flex; gap:3px; margin:6px 18px 4px 18px; background:rgba(var(--tint-rgb),0.05);
  border-radius:12px; padding:4px; flex-shrink:0;
}
.m-segment button{
  flex:1; border:none; background:transparent; color:var(--text-dim); font-family:inherit;
  font-size:12.5px; font-weight:700; padding:8px 4px; border-radius:9px; cursor:pointer;
}
.m-segment button.active{ background:var(--glass-bg-2); color:var(--text); box-shadow:0 2px 8px rgba(0,0,0,0.3); }

/* ---- Content ---- */
.m-content{ flex:1; overflow-y:auto; padding:14px 18px calc(110px + env(safe-area-inset-bottom)) 18px; -webkit-overflow-scrolling:touch; }
.m-empty{ text-align:center; color:var(--text-dim); padding:40px 10px; font-size:13.5px; }

.m-mini-stats{ display:flex; gap:8px; margin-bottom:14px; }
.m-mini-stats.m-grid-2{ display:grid; grid-template-columns:1fr 1fr; }
.m-mini-stat{
  flex:1; background:var(--glass-bg); border:1px solid var(--line); border-radius:14px;
  padding:10px 12px; backdrop-filter:blur(10px); min-width:0;
}
.m-mini-stat .ml{ font-size:9.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-dim); font-weight:700; margin-bottom:4px; }
.m-mini-stat .mv{ font-family: var(--font-mono); font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-g1{ background:linear-gradient(90deg,var(--amber),var(--violet2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.m-g2{ background:linear-gradient(90deg,var(--cyan),var(--blue2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.m-g3{ background:linear-gradient(90deg,var(--lime),var(--ok)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

.m-chart-wrap{ position:relative; height:180px; margin-bottom:14px; }
.m-item-list{ margin-top:8px; }
.m-item-list .m-dragrow:first-child{ padding-top:0; }

.m-card{
  background:var(--glass-bg); border:1px solid var(--line); border-radius:16px;
  padding:12px 14px; margin-bottom:12px; backdrop-filter:blur(10px);
}
.m-card h4{ margin:0 0 8px 0; font-size:12.5px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.04em; }

/* Компактен едноредов запис — тап отваря bottom sheet за пълна редакция */
.m-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 0; border-bottom:1px solid var(--line); gap:10px; cursor:pointer;
}
.m-row:last-child{ border-bottom:none; }
.m-row .rt{ font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-row .rm{ font-size:11.5px; color:var(--text-dim); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-row .ra{ font-family: var(--font-mono); font-weight:700; font-size:13.5px; white-space:nowrap; flex-shrink:0; }
.m-ra.neg, .m-row .ra.neg{ color:var(--bad); }
.m-row .ra.pos{ color:var(--ok); }
.m-del{
  background:none; border:none; color:var(--text-dim); font-size:15px; cursor:pointer;
  padding:4px 2px; flex-shrink:0; line-height:1;
}
.m-tag{ font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:20px; background:rgba(99,102,241,0.22); color:#C7C9FB; white-space:nowrap; }

/* Плъзгащи се редове (SortableJS) */
.m-dragrow{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.m-dragrow:last-child{ border-bottom:none; }
.m-dragrow .dh{ color:var(--text-dim); font-size:16px; flex-shrink:0; touch-action:none; }
.m-dragrow .rt{ flex:1; font-size:13.5px; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-check{
  width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line); flex-shrink:0;
  background:none; cursor:pointer; padding:0;
}
.m-check.on{ background:linear-gradient(135deg,var(--ok),var(--cyan)); border-color:transparent; display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; }
.sortable-ghost{ opacity:0.35; }
.sortable-chosen .m-dragrow, .sortable-chosen{ background: rgba(var(--tint-rgb),0.03); border-radius:10px; }

.m-progress-track{ background:var(--line); border-radius:8px; height:7px; overflow:hidden; margin-top:6px; }
.m-progress-fill{ height:100%; border-radius:8px; }

.m-chip-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; margin-bottom:10px; }
.m-chip{
  flex-shrink:0; border:1px solid var(--line); background:rgba(var(--tint-rgb),0.05); color:var(--text-dim);
  font-size:12px; font-weight:700; padding:7px 13px; border-radius:20px; cursor:pointer; white-space:nowrap;
}
.m-chip.active{ background:linear-gradient(135deg,var(--ink),var(--violet2)); color:#fff; border-color:transparent; }

/* ---- FAB ---- */
.m-fab{
  position:fixed; right:18px; bottom: calc(90px + env(safe-area-inset-bottom));
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,var(--ink),var(--violet2)); color:#fff; font-size:26px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(99,102,241,0.5);
  border:none; cursor:pointer; z-index:20;
}
.m-fab[hidden]{ display:none; }

/* ---- Bottom nav ---- */
.m-bottomnav{
  position:fixed; left:0; right:0; bottom:0; background:rgba(var(--bar-bg-rgb),0.92);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top:1px solid var(--line); display:flex;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom)) 6px; z-index:15;
}
.m-navbtn{
  flex:1; background:none; border:none; display:flex; flex-direction:column; align-items:center;
  gap:3px; padding:5px 2px; color:var(--text-dim); cursor:pointer; font-family:inherit;
}
.m-navbtn .ic{ font-size:20px; line-height:1; }
.m-navbtn .lb{ font-size:10px; font-weight:700; }
.m-navbtn.active{ color:var(--text); }
.m-navbtn.active .ic{ background:linear-gradient(135deg,var(--ink),var(--amber)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ---- Slide-in menu (Настройки/Търсене/Експорт/Импорт/Изход) ---- */
.m-menu-overlay{ position:fixed; inset:0; background:rgba(6,7,18,0.55); z-index:70; display:none; }
.m-menu-overlay.show{ display:block; }
.m-menu-panel{
  position:absolute; top:0; right:0; bottom:0; width:250px; max-width:78vw;
  background:var(--glass-bg-2); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-left:1px solid var(--line);
  padding: calc(56px + env(safe-area-inset-top)) 16px 20px 16px;
  transform:translateX(100%); transition:transform .25s ease;
}
.m-menu-overlay.show .m-menu-panel{ transform:translateX(0); }
.m-menu-item{
  display:flex; align-items:center; gap:12px; padding:12px 10px; border-radius:11px;
  color:var(--text); font-size:13.5px; font-weight:600; cursor:pointer; margin-bottom:2px;
}
.m-menu-item:active{ background:rgba(var(--tint-rgb),0.08); }
.m-menu-close{
  position:absolute; top: calc(16px + env(safe-area-inset-top)); right:16px; width:32px; height:32px;
  border-radius:9px; background:rgba(var(--tint-rgb),0.08); border:none; color:var(--text); font-size:14px; cursor:pointer;
}

/* ---- Bottom sheet (споделен #modalOverlay/#modalBody с desktop, само CSS се различава) ----
   Прилага се и на реален тесен екран (@media), и в демо "Мобилен" изглед от
   Настройки (html.force-mobile-view) — демо режимът показва мобилната обвивка
   в рамка с фиксирана ширина вътре в широк desktop прозорец, така че самата
   viewport ширина не пада под 768px и @media не би сработила там сама по себе
   си. Обратното (:not(.force-desktop-view)) пази реален тесен телефон с
   изрично форсиран "Десктоп" изглед да не получи bottom-sheet модал. */
@media (max-width: 768px){
  html:not(.force-desktop-view) .modal-overlay{
    align-items:flex-end;
    padding:0;
  }
  html:not(.force-desktop-view) .modal{
    width:100%; max-width:100%;
    border-radius:22px 22px 0 0;
    padding: 10px 20px calc(20px + env(safe-area-inset-bottom)) 20px;
    max-height:88vh;
    transform: translateY(100%);
    transition: transform .28s ease;
  }
  html:not(.force-desktop-view) .modal-overlay.show .modal{ transform: translateY(0); }
  html:not(.force-desktop-view) .modal-handle{
    display:block; width:36px; height:4px; background:var(--line); border-radius:3px; margin:0 auto 14px auto;
  }
  html:not(.force-desktop-view) .sheet-choice{ display:flex; gap:10px; }
  html:not(.force-desktop-view) .sheet-choice button{
    flex:1; padding:16px 10px; border-radius:14px; border:1px solid var(--line);
    background:rgba(var(--tint-rgb),0.05); color:var(--text); font-family:inherit; font-weight:700; font-size:13px; cursor:pointer;
  }
}
html.force-mobile-view .modal-overlay{
  align-items:flex-end;
  padding:0;
}
html.force-mobile-view .modal{
  width:100%; max-width:100%;
  border-radius:22px 22px 0 0;
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom)) 20px;
  max-height:88vh;
  transform: translateY(100%);
  transition: transform .28s ease;
}
html.force-mobile-view .modal-overlay.show .modal{ transform: translateY(0); }
html.force-mobile-view .modal-handle{
  display:block; width:36px; height:4px; background:var(--line); border-radius:3px; margin:0 auto 14px auto;
}
html.force-mobile-view .sheet-choice{ display:flex; gap:10px; }
html.force-mobile-view .sheet-choice button{
  flex:1; padding:16px 10px; border-radius:14px; border:1px solid var(--line);
  background:rgba(var(--tint-rgb),0.05); color:var(--text); font-family:inherit; font-weight:700; font-size:13px; cursor:pointer;
}