/* ============ Portal 2026: matches thesixthstudiomy.com ============
   Loaded after style.css. Same app and features; this only changes the look:
   light grey canvas, white surfaces, Inter headings, monochrome. */
:root{
  --ink:#EDEEF1;
  --surface:#FFFFFF;
  --surface-2:#F5F6F8;
  --line:#DEE1E6;
  --paper:#0C0F14;
  --muted:#5F6773;
  --muted-2:#959DA9;
  --ignition:#2A303A;
  --ignition-hover:#2A303A;
  --premium-red:#C4122A;
  --rail:#FFFFFF;
  --rail-text:#5F6773;
  --rail-active-bg:#F1F2F4;
  --shadow-card:0 1px 2px rgba(16,24,40,.04),0 12px 32px -18px rgba(16,24,40,.22);
  --display:'Inter',system-ui,sans-serif;
}
html.dark{
  --rail:#101318;
  --rail-text:#8E97A4;
  --rail-active-bg:#1B2028;
}
html{-webkit-font-smoothing:antialiased}
body{letter-spacing:-.005em}

/* headings that used the Anton display face */
.login-title,.sidebar-header-text,.topbar-title-main,.page-head h1,.card-head h2,.confirm-modal h3,.right-panel-head h2,.chat-conv-list-head,.kanban-column-head h3,.kanban-form-modal h3,.kanban-history-modal h3,.kanban-view-title,.ticket-detail-subject,.cs-section-label,.announcements-panel-head,.calendar-nav h2{
  text-transform:none !important;font-weight:600 !important;letter-spacing:-.025em !important}
.stat-tile-num,.fin-stat-num,.tickets-summary-num,.txn-amount,.receipt-log-total{font-weight:600 !important;letter-spacing:-.03em}
.card-head h2,.chat-conv-list-head,.right-panel-head h2{font-size:17px !important}
.page-head h1{font-size:28px !important;letter-spacing:-.04em !important}
.kanban-column-head h3,.cs-section-label,.announcements-panel-head{font:500 11px var(--mono) !important;letter-spacing:.1em !important;text-transform:uppercase !important;color:var(--muted)}

/* ---------- login ---------- */
#loginScreen{background:var(--ink)}
#loginScreen::before{filter:none;inset:0;opacity:1;background-image:radial-gradient(rgba(12,15,20,.13) 1px,transparent 1.2px);background-size:22px 22px;background-position:0 0;-webkit-mask-image:radial-gradient(60% 60% at 50% 45%,#000 20%,transparent 80%);mask-image:radial-gradient(60% 60% at 50% 45%,#000 20%,transparent 80%)}
.login-card{max-width:400px;border-radius:28px;padding:40px 36px 30px;box-shadow:0 2px 6px rgba(16,24,40,.05),0 44px 90px -36px rgba(16,24,40,.45)}
.login-brand{flex-direction:column;gap:14px;margin-bottom:26px}
.login-brand .mark{width:34px;background:var(--paper)}
.login-kicker{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.login-title{font-size:34px !important;line-height:1.05;margin-bottom:6px;text-align:center}
.login-sub{text-align:center;font-size:14.5px;color:var(--muted);margin-bottom:26px}
#loginForm .field label{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
#loginForm input{height:46px;border-radius:13px !important;background:var(--surface-2) !important;border:1px solid var(--line) !important;font-size:15px !important}
#loginForm input:focus{background:#fff !important;border-color:var(--paper) !important;box-shadow:0 0 0 4px rgba(12,15,20,.08) !important}
#loginForm .btn-primary{height:48px;border-radius:999px;font-size:15px;margin-top:6px;background:var(--paper);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 24px -12px rgba(12,15,20,.6)}
#loginForm .btn-primary:hover{background:#000}
.login-powered-by{margin-top:22px;font-size:12px}
.login-powered-by a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}

/* ---------- sidebar ---------- */
.sidebar{background:var(--rail);border-right:1px solid var(--line)}
.sidebar-header-text{color:var(--paper)}
.sidebar-header-divider,.sidebar-collapse-toggle{background-color:transparent;border-color:var(--line) !important}
.sidebar-header-divider{background:var(--line)}
.sidebar-group-label{color:var(--muted-2)}
.sidebar-link{color:var(--rail-text)}
.sidebar-link:hover{background:var(--rail-active-bg);color:var(--paper)}
.sidebar-link.active{background:var(--paper);color:#fff}
html.dark .sidebar-link.active{background:#fff;color:#0C0F14}
.sidebar-nav::-webkit-scrollbar-thumb{background:var(--line)}

/* ---------- top bar ---------- */
.topbar{background:rgba(237,238,241,.82);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);color:var(--paper);border-bottom:1px solid var(--line)}
html.dark .topbar{background:rgba(10,12,16,.82)}
.topbar::before{display:none}
.topbar-mini-mark{background-color:var(--paper);width:30px}
.topbar-title{margin-top:0}
.topbar-title-main{color:var(--paper);font-size:17px !important}
.topbar-title-sub{color:var(--muted);font-size:10.5px}
.topbar-search svg{color:var(--muted-2)}
.topbar-search input{background:var(--surface) !important;border:1px solid var(--line) !important;color:var(--paper) !important;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.topbar-search input::placeholder{color:var(--muted-2)}
.topbar-search input:focus{box-shadow:0 0 0 4px rgba(12,15,20,.08);border-color:var(--paper) !important;background:var(--surface) !important}
.topbar-icon-btn{color:var(--muted)}
.topbar-icon-btn:hover{background:var(--surface);color:var(--paper)}
.topbar-icon-dot,.topbar-notif-badge{border-color:var(--ink)}
.topbar-divider{background:var(--line)}
.topbar-user{background:var(--surface);border:1px solid var(--line)}
.topbar-user:hover{background:var(--surface);border-color:var(--muted-2)}
.topbar-user-avatar{background:var(--paper);color:#fff}
.topbar-user-name{color:var(--paper)}
.topbar-user-caret{color:var(--muted)}
.mobile-menu-btn{color:var(--paper)}

/* ---------- surfaces ---------- */
.stat-tile,.card{box-shadow:var(--shadow-card);border:1px solid var(--line)}
.stat-tile-icon{border-color:var(--line);background:var(--surface-2)}
.right-panel{background:var(--surface)}
.btn-primary{background:var(--paper);color:#fff}
.btn-primary:hover{background:#000;color:#fff}
.btn-primary.is-loading::after{border-color:#fff;border-top-color:transparent}
.subtab.active{box-shadow:0 1px 2px rgba(16,24,40,.08),0 0 0 1px var(--line)}
.chat-avatar-circle{background:var(--paper);color:#fff}

/* owner avatar: the studio mark on white so it stays visible */
.topbar-user-avatar:has(img){background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.topbar-user-avatar-img{width:70%;height:70%;object-fit:contain}

/* ---------- phones ---------- */
@media (max-width:820px){
  .sidebar{box-shadow:none}
  .sidebar.mobile-open{box-shadow:0 0 40px rgba(0,0,0,.25)}
  .topbar{height:64px;padding:0 14px;gap:10px}
  .topbar-title-group{gap:8px;min-width:0;flex-shrink:1}
  .topbar-mini-mark{display:none}
  .topbar-title{min-width:0}
  .topbar-title-main{font-size:15.5px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar-title-sub{font-size:9.5px}
  .topbar-right{gap:2px}
  .topbar-divider{display:none}
  .topbar-user{padding:3px;border:0;background:transparent}
  .topbar-user-name,.topbar-user-caret{display:none}
}

.login-forgot{margin-top:16px;text-align:center;font-size:13px;line-height:1.5;color:var(--muted)}
.login-forgot a{display:inline-block;color:var(--paper);font-weight:500;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* ---------- Directory (contact-form enquiries) ---------- */
.sidebar-link{position:relative}
.dir-side-badge{position:absolute;top:6px;right:6px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--premium-red);color:#fff;font:600 9.5px/16px var(--mono);text-align:center}
.sidebar.is-expanded .dir-side-badge,.sidebar.mobile-open .dir-side-badge{position:static;margin-left:auto;display:inline-block}
.dir-side-badge[hidden]{display:none !important}
.dir-filters{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);align-self:flex-start}
.dir-filter{border:0;background:none;border-radius:999px;padding:7px 14px;font:500 12.5px var(--body);color:var(--muted);cursor:pointer}
.dir-filter.active{background:var(--paper);color:#fff}
#dirCount{color:var(--muted-2)}
.dir-list{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.dir-empty{padding:48px 16px;text-align:center;color:var(--muted);font-size:14px;border:1px dashed var(--line);border-radius:16px}
.dir-item{border:1px solid var(--line);border-radius:16px;background:var(--surface);transition:border-color .2s,box-shadow .2s}
.dir-item:hover{border-color:var(--muted-2)}
.dir-item.is-open{box-shadow:var(--shadow-card);border-color:var(--muted-2)}
.dir-head{width:100%;display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:14px 16px 4px;background:none;border:0;text-align:left;cursor:pointer;font:inherit;color:inherit}
.dir-dot{width:8px;height:8px;border-radius:50%;background:transparent}
.dir-item.is-new .dir-dot{background:var(--premium-red)}
.dir-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.dir-name{font-weight:600;font-size:14.5px;letter-spacing:-.01em;color:var(--paper)}
.dir-item:not(.is-new) .dir-name{font-weight:500}
.dir-meta{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dir-tags{display:flex;gap:6px}
.dir-tag{font:500 11px var(--mono);padding:3px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--paper)}
.dir-date{font:500 11.5px var(--mono);color:var(--muted-2);white-space:nowrap}
.dir-preview{margin:0;padding:2px 16px 14px 40px;font-size:13.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.dir-body{display:none;padding:0 16px 16px 40px}
.dir-item.is-open .dir-preview{display:none}
.dir-item.is-open .dir-body{display:block}
.dir-message{white-space:pre-wrap;font-size:14px;line-height:1.6;color:var(--paper);background:var(--surface-2);border-radius:12px;padding:14px 16px}
.dir-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.dir-actions .btn{text-decoration:none}
.dir-delete{color:var(--premium-red) !important}
@media (max-width:820px){
  .dir-head{grid-template-columns:10px minmax(0,1fr) auto;gap:10px}
  .dir-tags{display:none}
  .dir-preview,.dir-body{padding-left:36px}
}