@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');
:root{
  --paper:#F4F1EA;--paper-2:#EBE7DC;--card:#FCFBF7;--ink:#1E1C19;--ink-soft:#6A655C;
  --line:#DED8CB;--line-2:#CFC8B8;--accent:#1C5C46;--accent-2:#2C7A5E;--accent-soft:#E4EEE7;
  --green:#1C7A4A;--green-bg:#DEEFE3;--red:#A52A2A;--red-bg:#F3E0E0;--grey:#8C867C;--grey-bg:#E8E4DB;
}
*{box-sizing:border-box;}
.crm{font-family:'Hanken Grotesk',system-ui,sans-serif;color:var(--ink);
  background:radial-gradient(1200px 600px at 100% -10%,#ECE6D8 0%,transparent 60%),var(--paper);min-height:100vh;-webkit-font-smoothing:antialiased;}
.crm h1,.crm h2,.crm h3{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.01em;margin:0;}
.crm button{font-family:inherit;cursor:pointer;}
.crm input,.crm textarea,.crm select{font-family:inherit;font-size:14px;}
@keyframes spin{to{transform:rotate(360deg);}} .spin{animation:spin .7s linear infinite;}

.shell{display:flex;min-height:100vh;}
.side{width:230px;flex-shrink:0;border-right:1px solid var(--line);padding:22px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px;background:rgba(252,251,247,.5);}
.brand{padding:6px 10px 4px;}
.brand .logo{font-family:'Fraunces';font-size:23px;font-weight:700;color:var(--accent);}
.brand .sub{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.12em;display:block;margin:2px 0 14px 10px;}
.nav{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;color:var(--ink-soft);font-weight:500;font-size:14.5px;border:1px solid transparent;transition:.15s;background:none;width:100%;text-align:left;}
.nav:hover{background:var(--paper-2);color:var(--ink);}
.nav.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.nav .badge{margin-left:auto;font-size:11px;background:rgba(0,0,0,.08);padding:1px 7px;border-radius:20px;}
.nav.active .badge{background:rgba(255,255,255,.22);}
.side .who{margin-top:auto;border-top:1px solid var(--line);padding-top:14px;font-size:12.5px;color:var(--ink-soft);}
.side .who b{color:var(--ink);font-weight:600;}
.side .who button{background:none;border:none;color:var(--accent);font-size:12px;padding:4px 0 0;text-decoration:underline;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{display:flex;align-items:center;gap:12px;padding:18px 28px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(244,241,234,.86);backdrop-filter:blur(8px);z-index:5;}
.topbar h1{font-size:24px;}
.topbar .grow{flex:1;}
.content{padding:24px 28px 80px;}
.content.wide{padding:20px 20px 40px;overflow-x:auto;}

.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:9px;border:1px solid var(--accent);background:var(--accent);color:#fff;font-weight:600;font-size:13.5px;transition:.15s;white-space:nowrap;}
.btn:hover{background:var(--accent-2);border-color:var(--accent-2);}
.btn.ghost{background:transparent;color:var(--accent);} .btn.ghost:hover{background:var(--accent-soft);}
.btn.neutral{background:var(--card);color:var(--ink);border-color:var(--line-2);} .btn.neutral:hover{background:var(--paper-2);}
.btn.sm{padding:6px 11px;font-size:12.5px;border-radius:8px;}
.btn.danger{background:transparent;border-color:transparent;color:var(--red);} .btn.danger:hover{background:#f3e3e3;}
.btn:disabled{opacity:.45;cursor:not-allowed;}

.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-soft);}
.inp,.ta,.sel{width:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:9px;background:var(--card);color:var(--ink);outline:none;transition:.15s;}
.inp:focus,.ta:focus,.sel:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.ta{resize:vertical;min-height:84px;line-height:1.5;}
.search{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line-2);border-radius:9px;padding:8px 12px;min-width:210px;}
.search input{border:none;outline:none;background:none;flex:1;}

.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;}
.grid{display:grid;gap:16px;}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;}
.stat .n{font-family:'Fraunces';font-size:32px;font-weight:600;line-height:1;}
.stat .l{font-size:12.5px;color:var(--ink-soft);margin-top:6px;}
.muted{color:var(--ink-soft);} .trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0;}
.dot-grey{background:var(--grey);} .dot-green{background:var(--green);} .dot-red{background:var(--red);}
.bdg{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:20px;background:var(--paper-2);color:var(--ink-soft);}
.bdg.green{background:var(--green-bg);color:var(--green);} .bdg.red{background:var(--red-bg);color:var(--red);}

/* kanban */
.board{display:flex;gap:13px;align-items:flex-start;min-height:60vh;}
.col{width:215px;flex-shrink:0;background:var(--paper-2);border:1px solid var(--line);border-radius:13px;padding:10px;display:flex;flex-direction:column;}
.col.over{outline:2px dashed var(--accent);background:var(--accent-soft);}
.col-h{display:flex;align-items:center;gap:6px;font-weight:600;font-size:12.5px;padding:4px 6px 10px;color:var(--ink);}
.col-h .ix{font-family:'Fraunces';color:var(--ink-soft);font-size:13px;}
.col-h .ct{margin-left:auto;font-size:11px;color:var(--ink-soft);background:var(--card);padding:1px 8px;border-radius:20px;}
.kcard{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 12px;margin-bottom:9px;cursor:pointer;transition:.12s;}
.kcard:hover{border-color:var(--accent);box-shadow:0 3px 12px rgba(28,92,70,.09);}
.kcard.drag{opacity:.4;}
.kcard .t{font-weight:600;font-size:13.5px;line-height:1.3;display:flex;gap:7px;align-items:flex-start;}
.kcard .m{font-size:11.5px;color:var(--ink-soft);margin-top:5px;}

/* rows / table */
.row{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:var(--card);transition:.15s;cursor:pointer;margin-bottom:10px;}
.row:hover{border-color:var(--accent);box-shadow:0 3px 14px rgba(28,92,70,.07);}
.row .t{font-weight:600;font-size:15px;} .row .m{font-size:12.5px;color:var(--ink-soft);margin-top:2px;} .row .grow{flex:1;min-width:0;}
.tbl{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.tbl th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);padding:12px 16px;border-bottom:1px solid var(--line);font-weight:600;background:var(--paper-2);}
.tbl td{padding:13px 16px;border-bottom:1px solid var(--line);font-size:14px;}
.tbl tr:last-child td{border-bottom:none;} .tbl tr.clk{cursor:pointer;} .tbl tr.clk:hover td{background:var(--paper-2);}

/* modal */
.overlay{position:fixed;inset:0;background:rgba(30,28,25,.42);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:50;padding:24px;}
.modal{background:var(--paper);border:1px solid var(--line-2);border-radius:18px;width:100%;max-width:560px;max-height:88vh;overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.25);}
.modal.lg{max-width:680px;}
.modal .head{display:flex;align-items:center;gap:12px;padding:20px 24px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:1;}
.modal .head h2{font-size:20px;flex:1;}
.modal .body{padding:22px 24px;} .modal .foot{display:flex;gap:10px;justify-content:flex-end;padding:16px 24px;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--paper);}
.iconbtn{background:none;border:none;color:var(--ink-soft);display:flex;padding:5px;border-radius:7px;} .iconbtn:hover{background:var(--paper-2);color:var(--ink);}

.detail-grid{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:start;}
.section-t{font-family:'Fraunces';font-size:16px;margin:0 0 12px;display:flex;align-items:center;gap:8px;}
.block{border:1px solid var(--line);border-radius:11px;padding:14px;margin-bottom:11px;background:var(--paper-2);}
.block .h{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;margin-bottom:6px;}
.kv{display:flex;gap:8px;font-size:13px;margin:5px 0;} .kv .k{color:var(--ink-soft);min-width:120px;} .kv .v{flex:1;}
.empty{text-align:center;padding:48px 20px;color:var(--ink-soft);}
.empty .big{font-family:'Fraunces';font-size:22px;color:var(--ink);margin:14px 0 6px;}
.chips{display:flex;flex-wrap:wrap;gap:7px;}
.chip{border:1px solid var(--line-2);background:var(--card);padding:5px 11px;border-radius:20px;font-size:12.5px;font-weight:500;color:var(--ink-soft);}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.filt-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-weight:600;margin-bottom:6px;}
.tbl th.sortable{cursor:pointer;user-select:none;white-space:nowrap;} .tbl th.sortable:hover{color:var(--ink);}
.notice{background:var(--accent-soft);border:1px solid #cfe1d6;border-radius:11px;padding:12px 15px;font-size:13px;color:#28543f;display:flex;gap:10px;align-items:flex-start;margin-bottom:18px;}
.tl{position:relative;padding-left:24px;} .tl:before{content:"";position:absolute;left:7px;top:5px;bottom:5px;width:2px;background:var(--line-2);}
.tl-item{position:relative;padding:0 0 16px;} .tl-item:before{content:"";position:absolute;left:-21px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--accent);border:2px solid var(--paper);}
.tl-item.note:before{background:var(--ink-soft);}
.tl-item .txt{font-size:13px;line-height:1.45;white-space:pre-wrap;} .tl-item .meta{font-size:11px;color:var(--ink-soft);margin-top:1px;}
.stagebar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:14px 0 4px;}
.stagebar .st{font-size:11.5px;padding:5px 9px;border-radius:7px;border:1px solid var(--line-2);background:var(--card);color:var(--ink-soft);font-weight:500;}
.stagebar .st.done{background:var(--accent-soft);color:var(--accent);border-color:#cfe1d6;}
.stagebar .st.cur{background:var(--accent);color:#fff;border-color:var(--accent);}

.att{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line-2);border-radius:8px;background:var(--card);margin-bottom:6px;}
.att .att-name{flex:1;min-width:0;text-align:left;background:none;border:none;color:var(--accent);font-size:13px;font-weight:500;cursor:pointer;text-decoration:underline;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.att .att-size{font-size:11px;color:var(--ink-soft);flex-shrink:0;}

.checklist{display:flex;flex-direction:column;gap:7px;}
.check{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line-2);border-radius:9px;cursor:pointer;background:var(--card);transition:.12s;}
.check.on{border-color:var(--accent);background:var(--accent-soft);}
.check input{margin:2px 0 0;width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;}
.check .ct{font-weight:600;font-size:14px;} .check .cn{font-size:11.5px;color:var(--warn);margin-top:1px;}
.svc-chips{display:flex;flex-wrap:wrap;gap:6px;} .svc-chip{font-size:12.5px;font-weight:500;background:var(--accent-soft);color:var(--accent);border:1px solid #cfe1d6;padding:3px 10px;border-radius:20px;}

.picker{position:relative;}
.picker .results{position:absolute;top:100%;left:0;right:0;margin-top:5px;background:var(--card);border:1px solid var(--line-2);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.14);max-height:260px;overflow:auto;z-index:8;}
.picker .res{padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--line);}
.picker .res:last-child{border-bottom:none;} .picker .res:hover{background:var(--paper-2);}
.picker .res .t{font-weight:600;font-size:13.5px;} .picker .res .m{font-size:12px;color:var(--ink-soft);margin-top:1px;}
.picker .none{padding:11px 12px;color:var(--ink-soft);font-size:13px;}
.picker .sel-chip{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--accent);border-radius:9px;background:var(--accent-soft);}

/* Mobiili elemendid – peidetud lauaarvutis */
.menu-btn{display:none;}
.mobile-bar{display:none;}
.scrim{display:none;}

@media (max-width:880px){
  /* Külgmenüü -> väljalibisev sahtel */
  .side{position:fixed;left:0;top:0;bottom:0;height:100vh;width:248px;z-index:40;background:var(--paper);
        transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 44px rgba(0,0,0,.20);}
  .shell.nav-open .side{transform:translateX(0);}
  .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:35;opacity:0;pointer-events:none;transition:opacity .2s;}
  .shell.nav-open .scrim{opacity:1;pointer-events:auto;}

  /* Mobiili ülariba (hamburger + logo) */
  .mobile-bar{display:flex;align-items:center;gap:11px;padding:10px 14px;border-bottom:1px solid var(--line);
              position:sticky;top:0;z-index:6;background:rgba(244,241,234,.92);backdrop-filter:blur(8px);}
  .mobile-bar .logo{font-family:'Fraunces';font-size:19px;font-weight:700;color:var(--accent);}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
            border:1px solid var(--line-2);border-radius:10px;background:var(--card);font-size:20px;color:var(--ink);}

  .detail-grid{grid-template-columns:1fr;}
  .content{padding:16px 14px 90px;}
  .content.wide{padding:14px 12px 40px;}
  .topbar{position:static;padding:12px 14px;flex-wrap:wrap;}
  .topbar h1{font-size:20px;}
  .topbar .grow{display:none;}
  .topbar .search{order:5;width:100%;min-width:0;}
  .search{min-width:0;}
  .btn{min-height:40px;}

  /* Tabelid -> virnastatud kaardid */
  .tbl{border:none;background:none;border-radius:0;overflow:visible;}
  .tbl thead{display:none;}
  .tbl tr{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:5px 2px;}
  .tbl tr.clk:hover td{background:none;}
  .tbl td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;border:none;padding:7px 14px;}
  .tbl td::before{content:attr(data-label);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);font-weight:600;flex:0 0 auto;}
  .tbl td > *{text-align:right;}
  /* Esmane (nimi) ja tegevuste lahter -> täislaius, ilma sildita */
  .tbl td:not([data-label]){display:block;padding:10px 14px 4px;}
  .tbl td:not([data-label])::before{display:none;}
  .tbl td:not([data-label]) > *{text-align:left;}
  .tbl td:not([data-label]):first-child{font-size:15px;}
  .tbl td[data-label=""]{justify-content:flex-end;padding-top:4px;padding-bottom:10px;}
  .tbl td[data-label=""]::before{display:none;}

  /* Detailivaate päis */
  .case-head{flex-wrap:wrap;}
  .case-head #statusBtns{flex-wrap:wrap;}
  .stagebar{gap:5px;}
  .modal{max-width:none;border-radius:14px;max-height:90vh;}
  .overlay{padding:10px;}
}