/* UI polish: accessible colours (WCAG AA) and consistent states. Loaded last on purpose. */

/* ---------- Light theme tokens ---------- */
[data-theme=light]{
  --muted:#5c5e56;            /* secondary text: 5.1:1 on the page background */
  --green-strong:#66703d;     /* solid green with white text: 5.5:1 */
  --green-strong-hover:#59622f;
  --green-text:#56602f;       /* green used as text on light surfaces */
}
/* Secondary text on the soft-green cards needs to be darker still */
[data-theme=light] .tc-warm-panel,
[data-theme=light] .tc-stat-strip article.warm,
[data-theme=light] .performance,
[data-theme=light] .overview-kpi.accent{--muted:#474a3f}

/* ---------- Solid green + white text (light theme) ---------- */
[data-theme=light] .stage-tab.active{background:var(--green-strong);border-color:var(--green-strong);color:#fff}
[data-theme=light] .stage-tab.active .stage-name,
[data-theme=light] .stage-tab.active b,
[data-theme=light] .stage-tab.active .stage-num{color:#fff}
[data-theme=light] .stage-tab.active .stage-num{background:rgba(255,255,255,.2)}
[data-theme=light] .stage-tab.active:hover{background:var(--green-strong-hover)}
[data-theme=light] .tw-step-btn.done .tw-dot{background:var(--green-strong);color:#fff}
[data-theme=light] .tw-step-btn.current .tw-dot{box-shadow:0 0 0 2px color-mix(in srgb,var(--green-strong) 40%,transparent)}
[data-theme=light] .comm-tabs .seg.active b,
[data-theme=light] .doc-folder.active b{background:color-mix(in srgb,var(--green-strong) 18%,transparent);color:var(--text)}

/* ---------- Text colours that were too light on their surface ---------- */
[data-theme=light] .status.info{color:#46677f}
[data-theme=light] .attention-tile b{color:#8c4f2b}
[data-theme=light] .readiness-trend.negative,[data-theme=light] .negative{color:#9a4a35}
[data-theme=light] .performance-note,
[data-theme=light] .performance-footer span,
[data-theme=light] .performance p{color:#3d4034}
[data-theme=light] .travel-calendar .calendar-day-head.active strong,
[data-theme=light] .calendar-day-head.active span{color:var(--green-text)}
[data-theme=light] .tk-chip.progress,[data-theme=light] .tk-chip.waiting{color:var(--text)}

/* ---------- Notification badge: white text needs a deeper red (both themes) ---------- */
.notif-badge{background:#b0503f!important;color:#fff}
[data-theme=light] .overview-middle .performance>.performance-note{color:#3d4034;opacity:1}

/* ---------- Destructive text: readable on both themes ---------- */
.btn.danger-text,.comm-status-menu .danger-text{color:#e8a99c}
[data-theme=light] .btn.danger-text,[data-theme=light] .comm-status-menu .danger-text{color:#a63f2f}
[data-theme=light] .pp-error,[data-theme=light] .act-error,[data-theme=light] .doc-pending li.bad small,[data-theme=light] .doc-tray-row.bad small,[data-theme=light] .stream-group.overdue,[data-theme=light] .comm-warn{color:#a63f2f}
[data-theme=light] .btn.danger-text:hover{background:rgba(166,63,47,.1)}
[data-theme=light] .detail-eyebrow,[data-theme=light] .mobile-day-summary span{color:var(--green-text)}

/* ---------- Layout ---------- */
/* Dashboard pipeline: four stages fill the whole panel (the grid had a fifth, empty column) */
@media(min-width:641px){.overview-middle .readiness-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}

/* ---------- Sidebar: the active item keeps a readable colour on hover ---------- */
[data-theme=dark] .sidebar .nav-item.active,[data-theme=dark] .sidebar .nav-item.active:hover{color:#20231a}
[data-theme=light] .sidebar .nav-item.active,[data-theme=light] .sidebar .nav-item.active:hover{color:#fff}
.sidebar .nav-bottom .nav-item{transition:background-color .16s ease,color .16s ease}
.settings-inline-action{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:14px 0 0}
.settings-inline-action small{color:var(--muted);font-size:12px}

/* ======================================================================
   Dialogs: one consistent shape for every popup
   white card (dark card in dark theme), same radius as the panels, a thin divider
   under the title and above the buttons, soft blurred backdrop.
   ====================================================================== */
.modal-backdrop{background:rgba(22,24,18,.46)!important;-webkit-backdrop-filter:blur(5px)!important;backdrop-filter:blur(5px)!important}
[data-theme=dark] .modal-backdrop{background:rgba(6,7,5,.62)!important}
.modal-backdrop .modal{
  background:var(--surface);color:var(--text);
  border:1px solid color-mix(in srgb,var(--text) 9%,transparent);
  border-radius:22px!important;overflow:hidden;
  box-shadow:0 28px 70px -18px rgba(20,22,14,.45),0 3px 10px rgba(20,22,14,.08);
  display:flex;flex-direction:column;max-height:min(88vh,820px)
}
.modal-backdrop .modal .modal-head{
  background:transparent;flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px 22px 16px 26px;border-bottom:1px solid var(--border)
}
.modal-backdrop .modal .modal-head h2{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.modal-backdrop .modal .modal-head .icon-btn{
  width:36px;height:36px;flex:none;display:grid;place-items:center;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--muted);font-size:20px;line-height:1;transition:background-color .16s ease,color .16s ease
}
.modal-backdrop .modal .modal-head .icon-btn:hover{background:var(--tw-hover,color-mix(in srgb,var(--text) 7%,transparent));color:var(--text)}
.modal-backdrop .modal .modal-head .icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.modal-backdrop .modal .modal-body{background:transparent;flex:1 1 auto;min-height:0;overflow:auto;padding:22px 26px 26px}
.modal-backdrop .modal .modal-foot{
  background:var(--surface);flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;
  padding:16px 26px 20px;border-top:1px solid var(--border)
}
.modal-backdrop .modal .modal-foot .btn{min-width:96px}
/* the "Create new" list and similar choice rows: neutral, no green tiles */
.quick-create-options{gap:6px}
.quick-create-option{min-height:54px;padding:8px 12px;border-radius:14px;font-size:13.5px;transition:background-color .16s ease,border-color .16s ease}
.quick-create-option:hover,.quick-create-option:focus-visible{background:var(--surface2);border-color:transparent}
.quick-create-option:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.quick-create-icon{width:36px;height:36px;border-radius:11px;background:var(--surface2);color:var(--text)}
.quick-create-option:hover .quick-create-icon{background:var(--surface)}
.quick-create-icon svg{width:18px;height:18px}
.quick-create-option>svg{transition:transform .16s ease}.quick-create-option:hover>svg{transform:translateX(3px);color:var(--text)}
/* on phones the dialog stays a bottom sheet: only the radius changes at the top */
@media(max-width:640px){
  .modal-backdrop .modal{border-radius:22px!important;max-height:92vh}
  .modal-backdrop .modal .modal-head{padding:18px 14px 14px 20px}
  .modal-backdrop .modal .modal-body{padding:18px 20px 22px}
  .modal-backdrop .modal .modal-foot{padding:14px 20px calc(18px + env(safe-area-inset-bottom,0px))}
}
@media(prefers-reduced-motion:no-preference){.modal-backdrop{animation:tc-fade .2s ease-out backwards}}

/* Mobile menu motion: soft slide-in, backdrop fade, staggered items */
.mobile-menu-backdrop{animation:mm-fade .26s ease both}
.mobile-menu-sheet{animation:mm-slide .42s cubic-bezier(.22,1,.36,1) both!important;transform-origin:left center}
.mobile-menu-sheet .modal-head{animation:mm-rise .4s .08s cubic-bezier(.22,1,.36,1) both}
.mobile-menu-links .nav-group{--g:0}
.mobile-menu-links .nav-group:nth-child(2){--g:1}.mobile-menu-links .nav-group:nth-child(3){--g:2}.mobile-menu-links .nav-group:nth-child(4){--g:3}.mobile-menu-links .nav-group:nth-child(5){--g:4}.mobile-menu-links .nav-group:nth-child(n+6){--g:5}
.mobile-menu-links .nav-label,.mobile-menu-links .nav-item{animation:mm-rise .42s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.12s + var(--g,0)*.05s)}
.mobile-menu-links .nav-item:nth-of-type(2){animation-delay:calc(.16s + var(--g,0)*.05s)}
.mobile-menu-links .nav-item:nth-of-type(3){animation-delay:calc(.2s + var(--g,0)*.05s)}
.mobile-menu-links .nav-item:nth-of-type(4){animation-delay:calc(.24s + var(--g,0)*.05s)}
.mobile-menu-links .nav-item:nth-of-type(n+5){animation-delay:calc(.28s + var(--g,0)*.05s)}
.mobile-menu-bottom{animation:mm-rise .42s .4s cubic-bezier(.22,1,.36,1) both}
.mobile-menu-bottom .nav-item{animation:none}
.mobile-menu-links .nav-item{transition:background-color .18s ease,color .18s ease,transform .18s ease}
.mobile-menu-links .nav-item .nav-icon{transition:transform .22s cubic-bezier(.22,1,.36,1)}
.mobile-menu-links .nav-item:hover .nav-icon{transform:translateX(2px) scale(1.08)}
.mobile-menu-links .nav-item:active{transform:scale(.98)}
@keyframes mm-slide{from{transform:translateX(-102%);opacity:.6}to{transform:none;opacity:1}}
@keyframes mm-fade{from{opacity:0}to{opacity:1}}
@keyframes mm-rise{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .mobile-menu-backdrop,.mobile-menu-sheet,.mobile-menu-sheet .modal-head,.mobile-menu-links .nav-label,.mobile-menu-links .nav-item,.mobile-menu-bottom{animation:none!important}
}

/* No grey/blue tap flash on touch screens */
*{-webkit-tap-highlight-color:transparent}
a,button,[role=button],input,select,textarea,label{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* Communications on phones: list first, slide to the message, slide again to details */
.comm-back,.comm-details-btn{display:none}
@media(max-width:800px){
  .communication-layout{position:relative;display:block;overflow:hidden;height:calc(100dvh - 232px);min-height:420px;border-radius:18px}
  .communication-layout>.conversation-list,.communication-layout>.message-thread,.communication-layout>.communication-context{position:absolute;inset:0;max-height:none;margin:0;overflow-y:auto;transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .3s ease}
  .communication-layout>.message-thread{display:flex;flex-direction:column;overflow:hidden;transform:translateX(100%);visibility:hidden;z-index:2}
  .communication-layout>.communication-context{transform:translateX(100%);visibility:hidden;z-index:3}
  .communication-layout.show-thread>.conversation-list{transform:translateX(-28%);opacity:0;pointer-events:none}
  .communication-layout.show-thread>.message-thread{transform:none;visibility:visible}
  .communication-layout.show-context>.message-thread{transform:translateX(-28%);opacity:0}
  .communication-layout.show-context>.communication-context{transform:none;visibility:visible}
  .comm-back{display:grid;place-items:center;flex:none;width:36px;height:36px;margin-right:4px;border:0;border-radius:50%;background:var(--surface2);color:var(--text);cursor:pointer;transition:background-color .16s ease,transform .16s ease}
  .comm-back:active{transform:scale(.92)}
  .comm-ctx-back{margin-bottom:10px}
  .comm-thread-head{flex-wrap:wrap;gap:8px}
  .comm-details-btn{display:inline-flex}
  .comm-actions [data-comm-couple]{display:none}
}
@media(max-width:800px) and (prefers-reduced-motion:reduce){
  .communication-layout>*{transition:none!important}
}

/* Hide the page briefly while the first server data loads, so demo data never flashes */
body.tc-syncing .main{opacity:0;pointer-events:none}
.main{transition:opacity .2s ease}

/* No "+" button next to page titles on phones (the labelled buttons stay on larger screens) */
@media(max-width:640px){
  .page-header .actions .btn.btn-add,.mobile-planner-head .btn.primary{display:none!important}
  .page-header:has(.btn-add){grid-template-columns:minmax(0,1fr)!important}
}

/* ===== Pop-ups in the command-palette style =====
   White panel, big radius, soft grey search/input fields, quiet section labels, icon rows with a warm highlight, frosted backdrop. */
:root{--pop-field:#f2f1ed;--pop-hover:#eeede8;--pop-veil:rgba(232,230,223,.55);--pop-line:rgba(28,30,22,.08);--pop-icon:%23767a6e}
[data-theme=dark]{--pop-field:color-mix(in srgb,var(--text) 7%,transparent);--pop-hover:color-mix(in srgb,var(--text) 9%,transparent);--pop-veil:rgba(6,8,5,.6);--pop-line:color-mix(in srgb,var(--text) 10%,transparent)}

/* frosted backdrop (the palette has none of its own, so it gets one) */
.modal-backdrop{background:var(--pop-veil)!important;-webkit-backdrop-filter:blur(9px)!important;backdrop-filter:blur(9px)!important}
body:has(.search-pop)::after{content:"";position:fixed;inset:0;z-index:109;background:var(--pop-veil);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);animation:tc-fade .18s ease-out backwards}

/* dialogs */
.modal-backdrop .modal{border:1px solid var(--pop-line);border-radius:20px!important;box-shadow:0 34px 90px -20px rgba(20,22,14,.32),0 2px 8px rgba(20,22,14,.06)}
.modal-backdrop .modal .modal-head{padding:18px 18px 6px 24px;border-bottom:0}
.modal-backdrop .modal .modal-head h2{font-size:17px}
.modal-backdrop .modal .modal-body{padding:10px 24px 22px}
.modal-backdrop .modal .modal-foot{border-top:0;padding:6px 24px 20px}
.modal .input,.modal select.input,.modal textarea.input,.modal input.input{background-color:var(--pop-field)!important;border:1px solid transparent!important;border-radius:12px!important;transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease}
.modal .input:hover{background-color:var(--pop-hover)!important}
.modal .input:focus,.modal .input:focus-visible{background-color:var(--surface)!important;border-color:var(--accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)!important;outline:0}
.modal .input.invalid{border-color:#c0503f!important}
.modal .ar-row,.modal .quick-create-option,.modal .tk-row,.modal .cl-link,.modal .tpl-row{border-radius:12px}
.modal .ar-row:hover,.modal .quick-create-option:hover,.modal .quick-create-option:focus-visible,.modal .cl-link:hover{background:var(--pop-hover)!important}

/* the search palette: desktop popover and mobile dialog */
.search-pop{left:0!important;right:0;top:min(13vh,110px)!important;margin:0 auto;width:min(640px,calc(100vw - 32px))!important;z-index:120;padding:10px;max-height:min(72vh,580px);border:1px solid var(--pop-line);border-radius:20px;background:var(--surface);box-shadow:0 34px 90px -20px rgba(20,22,14,.34),0 2px 8px rgba(20,22,14,.06)}
.modal.command{padding:10px}
.search-pop .command-input,.modal.command .command-input{flex:0 0 auto;width:100%;box-sizing:border-box;height:46px;margin:0 0 4px;padding:0 14px 0 46px;border:0!important;border-radius:12px;background-color:var(--pop-field);background-repeat:no-repeat;background-position:16px center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23767a6e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E");color:var(--text);font:inherit;font-size:15px;outline:0}
.search-pop .command-input::placeholder,.modal.command .command-input::placeholder{color:var(--muted)}
.search-pop .command-results,.modal.command .command-results{padding:0;max-height:min(54vh,430px)}
.command-results .command-label{padding:12px 12px 6px;font-size:13px;letter-spacing:0;text-transform:none;color:var(--muted)}
.command-results .command-row,.modal .command-row{min-height:42px;height:auto;padding:0 12px;gap:12px;border-radius:10px;transition:background-color .12s ease}
.command-results .command-row:hover,.command-results .command-row.selected,.modal .command-row:hover{background:var(--pop-hover)}
.command-results .command-icon{width:20px;height:20px;border-radius:0;background:transparent;color:var(--text);font-size:11px}
.command-results .command-icon svg{width:18px;height:18px;stroke-width:1.7}
.command-copy strong{font-size:15px;font-weight:450}
.command-type{font-size:12px}
.search-pop .command-foot,.modal.command .command-foot{border-top:0;padding:8px 12px 2px}
.command-foot kbd{background:var(--pop-field);border:0;border-radius:6px;padding:1px 6px}

/* dropdown menus follow the same shape */
.comm-menu,.owner-menu,.cal-menu,.prop-menu,.rep-menu,.top-dd,.header-dropdown{border-radius:14px!important;border:1px solid var(--pop-line)!important;box-shadow:0 18px 50px -12px rgba(20,22,14,.28)!important}
.comm-menu button:hover,.owner-menu button:hover,.cal-menu button:hover,.prop-menu button:hover,.rep-menu button:hover{background:var(--pop-hover)!important}
@media(max-width:640px){
  .modal-backdrop .modal .modal-head{padding:16px 12px 4px 20px}
  .modal-backdrop .modal .modal-body{padding:8px 20px 20px}
  .modal-backdrop .modal .modal-foot{padding:6px 20px calc(16px + env(safe-area-inset-bottom,0px))}
  .search-pop{top:9vh!important}
}

/* Palette rows: one line, icon and text on the same centre line (pages and actions are just icon + name) */
.command-results .command-row{align-items:center}
.command-results .command-copy{display:flex!important;align-items:center;gap:10px;flex:1 1 auto;min-width:0}
.command-results .command-copy strong{flex:0 1 auto;min-width:0;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.command-results .command-copy small{flex:1 1 0;min-width:0;display:block;margin:0!important;padding:0;text-align:left!important;font-size:13px;line-height:1.3;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.command-results .command-type{flex:none;align-self:center;margin:0 0 0 auto;font-size:12px;line-height:1;color:var(--muted)}
.command-results .command-icon{align-self:center;display:grid;place-items:center;flex:none}

/* ===== Rows inside every pop-up and menu: same shape as the palette rows ===== */
.comm-menu,.owner-menu,.cal-menu,.prop-menu,.rep-menu,.top-dd,.header-dropdown{padding:6px!important}
.comm-menu button,.owner-menu button,.cal-menu button,.prop-menu button,.rep-menu button{min-height:40px;padding-top:0!important;padding-bottom:0!important;padding-left:12px!important;padding-right:12px!important;border-radius:10px!important;font-size:14px!important;transition:background-color .12s ease}
.comm-menu button:hover,.comm-menu button:focus-visible,.owner-menu button:hover,.owner-menu button:focus-visible,.cal-menu button:hover,.cal-menu button:focus-visible,.prop-menu button:hover,.prop-menu button:focus-visible,.rep-menu button:hover,.rep-menu button:focus-visible{background:var(--pop-hover)!important;outline:0}
.comm-menu button[aria-checked="true"],.owner-menu button[aria-checked="true"],.cal-menu button[aria-checked="true"],.rep-menu button[aria-checked="true"]{background:var(--pop-hover)}
.top-dd-head{padding:10px 12px 6px!important}
.top-dd-head strong{font-size:14px}.top-dd-head span{font-size:13px;color:var(--muted)}
.top-dd-item{padding:10px 12px!important;border-radius:10px!important;transition:background-color .12s ease}
.top-dd-item:hover,.top-dd-item:focus-visible{background:var(--pop-hover)!important;outline:0}
.menu{padding:6px!important;border-radius:14px!important;border:1px solid var(--pop-line)!important}
.menu .menu-item{border-radius:10px!important;min-height:40px;font-size:14px!important;padding-left:12px!important;padding-right:12px!important}
.menu .menu-item:hover,.menu .menu-item:focus-visible{background:var(--pop-hover)!important}

/* notifications and other lists inside a dialog */
.notification-list{gap:2px;margin:0 -8px}
.notification-item{padding:10px 12px!important;border:0!important;border-radius:12px;transition:background-color .12s ease}
.notification-item:hover{background:var(--pop-hover)}
.mobile-menu-links .nav-item:hover,.mobile-menu-links .nav-item.active{background:var(--pop-hover)}

/* "Create new" and other choice lists: plain icon + name, like the palette */
.quick-create-options{gap:2px}
.quick-create-option{min-height:42px!important;padding:0 12px!important;border-radius:10px!important;gap:12px;font-size:15px}
.quick-create-icon{width:20px!important;height:20px!important;border-radius:0!important;background:transparent!important;color:var(--text)!important}
.quick-create-option:hover .quick-create-icon{background:transparent!important}
.quick-create-icon svg{width:18px!important;height:18px!important;stroke-width:1.7}
.quick-create-option>svg{display:none!important}
.quick-create-option:hover,.quick-create-option:focus-visible{background:var(--pop-hover)!important;border-color:transparent!important}