@import "tailwindcss" source(none);

@source "../../jinja2";
@source "../../../crm/jinja2";
@source "../schools";

@theme inline {
  --color-bg: var(--bg);
  --color-bg-2: var(--bg-2);
  --color-card: var(--card);
  --color-card-strong: var(--card-strong);
  --color-ink: var(--ink);
  --color-mute: var(--mute);
  --color-line: var(--line);
  --color-acc: var(--acc);
  --color-acc-dark: var(--acc-dark);
  --color-acc-ink: var(--accink);
  --color-acc-bg: var(--accbg);
  --color-warn: var(--warn);
  --font-sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

.btn,
button {
  @apply min-h-9;
}

@layer base {
  :root {
    --bg: #edf4fb;
    --bg-2: #f9fbff;
    --card: rgba(255, 255, 255, 0.82);
    --card-strong: #fff;
    --ink: #14202b;
    --mute: #5d6b78;
    --line: #d9e3ef;
    --acc: #1a6f8f;
    --acc-dark: #0f4d67;
    --accink: #fff;
    --accbg: #dff4fb;
    --warn: #c35b2a;
    --shadow: 0 22px 44px rgba(18, 42, 59, 0.1);
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .panel-header h2,
  .panel-header h3 {
    @apply mb-0;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #0c1721;
      --bg-2: #111d2a;
      --card: rgba(18, 25, 34, 0.88);
      --card-strong: #17242f;
      --ink: #edf5ff;
      --mute: #9bb1c1;
      --line: #2b3a4a;
      --acc: #68d0ee;
      --acc-dark: #96e1f9;
      --accink: #08202a;
      --accbg: #173442;
      --warn: #ffb38a;
      --shadow: 0 22px 50px rgba(2, 6, 10, 0.42);
    }
  }

  :root[data-theme="dark"] {
    --bg: #0c1721;
    --bg-2: #111d2a;
    --card: rgba(18, 25, 34, 0.88);
    --card-strong: #17242f;
    --ink: #edf5ff;
    --mute: #9bb1c1;
    --line: #2b3a4a;
    --acc: #68d0ee;
    --acc-dark: #96e1f9;
    --accink: #08202a;
    --accbg: #173442;
    --warn: #ffb38a;
    --shadow: 0 22px 50px rgba(2, 6, 10, 0.42);
  }

  html {
    @apply scroll-pt-[env(safe-area-inset-top,0px)];
  }

  body {
    @apply m-0 min-h-screen bg-bg text-ink font-sans text-[15px] leading-[1.45];
    background-image: radial-gradient(circle at top left, rgba(104, 208, 238, 0.18), transparent 26%), linear-gradient(180deg, var(--bg-2), var(--bg));
  }

  h1 {
    @apply m-0 mb-2 text-[32px] leading-[1.08] tracking-[-0.04em];
  }

  a {
    @apply text-acc transition-colors duration-150;
  }

  a:hover {
    @apply text-acc-dark;
  }

  button,
  input,
  select,
  textarea {
    @apply font-sans;
  }

  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    @apply outline-2 outline-offset-2 outline-acc;
  }

  input[type="checkbox"],
  input[type="radio"] {
    accent-color: var(--acc);
  }

  ::selection {
    @apply bg-acc text-acc-ink;
  }

  [hidden] {
    display: none !important;
  }
}

@layer components {
  .wrap {
    @apply mx-auto max-w-[1240px] px-4 pt-7 pb-14;
  }

  .topbar {
    @apply sticky top-3 z-30 mb-6 flex items-center justify-between gap-3 rounded-2xl border border-line/80 bg-card/90 px-4 py-3 shadow-xl backdrop-blur-xl;
    box-shadow: 0 12px 34px rgba(18, 42, 59, 0.09);
  }

  .nav,
  .user-meta,
  .admin-actions,
  .search-controls,
  .page-controls,
  .dialog-heading {
    @apply flex flex-wrap items-center gap-2;
  }

  .nav a,
  .ghost-link {
    @apply inline-flex min-h-9 items-center justify-center rounded-[10px] px-3 py-[7px] font-semibold text-ink no-underline transition-all duration-200 hover:bg-acc-bg hover:text-acc-dark;
  }

  .nav a[aria-current="page"] {
    @apply bg-gradient-to-br from-acc to-acc-dark text-acc-ink shadow-md;
  }

  .user-meta {
    @apply gap-2.5;
  }

  .user-pill {
    @apply inline-flex min-h-9 items-center rounded-full border border-line bg-card-strong px-3 font-semibold text-ink;
  }

  .logout-form {
    @apply inline;
  }

  .mini-btn,
  button,
  .btn {
    @apply cursor-pointer rounded-[10px] border border-line bg-card-strong px-3.5 py-2 text-ink transition-all duration-200 hover:-translate-y-px hover:border-acc/40 hover:shadow-md disabled:pointer-events-none disabled:opacity-50;
  }

  button.pri,
  .btn.pri {
    @apply border-transparent bg-gradient-to-br from-acc to-acc-dark font-bold text-acc-ink shadow-lg;
  }

  .page-header,
  .page-intro {
    @apply my-2 flex items-end justify-between gap-5;
  }

  .page-banner {
    @apply relative isolate overflow-hidden rounded-2xl border border-acc/15 bg-card px-5 py-5 shadow-lg;
    background-image: linear-gradient(120deg, var(--accbg), transparent 62%);
  }

  .page-banner::after {
    content: "";
    @apply pointer-events-none absolute -right-12 -top-20 -z-10 h-56 w-56 rounded-full bg-acc/10 blur-3xl;
  }

  .page-banner > * {
    @apply relative;
  }

  .page-banner h1 {
    @apply text-[clamp(1.75rem,4vw,2.25rem)];
  }

  .login-shell,
  .error-shell {
    @apply grid min-h-screen place-items-center p-4;
  }

  .login-form {
    @apply w-full max-w-[420px] rounded-[24px] border border-line bg-card p-7 shadow-2xl backdrop-blur-xl;
    box-shadow: 0 30px 90px rgba(18, 42, 59, 0.16);
  }

  .error-card {
    @apply w-full max-w-[560px] px-7 py-8;
  }

  .eyebrow {
    @apply mb-2 text-[11px] font-bold uppercase tracking-[.12em] text-acc;
  }

  .sub {
    @apply m-0 max-w-[62ch] text-[15px] text-mute;
  }

  .hero-stats {
    @apply grid min-w-[280px] grid-cols-2 gap-3;
  }

  .stat-box {
    @apply flex flex-col gap-1.5 rounded-2xl border border-line bg-card-strong p-4 shadow-lg;
  }

  .stat-box span,
  .kpi span {
    @apply text-[11px] font-bold uppercase tracking-[.08em] text-mute;
  }

  .stat-box strong {
    @apply text-2xl tracking-[-.04em];
  }

  .stat-box.accent,
  .tile.tot {
    @apply border-acc/25 bg-acc-bg;
  }

  .panel,
  .tw {
    @apply mb-3 rounded-2xl border border-line bg-card p-5 shadow-lg;
    box-shadow: 0 12px 32px rgba(18, 42, 59, 0.055);
    backdrop-filter: blur(12px);
  }

  .panel {
    @apply transition-shadow duration-200;
  }

  .panel:has(.panel-header) {
    @apply hover:shadow-xl;
  }

  .tw {
    @apply overflow-x-auto rounded-2xl p-0;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    touch-action: pan-y;
  }

  #drop {
    @apply border-2 border-dashed border-acc/30 bg-card/50 p-8 text-center;
  }

  #drop.over {
    @apply border-acc bg-acc-bg;
  }

  .grid {
    @apply grid grid-cols-[repeat(auto-fill,minmax(190px,1fr))] gap-3;
  }

  label.f,
  .fld label {
    @apply flex flex-col gap-1.5 text-[13px] font-semibold text-mute;
  }

  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="email"],
  input[type="file"],
  select,
  textarea,
  .fld input,
  .fld select,
  .fld textarea {
    @apply w-full rounded-[10px] border border-line bg-card-strong/80 px-3 py-2 text-[15px] text-ink transition-colors;
  }

  input::placeholder,
  textarea::placeholder {
    @apply text-mute/75;
  }

  input[type="file"]::file-selector-button {
    @apply mr-3 cursor-pointer rounded-lg border border-line bg-card px-3 py-1.5 font-semibold text-ink;
  }

  .fld {
    @apply mb-2.5;
  }

  .fld label {
    @apply mb-1 block;
  }

  .has-err input,
  .has-err select,
  .has-err textarea {
    @apply border-warn;
  }

  .ferr,
  .err {
    @apply mt-1 text-[13px] text-warn;
  }

  .pair {
    @apply flex gap-2;
  }

  .checks,
  .chips {
    @apply mt-3 flex flex-wrap gap-x-3.5 gap-y-2;
  }

  .checks label {
    @apply flex cursor-pointer items-center gap-1.5 text-sm text-ink;
  }

  .bar,
  .list-heading {
    @apply my-1 flex flex-wrap items-center justify-between gap-2.5;
  }

  .list-heading {
    @apply items-end gap-4;
  }

  .school-search {
    @apply min-w-[min(100%,360px)];
  }

  .search-controls {
    @apply mt-1;
  }

  .search-controls input {
    @apply min-w-[200px] flex-1;
  }

  .page-controls {
    @apply mt-4 justify-center gap-3;
  }

  .page-controls span,
  .mute,
  .pub {
    @apply text-[13px] text-mute;
  }

  .deleted-dialog,
  .dlg {
    @apply m-auto max-h-[calc(100dvh-32px)] w-[min(900px,calc(100%-24px))] overflow-auto rounded-[24px] border border-line bg-card-strong p-6 text-ink shadow-2xl;
    box-shadow: 0 32px 90px rgba(2, 18, 30, 0.28), 0 2px 12px rgba(2, 18, 30, 0.08);
  }

  .ov {
    @apply fixed inset-0 z-50 flex items-center justify-center overflow-y-auto bg-slate-950/55 px-3 py-4 backdrop-blur-sm;
    overscroll-behavior: contain;
    animation: overlay-in 160ms ease-out both;
  }

  .dlg {
    @apply relative my-auto max-h-[min(88dvh,900px)] w-full max-w-[880px] rounded-[24px] border-white/50 p-6;
    animation: dialog-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .dlg::before {
    content: "";
    @apply absolute inset-x-0 top-0 h-1 rounded-t-[24px] bg-gradient-to-r from-acc via-cyan-400 to-acc-dark;
  }

  .deleted-dialog::backdrop {
    @apply bg-slate-950/60 backdrop-blur-sm;
  }

  .dialog-heading {
    @apply sticky -top-6 z-10 mb-4 items-start justify-between border-b border-line bg-card-strong/95 pb-4 pt-1 backdrop-blur;
  }

  .dialog-heading h2 {
    @apply m-0;
  }

  .dialog-heading p {
    @apply mt-1;
  }

  .dialog-close {
    @apply grid h-10 w-10 place-items-center p-0 text-2xl leading-none;
  }

  .page-intro {
    @apply my-2;
  }

  .page-intro h1 {
    @apply m-0;
  }

  .panel-header {
    @apply mb-4 flex items-center justify-between gap-3 border-b border-line/80 pb-3;
  }

  .panel-tag {
    @apply inline-flex items-center rounded-full bg-acc-bg px-2 py-1 text-[11px] font-bold uppercase tracking-wide text-acc;
  }

  .panel h2 {
    @apply m-0 text-[17px] tracking-tight;
  }

  .panel h3 {
    @apply text-base font-semibold;
  }

  .kpis {
    @apply my-5 grid grid-cols-[repeat(auto-fit,minmax(160px,1fr))] gap-3.5;
  }

  .kpi {
    @apply block min-h-[120px] rounded-2xl border border-line bg-card-strong p-5 text-ink no-underline shadow-lg transition-all hover:-translate-y-1 hover:border-acc/35 hover:shadow-xl;
  }

  .kpi b {
    @apply mt-3.5 block text-3xl tabular-nums tracking-[-.05em] leading-none;
  }

  .kpis.small .kpi b {
    @apply text-base;
  }

  .kpi.bad b,
  .due.late {
    @apply text-warn;
  }

  .kpi.good b {
    @apply text-green-700;
  }

  .cols2 {
    @apply mb-5 grid grid-cols-[repeat(auto-fit,minmax(320px,1fr))] gap-[18px];
  }

  .cols2.top {
    @apply items-start;
  }

  .stack {
    @apply flex min-w-0 flex-col gap-[18px];
  }

  .stack .panel,
  .cols2 .panel {
    @apply mb-0;
  }

  .frow {
    @apply my-3 grid grid-cols-[135px_1fr_52px] items-center gap-3;
  }

  .fbar {
    @apply h-3 overflow-hidden rounded-full border border-line bg-bg;
  }

  .frow .pill {
    @apply normal-case tracking-normal;
  }

  .fbar i {
    @apply block h-full rounded-full bg-gradient-to-r from-acc to-acc-dark;
  }

  .frow b {
    @apply text-right tabular-nums;
  }

  .list,
  .timeline {
    @apply m-0 list-none p-0;
  }

  .list li {
    @apply border-b border-line/80 py-3.5 last:border-0;
  }

  .list-title {
    @apply mb-1 font-bold;
  }

  .meta-line {
    @apply mt-0.5;
  }

  .list a,
  .mini-link {
    @apply font-bold no-underline hover:underline;
  }

  .note-inline {
    @apply mt-1.5 leading-relaxed;
  }

  .due {
    @apply whitespace-nowrap font-bold;
  }

  .mini {
    @apply my-0 w-full;
  }

  .mini td {
    @apply py-1.5;
  }

  .mini-link {
    @apply text-[13px];
  }

  .timeline {
    @apply border-l-2 border-line pl-[18px];
  }

  .timeline li {
    @apply relative pb-[18px] pl-4;
  }

  .timeline li::before {
    content: "";
    @apply absolute -left-[21px] top-1 h-3 w-3 rounded-full bg-acc shadow-[0_0_0_4px_var(--accbg)];
  }

  .timeline li.sys {
    @apply text-mute;
  }

  .timeline li.sys::before {
    @apply bg-line shadow-[0_0_0_4px_rgba(130,148,165,0.2)];
  }

  .when {
    @apply text-xs text-mute;
  }

  .note {
    @apply mt-1 whitespace-pre-wrap leading-relaxed;
    overflow-wrap: anywhere;
  }

  .fgrid {
    @apply grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-x-3 gap-y-2.5;
  }

  .chk {
    @apply my-1.5 mb-2.5 flex items-center gap-2 text-sm;
  }

  button.link {
    @apply border-0 bg-transparent p-0 text-[13px] text-acc underline;
  }

  form.inline {
    @apply inline;
  }

  details summary {
    @apply my-2 cursor-pointer font-semibold text-acc;
  }

  .wrapcell {
    @apply min-w-[180px] whitespace-normal;
  }

  .lead-row,
  tbody tr {
    @apply cursor-pointer;
  }

  .lead-row:focus-visible,
  tbody tr:focus-visible {
    @apply outline-2 outline-offset-[-2px] outline-acc;
  }

  .tiles {
    @apply grid grid-cols-[repeat(auto-fill,minmax(92px,1fr))] gap-2;
  }

  .tile {
    @apply rounded-[10px] border border-line bg-card p-2.5 shadow-sm;
  }

  .tile span {
    @apply block text-xs text-mute;
  }

  .tile b {
    @apply text-lg tabular-nums;
  }

  .kv {
    @apply m-0 grid grid-cols-[repeat(auto-fill,minmax(190px,1fr))] gap-x-4 gap-y-2.5;
  }

  .kv div {
    @apply min-w-0;
  }

  .kv dt {
    @apply text-xs text-mute;
  }

  .kv dd {
    @apply mt-px font-bold;
    overflow-wrap: anywhere;
  }

  .kv .na {
    @apply font-normal text-mute;
  }

  .badge {
    @apply ml-1 rounded-full bg-amber-600 px-2 py-0.5 text-xs font-bold text-white;
  }

  .msg {
    @apply mb-3 rounded-xl border border-acc/20 bg-acc-bg px-3.5 py-2.5 text-ink;
  }

  .msg.error {
    @apply border-warn/40 bg-warn/10;
  }

  .msg.success {
    @apply border-green-700/20 bg-green-700/10;
  }

  .crumb {
    @apply mb-2.5 text-[13px] text-mute;
  }

  .shead {
    @apply mb-[18px] flex flex-wrap items-start justify-between gap-2.5 p-5;
  }

  .shead h1 {
    @apply m-0;
  }

  .badges {
    @apply flex flex-wrap gap-2;
  }

  .pill {
    @apply inline-block whitespace-nowrap rounded-full border border-line bg-card px-2.5 py-1 text-xs font-bold text-ink;
  }

  .st-new,
  .pr-low {
    @apply text-mute;
  }

  .st-contacted,
  .st-interested {
    @apply border-acc/20 bg-acc-bg text-acc;
  }

  .st-meeting,
  .st-proposal {
    @apply border-transparent bg-gradient-to-br from-acc to-acc-dark text-acc-ink;
  }

  .st-won {
    @apply border-green-700 bg-green-700 text-white;
  }

  .st-lost,
  .st-dnc {
    @apply border-warn bg-transparent text-warn;
  }

  .pr-high {
    @apply border-warn/40 text-warn;
  }

  .kpis.small .kpi {
    @apply min-h-0 p-4;
  }

  .crumb a {
    @apply text-acc;
  }

  .activity-entry {
    @apply mt-4 border-t border-line pt-4;
  }

  .activity-entry h3 {
    @apply flex items-center gap-2;
  }

  .dh {
    @apply sticky -top-6 z-10 -mx-6 -mt-6 mb-2 flex items-start justify-between gap-3 border-b border-line bg-card-strong/95 px-6 pb-4 pt-6 backdrop-blur;
  }

  .dh h2 {
    @apply m-0 text-[21px] tracking-tight;
  }

  .dh-heading {
    @apply min-w-0 flex-1;
  }

  .dh-title {
    @apply flex flex-wrap items-center gap-2.5;
  }

  .dh .pub {
    @apply mt-0.5 text-xs;
  }

  .dh .detail-header-action {
    @apply whitespace-nowrap px-2.5 py-1.5 text-[13px];
  }

  .sec {
    @apply mt-5;
  }

  .sec h3 {
    @apply mb-2 border-b border-line pb-1.5 text-sm;
  }

  .kv .yes,
  .kv .no {
    @apply inline-block rounded-full px-2.5 py-px text-[13px] font-bold;
  }

  .kv .yes {
    @apply bg-acc-bg text-acc;
  }

  .kv .no {
    @apply border border-line text-mute;
  }

  .tile.tot {
    @apply border-acc/30 bg-acc-bg;
  }

  .toast {
    @apply fixed bottom-5 left-1/2 z-[60] -translate-x-1/2 rounded-full bg-slate-900 px-4 py-2.5 text-slate-50 shadow-2xl;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }

  #crm-filters {
    @apply mt-3;
  }

  .dlg .crm-box {
    @apply rounded-2xl border border-acc/20 bg-acc-bg/70 px-4 py-4;
  }

  .dlg .crm-box .kv {
    @apply gap-x-5 gap-y-4;
  }

  .dlg .crm-box dd {
    @apply mt-1;
  }

  .deleted-dialog {
    @apply max-w-[900px];
  }

  .cols {
    @apply px-4 py-2.5;
  }

  .cols summary {
    @apply cursor-pointer font-bold text-ink;
  }

  .cg {
    @apply mt-3;
  }

  .cg h3 {
    @apply mb-1.5 text-[13px] font-bold text-mute;
  }

  .cg .checks {
    @apply mt-0;
  }

  .cbtn {
    @apply mt-3 flex gap-2;
  }

  .cbtn button {
    @apply px-3 py-1 text-[13px];
  }

  .chips button {
    @apply rounded-full border-transparent bg-acc-bg px-3 py-1 text-[13px] text-acc-dark;
  }

  #count {
    @apply font-bold;
  }

  .empty {
    @apply p-[30px] text-center text-mute;
  }

  table {
    @apply w-full table-fixed border-separate;
    border-spacing: 0;
  }

  th,
  td {
    @apply border-b border-line px-3 py-2.5 text-left align-top;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  td.n,
  th.n {
    @apply text-right tabular-nums;
  }

  th {
    @apply sticky top-0 z-20 cursor-pointer select-none bg-card-strong/95 text-[13px] font-bold tracking-wide backdrop-blur;
  }

  th[aria-sort] {
    @apply text-acc;
  }

  tbody tr:hover {
    @apply bg-acc/5;
  }

  td.name {
    @apply min-w-[220px] font-bold;
  }

  .more {
    @apply my-3.5 text-center;
  }

  .yes,
  .no {
    @apply inline-block rounded-full px-2.5 py-px text-[13px] font-bold;
  }

  .yes {
    @apply bg-acc-bg text-acc;
  }

  .no {
    @apply border border-line text-mute;
  }
}

@media (max-width: 720px) {
  .page-header,
  .page-intro {
    @apply flex-col items-start;
  }

  .hero-stats {
    @apply w-full min-w-0;
  }

  .topbar {
    @apply static flex-col items-stretch;
  }

  .nav {
    @apply w-full;
  }

  .user-meta {
    @apply w-full justify-between;
  }

  .frow {
    @apply grid-cols-[1fr_1fr_40px];
  }
}

@media (max-width: 600px) {
  .school-search {
    @apply w-full;
  }

  .search-controls input {
    @apply min-w-0;
  }

  .deleted-dialog {
    @apply max-h-[calc(100dvh-20px)] w-[calc(100%-20px)] rounded-2xl p-4;
  }

  .dlg {
    @apply max-h-[calc(100dvh-24px)] rounded-2xl p-4;
  }

  .dh {
    @apply -top-4 -mx-4 -mt-4 px-4 pt-5;
  }

  .dialog-heading {
    @apply -top-4;
  }

  .panel {
    @apply p-4;
  }

  .page-banner {
    @apply p-4;
  }

  .admin-actions {
    @apply w-full;
  }

  .admin-actions > * {
    @apply flex-1 text-center;
  }

  .frow {
    @apply grid-cols-[minmax(0,1fr)_minmax(0,1fr)_36px] gap-2;
  }

  .dlg .kv {
    @apply grid-cols-1;
  }
}

@keyframes overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}