:root{
  /* Text colors all clear WCAG AA (4.5:1) on both --paper and --paper-2; --sky-deep does too with
     white text on it, which is why it (not the lighter brand --sky) fills active items and buttons. */
  --paper:#F3F5F8; --paper-2:#FFFFFF; --ink:#0F1B2D; --ink-soft:#394960; --ink-faint:#5C6B80;
  --sky:#3FADE0; --sky-deep:#1672A8; --sky-tint:#E8F3FA; --sun:#FFC93C; --coral:#D63D25; --leaf:#1F8F5F;
  --line:#D8E0E9; --line-strong:#B6C4D3;
  --nav-bg:#14233A; --nav-ink:#C9D5E3; --nav-hover:#20334F;
  --radius:18px; --radius-sm:11px; --radius-lg:22px;
  --shadow-sm:0 2px 8px -4px rgba(34,49,74,0.14);
  --shadow:0 10px 24px -14px rgba(34,49,74,0.28);
  --shadow-lg:0 20px 45px -18px rgba(34,49,74,0.32);
  --ease:cubic-bezier(.25,.8,.4,1);
}
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Nunito',sans-serif;font-size:14px;line-height:1.45;}

/* Until Vue mounts, its v-if/v-else directives are inert plain attributes, so the browser would
   otherwise paint every branch (login form included) at once. #app stays hidden and a plain,
   non-Vue loading screen shows instead; Vue strips [v-cloak] the moment it mounts, which is also
   the signal (via the sibling selector below) to hide the static screen. */
[v-cloak]{display:none;}
#app:not([v-cloak]) ~ #boot-loading{display:none;}
h1,h2,h3{font-family:'Unbounded',sans-serif;line-height:1.25;margin:0;}
button,input,textarea,select{font-family:inherit;font-size:inherit;}
a{color:var(--sky-deep);}
::selection{background:rgba(63,173,224,.28);}
a:hover{color:var(--ink);}

.icon{width:16px;height:16px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;}

/* ---------- app shell: side nav + main ---------- */
.app-shell{display:grid;grid-template-columns:212px minmax(0,1fr);min-height:100vh;}
.main{min-width:0;}

.side-nav{
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:18px;
  background:var(--nav-bg);color:var(--nav-ink);padding:16px 12px;overflow-y:auto;z-index:8;
}
.side-nav .brand{display:flex;align-items:center;gap:9px;padding:2px 6px;font-family:'Unbounded',sans-serif;font-weight:700;font-size:14px;color:#fff;}
.brand-mark{width:28px;height:28px;border-radius:9px;background:var(--sky);display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto;}
.brand-mark .icon{width:16px;height:16px;stroke-width:2.2;}

.nav-tabs{display:flex;flex-direction:column;gap:2px;}
.nav-tab{
  display:flex;align-items:center;gap:10px;width:100%;border:none;background:none;color:var(--nav-ink);text-align:left;
  border-radius:9px;padding:8px 10px;cursor:pointer;font-weight:700;font-size:13.5px;transition:background .15s var(--ease),color .15s var(--ease);
}
.nav-tab:hover{color:#fff;background:var(--nav-hover);}
.nav-tab.active,.nav-tab.active:hover{background:var(--sky-deep);color:#fff;}
.nav-tab-count{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:100px;background:var(--coral);color:#fff;font-size:11.5px;line-height:20px;text-align:center;}


/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line-strong);background:var(--paper-2);color:var(--ink);border-radius:9px;padding:7px 13px;cursor:pointer;font-weight:700;transition:border-color .15s var(--ease),background .15s var(--ease),transform .1s var(--ease);}
.btn:hover{border-color:var(--sky-deep);}
.btn:active{transform:scale(.97);}
.btn:disabled{opacity:.55;cursor:default;transform:none;}
.btn-primary{background:var(--sky-deep);border-color:var(--sky-deep);color:#fff;}
.btn-primary:hover{background:#105A86;border-color:#105A86;}
.btn-danger{color:var(--coral);}
.btn-danger:hover{border-color:var(--coral);background:#FDEEEB;}
.btn-small{padding:4px 10px;font-size:12.5px;border-radius:8px;}
.btn-add{width:100%;justify-content:center;background:var(--sky-tint);border-color:#BFDCEE;color:var(--sky-deep);margin-bottom:8px;}
.btn-add:hover{background:#D9ECF8;border-color:var(--sky-deep);}

/* ---------- forms ---------- */
.field{margin-bottom:12px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;}
@media (max-width: 600px){.field-row{grid-template-columns:1fr;}}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-soft);margin-bottom:4px;}
.field input, .field textarea{width:100%;border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);padding:7px 10px;background:#fff;color:var(--ink);transition:border-color .15s var(--ease),box-shadow .15s var(--ease);}
.field input.archived{background:#EDEDED;}
.field textarea{min-height:64px;resize:vertical;}
.field textarea.tall{min-height:105px;}
/* Notes fields for groups and students: 25% taller than .tall. */
.field textarea.notes-tall{min-height:131px;}
.field textarea.xtall{min-height:280px;}
.field input:focus, .field textarea:focus{outline:none;border-color:var(--sky-deep);box-shadow:0 0 0 3px rgba(63,173,224,.16);}

.doc-upload{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:13px;}
.file-btn{
  display:inline-flex;align-items:center;gap:7px;position:relative;
  border:1.5px solid var(--line-strong);background:var(--paper-2);color:var(--ink);
  border-radius:var(--radius-sm);padding:7px 14px;font-weight:600;font-size:13px;
  cursor:pointer;transition:border-color .15s,background .15s;
}
.file-btn:hover{border-color:var(--sky);background:#fff;}
.file-btn.disabled{opacity:.55;cursor:default;pointer-events:none;}
.file-btn.filled{background:#E6F7EF;border-color:var(--leaf);color:#1F8F5F;}
.file-btn.filled:hover{background:#DAF2E7;border-color:var(--leaf);}
.file-btn input[type=file]{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.bundle-upload{padding:12px 14px;border:1.5px dashed var(--line-strong);border-radius:var(--radius-sm);background:#F7F9FB;}
.bundle-ok{font-size:13px;font-weight:700;color:var(--leaf);}
.doc-upload-hint{margin-top:4px;font-size:12px;color:var(--ink-soft);}
.lesson-stats{margin:0 0 12px;color:var(--ink-soft);}
.lesson-stats strong{color:var(--ink);}
.lesson-meta{margin-top:14px;font-size:12px;color:var(--ink-faint);}

/* ---------- accordion (lesson material blocks) ---------- */
.accordion{border-radius:14px;border:1.5px solid var(--line);border-left-width:4px;margin-bottom:12px;overflow:hidden;background:#fff;transition:box-shadow .15s var(--ease);}
.accordion.open{box-shadow:var(--shadow-sm);}
.accordion-teacher{border-left-color:var(--sky-deep);}
.accordion-student{border-left-color:#E0A800;}
.accordion-parent{border-left-color:var(--leaf);}
.accordion-header{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  border:none;background:none;cursor:pointer;padding:13px 16px;text-align:left;color:var(--ink);
}
.accordion-teacher .accordion-header{background:#EAF6FC;}
.accordion-student .accordion-header{background:#FFF9E4;}
.accordion-parent .accordion-header{background:#E9F8F0;}
.accordion-header-left{display:flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto;}
.accordion-header-right{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.accordion-header-title{display:flex;align-items:center;gap:9px;font-family:'Unbounded',sans-serif;font-weight:600;font-size:13px;min-width:0;}
.accordion-header-title .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;}
.accordion-header-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.accordion-teacher .dot{background:var(--sky-deep);}
.accordion-student .dot{background:#E0A800;}
.accordion-parent .dot{background:var(--leaf);}
.accordion-chevron{transition:transform .18s var(--ease);color:var(--ink-soft);}
.accordion.open .accordion-chevron{transform:rotate(180deg);}
.accordion-status{font-size:12px;font-weight:700;color:var(--ink-faint);}
.accordion-body{padding:14px 16px 16px;border-top:1.5px solid var(--line);}

.icon-btn{display:inline-flex;align-items:center;justify-content:center;border:none;background:none;color:var(--ink-soft);cursor:pointer;padding:5px;border-radius:8px;transition:background .15s var(--ease),color .15s var(--ease);}
.icon-btn:hover{background:rgba(34,49,74,.08);color:var(--ink);}
.icon-btn .icon{width:16px;height:16px;}
.icon-btn .icon-color{width:24px;height:24px;}

/* ---------- select ---------- */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  width:100%;border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);padding:7px 30px 7px 10px;
  background-color:#fff;color:var(--ink);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2354627A' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:11px 7px;
  transition:border-color .15s var(--ease);
}
select:hover{border-color:var(--sky-deep);}
select:focus{outline:none;border-color:var(--sky-deep);box-shadow:0 0 0 3px rgba(63,173,224,.16);}
select:disabled{opacity:.55;cursor:default;}
select::-ms-expand{display:none;}

.error-banner{
  display:flex;align-items:center;gap:10px;background:#FFEDEB;border:1.5px solid var(--coral);color:#9c2b1c;
  border-radius:var(--radius-sm);padding:10px 10px 10px 14px;font-size:14px;box-shadow:var(--shadow);
  position:fixed;top:16px;left:0;right:0;margin:0 auto;z-index:30;
  width:fit-content;max-width:min(520px,calc(100% - 32px));animation:fade-in .15s var(--ease);
}
.error-banner-close{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border:none;background:none;color:#9c2b1c;cursor:pointer;padding:4px;border-radius:8px;opacity:.75;}
.error-banner-close:hover{opacity:1;background:rgba(156,43,28,.12);}

/* ---------- login ---------- */
.center-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:
  radial-gradient(circle at 15% 20%,rgba(63,173,224,.10),transparent 45%),
  radial-gradient(circle at 85% 80%,rgba(255,201,60,.12),transparent 45%),var(--paper);}
.login-card{background:var(--paper-2);border:1.5px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:34px;width:340px;max-width:92vw;}
.login-card h1{font-size:19px;margin-bottom:18px;}

/* ---------- search box ---------- */
.search-box{position:relative;margin-bottom:12px;}
.search-box .icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-faint);pointer-events:none;}
.search-box input{width:100%;border:1.5px solid var(--line-strong);border-radius:100px;padding:7px 12px 7px 32px;background:#fff;color:var(--ink);transition:border-color .15s var(--ease),box-shadow .15s var(--ease);}
.search-box input:focus{outline:none;border-color:var(--sky-deep);box-shadow:0 0 0 3px rgba(63,173,224,.16);}

.new-dot{width:8px;height:8px;border-radius:50%;background:var(--coral);flex:0 0 auto;}

.card{background:var(--paper-2);border:1.5px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow-sm);}
.card h3{font-size:13.5px;margin-bottom:12px;}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.link-box{flex:1;min-width:180px;background:#fff;border:1.5px solid var(--line);border-radius:9px;padding:7px 10px;font-size:13px;word-break:break-all;color:var(--ink-soft);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.link-row{margin-bottom:10px;}
.link-row .link-label{font-size:12px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px;}

.badge{display:inline-block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;border-radius:100px;padding:3px 9px;}
.badge-active{background:#DDF3E8;color:#146C47;}
.badge-archived{background:#E6EAEF;color:var(--ink-soft);}
.badge-new{background:#FDE4DF;color:#A8301C;}
.badge-group{display:inline-flex;gap:6px;flex-wrap:wrap;}
.badge-theme{background:#FFF1CC;color:#7A5200;}
.badge-role{background:#EAF1FE;color:var(--sky-deep);}

.lesson{border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px;background:#fff;}
.lesson .lesson-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;}
.lesson .date{font-family:'Unbounded',sans-serif;font-weight:700;font-size:12.5px;color:var(--sky-deep);}
.lesson .topic{font-weight:700;}
.lesson .text{white-space:pre-wrap;}
.lesson .actions{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;}

.lead-facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:14px 0 16px;}
.lead-facts dt{font-size:12.5px;font-weight:700;color:var(--ink-soft);}
.lead-facts dd{margin:0;font-weight:700;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;}
.lead-contact{overflow-wrap:anywhere;}
.lead-facts dd .btn{white-space:nowrap;}

.member-row{display:flex;justify-content:space-between;align-items:center;padding:8px 4px;border-bottom:1px solid var(--line);gap:10px;}
.member-row:last-child{border-bottom:none;}

/* ---------- full-width page with a data table (Заявки) ---------- */
.page{padding:22px 24px;max-width:1280px;}
.page-header{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.page-header h1{font-size:18px;}
.page-header-action{margin-left:auto;}
.cell-hint{font-weight:500;color:var(--ink-faint);}
.data-table .cell-id{width:1%;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink-faint);}
.table-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.toolbar-select{width:190px;}
.toolbar-search{flex:0 1 300px;margin-bottom:0;}

.table-card{background:var(--paper-2);border:1.5px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);overflow:hidden;}
.table-scroll{overflow-x:auto;}
.data-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.data-table th{
  text-align:left;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);
  background:#F7F9FB;padding:10px 12px;border-bottom:1.5px solid var(--line);white-space:nowrap;
}
.data-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle;}
.data-table tbody tr:last-child td{border-bottom:none;}
.data-table tbody tr[tabindex]{cursor:pointer;transition:background .12s var(--ease);}
.data-table tbody tr[tabindex]:hover{background:var(--sky-tint);}
.data-table tbody tr[tabindex]:focus-visible{outline:2px solid var(--sky-deep);outline-offset:-2px;}
.data-table .row-new td{font-weight:700;}
.data-table .row-muted td{color:var(--ink-faint);}
.detail-stack{max-width:860px;}
.data-table .strong{font-weight:700;}
.data-table .new-dot{display:inline-block;margin-right:7px;vertical-align:1px;}
.data-table .nowrap{white-space:nowrap;}
.cell-notes{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-soft);font-weight:500 !important;}
.table-empty{text-align:center;color:var(--ink-faint);padding:28px 12px !important;}

.pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 12px;border-top:1.5px solid var(--line);background:#F7F9FB;}
.pagination-range{font-size:13px;color:var(--ink-soft);font-weight:600;}
.pagination-pages{display:flex;align-items:center;gap:4px;}
.pagination-pages .btn{min-width:32px;justify-content:center;}
.pagination-gap{padding:0 4px;color:var(--ink-faint);}

.back-link{border:none;background:none;color:var(--sky-deep);font-weight:700;cursor:pointer;padding:4px 0;margin-bottom:12px;}
.back-link:hover{color:var(--ink);}
.lead-card{max-width:860px;padding:20px 22px;}
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;align-items:start;}
@media (max-width: 900px){.profile-grid{grid-template-columns:1fr;}}
.lead-title{font-size:18px;}
.lead-card .lesson-top{display:flex;justify-content:space-between;align-items:center;gap:10px;}

/* ---------- loading ---------- */
.spinner{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--line-strong);border-top-color:var(--sky);animation:spin .7s linear infinite;flex:0 0 auto;}
.spinner-lg{width:28px;height:28px;border-width:3px;}
@keyframes spin{to{transform:rotate(360deg);}}
.detail-loading{padding:40px 24px;display:flex;align-items:center;gap:12px;color:var(--ink-soft);font-weight:700;}

/* ---------- modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(34,49,74,.4);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:10;animation:fade-in .15s var(--ease);}
@keyframes fade-in{from{opacity:0;}to{opacity:1;}}
.modal{background:var(--paper-2);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:440px;max-width:92vw;max-height:88vh;display:flex;flex-direction:column;animation:pop-in .18s var(--ease);}
@keyframes pop-in{from{opacity:0;transform:translateY(10px) scale(.97);}to{opacity:1;transform:none;}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 4px;}
.modal-header h3{margin:0;}
.modal-close{border:none;background:none;color:var(--ink-faint);cursor:pointer;padding:4px;border-radius:8px;display:flex;}
.modal-close:hover{color:var(--ink);background:var(--line);}
.modal-body{padding:14px 22px 4px;overflow-y:auto;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px 22px;}

@media (max-width: 900px){
  .app-shell{display:block;}
  .side-nav{position:sticky;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px;}
  .side-nav .brand{flex:1;}
  .nav-tabs{order:3;width:100%;flex-direction:row;overflow-x:auto;scrollbar-width:none;}
  .nav-tab{width:auto;white-space:nowrap;flex:0 0 auto;}
  .nav-tab-count{margin-left:0;}
  .page{padding:16px;}
  .toolbar-select,.toolbar-search{flex:1 1 100%;width:auto;}
  .card{padding:14px;}
  .modal-header{padding:16px 16px 4px;}
  .modal-body{padding:10px 16px 4px;}
  .modal-actions{padding:14px 16px 16px;}
}

.cell-link{color:var(--sky-deep);font-weight:inherit;text-decoration:underline;text-decoration-color:rgba(22,114,168,.35);text-underline-offset:3px;text-decoration-thickness:1.5px;transition:text-decoration-color .15s var(--ease),color .15s var(--ease);}
.cell-link:hover{color:var(--ink);text-decoration-color:currentColor;}
.field input:disabled{background:#EDEDED;color:#7A8499;cursor:not-allowed;}

.cal-controls{display:flex;align-items:center;gap:6px;margin-left:auto;}
.cal-switch{display:flex;gap:6px;margin-right:8px;}
.cal-title{font-weight:800;font-size:18px;margin-bottom:10px;}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);border:1.5px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;}
.cal-weekday{background:#F7F9FB;padding:7px 8px;font-size:12px;font-weight:800;color:var(--ink-soft);text-transform:uppercase;}
.cal-day{background:var(--paper-2);min-height:104px;padding:6px;display:flex;flex-direction:column;gap:3px;min-width:0;}
.cal-week .cal-day{min-height:320px;}
.cal-other{background:#F7F9FB;}
.cal-other .cal-num{color:var(--ink-faint);}
.cal-num{font-size:12.5px;font-weight:700;color:var(--ink-soft);align-self:flex-end;}
.cal-today .cal-num{background:var(--sky-deep);color:#fff;border-radius:999px;padding:1px 8px;}
.cal-event{display:flex;gap:5px;align-items:baseline;width:100%;text-align:left;border:0;border-left:3px solid var(--leaf);background:#E3F4EB;color:var(--ink);border-radius:6px;padding:3px 6px;font:inherit;font-size:12px;cursor:pointer;min-width:0;}
.cal-event:hover{filter:brightness(.96);}
.cal-event-future{border-left-color:#E0A400;background:#FFF1CC;}
.cal-event-muted{border-left-color:var(--line-strong);background:#EDEDED;color:var(--ink-soft);}
.cal-time{font-weight:800;flex:none;}
.cal-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
@media (max-width:700px){.cal-day{min-height:70px;padding:4px;}.cal-text{display:none;}}

.audit-date{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--ink-soft);}
.date-input{font:inherit;width:150px;border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);padding:7px 10px;background:#fff;color:var(--ink);cursor:pointer;transition:border-color .15s var(--ease);}
.date-input:hover{border-color:var(--sky-deep);}
.date-input:focus{outline:none;border-color:var(--sky-deep);box-shadow:0 0 0 3px rgba(63,173,224,.16);}
@media (max-width:700px){.audit-date{flex:1 1 100%;}.date-input{flex:1;width:auto;}}
.audit-changes{max-width:520px;white-space:pre-wrap;word-break:break-word;}