/* ABJ Client Portal — additive styles on top of main.css's shared design tokens. */

/* ==================================================================
   Login page — mirrors ABJ-SKI's login (abj-admin/css/main.css) class
   for class, value for value, so the two portals' login pages match
   exactly. .login-gate/.login-card/.login-title/.login-error/.login-submit
   already exist in this file's own main.css (an older single-card design);
   every property below is re-declared in full to override that old look
   rather than leave it partially bleeding through.
   ================================================================== */
.login-gate{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper);
  padding:24px;
}
.login-shell{
  width:100%;max-width:920px;min-width:0;
  min-height:520px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 2px 4px rgba(15,39,68,.08), 0 24px 60px -20px rgba(15,39,68,.28);
  overflow:hidden;
}

/* ---- left: branding panel ---- */
.login-panel-brand{
  position:relative;
  min-width:0;
  background:
    radial-gradient(560px 320px at 100% 0%, var(--line-soft) 0%, transparent 65%),
    var(--surface-2);
  border-right:1px solid var(--border);
  padding:44px 40px 28px;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.login-panel-top{position:relative;z-index:1;}
.login-logo{height:100px;width:auto;display:block;margin-top:70px;margin-left:-9px}
.login-app-brand-text{margin-top:16px;font-size:24px;font-weight:800;letter-spacing:-.01em;color:var(--ink);}
.login-app-tagline{
  margin-top:-8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);
}
.login-panel-desc{
  margin:14px 0 0;max-width:280px;font-size:13.5px;line-height:1.6;color:var(--ink-soft);
}
.login-feature-list{
  position:relative;z-index:1;
  list-style:none;margin:32px 0 0;padding:0;
  display:flex;flex-direction:column;gap:12px;
}
.login-feature-list li{
  display:flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:600;color:var(--ink-soft);
}
.login-feature-dot{
  width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;
}
.login-panel-footer{
  position:relative;z-index:1;
  margin-top:auto;padding-top:28px;
  font-size:11px;color:var(--ink-faint);
}
.login-panel-lines{
  position:absolute;left:40px;right:40px;bottom:78px;z-index:0;
  display:flex;flex-direction:column;gap:9px;pointer-events:none;
}
.login-panel-line{
  height:3px;border-radius:99px;width:var(--w);
  background:linear-gradient(90deg, var(--line-soft), transparent);
}

/* ---- right: form panel ---- */
.login-panel-form{
  min-width:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:44px 48px;
}
.login-card{
  width:100%;max-width:340px;margin:0 auto;
  background:none;border:none;box-shadow:none;padding:0;border-radius:0;
}
.login-form-head{margin-bottom:26px;}
.login-title{font-size:22px;font-weight:800;color:var(--ink);margin:0 0 8px;letter-spacing:-.01em;}
.login-subtitle{font-size:13px;color:var(--ink-soft);line-height:1.55;margin:0;}
.login-card input[type=email],
.login-card input[type=password],
.login-card input[type=text]{
  width:100%;background:var(--surface);border:1px solid var(--border);color:var(--ink);
  border-radius:9px;padding:10px 12px;font-size:13.5px;font-family:inherit;
  transition:border-color .12s ease;
}
.login-card input:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--line-soft);
}
.login-password-wrap{position:relative;}
.login-password-wrap input{padding-right:40px;}
.login-password-toggle{
  position:absolute;top:0;right:0;bottom:0;width:38px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;padding:0;cursor:pointer;color:var(--ink-faint);
}
.login-password-toggle:hover{color:var(--ink-soft);}
.login-password-toggle svg{width:18px;height:18px;}
.login-error{
  margin-top:14px;font-size:12.5px;color:var(--danger);
  background:var(--danger-bg);border-radius:8px;padding:9px 11px;
  line-height:1.4;
}
.login-submit{
  width:100%;margin-top:20px;justify-content:center;
  padding:10px 14px;font-size:13.5px;border-radius:9px;
}
.login-submit:disabled{opacity:.65;}
.login-mobile-footer{display:none;text-align:center;font-size:11px;color:var(--ink-faint);margin-top:26px;}

/* remember-me / forgot-password: ABJ-SKI's login has neither. Kept working
   in the DOM (auth.js still wires both) but hidden so the two portals'
   login pages match visually — see index.html. */
.login-row{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-size:12.5px;}
.login-remember{display:flex;align-items:center;gap:6px;color:var(--ink-soft);font-weight:600;cursor:pointer;}
.login-remember input{width:auto;}
.login-forgot-link{color:var(--line);font-weight:600;text-decoration:none;}
.login-forgot-link:hover{text-decoration:underline;}

@media (max-width:860px){
  .login-shell{grid-template-columns:minmax(0,1fr);max-width:440px;min-height:0;border-radius:16px;}
  .login-panel-brand{padding:32px 28px 26px;border-right:none;border-bottom:1px solid var(--border);}
  .login-panel-lines{display:none;}
  .login-logo{height:38px;}
  .login-panel-desc{max-width:none;}
  .login-feature-list{margin-top:20px;}
  .login-panel-footer{display:none;}
  .login-panel-form{padding:32px 28px 36px;}
  .login-mobile-footer{display:block;}
}
@media (max-width:420px){
  .login-gate{padding:14px;}
  .login-panel-brand{padding:26px 22px 22px;}
  .login-feature-list{display:none;}
  .login-panel-form{padding:28px 22px 30px;}
}

.nav-badge{
  margin-left:auto;background:var(--danger);color:#fff;
  font-size:10px;font-weight:800;line-height:1;border-radius:99px;
  padding:3px 6px;min-width:16px;text-align:center;
}
.sidebar-footer{margin-top:12px;font-size:10.5px;color:var(--ink-faint);text-align:center;line-height:1.5;}

/* ---------- project cards (My Projects / Dashboard) ---------- */
.project-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.project-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:12px;
}
.project-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.project-card-title{font-size:15px;font-weight:700;color:var(--ink);}
.project-card-sub{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
.project-card-progress-row{display:flex;align-items:center;gap:10px;}
.project-card-progress-row .progress-bar-outer{flex:1;}
.project-card-progress-pct{font-size:12.5px;font-weight:700;color:var(--ink);width:38px;text-align:right;flex:none;}
.project-card-dates{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-soft);}
.project-card-dates b{display:block;font-size:12.5px;color:var(--ink);font-weight:700;}
.project-card-foot{margin-top:2px;}

/* status pills — client-facing derived status */
.pill-ontrack{background:var(--good-bg);color:var(--good-ink);}
.pill-atrisk{background:var(--warn-bg);color:var(--warn-ink);}
.pill-delayed{background:var(--danger-bg);color:var(--danger);}
.pill-onhold{background:var(--hold-bg);color:var(--hold-ink);}
.pill-completed{background:var(--info-bg);color:var(--info-ink);}

/* ---------- milestone timeline ---------- */
.milestone-timeline{display:flex;flex-direction:column;}
.milestone-row{display:flex;gap:14px;padding:4px 0;}
.milestone-rail{display:flex;flex-direction:column;align-items:center;flex:none;}
.milestone-dot{
  width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;background:var(--surface-2);color:var(--ink-faint);border:1px solid var(--border);flex:none;
}
.milestone-dot.is-completed{background:var(--good-bg);color:var(--good-ink);border-color:var(--good-bg);}
.milestone-dot.is-progress{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.milestone-dot.is-delayed{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-bg);}
.milestone-line{width:2px;flex:1;background:var(--border);min-height:22px;margin:2px 0;}
.milestone-row:last-child .milestone-line{display:none;}
.milestone-body{flex:1;padding-bottom:18px;min-width:0;}
.milestone-name{font-size:13.5px;font-weight:700;color:var(--ink);}
.milestone-meta{font-size:12px;color:var(--ink-soft);margin-top:2px;}
.milestone-notes{font-size:12px;color:var(--ink-faint);margin-top:4px;}
.milestone-delay-flag{color:var(--danger);font-weight:700;}

/* ---------- progress update cards ---------- */
.update-card{border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:14px;}
.update-card:last-child{margin-bottom:0;}
.update-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.update-date{font-size:13.5px;font-weight:700;color:var(--ink);}
.update-progress-pill{font-size:12px;font-weight:800;color:var(--accent);}
.update-section{margin-top:10px;}
.update-section-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);font-weight:700;margin-bottom:5px;}
.update-list{margin:0;padding-left:18px;font-size:13px;color:var(--ink);}
.update-list li{margin-bottom:3px;}
.update-issues-box{background:var(--warn-bg);color:var(--warn-ink);border-radius:8px;padding:8px 12px;font-size:12.5px;}
.update-by{font-size:11.5px;color:var(--ink-faint);margin-top:10px;}

/* ---------- photo gallery + lightbox ---------- */
.lightbox-backdrop{
  position:fixed;inset:0;background:rgba(8,14,22,.9);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:30px;
}
.lightbox-backdrop img{max-width:100%;max-height:100%;border-radius:6px;}
.lightbox-close{position:fixed;top:16px;right:20px;background:none;border:none;color:#fff;font-size:34px;line-height:1;cursor:pointer;}

/* ---------- document rows ---------- */
.doc-category-block{margin-bottom:18px;}
.doc-category-block:last-child{margin-bottom:0;}
.doc-category-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin-bottom:8px;padding:0 2px;}
.doc-row{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);
  border-radius:8px;margin-bottom:8px;background:var(--surface);
}
.doc-row:last-child{margin-bottom:0;}
.doc-icon{width:34px;height:34px;border-radius:8px;background:var(--info-bg);color:var(--info-ink);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:none;}
.doc-info{flex:1;min-width:0;}
.doc-name{font-size:13.5px;font-weight:700;color:var(--ink);}
.doc-meta{font-size:11.5px;color:var(--ink-faint);margin-top:2px;}
.doc-project-tag{font-size:11px;color:var(--ink-soft);background:var(--surface-2);padding:2px 8px;border-radius:99px;margin-right:6px;}
.doc-actions{display:flex;gap:6px;flex:none;}

/* ---------- billing ---------- */
.billing-summary-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:18px;}

/* ---------- issues ---------- */
.issue-card{border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;}
.issue-card:last-child{margin-bottom:0;}
.issue-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.issue-subject{font-size:13.5px;font-weight:700;color:var(--ink);}
.issue-meta{font-size:11.5px;color:var(--ink-faint);margin-top:2px;}
.issue-desc{font-size:13px;color:var(--ink-soft);margin-top:8px;}
.issue-response{margin-top:10px;background:var(--info-bg);color:var(--info-ink);border-radius:8px;padding:8px 12px;font-size:12.5px;}

/* ---------- notifications ---------- */
.notif-item{display:flex;gap:12px;padding:12px 4px;border-bottom:1px solid var(--border);}
.notif-item:last-child{border-bottom:none;}
.notif-item.is-unread{background:var(--surface-2);border-radius:8px;}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;margin-top:5px;}
.notif-dot.is-read{background:transparent;}
.notif-text{flex:1;min-width:0;}
.notif-title{font-size:13.5px;font-weight:700;color:var(--ink);}
.notif-body{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
.notif-time{font-size:11px;color:var(--ink-faint);margin-top:3px;}

@media (max-width:780px){
  .project-card-grid{grid-template-columns:1fr;}
}

/* ---------- app header (right of sidebar): bell + profile shortcut ----------
   .shell stays a 2-column grid (sidebar | content-col); content-col is a
   flex column so the header sits fixed above .main's own scroll area without
   fighting each page's existing position:sticky topbar. */
.content-col{display:flex;flex-direction:column;min-width:0;min-height:0;}
.content-col .main{height:auto;flex:1;min-height:0;}

.app-header{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:12px 30px;background:var(--surface);border-bottom:1px solid var(--border);
}
.app-header-brand{display:flex;align-items:center;gap:10px;min-width:0;}
.app-header-logo-chip{padding:2px 8px;}
.app-header-logo-chip .brand-logo{height:22px;}
.app-header-name{font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.app-header-actions{display:flex;align-items:center;gap:10px;flex:none;}

.app-header-profile{
  appearance:none;border:1px solid var(--border);background:var(--surface);
  display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:99px;cursor:pointer;
}
.app-header-profile:hover{background:var(--surface-2);}
.app-header-avatar{width:24px;height:24px;font-size:11px;}
.app-header-profile-label{font-size:12.5px;font-weight:700;color:var(--ink);}

.notif-bell-wrap{position:relative;}
.notif-bell-btn{
  appearance:none;border:1px solid var(--border);background:var(--surface);
  width:36px;height:36px;border-radius:99px;cursor:pointer;position:relative;
  display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;
}
.notif-bell-btn:hover{background:var(--surface-2);}
.notif-bell-badge{
  position:absolute;top:-3px;right:-3px;background:var(--danger);color:#fff;
  font-size:10px;font-weight:800;line-height:1;border-radius:99px;
  padding:3px 5px;min-width:16px;text-align:center;border:2px solid var(--surface);
}
.notif-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;z-index:40;width:340px;max-width:88vw;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;overflow:hidden;
}
.notif-dropdown-head{padding:12px 16px;font-size:13px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--border);}
.notif-dropdown-list{max-height:360px;overflow-y:auto;padding:4px 12px;}
.notif-dropdown-list .notif-item{padding:10px 4px;cursor:pointer;}
.notif-dropdown-list .notif-item:hover{background:var(--surface-2);border-radius:8px;}
.notif-dropdown-empty{padding:26px 16px;text-align:center;color:var(--ink-faint);font-size:12.5px;}
.notif-dropdown-seeall{
  appearance:none;border:none;border-top:1px solid var(--border);background:var(--surface);
  padding:11px;font-size:12.5px;font-weight:700;color:var(--accent);cursor:pointer;
}
.notif-dropdown-seeall:hover{background:var(--surface-2);}

@media (max-width:780px){
  .app-header{padding:10px 16px;}
  .app-header-name{display:none;}
}