/* ===== DVI Records — Plan objava =====
   CSS je preuzet 1:1 iz TEMPLATE/plan-tracker10.html (dizajn klijenta).
   NE MENJATI dizajn ovde — dopune su u extra.css / admin.css. */
:root{
    --bg-a:#FCE9EF; --bg-b:#EDE6F7;
    --surface:#FFFFFF; --surface-2:#FAF2F4; --surface-hover:#F5E8EC;
    --ink:#241019; --muted:#8E7378;
    --accent:#B23A63; --accent-ink:#7A1F41; --accent-2:#E2872F;
    --good:#2E9E63; --good-bg:#E2F5EA;
    --border: rgba(36,16,25,.09);
    --shadow: 0 1px 2px rgba(36,17,25,.05), 0 16px 40px -20px rgba(36,17,25,.35);
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg-a:#1C1116; --bg-b:#1A1420;
      --surface:#241720; --surface-2:#2A1A22; --surface-hover:#33202A;
      --ink:#F6E9EE; --muted:#B896A0;
      --accent:#F0577F; --accent-ink:#FBB6C8; --accent-2:#F5A45C;
      --good:#57C98A; --good-bg:#1E3327;
      --border: rgba(255,255,255,.09);
      --shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -20px rgba(0,0,0,.6);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --bg-a:#1C1116; --bg-b:#1A1420;
    --surface:#241720; --surface-2:#2A1A22; --surface-hover:#33202A;
    --ink:#F6E9EE; --muted:#B896A0;
    --accent:#F0577F; --accent-ink:#FBB6C8; --accent-2:#F5A45C;
    --good:#57C98A; --good-bg:#1E3327;
    --border: rgba(255,255,255,.09);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -20px rgba(0,0,0,.6);
    color-scheme: dark;
  }

  :root{ --font-main:"Aptos","Aptos Display","Segoe UI Variable","Segoe UI",Calibri,ui-sans-serif,system-ui,-apple-system,sans-serif; }
  *{ box-sizing:border-box; }
  body{
    background: radial-gradient(120% 100% at 15% 0%, var(--bg-a) 0%, var(--bg-b) 60%, var(--bg-b) 100%);
    color:var(--ink);
    font-family:var(--font-main);
    padding-inline:18px; padding-block:22px;
    display:flex; justify-content:center; min-height:100%;
  }
  .app{ width:100%; max-width:1100px; display:flex; flex-direction:column; gap:14px; }
  h1,h2,h3{ font-family:var(--font-main); margin:0; text-wrap:balance; font-weight:600; }
  .mono{ font-family:var(--font-main); font-variant-numeric:tabular-nums; }
  .datefont{ font-family:var(--font-main); font-variant-numeric:tabular-nums; }

  .banner{
    border-radius:14px; padding:10px 16px; font-size:13px; display:none; gap:8px; align-items:center;
    border:1px solid var(--border); background:var(--surface); color:var(--muted); box-shadow:var(--shadow);
  }
  .banner.show{ display:flex; }

  .topbar{
    background:linear-gradient(155deg, var(--accent) 0%, var(--accent-ink) 100%); color:#FBEEF1;
    border-radius:20px; box-shadow:var(--shadow); padding:20px 24px;
    display:flex; flex-direction:column; gap:14px;
  }
  .brand-row{ display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
  .brand-logo-card{ background:#fff; border-radius:12px; padding:8px 18px; display:inline-flex; align-items:center; box-shadow:0 2px 6px rgba(0,0,0,.15); }
  .brand-logo{ height:30px; width:auto; display:block; }
  .topbar-main{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
  .topbar-titles{ display:flex; flex-direction:column; gap:6px; flex:1; min-width:220px; }
  .eyebrow{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; opacity:.75; font-weight:600; }
  .plan-input{
    font-family:var(--font-main); font-size:24px; font-weight:700; border:none; background:transparent;
    color:#FBEEF1; padding:0; width:100%;
  }
  .plan-input:focus{ outline:none; }
  .meta-line{ font-size:13px; opacity:.92; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .meta-line label{ display:flex; align-items:center; gap:6px; }
  .meta-line input{
    border:1px solid rgba(255,255,255,.32); background:rgba(255,255,255,.14); border-radius:7px; padding:3px 8px;
    font-size:13px; color:#FBEEF1; font-family:inherit; min-width:118px;
  }
  .meta-line input[type="date"]{ font-family:var(--font-main); min-width:132px; }
  .meta-line input::placeholder{ color:rgba(251,238,241,.65); }

  .progress-wrap{ display:flex; align-items:center; gap:12px; }
  .ring{ position:relative; width:58px; height:58px; flex:none; }
  .ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
  .ring circle{ fill:none; stroke-width:6; }
  .ring .track{ stroke:rgba(255,255,255,.22); }
  .ring .fill{ stroke:#FBEEF1; stroke-linecap:round; transition:stroke-dashoffset .4s ease; }
  .ring .pct{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; font-family:var(--font-main); }
  .progress-num{ font-size:13.5px; opacity:.92; line-height:1.3; }
  .progress-num strong{ font-size:15px; }

  .contact-block{ border-top:1px solid rgba(255,255,255,.2); padding-top:10px; margin-top:2px; }
  .contact-subtitle{ font-size:11px; letter-spacing:.03em; color:rgba(251,238,241,.7); font-weight:600; margin-bottom:6px; }
  .contact-row{
    display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12.5px;
  }
  .contact-row .clabel{ opacity:.85; font-size:12.5px; font-weight:700; flex:none; }
  .contact-primary{ display:flex; align-items:center; gap:14px; flex-wrap:nowrap; min-width:0; overflow:hidden; }
  .contact-urgent{ display:flex; align-items:center; gap:7px; flex:none; white-space:nowrap; font-size:12px; opacity:.9; }
  .urgent-label{ opacity:.75; font-size:11px; }
  .contact-urgent a{ color:#FBEEF1; text-decoration:underline; text-underline-offset:2px; font-weight:600; }
  .urgent-input{
    border:1px solid rgba(255,255,255,.32); background:rgba(255,255,255,.14); border-radius:7px; padding:3px 7px;
    font-size:12px; color:#FBEEF1; font-family:inherit; width:auto;
  }
  .urgent-input.uname{ max-width:80px; }
  .urgent-input.uphone{ max-width:130px; }
  .urgent-input::placeholder{ color:rgba(251,238,241,.55); }
  .contact-item{ display:flex; align-items:center; gap:6px; opacity:.95; min-width:0; }
  .contact-item svg{ width:13px; height:13px; flex:none; }
  .contact-item input{
    border:1px solid rgba(255,255,255,.32); background:rgba(255,255,255,.14); border-radius:7px; padding:3px 8px;
    font-size:12.5px; color:#FBEEF1; font-family:inherit; min-width:0; flex:1;
  }
  .contact-item input::placeholder{ color:rgba(251,238,241,.6); }
  .contact-item a{ display:inline-flex; align-items:center; gap:6px; color:#FBEEF1; text-decoration:underline; text-underline-offset:2px; }
  .contact-static{ font-weight:500; }
  .subtitle-sep{ opacity:.5; margin:0 2px; }
  .contact-title-inline{
    border:none; background:transparent; padding:0; font-size:11px; color:rgba(251,238,241,.7);
    font-family:inherit; font-weight:600; letter-spacing:.03em; width:auto; min-width:140px;
  }
  .contact-title-inline::placeholder{ color:rgba(251,238,241,.45); }

  .admin-strip{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); }
  .admin-tag{ font-family:var(--font-main); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; background:var(--accent); color:#fff; padding:3px 8px; border-radius:6px; font-weight:600; }
  .btn{
    border:1px solid var(--border); background:var(--surface); color:var(--ink);
    padding:6px 12px; border-radius:9px; font-size:12.5px; font-weight:500; cursor:pointer;
    font-family:inherit; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  }
  .btn:hover{ border-color:var(--accent); color:var(--accent-ink); }
  .btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
  .btn.primary:hover{ background:var(--accent-ink); color:#fff; }
  .btn.ghost{ border-color:transparent; background:transparent; }
  .btn.danger{ color:#C13B54; }
  .btn.danger:hover{ border-color:#C13B54; color:#C13B54; }
  .spacer{ flex:1; }

  .sheet{ display:flex; gap:14px; align-items:flex-start; }
  .pane{ background:var(--surface); border-radius:20px; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; }
  .list-pane{ width:340px; flex:none; max-height:min(660px, 76vh); }
  .detail-pane{ flex:1; min-width:0; min-height:420px; max-height:min(660px, 76vh); overflow-y:auto; }

  .pane-head{ padding:16px 18px 10px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .pane-head h2{ font-size:15px; font-weight:600; color:var(--ink); }
  .count-chip{ font-size:11.5px; color:var(--muted); background:var(--surface-2); border-radius:999px; padding:2px 9px; font-family:var(--font-main); }

  .list{ list-style:none; margin:0; padding:2px 10px 10px; overflow-y:auto; flex:1; }
  .row{ display:flex; align-items:flex-start; gap:10px; padding:12px 11px; border-radius:13px; cursor:pointer; margin-bottom:2px; }
  .row:hover{ background:var(--surface-hover); }
  .row.selected{ background:var(--surface-2); }
  .row-body{ min-width:0; flex:1; }
  .row-title{ font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.35; font-family:var(--font-main); }
  .row-meta{ display:flex; align-items:center; gap:6px; margin-top:6px; flex-wrap:wrap; }
  .chip{ display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--muted); background:var(--surface-2); border-radius:999px; padding:2px 8px; font-weight:500; }
  .chip.date{ font-family:var(--font-main); font-weight:600; }
  .chip svg{ width:11px; height:11px; }
  .mini-bar-track{ width:56px; height:5px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
  .mini-bar-fill{ height:100%; background:var(--good); border-radius:999px; }
  .row-del{ border:none; background:transparent; color:var(--muted); cursor:pointer; font-size:15px; padding:3px 5px; border-radius:6px; flex:none; }
  .row-del:hover{ background:var(--surface-hover); color:#C13B54; }

  .empty-list{ padding:30px 16px; text-align:center; color:var(--muted); font-size:13.5px; }
  .add-row{ border:none; background:transparent; color:var(--accent); font-weight:600; font-size:13.5px; padding:12px 16px; text-align:left; cursor:pointer; display:flex; align-items:center; gap:8px; border-top:1px solid var(--border); }
  .add-row:hover{ background:var(--surface-hover); }
  .add-row .plus{ width:22px; height:22px; border-radius:50%; border:1.5px dashed var(--accent); display:flex; align-items:center; justify-content:center; font-size:15px; flex:none; }

  .detail-inner{ padding:22px 24px 26px; display:flex; flex-direction:column; gap:18px; }
  .detail-empty{ padding:60px 24px; text-align:center; color:var(--muted); font-size:14px; }
  .back-btn{ display:none; }

  .celina-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:space-between; }
  .celina-title{ font-family:var(--font-main); font-size:22px; font-weight:700; border:none; background:transparent; color:var(--ink); padding:0; flex:1; min-width:140px; }
  .celina-title:focus{ outline:none; }
  .celina-title[readonly]{ cursor:default; }
  .celina-date-inline{ flex:none; }

  .date-range{ font-family:var(--font-main); font-size:15px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:6px; white-space:nowrap; }
  .date-range .arrow{ color:var(--muted); font-weight:400; }
  .date-label{ font-weight:500; color:var(--muted); font-size:13px; }
  .date-sub{ font-size:12px; color:var(--muted); white-space:nowrap; }
  .date-panel{ display:flex; justify-content:flex-end; }
  .offset-adjust{ display:flex; align-items:center; gap:6px; white-space:nowrap; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:5px 6px 5px 12px; }
  .offset-adjust span{ font-size:11.5px; color:var(--muted); font-weight:500; }
  .offset-adjust input{ width:38px; text-align:center; border:none; background:transparent; font-family:var(--font-main); font-weight:600; font-size:13px; color:var(--ink); }
  .stepper{ display:flex; border-radius:999px; overflow:hidden; border:1px solid var(--border); }
  .stepper button{ border:none; background:var(--surface); width:22px; height:22px; cursor:pointer; font-size:13px; color:var(--ink); line-height:1; }
  .stepper button:hover{ background:var(--surface-hover); }

  .subtasks-label{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; display:flex; align-items:baseline; gap:6px; }
  .subtasks-label .hint{ text-transform:none; letter-spacing:0; font-weight:400; opacity:.8; }
  .subtask{ border:1px solid var(--border); background:var(--surface-2); border-radius:14px; padding:14px 16px; display:flex; gap:12px; align-items:flex-start; }
  .subtask.done{ background:color-mix(in srgb, var(--good-bg) 60%, var(--surface-2)); }
  .checkbox{ width:22px; height:22px; border-radius:50%; border:2px solid var(--border); flex:none; margin-top:2px; display:flex; align-items:center; justify-content:center; cursor:pointer; background:var(--surface); }
  .checkbox svg{ width:12px; height:12px; opacity:0; transition:opacity .12s; }
  .subtask.done .checkbox{ background:var(--good); border-color:var(--good); }
  .subtask.done .checkbox svg{ opacity:1; }
  .subtask-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }
  .subtask-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
  .subtask-title{ font-size:15.5px; font-weight:600; color:var(--ink); font-family:var(--font-main); }
  .subtask.done .subtask-title{ text-decoration:line-through; color:var(--muted); }
  .type-select{
    font-family:var(--font-main); font-size:15.5px; font-weight:600; color:var(--ink); background:transparent;
    padding:1px 2px 3px; -webkit-appearance:none; appearance:none; cursor:text;
    border:none; border-bottom:1.5px dashed var(--border); border-radius:0;
  }
  .type-select:hover{ border-bottom-color:var(--accent); background:var(--surface-hover); }
  .type-select:focus{ outline:none; border-bottom:1.5px solid var(--accent); background:var(--surface-hover); }
  .type-select::placeholder{ color:var(--muted); font-weight:500; }
  .pill.date{ background:var(--good-bg); border-color:transparent; font-family:var(--font-main); font-weight:600; color:var(--ink); }
  .subtask-fields{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .subtask-fields.three{ grid-template-columns:0.8fr 0.9fr 1.5fr; }
  .field-block{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:7px 11px; min-width:0; }
  .field-block .field-label{ display:block; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:2px; }
  .field-block .field-value{ font-size:13.5px; color:var(--ink); font-weight:500; }
  .field-block .field-value a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; }
  .field-block input{ border:none; background:transparent; font-size:13.5px; color:var(--ink); font-weight:500; font-family:inherit; padding:0; width:100%; }
  .field-block.empty .field-value{ color:var(--muted); font-weight:400; font-style:normal; }
  .pill{ display:flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:4px 10px; font-size:12px; color:var(--ink); font-weight:500; white-space:nowrap; }
  .pill select, .pill input{ border:none; background:transparent; font-size:12px; color:var(--ink); font-weight:500; font-family:inherit; padding:0; }
  .pill.date-adjust input{ width:32px; text-align:center; font-family:var(--font-main); font-weight:600; }
  .headline-label{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; display:block; margin-bottom:5px; }
  .headline-box{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:9px 11px; }
  .headline-field{ font-family:var(--font-main); font-weight:400; font-size:13.5px; border:none; background:transparent; width:100%; resize:vertical; min-height:20px; color:var(--ink); padding:0; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
  .headline-field:focus{ outline:none; }
  .headline-field::placeholder{ color:var(--muted); font-weight:400; }
  .subtask-del{ border:none; background:transparent; color:var(--muted); cursor:pointer; font-size:15px; padding:3px 6px; border-radius:6px; flex:none; }
  .subtask-del:hover{ color:#C13B54; background:var(--surface); }

  .add-sub{ border:1.5px dashed var(--border); background:transparent; color:var(--accent); font-weight:600; font-size:13px; padding:10px; border-radius:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; }
  .add-sub:hover{ background:var(--surface-2); border-color:var(--accent); }

  .confidential-note{
    display:flex; align-items:center; justify-content:center; gap:8px; text-align:center;
    font-size:12.5px; font-weight:600; color:var(--accent-ink); line-height:1.4;
    background:color-mix(in srgb, var(--accent) 12%, var(--surface)); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius:12px; padding:10px 16px;
  }
  .confidential-note svg{ width:15px; height:15px; flex:none; color:var(--accent-ink); }
  .footer{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:2px 6px; color:var(--muted); font-size:12px; flex-wrap:wrap; }
  .save-flag{ display:flex; align-items:center; gap:6px; }
  .dot{ width:7px; height:7px; border-radius:50%; background:var(--good); }
  .dot.pending{ background:var(--accent-2); }
  .dot.off{ background:var(--muted); }

  @media (max-width: 780px){
    .sheet{ flex-direction:column; }
    .list-pane{ width:100%; }
    .list-pane, .detail-pane{ max-height:none; }
    .app[data-mobileview="list"] .detail-pane{ display:none; }
    .app[data-mobileview="detail"] .list-pane{ display:none; }
    .back-btn{ display:inline-flex; }
    .detail-inner{ padding:16px 16px 22px; }
    .celina-head{ flex-direction:column; align-items:flex-start; }
    .celina-date-inline{ align-self:flex-start; }
    .subtask-fields, .subtask-fields.three{ grid-template-columns:1fr; }
  }