/* ===== phase-a-css ===== */
/* Hang Đôi UI DNA · Media Flow Phase A */

/* ==========================================================
   Hang Đôi UI DNA · Media Flow
   Derived from Marcom Home v10 + Sidebar v21.
   ========================================================== */
:root{
  --dna-ink:#07172F;
  --dna-navy:#0A1D3E;
  --dna-blue:#2441FB;
  --dna-bright:#0062FF;
  --dna-gold:#D8B24A;
  --dna-green:#12A66A;
  --dna-paper:#F7F8F6;
  --dna-white:#FFFFFF;
  --dna-border:#DCE3EE;
  --dna-soft:#F1F5FF;
  --dna-icon:#E3EBFF;
  --dna-text:#4E5A66;
  --dna-muted:#77838E;
  --dna-faint:#98A2AC;
  --dna-warm:#FFF7E5;
  --dna-danger:#A34A3C;
  --dna-sidebar:248px;
  --dna-rail:76px;
  --dna-shadow:0 14px 40px rgba(30,43,59,.055);
  --dna-ease:cubic-bezier(.2,.8,.2,1);
}
html[data-theme="light"],html{
  --bg-primary:var(--dna-paper)!important;
  --bg-secondary:#FFFFFF!important;
  --bg-tertiary:#F7F9FC!important;
  --card-bg:#FFFFFF!important;
  --card-border:var(--dna-border)!important;
  --text-primary:var(--dna-ink)!important;
  --text-secondary:var(--dna-muted)!important;
  --text-muted:var(--dna-faint)!important;
  --primary:var(--dna-blue)!important;
  --primary-hover:var(--dna-bright)!important;
  --success:var(--dna-green)!important;
  --warning:var(--dna-gold)!important;
  --danger:var(--dna-danger)!important;
}
html,body{
  background:var(--dna-paper)!important;
  color:var(--dna-ink)!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{font-size:14px!important}

/* ---------- App shell ---------- */
.app-container{
  display:grid!important;
  grid-template-columns:var(--dna-sidebar) minmax(0,1fr)!important;
  gap:0!important;
  min-height:100vh!important;
  background:var(--dna-paper)!important;
}
.sidebar{
  position:sticky!important;
  top:0!important;
  width:var(--dna-sidebar)!important;
  height:100vh!important;
  padding:18px 14px 16px!important;
  background:rgba(255,255,255,.92)!important;
  border-right:1px solid var(--dna-border)!important;
  box-shadow:none!important;
  backdrop-filter:blur(16px);
  z-index:50!important;
}
.logo-container{
  min-height:44px!important;
  padding:0 7px 16px!important;
  margin:0!important;
  border:0!important;
  gap:10px!important;
}
.logo-icon{
  width:28px!important;height:28px!important;min-width:28px!important;
  border-radius:8px!important;
  background:linear-gradient(145deg,var(--dna-blue),var(--dna-bright))!important;
  color:#fff!important;
  box-shadow:none!important;
}
.logo-icon svg{width:16px!important;height:16px!important}
.logo-text{font-size:13px!important;font-weight:800!important;letter-spacing:-.02em!important;color:var(--dna-ink)!important}
.logo-subtitle{font-size:9px!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:#8B96A2!important}
.sidebar-toggle{
  top:19px!important;right:10px!important;width:28px!important;height:28px!important;
  border:1px solid var(--dna-border)!important;border-radius:8px!important;
  background:#fff!important;color:#75818D!important;box-shadow:none!important;
}
.nav-menu{padding:0!important;margin:2px 0 0!important;overflow:auto!important}
.dna-nav-label{
  padding:0 9px 6px!important;
  margin:12px 0 2px!important;
  font-size:9px!important;font-weight:800!important;letter-spacing:.08em!important;
  color:#8B96A2!important;text-transform:uppercase!important;
}
.nav-item{margin:2px 0!important}
.nav-link{
  min-height:40px!important;height:40px!important;
  padding:0 10px!important;gap:10px!important;border-radius:11px!important;
  color:#50606E!important;background:transparent!important;border:0!important;
  font-size:11px!important;font-weight:650!important;
  transition:transform 160ms var(--dna-ease),background-color 120ms var(--dna-ease),color 120ms var(--dna-ease)!important;
  position:relative!important;overflow:visible!important;
}
.nav-link svg{
  width:20px!important;height:20px!important;
  padding:3px!important;border-radius:7px!important;
  color:#64727F!important;background:#F4F6FA!important;
  stroke-width:1.8!important;transition:.14s var(--dna-ease)!important;
}
.nav-link:hover{background:#F7F9FC!important;color:#3E4D5B!important}
.nav-link:hover svg{transform:translateY(-1px)}
.nav-link.active{
  background:linear-gradient(90deg,#EEF3FF 0%,#F7F9FF 72%,rgba(255,255,255,0) 100%)!important;
  color:var(--dna-blue)!important;font-weight:780!important;
}
.nav-link.active:before{
  content:"";position:absolute;left:-14px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--dna-blue),var(--dna-bright));
}
.nav-link.active:after{
  content:"";position:absolute;right:-15px;top:4px;bottom:4px;width:15px;
  background:linear-gradient(90deg,rgba(238,243,255,.95),rgba(247,248,246,0));
  pointer-events:none;
}
.nav-link.active svg{background:var(--dna-icon)!important;color:var(--dna-blue)!important}
.user-profile{
  margin-top:auto!important;padding:12px 7px 2px!important;border-top:1px solid #EEF1F4!important;
  background:transparent!important;border-radius:0!important;gap:9px!important;
}
.dna-avatar.avatar,.user-profile .avatar{
  width:32px!important;height:32px!important;border-radius:50%!important;
  display:grid!important;place-items:center!important;background:var(--dna-blue)!important;color:white!important;
  font-size:10px!important;font-weight:800!important;object-fit:cover!important;
}
.username{font-size:10.5px!important;color:#46535F!important;font-weight:760!important}
.user-role{font-size:9px!important;color:#929CA6!important;margin-top:1px!important}

/* ---------- Main / topbar ---------- */
.main-content{
  min-width:0!important;
  padding:0!important;
  background:var(--dna-paper)!important;
}
.top-header{
  height:60px!important;min-height:60px!important;
  padding:0 34px!important;
  display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:12px!important;
  background:rgba(247,248,246,.88)!important;border-bottom:1px solid rgba(220,227,238,.78)!important;
  position:sticky!important;top:0!important;z-index:35!important;backdrop-filter:blur(14px)!important;
}
.dna-command{
  margin-right:auto!important;width:min(430px,40vw)!important;height:34px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  border:1px solid #D9E0E8!important;border-radius:9px!important;background:rgba(255,255,255,.8)!important;
  color:#85909B!important;padding:0 10px 0 12px!important;font-size:10px!important;text-align:left!important;
}
.dna-command kbd{border:1px solid #DDE3EA;background:#F7F9FB;border-radius:5px;padding:2px 5px;color:#87929C;font-size:9px}
.header-title-section{
  position:absolute!important;top:86px!important;left:calc(var(--dna-sidebar) + 34px)!important;
  right:34px!important;z-index:1!important;pointer-events:none!important;
}
.header-title-section h1{
  margin:0 0 5px!important;font-size:38px!important;line-height:.98!important;
  letter-spacing:-.055em!important;font-weight:760!important;color:#35424F!important;
}
.header-title-section p{margin:0!important;font-size:11.5px!important;line-height:1.5!important;color:var(--dna-muted)!important;max-width:720px!important}
.header-actions{display:flex!important;align-items:center!important;gap:8px!important}
.conn-status{
  height:28px!important;padding:0 8px!important;border-radius:8px!important;border:1px solid #DDE5E2!important;
  background:rgba(255,255,255,.72)!important;color:#6B7A74!important;font-size:9px!important;
}
.btn-notif,.btn-theme-toggle{
  width:32px!important;height:32px!important;border-radius:9px!important;border:1px solid #DCE3EA!important;
  background:#fff!important;color:#687681!important;box-shadow:none!important;
}
.btn-primary{
  min-height:34px!important;height:34px!important;border:1px solid #C9D4FF!important;border-radius:9px!important;
  background:#fff!important;color:var(--dna-blue)!important;padding:0 12px!important;
  font-size:10px!important;font-weight:760!important;box-shadow:none!important;
  transition:transform 120ms var(--dna-ease),box-shadow 120ms var(--dna-ease)!important;
}
.btn-primary:hover{transform:translateY(-1px)!important;box-shadow:0 8px 20px rgba(30,43,59,.045)!important}

/* Space for editorial page heading placed under sticky topbar */
.view-panel{padding-top:104px!important}
.filter-bar{
  margin:0 34px 18px!important;padding:10px 0!important;
  border:0!important;border-top:1px solid #D8DEE5!important;border-bottom:1px solid #E2E7EB!important;
  background:transparent!important;border-radius:0!important;box-shadow:none!important;
}
.search-input,.select-filter{
  min-height:34px!important;border:1px solid #DCE3EA!important;border-radius:9px!important;background:#fff!important;
  color:#53616D!important;font-size:10px!important;
}
.filter-group label{font-size:8px!important;font-weight:800!important;letter-spacing:.06em!important;color:#919BA5!important;text-transform:uppercase!important}

/* ---------- Dashboard: editorial hierarchy ---------- */
#dashboard-view,#projects-view,#table-view,#salary-view,#haukY-view,#users-view{
  max-width:1180px!important;margin:0 auto!important;padding-left:34px!important;padding-right:34px!important;padding-bottom:72px!important;
}

/* STEP 1 — Calendar is an operational workspace, not a document-width page. */
#calendar-view{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box!important;
}
.db-kpi-row{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0!important;
  margin-bottom:28px!important;border-top:1px solid #AAB4BD!important;border-bottom:1px solid #D5DCE2!important;
}
.db-kpi-card{
  min-height:88px!important;border:0!important;border-right:1px solid #E0E5E9!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;padding:17px 18px!important;gap:11px!important;
}
.db-kpi-card:last-child{border-right:0!important}
.db-kpi-icon{
  width:30px!important;height:30px!important;border-radius:8px!important;background:var(--dna-soft)!important;color:var(--dna-blue)!important;
}
.db-kpi-label{font-size:9px!important;letter-spacing:.055em!important;text-transform:uppercase!important;color:#8D98A3!important;font-weight:800!important}
.db-kpi-value{font-size:27px!important;line-height:1!important;letter-spacing:-.045em!important;color:#3B4855!important;font-weight:780!important}
.dashboard-panel{
  border:0!important;border-top:1px solid #D8DEE5!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;padding:16px 0 0!important;
}
.db-main-row,.db-bottom-row{gap:34px!important;margin-top:26px!important}
.panel-header{padding:0 0 12px!important;border:0!important}
.panel-title{font-size:15px!important;line-height:1.2!important;letter-spacing:-.025em!important;color:#4D5A66!important;font-weight:760!important}
.db-panel-badge{background:var(--dna-soft)!important;color:#6878A8!important;border:0!important;font-size:8.5px!important}
.db-panel-link{color:var(--dna-blue)!important;font-size:9.5px!important;font-weight:760!important}

/* exception / warning treatment from Marcom */
#conflict-warnings:not(:empty),.hk-stat-danger,.hk-overdue{
  background:linear-gradient(90deg,rgba(255,247,229,.75),rgba(255,255,255,0))!important;
}
.conflict-item,.hk-pending-section{
  border-color:#DFC99E!important;background:linear-gradient(90deg,rgba(255,247,229,.72),rgba(255,255,255,.2))!important;
}

/* ---------- Generic surfaces ---------- */
.table-container,.calendar-container,.salary-detail-section,.users-table-wrap,
.project-card,.projects-empty,.hk-column,.rate-modal,.modal-box,.drawer{
  border-color:var(--dna-border)!important;
  box-shadow:var(--dna-shadow)!important;
}
.calendar-container,.table-container,.salary-detail-section,.users-table-wrap{
  border-radius:12px!important;background:#fff!important;
}
.data-table thead th,.users-table thead th{
  background:#F8F9FB!important;color:#7B8792!important;font-size:8.5px!important;letter-spacing:.055em!important;text-transform:uppercase!important;
}
.data-table td,.users-table td{color:#53616D!important;font-size:10.5px!important}
.status-badge{border-radius:999px!important;font-size:8.5px!important;font-weight:760!important}
.btn-secondary{
  min-height:34px!important;border:1px solid #D8E0E7!important;border-radius:9px!important;background:#fff!important;color:#65717C!important;
  font-size:10px!important;font-weight:760!important;box-shadow:none!important;
}

/* Projects */
.projects-header,.hk-header,.salary-header,.users-header{margin-bottom:20px!important}
.projects-title,.hk-title,.salary-title,.users-title{font-size:28px!important;letter-spacing:-.045em!important;color:#3B4855!important}
.project-card{
  background:#fff!important;border-radius:12px!important;
}
.project-card:hover{transform:translateY(-1px)!important;box-shadow:0 14px 32px rgba(30,43,59,.07)!important}

/* Hậu kỳ */
.hk-board{gap:14px!important}
.hk-column{border-radius:12px!important;background:#FBFCFD!important}
.hk-card{border-radius:10px!important;border-color:#DFE5EC!important;box-shadow:none!important}
.hk-stat-chip{border-radius:999px!important;background:#fff!important;border:1px solid #E1E6EB!important;box-shadow:none!important}

/* Controls: Pearl-like single controlled focus */
input:focus,select:focus,textarea:focus,button:focus-visible{
  outline:0!important;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(49,94,251,.38)!important;
  box-shadow:0 0 0 2px rgba(49,94,251,.095),0 4px 11px rgba(30,43,59,.035)!important;
}

/* ---------- compact rail ---------- */
.sidebar.collapsed,.app-container.sidebar-collapsed .sidebar{width:var(--dna-rail)!important}
.sidebar.collapsed .logo-text-area,.sidebar.collapsed .dna-nav-label,.sidebar.collapsed .nav-link span,
.sidebar.collapsed .user-info{display:none!important}
.sidebar.collapsed .logo-container,.sidebar.collapsed .nav-link{justify-content:center!important}
.sidebar.collapsed .nav-link{padding:0!important}
.sidebar.collapsed .nav-link.active:after{right:-15px!important}

/* ---------- Mobile DNA ---------- */
.dna-mobile-topbar,.dna-mobile-tabs,.dna-mobile-utility{display:none}
@media(max-width:767px){
  body{padding-bottom:70px!important}
  .app-container{display:block!important;min-height:auto!important}
  .sidebar{display:none!important}
  .main-content{padding:0!important}
  .top-header{
    height:52px!important;min-height:52px!important;padding:0 12px!important;
    top:48px!important;background:rgba(247,248,246,.95)!important;
  }
  .dna-command{width:100%!important;margin:0!important}
  .header-actions{display:none!important}
  .header-title-section{
    position:absolute!important;top:120px!important;left:15px!important;right:15px!important;
  }
  .header-title-section h1{font-size:32px!important}
  .header-title-section p{font-size:10.5px!important;white-space:normal!important}
  .view-panel{padding-top:118px!important}
  #dashboard-view,#projects-view,#calendar-view,#table-view,#salary-view,#haukY-view,#users-view{
    padding-left:14px!important;padding-right:14px!important;padding-bottom:84px!important;
  }
  .filter-bar{margin:0 14px 14px!important}
  .dna-mobile-topbar{
    height:48px!important;padding:0 13px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;
    position:sticky!important;top:0!important;z-index:80!important;background:rgba(255,255,255,.96)!important;border-bottom:1px solid var(--dna-border)!important;
  }
  .dna-mobile-brand{display:flex;align-items:center;gap:5px;font-size:9px;color:#8A95A0;letter-spacing:.055em}
  .dna-mobile-brand strong{font-size:11px;color:var(--dna-ink);letter-spacing:-.01em}
  .dna-brand-dot{width:9px;height:9px;border-radius:3px;background:linear-gradient(145deg,var(--dna-blue),var(--dna-bright));margin-right:2px}
  .dna-mobile-actions{display:flex;align-items:center;gap:9px;font-size:9.5px;color:#697680}
  #dna-mobile-profile-btn{width:30px;height:30px;border:0;border-radius:50%;background:var(--dna-blue);color:#fff;font-size:9px;font-weight:800}
  .dna-mobile-utility{
    display:block;position:fixed;z-index:100;right:10px;top:44px;width:210px;padding:8px;
    background:#fff;border:1px solid var(--dna-border);border-radius:12px;box-shadow:0 18px 48px rgba(31,43,58,.12);
  }
  .dna-mobile-utility[hidden]{display:none!important}
  .dna-mobile-utility-head{padding:7px 8px 9px;border-bottom:1px solid #EEF1F4;margin-bottom:4px}
  .dna-mobile-utility-head strong{display:block;font-size:11px;color:#46535F}
  .dna-mobile-utility-head span{display:block;margin-top:2px;font-size:9px;color:#929CA6}
  .dna-mobile-utility button{width:100%;height:36px;border:0;border-radius:9px;background:transparent;text-align:left;padding:0 9px;color:#5E6875;font-size:10px;font-weight:650}
  .dna-mobile-utility button:active{background:#F2F5FB}
  .dna-mobile-tabs{
    display:grid!important;grid-template-columns:repeat(var(--mf-mobile-tab-count,2),1fr)!important;
    position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:90!important;
    min-height:62px!important;padding:6px max(6px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important;
    background:rgba(255,255,255,.97)!important;border-top:1px solid var(--dna-border)!important;backdrop-filter:blur(16px)!important;
  }
  .dna-mobile-tab{
    border:0;background:transparent;border-radius:10px;min-width:0;padding:4px 2px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    color:#8A95A0;font-size:8px;font-weight:720;
  }
  .dna-mobile-icon{
    width:25px;height:22px;border-radius:7px;display:grid;place-items:center;background:#F4F6F9;color:#697580;font-size:14px;line-height:1
  }
  .dna-mobile-tab.active{color:var(--dna-blue)}
  .dna-mobile-tab.active .dna-mobile-icon{background:var(--dna-icon);color:var(--dna-blue)}
  .db-kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .db-kpi-card:nth-child(2){border-right:0!important}
  .db-kpi-card:nth-child(-n+2){border-bottom:1px solid #E0E5E9!important}
  .db-main-row,.db-bottom-row,.attendance-panel-grid{grid-template-columns:1fr!important;gap:22px!important}
  .projects-grid{grid-template-columns:1fr!important}
  .page-title,.projects-title,.hk-title,.salary-title,.users-title{font-size:26px!important}
}
@media(min-width:768px) and (max-width:1199px){
  .app-container{grid-template-columns:var(--dna-rail) minmax(0,1fr)!important}
  .sidebar{width:var(--dna-rail)!important}
  .logo-text-area,.dna-nav-label,.nav-link span,.user-info{display:none!important}
  .logo-container,.nav-link{justify-content:center!important}
  .nav-link{padding:0!important}
  .header-title-section{left:calc(var(--dna-rail) + 26px)!important}
  .top-header{padding-left:26px!important;padding-right:26px!important}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}


/* Collapse */

/* Media Flow × Marcom DNA — collapse state uses ONE source: body.sidebar-collapsed */
@media (min-width:1200px){
  body.sidebar-collapsed .app-container{
    grid-template-columns:var(--dna-rail) minmax(0,1fr)!important;
  }
  body.sidebar-collapsed .sidebar{
    width:var(--dna-rail)!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }
  body.sidebar-collapsed .main-content{
    margin-left:0!important;
    max-width:none!important;
    width:auto!important;
    min-width:0!important;
  }

  body.sidebar-collapsed .logo-container{
    justify-content:center!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  body.sidebar-collapsed .logo-text-area,
  body.sidebar-collapsed .dna-nav-label,
  body.sidebar-collapsed .nav-link span,
  body.sidebar-collapsed .user-info{
    display:none!important;
  }

  body.sidebar-collapsed .nav-menu{
    overflow:visible!important;
  }
  body.sidebar-collapsed .nav-link{
    width:44px!important;
    min-width:44px!important;
    height:40px!important;
    min-height:40px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:0!important;
    justify-content:center!important;
    gap:0!important;
  }
  body.sidebar-collapsed .nav-link svg{
    margin:0!important;
    flex:0 0 auto!important;
  }

  /* Active dock stays attached to the rail edge */
  body.sidebar-collapsed .nav-link.active:before{
    left:-10px!important;
  }
  body.sidebar-collapsed .nav-link.active:after{
    right:-11px!important;
  }

  /* Profile becomes a compact rail utility */
  body.sidebar-collapsed .user-profile{
    width:44px!important;
    min-width:44px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:8px 0!important;
    justify-content:center!important;
  }

  /* Header/content are already in grid column 2: never add a second sidebar offset */
  body.sidebar-collapsed .header-title-section{
    left:34px!important;
    right:34px!important;
  }

  body.sidebar-collapsed .sidebar-toggle{
    transform:none!important;
    right:10px!important;
  }
  body.sidebar-collapsed .sidebar-toggle:hover{
    transform:none!important;
  }
}

/* Tablet DNA is intentionally a fixed compact rail; no ambiguous collapse control. */
@media (min-width:768px) and (max-width:1199px){
  .sidebar-toggle{display:none!important}
  .main-content{
    margin-left:0!important;
    max-width:none!important;
  }
}

/* Tooltip labels for the compact desktop rail */
@media (min-width:1200px){
  body.sidebar-collapsed .nav-link::after{
    content:attr(data-short);
    position:absolute;
    left:54px;
    right:auto!important;
    top:50%;
    transform:translateY(-50%) translateX(-4px);
    opacity:0;
    pointer-events:none;
    white-space:nowrap;
    padding:7px 9px;
    border:1px solid #DDE3EA;
    border-radius:8px;
    background:#FFFFFF;
    color:#465563;
    box-shadow:0 8px 24px rgba(31,45,61,.10);
    font-size:10px;
    font-weight:700;
    transition:opacity 120ms ease, transform 120ms ease;
    z-index:1000;
  }
  body.sidebar-collapsed .nav-link:hover::after{
    opacity:1;
    transform:translateY(-50%) translateX(0);
  }
}

/* ==========================================================
   Media Flow · Phase A — Lịch sản xuất
   Calendar-first operational workspace
   ========================================================== */
:root{
  --cat-prewed:#9C6ADE;
  --cat-prewed-bg:rgba(156,106,222,.10);
}

/* Projects remain dormant in Phase A IA. */
.nav-link[data-view="projects"]{display:none!important}
.logo-subtitle{display:none!important}
.logo-text-area{justify-content:center!important}

/* Calendar is a workspace, not a document-width page. */
#calendar-view{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:16px 24px 0!important;
  box-sizing:border-box!important;
}
.calendar-phase-a{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}

/* ---------- Calendar toolbar ---------- */
.calendar-toolbar{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
  min-height:40px!important;
  margin:0 0 9px!important;
  padding:0!important;
}
.calendar-nav-phase-a{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  min-width:0!important;
}
.calendar-nav-phase-a .btn-nav-cal{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  border:1px solid var(--dna-border)!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#647180!important;
  font-size:20px!important;
  box-shadow:none!important;
}
.calendar-nav-phase-a .btn-nav-cal:hover{
  border-color:#C8D2E0!important;
  color:var(--dna-blue)!important;
  background:#F8FAFF!important;
}
.calendar-month-title{
  min-width:150px!important;
  margin:0 4px!important;
  font-size:22px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:-.03em!important;
  color:var(--dna-ink)!important;
}
.btn-cal-today{
  height:34px!important;
  min-height:34px!important;
  padding:0 12px!important;
  border:1px solid #D6DDE7!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#596775!important;
  font-size:10px!important;
  font-weight:720!important;
  cursor:pointer!important;
}
.btn-cal-today:hover{background:#F5F8FF!important;color:var(--dna-blue)!important;border-color:#C9D5FF!important}
.calendar-toolbar-right{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  min-width:0!important;
}
.calendar-legend{display:none!important}
.cal-mode-toggle{
  display:flex!important;
  height:32px!important;
  padding:3px!important;
  border:1px solid #E1E6EC!important;
  border-radius:10px!important;
  background:#F4F6F8!important;
  gap:2px!important;
  box-shadow:none!important;
}
.cal-mode-btn{
  height:24px!important;
  padding:0 10px!important;
  border:0!important;
  border-radius:7px!important;
  background:transparent!important;
  color:#778391!important;
  font-size:9px!important;
  font-weight:700!important;
}
.cal-mode-btn.active{
  background:#fff!important;
  color:var(--dna-blue)!important;
  box-shadow:0 1px 2px rgba(30,43,59,.05)!important;
}

/* ---------- Light contextual filter toolbar ---------- */
.calendar-filter-bar{
  display:grid!important;
  grid-template-columns:minmax(280px,1.65fr) minmax(150px,.72fr) minmax(150px,.72fr) auto auto!important;
  align-items:center!important;
  gap:8px!important;
  min-height:38px!important;
  margin:0 0 10px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.calendar-filter-bar .filter-collapse-btn{display:none!important}
.calendar-filter-bar .filter-group{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}
.calendar-filter-bar .filter-group label{display:none!important}
.calendar-filter-bar .filter-group:has(#filter-status){display:none!important}
.calendar-filter-bar .search-input-wrapper{min-width:0!important;margin:0!important}
.calendar-filter-bar .search-input{
  width:100%!important;
  height:36px!important;
  min-height:36px!important;
  padding:0 12px 0 34px!important;
  border:1px solid #DCE3EA!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.82)!important;
  color:#536171!important;
  font-size:9.6px!important;
  box-shadow:none!important;
}
.calendar-filter-bar .search-input:focus{
  border-color:#BFCBF0!important;
  background:#fff!important;
  box-shadow:0 0 0 2px rgba(36,65,251,.05)!important;
}
.calendar-filter-bar .search-icon{left:11px!important;color:#9AA4AE!important;font-size:12px!important}
.calendar-filter-bar .select-filter{
  width:100%!important;
  height:36px!important;
  min-height:36px!important;
  padding:0 30px 0 11px!important;
  border:0!important;
  border-radius:8px!important;
  background:#F4F6F8!important;
  color:#617080!important;
  font-size:9.5px!important;
  font-weight:600!important;
  box-shadow:none!important;
}
.calendar-filter-bar .select-filter:hover{background:#EEF2F6!important;color:#344357!important}
.calendar-conflict-toggle{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  height:32px!important;
  min-height:32px!important;
  margin:0!important;
  padding:0 10px!important;
  border:0!important;
  border-radius:999px!important;
  background:#FFF4F0!important;
  color:#A15445!important;
  font-size:8.9px!important;
  font-weight:700!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  box-shadow:none!important;
}
.calendar-conflict-toggle input{
  position:absolute!important;
  opacity:0!important;
  pointer-events:none!important;
}
.calendar-conflict-toggle:has(input:checked){background:#FBE7E1!important;color:#934638!important}
.calendar-conflict-toggle:focus-within{outline:2px solid rgba(185,90,73,.12)!important;outline-offset:1px!important}
.calendar-filter-bar .btn-reset-filters{
  height:30px!important;
  min-height:30px!important;
  margin:0!important;
  padding:0 4px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#8B96A3!important;
  font-size:8.8px!important;
  font-weight:650!important;
  box-shadow:none!important;
}
.calendar-filter-bar .btn-reset-filters:hover{background:transparent!important;color:#4E5B69!important}
.calendar-conflict-summary{display:none!important}

/* ---------- Continuous month matrix ---------- */
.calendar-weekdays{
  display:grid!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:0!important;
  margin:0!important;
  border:1px solid #DCE3EE!important;
  border-bottom:0!important;
  border-radius:10px 10px 0 0!important;
  overflow:hidden!important;
  background:#FAFBFC!important;
}
.calendar-day-header{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:30px!important;
  min-height:30px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-right:1px solid #E8EDF3!important;
  border-radius:0!important;
  background:#FAFBFC!important;
  color:#87929C!important;
  font-size:8.3px!important;
  font-weight:800!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
.calendar-day-header:last-child{border-right:0!important}
#calendar-grid-cells{
  display:grid!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:0!important;
  margin:0!important;
  border:1px solid #DCE3EE!important;
  border-top:0!important;
  border-radius:0 0 10px 10px!important;
  overflow:hidden!important;
  background:#fff!important;
  grid-auto-rows:minmax(116px,auto)!important;
}
.calendar-cell{
  position:relative!important;
  min-width:0!important;
  min-height:116px!important;
  margin:0!important;
  padding:8px!important;
  border:0!important;
  border-right:1px solid #E8EDF3!important;
  border-bottom:1px solid #E8EDF3!important;
  border-radius:0!important;
  background:#fff!important;
  overflow:hidden!important;
  box-shadow:none!important;
  outline:0!important;
}
.calendar-cell:nth-child(7n){border-right:0!important}
.calendar-cell:nth-last-child(-n+7){border-bottom:0!important}
.calendar-cell.other-month{background:#FBFCFD!important;color:#B5BDC5!important}
.calendar-cell.has-conflict{background:#FFFDFC!important}
.calendar-cell.today{background:#F9FBFF!important;box-shadow:none!important}
.calendar-cell.is-selected{z-index:2!important;box-shadow:inset 0 0 0 2px #2441FB!important;background:#FAFBFF!important}
.calendar-cell.is-selected.today{background:#F7F9FF!important}
.calendar-cell:focus-visible{box-shadow:inset 0 0 0 2px rgba(36,65,251,.45)!important}
.calendar-date-head{display:flex!important;align-items:center!important;justify-content:space-between!important;height:24px!important;margin-bottom:5px!important}
.calendar-date-number{
  display:grid!important;
  place-items:center!important;
  width:24px!important;
  height:24px!important;
  margin:0!important;
  border-radius:7px!important;
  color:#64717E!important;
  font-size:10.5px!important;
  font-weight:780!important;
}
.calendar-cell.today .calendar-date-number{background:#E7EDFF!important;color:#2441FB!important}
.calendar-today-label{font-size:7.5px!important;font-weight:760!important;color:#2441FB!important;text-transform:uppercase!important;letter-spacing:.04em!important;opacity:.9!important}

/* ---------- Event hierarchy and density ---------- */
.calendar-events-container{
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
  min-width:0!important;
  overflow:hidden!important;
  padding:0!important;
}
.calendar-event-item{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  border:1px solid transparent!important;
  border-left-width:3px!important;
  border-radius:7px!important;
  text-align:left!important;
  font-family:inherit!important;
  cursor:pointer!important;
  overflow:hidden!important;
  box-shadow:none!important;
  transform:none!important;
  transition:background-color 120ms ease,border-color 120ms ease,box-shadow 120ms ease,transform 100ms ease!important;
}
.calendar-event-item:hover{transform:translateY(-1px)!important;box-shadow:0 4px 12px rgba(30,43,59,.06)!important}
.calendar-event-item.du-an{background:#F4F7FF!important;border-color:#DDE5FF!important;border-left-color:#5270F6!important;color:#3750C8!important}
.calendar-event-item.event{background:#FFF8F1!important;border-color:#F4E2D0!important;border-left-color:#E09A55!important;color:#A35D22!important}
.calendar-event-item.prewed{background:#FAF6FF!important;border-color:#E8DDF6!important;border-left-color:#9365C5!important;color:#7951B0!important}
.calendar-event-item.zeng{background:#F1FAF7!important;border-color:#D9EEE7!important;border-left-color:#55A88D!important;color:#347C64!important}
.calendar-event-item.other{background:#F7F8FA!important;border-color:#E4E8EC!important;border-left-color:#9AA3AC!important;color:#65717C!important}
.calendar-event-item.has-conflict{background:#FFF5F2!important;border-color:#E8C7C0!important;border-left-color:#B95A49!important}
.cal-event-top{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;gap:6px!important;min-width:0!important;line-height:1!important}
.cal-event-top strong{font-size:10px!important;line-height:1!important;font-weight:800!important;letter-spacing:-.015em!important;color:#152235!important;font-variant-numeric:tabular-nums}
.cal-event-category{
  justify-self:end!important;
  max-width:72px!important;
  padding:2px 5px!important;
  border-radius:999px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:6.8px!important;
  line-height:1.15!important;
  font-weight:800!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
  opacity:.82!important;
}
.calendar-event-item.du-an .cal-event-category{background:#E7EDFF!important;color:#3750C8!important}
.calendar-event-item.event .cal-event-category{background:#FCEAD9!important;color:#9B5A25!important}
.calendar-event-item.prewed .cal-event-category{background:#EEE3FA!important;color:#7951B0!important}
.calendar-event-item.zeng .cal-event-category{background:#DFF2EB!important;color:#347C64!important}
.cal-event-location{display:block!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:10px!important;line-height:1.25!important;font-weight:760!important;letter-spacing:-.01em!important;color:#2D3C4F!important}
.cal-event-people{display:block!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:7.8px!important;line-height:1.2!important;font-weight:600!important;color:#7A8794!important}
.cal-event-conflict{display:block!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;margin-top:0!important;padding-top:2px!important;border-top:1px solid rgba(185,90,73,.13)!important;font-size:7.6px!important;line-height:1.2!important;font-weight:760!important;color:#A34A3C!important}
.calendar-event-item.is-detail{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:2px!important;min-height:50px!important;padding:5px 7px 5px 8px!important}
.calendar-event-item.is-compact{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:5px!important;
  height:30px!important;
  min-height:30px!important;
  padding:0 6px 0 8px!important;
  border-radius:6px!important;
}
.calendar-event-item.is-compact .cal-event-top{display:contents!important}
.calendar-event-item.is-compact .cal-event-top strong{font-size:9.5px!important;line-height:1!important;color:#243246!important}
.calendar-event-item.is-compact .cal-event-category{grid-column:3!important;grid-row:1!important;max-width:54px!important;padding:1px 4px!important;font-size:6.4px!important}
.calendar-event-item.is-compact .cal-event-location{grid-column:2!important;grid-row:1!important;font-size:9.1px!important;font-weight:720!important}
.calendar-event-item.is-compact .cal-event-people,.calendar-event-item.is-compact .cal-event-conflict{display:none!important}
.calendar-event-item.is-compact.has-conflict:after{content:'!';display:grid;place-items:center;position:absolute;right:3px;top:3px;width:10px;height:10px;border-radius:50%;background:#B95A49;color:#fff;font-size:6px;font-weight:800}
.cal-more-events{
  height:24px!important;
  min-height:24px!important;
  padding:0 7px!important;
  border:0!important;
  border-radius:6px!important;
  background:#F3F5F8!important;
  color:#64717E!important;
  font:700 8.5px/1 inherit!important;
  text-align:left!important;
  cursor:pointer!important;
}
.cal-more-events:hover{background:#EAEFF5!important;color:#344357!important}

/* ---------- List / Agenda mode ---------- */
#calendar-list{display:none!important}
.calendar-container.cal-list-mode .calendar-weekdays,
.calendar-container.cal-list-mode #calendar-grid-cells{display:none!important}
.calendar-container.cal-list-mode #calendar-list{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  width:100%!important;
  margin:2px 0 0!important;
  border-top:1px solid #DCE3EA!important;
}
.agenda-day{display:grid!important;grid-template-columns:108px minmax(0,1fr)!important;border-bottom:1px solid #E7EBF0!important;background:transparent!important}
.agenda-day.today{background:#FAFBFF!important}
.agenda-date{padding:13px 14px 12px 2px!important;display:flex!important;align-items:flex-start!important;gap:9px!important}
.agenda-date-num{font-size:24px!important;line-height:1!important;font-weight:800!important;letter-spacing:-.04em!important;color:#26364A!important;font-variant-numeric:tabular-nums}
.agenda-date-copy{display:flex!important;flex-direction:column!important;gap:2px!important;padding-top:1px!important}
.agenda-dow{font-size:8px!important;font-weight:800!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:#788592!important}
.agenda-month{font-size:8px!important;color:#A0A9B2!important}
.agenda-day.today .agenda-date-num,.agenda-day.today .agenda-dow{color:#2441FB!important}
.agenda-today{display:inline-flex!important;width:max-content!important;margin-top:3px!important;padding:2px 5px!important;border-radius:999px!important;background:#E7EDFF!important;color:#2441FB!important;font-size:6.8px!important;font-weight:800!important}
.agenda-items{min-width:0!important}
.agenda-item{
  width:100%!important;
  display:grid!important;
  grid-template-columns:86px minmax(0,1fr) 92px!important;
  gap:14px!important;
  align-items:center!important;
  min-height:58px!important;
  padding:9px 4px 9px 0!important;
  border:0!important;
  border-bottom:1px solid #EEF1F4!important;
  background:transparent!important;
  text-align:left!important;
  font-family:inherit!important;
  cursor:pointer!important;
  color:inherit!important;
}
.agenda-item:last-child{border-bottom:0!important}
.agenda-item:hover{background:#F9FAFC!important}
.agenda-item.has-conflict{box-shadow:inset 3px 0 0 #B95A49!important;background:#FFF9F7!important}
.agenda-time{display:flex!important;align-items:baseline!important;gap:5px!important;color:#243246!important}
.agenda-time strong{font-size:12px!important;font-weight:800!important;font-variant-numeric:tabular-nums}
.agenda-time small{font-size:8px!important;color:#9AA4AE!important}
.agenda-main{min-width:0!important;display:flex!important;flex-direction:column!important;gap:2px!important}
.agenda-title{font-size:10.8px!important;font-weight:760!important;color:#334255!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.agenda-detail{font-size:8.5px!important;color:#8A949E!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.agenda-people{font-size:8.2px!important;color:#6D7A86!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.agenda-side{justify-self:end!important;display:flex!important;flex-direction:column!important;align-items:flex-end!important;gap:4px!important}
.agenda-conflict{font-size:7px!important;font-weight:760!important;color:#A34A3C!important}
.cal-list-empty{display:flex!important;flex-direction:column!important;align-items:center!important;gap:5px!important;padding:42px!important;border:1px dashed #D9E0E8!important;border-radius:12px!important;color:#8B96A2!important}
.cal-list-empty strong{color:#586673!important;font-size:12px!important}.cal-list-empty span{font-size:10px!important}

/* ---------- More-events popover ---------- */
.mf-day-popover{position:fixed;z-index:9999;width:min(340px,calc(100vw - 24px));padding:8px;border:1px solid #DCE3EA;border-radius:12px;background:#fff;box-shadow:0 14px 34px rgba(30,43,59,.14);display:none}
.mf-day-popover.open{display:block}
.mf-day-popover-head{display:flex;align-items:center;justify-content:space-between;padding:5px 6px 8px;border-bottom:1px solid #EEF1F4;color:#334255;font-size:10px;font-weight:800}
.mf-day-popover-close{border:0;background:transparent;color:#82909D;cursor:pointer;font-size:15px}
.mf-day-popover-list{display:flex;flex-direction:column;padding-top:4px}
.mf-day-popover-item{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:8px;align-items:center;width:100%;padding:8px 6px;border:0;border-bottom:1px solid #F0F2F5;background:transparent;text-align:left;font-family:inherit;cursor:pointer}
.mf-day-popover-item:last-child{border-bottom:0}
.mf-day-popover-item:hover{background:#F8FAFC}
.mf-day-popover-time{font-size:9.5px;font-weight:800;color:#243246}.mf-day-popover-title{font-size:9.5px;font-weight:700;color:#405064;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mf-day-popover-cat{font-size:7px;font-weight:800;color:#788592;text-transform:uppercase}

/* Prewed mapping across table/drawer badges. */
.card-category.prewed,.table-badge.prewed{background:var(--cat-prewed-bg)!important;color:#7951B0!important;border-color:rgba(156,106,222,.22)!important}

/* Conflict drawers and dashboard. */
.drawer-conflict-alert{display:flex;flex-direction:column;gap:4px;padding:9px;border:1px solid #EBC9C2;border-radius:9px;background:#FFF7F4;color:#8F5E55;font-size:10px}
.drawer-conflict-alert strong{color:#9B493C}
.drawer-edit-primary{width:100%!important;justify-content:center!important;margin-bottom:8px!important}
.drawer-delete-action{width:100%!important;border-color:#E7CAC4!important;color:#A34A3C!important}
.conflict-empty{padding:12px;border:1px solid #D9EADF;border-radius:9px;background:#F4FBF7;color:#5D7E6C;font-size:10px}
.conflict-card{padding:12px;border:1px solid #EBC9C2;border-radius:9px;background:#FFF7F4;margin-bottom:8px;color:#765B55;font-size:10px}
.conflict-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;color:#A34A3C}
.conflict-card p{margin:0 0 5px}

/* ---------- Desktop shell / vertical rhythm ---------- */
@media(min-width:1200px){
  .app-container>.sidebar{
    position:sticky!important;
    top:0!important;
    width:var(--dna-sidebar)!important;
    min-width:0!important;
    max-width:none!important;
    height:100vh!important;
    overflow:visible!important;
  }
  .app-container>.main-content{
    position:relative!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    height:auto!important;
    min-height:100vh!important;
    margin-left:0!important;
    overflow:visible!important;
  }
  body.sidebar-collapsed .app-container>.sidebar{
    width:var(--dna-rail)!important;
    min-width:var(--dna-rail)!important;
    max-width:var(--dna-rail)!important;
  }
  body.sidebar-collapsed .app-container>.main-content{margin-left:0!important;width:auto!important;max-width:none!important;min-width:0!important}
  .sidebar .nav-menu{width:100%!important;min-width:0!important;overflow-y:auto!important;overflow-x:hidden!important}
  .sidebar-toggle{
    position:absolute!important;
    top:20px!important;
    right:-12px!important;
    left:auto!important;
    bottom:auto!important;
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    min-height:24px!important;
    margin:0!important;
    padding:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid #D6DFE8!important;
    border-radius:50%!important;
    background:#F8FAFC!important;
    color:#5E6A78!important;
    font-size:0!important;
    box-shadow:none!important;
    transform:none!important;
    transition:background-color 120ms ease,border-color 120ms ease,color 120ms ease!important;
    z-index:55!important;
  }
  .sidebar-toggle::after{content:"‹";font-size:14px!important;line-height:1!important;color:currentColor}
  .sidebar-toggle:hover{background:#fff!important;color:#344357!important;box-shadow:none!important;transform:none!important}
  body.sidebar-collapsed .sidebar-toggle{top:20px!important;right:-12px!important;transform:none!important}
  body.sidebar-collapsed .sidebar-toggle::after{content:"›"}
  body.sidebar-collapsed .sidebar-toggle:hover{transform:none!important}

  body.view-calendar .top-header{
    position:absolute!important;
    top:10px!important;
    right:22px!important;
    left:auto!important;
    width:auto!important;
    height:32px!important;
    min-height:32px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    z-index:60!important;
  }
  body.view-calendar .top-header .header-title-section{display:none!important}
  body.view-calendar .top-header .header-actions{width:auto!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:6px!important}
  body.view-calendar .conn-status{height:26px!important;min-height:26px!important;padding:0 8px!important;border-radius:7px!important;font-size:8.5px!important;background:rgba(255,255,255,.78)!important}
  body.view-calendar #theme-toggle,body.view-calendar #notif-toggle{width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important;padding:0!important;border-radius:7px!important;box-shadow:none!important}
  body.view-calendar #btn-add-schedule{height:28px!important;min-height:28px!important;padding:0 10px!important;border-radius:7px!important;font-size:9px!important;box-shadow:none!important}
  body.view-calendar #calendar-view{padding:10px 22px 0!important;min-height:0!important;height:auto!important;overflow:visible!important}
  body.view-calendar .calendar-phase-a{flex:none!important;min-height:0!important;height:auto!important;overflow:visible!important}
  body.view-calendar .calendar-toolbar{padding-right:292px!important}
  body.view-calendar #calendar-grid-cells,body.view-calendar #calendar-list{margin-bottom:0!important}
  body.view-calendar #calendar-view::after{content:"";display:block!important;height:64px!important;min-height:64px!important;flex:0 0 64px!important}
}

@media(min-width:1500px){
  .calendar-filter-bar{grid-template-columns:minmax(360px,1.85fr) minmax(170px,.7fr) minmax(170px,.7fr) auto auto!important}
}

/* Tablet uses the compact rail and normal document flow. */
@media(min-width:768px) and (max-width:1199px){
  #calendar-view{padding:14px 18px 72px!important}
  .calendar-toolbar{padding-right:0!important}
  .sidebar-toggle{display:none!important}
  .calendar-filter-bar{grid-template-columns:minmax(220px,1.3fr) minmax(115px,.7fr) minmax(115px,.7fr) auto!important}
  .calendar-filter-bar .btn-reset-filters{display:none!important}
  .calendar-month-title{font-size:19px!important;min-width:132px!important}
  .calendar-cell{min-height:104px!important}
  .agenda-day{grid-template-columns:92px minmax(0,1fr)!important}
  .agenda-item{grid-template-columns:74px minmax(0,1fr) 80px!important;gap:10px!important}
}

/* Mobile remains list-first and compact. */
@media(max-width:767px){
  #calendar-view{padding-top:104px!important;padding-left:14px!important;padding-right:14px!important;padding-bottom:96px!important}
  .calendar-phase-a{min-height:0!important;gap:10px!important}
  .calendar-toolbar{display:flex!important;align-items:flex-start!important;gap:10px!important;flex-direction:column!important}
  .calendar-toolbar-right{width:100%!important;justify-content:flex-end!important}
  .calendar-nav-phase-a{width:100%!important}
  .calendar-month-title{flex:1!important;min-width:0!important;font-size:15px!important}
  .btn-cal-today{margin-left:auto!important}
  .cal-mode-toggle{display:none!important}
  .calendar-filter-bar{padding:0!important;border:0!important;background:transparent!important;display:block!important}
  .calendar-filter-bar .filter-collapse-btn{display:flex!important;width:100%!important;height:36px!important;align-items:center!important;justify-content:space-between!important;padding:0 10px!important;border:1px solid #DCE3EA!important;border-radius:9px!important;background:#fff!important;color:#6E7A86!important;font-size:10px!important}
  .calendar-filter-bar > *:not(.filter-collapse-btn){display:none!important}
  .calendar-filter-bar.fb-open{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;padding:8px!important;border:1px solid #E1E6ED!important;border-radius:10px!important;background:#fff!important}
  .calendar-filter-bar.fb-open > *{display:flex!important}
  .calendar-filter-bar.fb-open > .search-input-wrapper{display:block!important}
  .calendar-filter-bar.fb-open .filter-group{width:100%!important}
  .calendar-filter-bar.fb-open .filter-group:has(#filter-status){display:flex!important}
  .calendar-conflict-toggle{justify-content:flex-start!important}
  .calendar-filter-bar .btn-reset-filters{justify-content:center!important}
  .calendar-weekdays,#calendar-grid-cells{display:none!important}
  #calendar-list,.calendar-container.cal-list-mode #calendar-list{display:flex!important;flex-direction:column!important;gap:0!important;border-top:1px solid #DCE3EA!important}
  .agenda-day{grid-template-columns:72px minmax(0,1fr)!important}
  .agenda-date{padding:11px 8px 10px 0!important;gap:6px!important}
  .agenda-date-num{font-size:20px!important}
  .agenda-item{grid-template-columns:58px minmax(0,1fr)!important;gap:8px!important;padding:9px 0!important}
  .agenda-side{grid-column:2!important;justify-self:start!important;flex-direction:row!important;align-items:center!important}
  .agenda-title{font-size:10.5px!important}
  .agenda-people{white-space:normal!important}
}


/* ===== agenda-row-spacing-v2 ===== */
/* Agenda: separate multiple schedules in the same day without adding heavy cards */
@media (min-width:768px){
  #calendar-view .agenda-items{
    display:flex!important;
    flex-direction:column!important;
    gap:5px!important;
    padding:4px 0!important;
  }

  #calendar-view .agenda-item{
    position:relative!important;
    min-height:56px!important;
    padding:8px 8px 8px 10px!important;
    border-bottom:0!important;
    border-radius:6px!important;
  }

  #calendar-view .agenda-item + .agenda-item{
    margin-top:0!important;
  }

  /* Conflict rail belongs to each row, not the whole stack */
  #calendar-view .agenda-item.has-conflict{
    box-shadow:none!important;
    background:#FFF9F7!important;
  }

  #calendar-view .agenda-item.has-conflict::before{
    content:"";
    position:absolute;
    left:0;
    top:5px;
    bottom:5px;
    width:3px;
    border-radius:0 3px 3px 0;
    background:#B95A49;
  }

  #calendar-view .agenda-item:hover{
    background:#F9FAFC!important;
  }

  #calendar-view .agenda-item.has-conflict:hover{
    background:#FFF5F2!important;
  }
}


/* ===== button-dna-v3 ===== */
/* =========================================================
   STEP 6A — ADN button icons + stronger add-schedule CTA
   ========================================================= */
body.view-calendar .header-actions{
  gap:8px!important;
}

body.view-calendar .btn-notif,
body.view-calendar .btn-theme-toggle{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  border:1px solid #D7DFE8!important;
  border-radius:10px!important;
  background:#FFFFFF!important;
  color:#5F6E7C!important;
  box-shadow:none!important;
  transition:background-color 120ms ease,border-color 120ms ease,color 120ms ease,transform 120ms ease!important;
}
body.view-calendar .btn-notif:hover,
body.view-calendar .btn-theme-toggle:hover{
  background:#F8FAFD!important;
  border-color:#C8D3E0!important;
  color:#334152!important;
  transform:translateY(-1px)!important;
}
body.view-calendar .btn-icon-wrap{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
body.view-calendar .dna-btn-icon{
  width:15px!important;
  height:15px!important;
  display:block!important;
}
body.view-calendar .btn-notif-badge{
  top:-3px!important;
  right:-3px!important;
  min-width:14px!important;
  height:14px!important;
  font-size:8px!important;
  line-height:14px!important;
  border:2px solid #fff!important;
}

body.view-calendar #btn-add-schedule{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  height:32px!important;
  min-height:32px!important;
  padding:0 14px!important;
  border:1px solid #2140E7!important;
  border-radius:10px!important;
  background:#2441FB!important;
  color:#FFFFFF!important;
  font-size:10px!important;
  font-weight:780!important;
  letter-spacing:-0.01em!important;
  box-shadow:none!important;
  transition:background-color 120ms ease,border-color 120ms ease,transform 120ms ease!important;
}
body.view-calendar #btn-add-schedule:hover{
  background:#1635EF!important;
  border-color:#1635EF!important;
  transform:translateY(-1px)!important;
  box-shadow:none!important;
}
body.view-calendar #btn-add-schedule:active{
  transform:translateY(0)!important;
}
body.view-calendar #btn-add-schedule .btn-primary-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
body.view-calendar #btn-add-schedule .dna-btn-icon{
  width:14px!important;
  height:14px!important;
}
body.view-calendar #btn-add-schedule .btn-primary-label{
  white-space:nowrap!important;
}

body.view-calendar .cal-mode-toggle{
  display:inline-flex!important;
  align-items:center!important;
  gap:3px!important;
  padding:3px!important;
  border:1px solid #D9E1EA!important;
  border-radius:12px!important;
  background:#F5F7FB!important;
  box-shadow:none!important;
}
body.view-calendar .cal-mode-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  min-width:auto!important;
  height:34px!important;
  padding:0 14px!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  color:#708090!important;
  font-size:10px!important;
  font-weight:720!important;
  line-height:1!important;
  box-shadow:none!important;
  transition:background-color 120ms ease,color 120ms ease!important;
}
body.view-calendar .cal-mode-btn .mode-btn-icon{
  width:14px!important;
  height:14px!important;
  display:block!important;
}
body.view-calendar .cal-mode-btn.active{
  background:#FFFFFF!important;
  color:#2441FB!important;
  box-shadow:inset 0 0 0 1px rgba(36,65,251,.16)!important;
}
body.view-calendar .cal-mode-btn:not(.active):hover{
  color:#4E5D6E!important;
  background:rgba(255,255,255,.52)!important;
}

@media (min-width:1200px) and (max-width:1499px){
  body.view-calendar .cal-mode-btn{
    padding:0 12px!important;
  }
}


/* ===== header-unboxed-v4 ===== */
/* STEP 6B — unbox system utility buttons */
body.view-calendar .header-actions{
  gap:10px!important;
}
body.view-calendar .conn-status{
  height:28px!important;
  min-height:28px!important;
  padding:0 4px 0 2px!important;
  border:0!important;
  border-radius:999px!important;
  background:transparent!important;
  color:#62716A!important;
  box-shadow:none!important;
  font-size:10px!important;
  font-weight:700!important;
}
body.view-calendar .conn-status .conn-dot{
  width:10px!important;
  height:10px!important;
  margin-right:8px!important;
  background:#23B26D!important;
  box-shadow:0 0 0 3px rgba(35,178,109,.12)!important;
}
body.view-calendar .conn-status .conn-label{
  letter-spacing:-0.01em!important;
}
body.view-calendar .btn-notif,
body.view-calendar .btn-theme-toggle{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  border:0!important;
  border-radius:999px!important;
  background:transparent!important;
  color:#748292!important;
  box-shadow:none!important;
}
body.view-calendar .btn-notif:hover,
body.view-calendar .btn-theme-toggle:hover{
  background:#F1F5FA!important;
  color:#334152!important;
  transform:none!important;
}
body.view-calendar .btn-notif:focus-visible,
body.view-calendar .btn-theme-toggle:focus-visible{
  outline:2px solid rgba(36,65,251,.12)!important;
  outline-offset:1px!important;
}
body.view-calendar .btn-notif .dna-btn-icon,
body.view-calendar .btn-theme-toggle .dna-btn-icon,
body.view-calendar .btn-theme-toggle .sun-icon,
body.view-calendar .btn-theme-toggle .moon-icon{
  width:17px!important;
  height:17px!important;
}
@media (min-width:768px){
  body.view-calendar #btn-add-schedule{
    margin-left:2px!important;
  }
}


/* ===== calendar-state-fix-v5 ===== */
/* =========================================================
   V5 — Robust Calendar state
   Prevent legacy page hero/padding from returning when body.view-calendar
   is temporarily missing during view initialization.
   ========================================================= */

/* Calendar itself must never inherit the document-page top reservation. */
#calendar-view.active,
#calendar-view[style*="display: block"],
body:has(#calendar-view.active) #calendar-view{
  padding-top:10px!important;
  min-height:0!important;
  height:auto!important;
  overflow:visible!important;
}

/* Hide legacy editorial hero whenever Calendar is the active panel. */
body:has(#calendar-view.active) .header-title-section{
  display:none!important;
}

/* Keep the utility header in Calendar mode even if body class syncs a frame late. */
body:has(#calendar-view.active) .top-header{
  position:absolute!important;
  top:10px!important;
  right:22px!important;
  left:auto!important;
  width:auto!important;
  height:32px!important;
  min-height:32px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  z-index:60!important;
}

/* The global view-panel rule is document-oriented; Calendar is workspace-oriented. */
body:has(#calendar-view.active) #calendar-view.view-panel{
  padding-top:10px!important;
}

/* Calendar toolbar owns the first content row. */
body:has(#calendar-view.active) #calendar-view .calendar-toolbar{
  margin-top:0!important;
}


/* ===== calendar-mode-in-filter-v10 ===== */
/* =========================================================
   V10 — Mode switch lives in filter toolbar
   Desktop/tablet:
   Row 1 = month navigation + system actions
   Row 2 = search / filters / conflict / Lịch-Danh sách
   ========================================================= */

@media (min-width:768px){
  /* Calendar top row has only nav + actions. */
  body.view-calendar .top-header,
  body:has(#calendar-view.active) .top-header{
    display:none!important;
  }

  body.view-calendar .calendar-toolbar,
  body:has(#calendar-view.active) .calendar-toolbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"nav actions"!important;
    align-items:center!important;
    gap:12px!important;
    width:100%!important;
    min-height:40px!important;
    height:auto!important;
    margin:0 0 10px!important;
    padding:0!important;
  }

  body.view-calendar .calendar-nav,
  body:has(#calendar-view.active) .calendar-nav{
    grid-area:nav!important;
    justify-self:start!important;
    align-self:center!important;
  }

  /* Wrapper no longer participates in toolbar layout. */
  body.view-calendar .calendar-toolbar-right,
  body:has(#calendar-view.active) .calendar-toolbar-right{
    display:contents!important;
  }

  body.view-calendar .calendar-toolbar .header-actions,
  body:has(#calendar-view.active) .calendar-toolbar .header-actions{
    grid-area:actions!important;
    justify-self:end!important;
    align-self:center!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    white-space:nowrap!important;
  }

  /* Filter becomes the stable home of mode switching. */
  body.view-calendar .calendar-filter-bar,
  body:has(#calendar-view.active) .calendar-filter-bar{
    display:grid!important;
    grid-template-columns:
      minmax(260px,1.7fr)
      minmax(130px,.72fr)
      minmax(130px,.72fr)
      auto
      auto!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
  }

  body.view-calendar .calendar-filter-bar > .cal-mode-toggle,
  body:has(#calendar-view.active) .calendar-filter-bar > .cal-mode-toggle{
    justify-self:end!important;
    align-self:center!important;
    margin:0!important;
    flex:0 0 auto!important;
  }

  /* Keep filter controls visually light. */
  body.view-calendar .calendar-filter-bar .cal-mode-toggle{
    height:36px!important;
    padding:3px!important;
    border-radius:10px!important;
  }

  body.view-calendar .calendar-filter-bar .cal-mode-btn{
    height:30px!important;
    padding:0 11px!important;
    border-radius:8px!important;
    font-size:9.5px!important;
  }

  body.view-calendar .calendar-filter-bar .cal-mode-btn .mode-btn-icon{
    width:13px!important;
    height:13px!important;
  }

  /* Status text is expendable before any structural reflow. */
  body.view-calendar .calendar-toolbar .conn-label,
  body:has(#calendar-view.active) .calendar-toolbar .conn-label{
    display:none!important;
  }

  body.view-calendar .calendar-toolbar .conn-status,
  body:has(#calendar-view.active) .calendar-toolbar .conn-status{
    width:18px!important;
    min-width:18px!important;
    padding:0!important;
    justify-content:center!important;
  }

  body.view-calendar .calendar-toolbar .conn-dot,
  body:has(#calendar-view.active) .calendar-toolbar .conn-dot{
    margin:0!important;
  }
}

/* 1024–1199: compact CTA, keep filter in one row */
@media (min-width:1024px) and (max-width:1199px){
  body.view-calendar .calendar-filter-bar,
  body:has(#calendar-view.active) .calendar-filter-bar{
    grid-template-columns:
      minmax(220px,1.5fr)
      minmax(110px,.65fr)
      minmax(110px,.65fr)
      auto
      auto!important;
    gap:6px!important;
  }

  body.view-calendar .calendar-toolbar #btn-add-schedule,
  body:has(#calendar-view.active) .calendar-toolbar #btn-add-schedule{
    padding:0 10px!important;
  }

  body.view-calendar .calendar-toolbar #btn-add-schedule .btn-primary-label,
  body:has(#calendar-view.active) .calendar-toolbar #btn-add-schedule .btn-primary-label{
    font-size:0!important;
  }

  body.view-calendar .calendar-toolbar #btn-add-schedule .btn-primary-label::after,
  body:has(#calendar-view.active) .calendar-toolbar #btn-add-schedule .btn-primary-label::after{
    content:"Thêm";
    font-size:9.5px!important;
  }

  body.view-calendar .calendar-filter-bar .cal-mode-btn span{
    display:none!important;
  }

  body.view-calendar .calendar-filter-bar .cal-mode-btn{
    width:32px!important;
    min-width:32px!important;
    padding:0!important;
  }
}

/* 768–1023: filter wraps gracefully into two compact rows,
   but the mode switch stays attached to the filter system. */
@media (min-width:768px) and (max-width:1023px){
  body.view-calendar .calendar-filter-bar,
  body:has(#calendar-view.active) .calendar-filter-bar{
    grid-template-columns:minmax(0,1fr) minmax(110px,.5fr) auto!important;
    grid-template-areas:
      "search search mode"
      "category person conflict"!important;
    gap:6px!important;
  }

  body.view-calendar .calendar-search,
  body:has(#calendar-view.active) .calendar-search{
    grid-area:search!important;
  }

  body.view-calendar .calendar-filter-bar .filter-group:has(#filter-category),
  body:has(#calendar-view.active) .calendar-filter-bar .filter-group:has(#filter-category){
    grid-area:category!important;
  }

  body.view-calendar .calendar-filter-bar .filter-group:has(#filter-incharge),
  body:has(#calendar-view.active) .calendar-filter-bar .filter-group:has(#filter-incharge){
    grid-area:person!important;
  }

  body.view-calendar .calendar-conflict-toggle,
  body:has(#calendar-view.active) .calendar-conflict-toggle{
    grid-area:conflict!important;
  }

  body.view-calendar .calendar-filter-bar > .cal-mode-toggle,
  body:has(#calendar-view.active) .calendar-filter-bar > .cal-mode-toggle{
    grid-area:mode!important;
  }

  body.view-calendar .calendar-toolbar #btn-add-schedule .btn-primary-label,
  body:has(#calendar-view.active) .calendar-toolbar #btn-add-schedule .btn-primary-label{
    display:none!important;
  }

  body.view-calendar .calendar-toolbar #btn-add-schedule,
  body:has(#calendar-view.active) .calendar-toolbar #btn-add-schedule{
    width:32px!important;
    min-width:32px!important;
    padding:0!important;
  }
}


/* ===== media-flow-motion-v11 ===== */
/* =========================================================
   Media Flow Motion System v11
   Fast operational motion — no decorative bounce.
   ========================================================= */
:root{
  --mf-motion-instant:90ms;
  --mf-motion-fast:130ms;
  --mf-motion-base:180ms;
  --mf-motion-medium:220ms;
  --mf-motion-slow:260ms;
  --mf-ease-standard:cubic-bezier(.2,.8,.2,1);
  --mf-ease-enter:cubic-bezier(.16,1,.3,1);
  --mf-ease-exit:cubic-bezier(.4,0,1,1);
}

/* ---------- Sidebar geometry ---------- */
@media (min-width:1200px){
  .app-container{
    transition:grid-template-columns var(--mf-motion-medium) var(--mf-ease-standard)!important;
  }
  .sidebar{
    transition:
      width var(--mf-motion-medium) var(--mf-ease-standard),
      padding-left var(--mf-motion-medium) var(--mf-ease-standard),
      padding-right var(--mf-motion-medium) var(--mf-ease-standard)!important;
  }
  .logo-text-area,
  .nav-link span,
  .user-info{
    transition:
      opacity var(--mf-motion-fast) ease,
      transform var(--mf-motion-fast) var(--mf-ease-standard)!important;
  }
  .sidebar-toggle{
    transition:
      background-color var(--mf-motion-fast) ease,
      border-color var(--mf-motion-fast) ease,
      color var(--mf-motion-fast) ease,
      opacity var(--mf-motion-fast) ease!important;
  }
}

/* ---------- Navigation / buttons ---------- */
.nav-link{
  transition:
    background-color var(--mf-motion-fast) ease,
    color var(--mf-motion-fast) ease,
    transform var(--mf-motion-fast) var(--mf-ease-standard)!important;
}
.nav-link svg{
  transition:
    background-color var(--mf-motion-fast) ease,
    color var(--mf-motion-fast) ease,
    transform var(--mf-motion-fast) var(--mf-ease-standard)!important;
}
.nav-link:active{
  transform:scale(.985)!important;
}

body.view-calendar .btn-nav-cal,
body.view-calendar .btn-cal-today,
body.view-calendar .btn-notif,
body.view-calendar .btn-theme-toggle,
body.view-calendar #btn-add-schedule,
body.view-calendar .cal-mode-btn,
body.view-calendar .calendar-conflict-toggle,
body.view-calendar .btn-reset-filters{
  transition:
    background-color var(--mf-motion-fast) ease,
    border-color var(--mf-motion-fast) ease,
    color var(--mf-motion-fast) ease,
    opacity var(--mf-motion-fast) ease,
    transform var(--mf-motion-instant) var(--mf-ease-standard)!important;
}
body.view-calendar .btn-nav-cal:active,
body.view-calendar .btn-cal-today:active,
body.view-calendar .btn-notif:active,
body.view-calendar .btn-theme-toggle:active,
body.view-calendar #btn-add-schedule:active,
body.view-calendar .cal-mode-btn:active{
  transform:scale(.96)!important;
}

/* Mode switch: active state should glide, not flash. */
body.view-calendar .cal-mode-btn.active{
  transition:
    background-color var(--mf-motion-base) var(--mf-ease-standard),
    color var(--mf-motion-base) var(--mf-ease-standard),
    box-shadow var(--mf-motion-base) var(--mf-ease-standard)!important;
}
body.view-calendar .mode-btn-icon{
  transition:
    transform var(--mf-motion-base) var(--mf-ease-enter),
    opacity var(--mf-motion-base) ease!important;
}
body.view-calendar .cal-mode-btn.active .mode-btn-icon{
  transform:translateY(-1px)!important;
}

/* ---------- Filters ---------- */
body.view-calendar .search-input,
body.view-calendar .select-filter{
  transition:
    background-color var(--mf-motion-fast) ease,
    border-color var(--mf-motion-fast) ease,
    box-shadow var(--mf-motion-fast) ease,
    color var(--mf-motion-fast) ease!important;
}
body.view-calendar .calendar-conflict-toggle{
  transition:
    background-color var(--mf-motion-base) var(--mf-ease-standard),
    color var(--mf-motion-base) ease,
    transform var(--mf-motion-instant) ease!important;
}
body.view-calendar .calendar-conflict-toggle:active{
  transform:scale(.985)!important;
}

/* ---------- Calendar cells / events ---------- */
body.view-calendar .calendar-cell{
  transition:
    background-color var(--mf-motion-base) ease,
    box-shadow var(--mf-motion-base) var(--mf-ease-standard),
    border-color var(--mf-motion-base) ease!important;
}
body.view-calendar .calendar-date-number{
  transition:
    color var(--mf-motion-base) ease,
    background-color var(--mf-motion-base) ease,
    transform var(--mf-motion-fast) var(--mf-ease-enter)!important;
}
body.view-calendar .calendar-cell.is-selected .calendar-date-number{
  transform:scale(1.04)!important;
}
body.view-calendar .calendar-event-item{
  transition:
    background-color var(--mf-motion-fast) ease,
    border-color var(--mf-motion-fast) ease,
    box-shadow var(--mf-motion-fast) ease,
    transform var(--mf-motion-fast) var(--mf-ease-standard)!important;
}
body.view-calendar .calendar-event-item:hover{
  transform:translateY(-1px)!important;
}
body.view-calendar .calendar-event-item:active{
  transform:translateY(0) scale(.99)!important;
}
body.view-calendar .cal-more-events{
  transition:
    background-color var(--mf-motion-fast) ease,
    color var(--mf-motion-fast) ease,
    transform var(--mf-motion-instant) ease!important;
}
body.view-calendar .cal-more-events:active{
  transform:scale(.98)!important;
}

/* Agenda hover remains restrained. */
body.view-calendar .agenda-item{
  transition:
    background-color var(--mf-motion-fast) ease,
    transform var(--mf-motion-fast) var(--mf-ease-standard)!important;
}
body.view-calendar .agenda-item:hover{
  transform:translateX(2px)!important;
}
body.view-calendar .agenda-item:active{
  transform:translateX(1px) scale(.997)!important;
}

/* ---------- Drawer: GPU transform instead of animating right ---------- */
.drawer{
  right:0!important;
  transform:translate3d(102%,0,0)!important;
  transition:transform var(--mf-motion-slow) var(--mf-ease-enter)!important;
  will-change:transform;
}
.drawer.active{
  right:0!important;
  transform:translate3d(0,0,0)!important;
}
.drawer-backdrop{
  transition:opacity var(--mf-motion-base) ease!important;
}

/* ---------- +N day popover ---------- */
.mf-day-popover{
  display:block!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  transform:translateY(6px) scale(.985)!important;
  transform-origin:top center!important;
  transition:
    opacity var(--mf-motion-fast) ease,
    transform var(--mf-motion-base) var(--mf-ease-enter),
    visibility 0s linear var(--mf-motion-base)!important;
}
.mf-day-popover.open{
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  transform:translateY(0) scale(1)!important;
  transition-delay:0s!important;
}
.mf-day-popover-item{
  transition:
    background-color var(--mf-motion-fast) ease,
    transform var(--mf-motion-instant) ease!important;
}
.mf-day-popover-item:active{
  transform:scale(.99)!important;
}

/* ---------- Motion helper states driven by JS ---------- */
.mf-motion-lock{
  pointer-events:none!important;
}
#calendar-grid-cells,
#calendar-list,
#calendar-month-title{
  will-change:transform,opacity;
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion:reduce){
  :root{
    --mf-motion-instant:1ms;
    --mf-motion-fast:1ms;
    --mf-motion-base:1ms;
    --mf-motion-medium:1ms;
    --mf-motion-slow:1ms;
  }
  .app-container,
  .sidebar,
  .drawer,
  .drawer-backdrop,
  .mf-day-popover,
  body.view-calendar .calendar-cell,
  body.view-calendar .calendar-event-item,
  body.view-calendar .agenda-item,
  body.view-calendar .cal-mode-btn,
  body.view-calendar .btn-nav-cal,
  body.view-calendar #btn-add-schedule{
    transition-duration:1ms!important;
    animation-duration:1ms!important;
  }
}


/* ===== calendar-detail-drawer-v12 ===== */
/* =========================================================
   V12 — Calendar Detail Drawer
   Light operational detail, aligned with Media Flow ADN
   ========================================================= */

/* Backdrop: preserve context instead of turning workspace gray/black. */
#drawer-backdrop.drawer-backdrop{
  background:rgba(7,23,47,.18)!important;
  backdrop-filter:blur(2px)!important;
  -webkit-backdrop-filter:blur(2px)!important;
}

/* Drawer surface */
#details-drawer.drawer{
  width:min(440px,calc(100vw - 76px))!important;
  padding:0!important;
  background:#FFFFFF!important;
  color:#07172F!important;
  border-left:1px solid #DCE3EE!important;
  box-shadow:-18px 0 48px rgba(30,43,59,.10)!important;
  overflow:hidden!important;
}

/* Header */
#details-drawer .drawer-header{
  position:sticky!important;
  top:0!important;
  z-index:5!important;
  min-height:64px!important;
  margin:0!important;
  padding:16px 20px!important;
  border-bottom:1px solid #E8EDF3!important;
  background:rgba(255,255,255,.96)!important;
  backdrop-filter:blur(14px)!important;
}
#details-drawer .drawer-header h3{
  margin:0!important;
  font-size:18px!important;
  line-height:1.15!important;
  font-weight:800!important;
  letter-spacing:-.035em!important;
  color:#07172F!important;
}
#details-drawer .btn-close-drawer{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  border:0!important;
  border-radius:999px!important;
  background:#F4F6F8!important;
  color:#657382!important;
  font-size:0!important;
  box-shadow:none!important;
}
#details-drawer .btn-close-drawer::before{
  content:"";
  width:14px;
  height:14px;
  display:block;
  background:
    linear-gradient(45deg,transparent 45%,currentColor 46%,currentColor 54%,transparent 55%),
    linear-gradient(-45deg,transparent 45%,currentColor 46%,currentColor 54%,transparent 55%);
}
#details-drawer .btn-close-drawer:hover{
  background:#EAF0F6!important;
  color:#263547!important;
}

/* Scrollable content */
#details-drawer .drawer-content{
  height:calc(100vh - 64px)!important;
  overflow-y:auto!important;
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  padding:18px 20px 24px!important;
  scrollbar-width:thin;
  scrollbar-color:#CCD5DF transparent;
}

/* Generic row */
#details-drawer .drawer-row{
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
  margin:0!important;
  padding:0!important;
}
#details-drawer .drawer-label{
  font-size:9px!important;
  line-height:1.2!important;
  font-weight:800!important;
  letter-spacing:.075em!important;
  text-transform:uppercase!important;
  color:#8A96A2!important;
}
#details-drawer .drawer-value{
  font-size:12px!important;
  line-height:1.45!important;
  color:#344253!important;
}

/* Summary */
#details-drawer .mf-drawer-summary{
  padding-bottom:18px!important;
  border-bottom:1px solid #E8EDF3!important;
}
#details-drawer .mf-drawer-category-row .drawer-label{
  display:none!important;
}
#details-drawer .mf-drawer-category-row{
  margin-bottom:10px!important;
}
#details-drawer .mf-drawer-location-row{
  margin-bottom:10px!important;
}
#details-drawer #drawer-location{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:6px 8px!important;
}
#details-drawer #drawer-location strong{
  font-size:16px!important;
  line-height:1.25!important;
  font-weight:780!important;
  letter-spacing:-.025em!important;
  color:#1E2E41!important;
}
#details-drawer .location-map-link{
  margin:0!important;
  padding:0!important;
  color:#2441FB!important;
  font-size:10px!important;
  font-weight:760!important;
  text-decoration:none!important;
}
#details-drawer .location-map-link:hover{
  text-decoration:underline!important;
}
#details-drawer .mf-drawer-time-row{
  margin-bottom:0!important;
}
#details-drawer #drawer-time{
  font-size:12px!important;
  font-weight:650!important;
  color:#536272!important;
  font-variant-numeric:tabular-nums;
}

/* Conflict belongs to summary */
#details-drawer .drawer-conflict-row{
  margin-top:12px!important;
}
#details-drawer .drawer-conflict-row .drawer-label{
  display:none!important;
}
#details-drawer .drawer-conflict-alert{
  padding:10px 11px!important;
  border:0!important;
  border-left:3px solid #B95A49!important;
  border-radius:7px!important;
  background:#FFF5F2!important;
  color:#865B52!important;
  font-size:10px!important;
  line-height:1.4!important;
}
#details-drawer .drawer-conflict-alert strong{
  color:#9B493C!important;
}

/* Request / brief */
#details-drawer .mf-drawer-detail-row{
  margin:18px 0 0!important;
}
#details-drawer #drawer-detail{
  font-size:12px!important;
  line-height:1.55!important;
  color:#445364!important;
}

/* Section heading */
#details-drawer .mf-drawer-section-heading{
  display:flex;
  align-items:center;
  gap:7px;
  margin:20px 0 12px;
  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.065em;
  text-transform:uppercase;
  color:#788592;
}
#details-drawer .mf-drawer-section-heading svg{
  width:14px;
  height:14px;
  color:#657585;
  flex:0 0 auto;
}

/* Staff: 2-col information grid, no heavy cards */
#details-drawer .mf-drawer-team-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px 18px!important;
  padding-bottom:20px!important;
  border-bottom:1px solid #E8EDF3!important;
}
#details-drawer .mf-drawer-team-grid .drawer-row{
  min-width:0!important;
}
#details-drawer .mf-drawer-team-grid .drawer-label{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  font-size:8.5px!important;
  letter-spacing:.055em!important;
}
#details-drawer .mf-drawer-team-grid .drawer-label svg{
  width:13px!important;
  height:13px!important;
  color:#718091!important;
}
#details-drawer .mf-drawer-team-grid .drawer-value{
  min-width:0!important;
}
#details-drawer .badge-person{
  margin:1px 4px 3px 0!important;
  padding:3px 7px 3px 4px!important;
  border:0!important;
  background:#F2F5F9!important;
  color:#435365!important;
  font-size:10px!important;
  font-weight:700!important;
}
#details-drawer .badge-person > span{
  width:17px!important;
  height:17px!important;
  font-size:8px!important;
}

/* Notes */
#details-drawer .mf-drawer-notes-row{
  margin-top:0!important;
  padding:0 0 18px!important;
  border-bottom:1px solid #E8EDF3!important;
}
#details-drawer #drawer-notes{
  position:relative!important;
  padding-left:10px!important;
  color:#665B3F!important;
  font-size:11px!important;
  font-style:normal!important;
}
#details-drawer #drawer-notes::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  bottom:2px;
  width:2px;
  border-radius:2px;
  background:#D8B24A;
}

/* Deliverables */
#details-drawer .mf-drawer-deliverables-row{
  margin:18px 0 0!important;
  padding:0!important;
  border:0!important;
}
#details-drawer #drawer-deliverables > div{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  margin-top:7px!important;
}
#details-drawer #drawer-deliverables label{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  min-height:28px!important;
  padding:0 9px!important;
  margin:0!important;
  border:0!important;
  border-radius:999px!important;
  background:#F3F6F8!important;
  color:#64717D!important;
  font-size:10px!important;
  font-weight:700!important;
  cursor:pointer!important;
}
#details-drawer #drawer-deliverables label:has(input:checked){
  background:#EAF8F2!important;
  color:#21805F!important;
}
#details-drawer .checkbox-deliverable{
  width:14px!important;
  height:14px!important;
  margin:0!important;
  border-radius:4px!important;
}
#details-drawer .checkbox-deliverable:checked{
  background:#1BAA79!important;
  border-color:#1BAA79!important;
}

/* Actions: one primary, everything else quieter */
#details-drawer #drawer-actions{
  position:sticky!important;
  bottom:-24px!important;
  z-index:4!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
  margin:22px -20px -24px!important;
  padding:14px 20px 18px!important;
  border-top:1px solid #E8EDF3!important;
  background:rgba(255,255,255,.96)!important;
  backdrop-filter:blur(12px)!important;
}
#details-drawer #drawer-actions .drawer-edit-primary{
  grid-column:1!important;
  width:100%!important;
  height:36px!important;
  margin:0!important;
  border:1px solid #2441FB!important;
  border-radius:9px!important;
  background:#2441FB!important;
  color:#FFFFFF!important;
  font-size:10px!important;
  font-weight:780!important;
  box-shadow:none!important;
}
#details-drawer #drawer-actions .btn-hk-from-drawer{
  grid-column:2!important;
  width:100%!important;
  height:36px!important;
  margin:0!important;
  padding:0 10px!important;
  border:0!important;
  border-radius:9px!important;
  background:#EEF3FF!important;
  color:#2441FB!important;
  font-size:10px!important;
  font-weight:760!important;
  box-shadow:none!important;
}
#details-drawer #drawer-actions .drawer-hk-linked{
  grid-column:1 / -1!important;
  margin:0!important;
  padding:7px 9px!important;
  border-radius:7px!important;
  background:#EAF8F2!important;
  color:#21805F!important;
  font-size:9.5px!important;
  text-align:left!important;
}
#details-drawer #drawer-actions .drawer-delete-action{
  grid-column:1 / -1!important;
  width:max-content!important;
  min-height:24px!important;
  margin:2px auto 0!important;
  padding:0 6px!important;
  border:0!important;
  background:transparent!important;
  color:#A45A4D!important;
  font-size:9.5px!important;
  font-weight:700!important;
  box-shadow:none!important;
}
#details-drawer #drawer-actions .drawer-delete-action:hover{
  color:#8E4035!important;
  text-decoration:underline!important;
}

/* Light drawer in the light Calendar workspace even if legacy theme variables are dark. */
body.view-calendar #details-drawer,
body:has(#calendar-view.active) #details-drawer{
  --text-primary:#07172F!important;
  --text-secondary:#788592!important;
  --text-muted:#98A2AC!important;
  --border-color:#DCE3EE!important;
  --card-border:#E8EDF3!important;
  --bg-surface-solid:#FFFFFF!important;
}

/* Responsive */
@media (max-width:767px){
  #details-drawer.drawer{
    width:100%!important;
    max-width:none!important;
  }
  #details-drawer .mf-drawer-team-grid{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
}


/* ===== calendar-detail-permission-v13 ===== */
/* =========================================================
   V13 — Permission-aware Calendar Detail Drawer
   Preview role/state simulator is intentionally outside drawer.
   ========================================================= */

.v13-permission-preview{
  position:fixed;
  top:16px;
  right:456px;
  z-index:140;
  display:none;
  align-items:center;
  gap:6px;
  padding:5px;
  border:1px solid #DCE3EE;
  border-radius:10px;
  background:rgba(255,255,255,.96);
  box-shadow:0 8px 28px rgba(30,43,59,.08);
  backdrop-filter:blur(12px);
}
body:has(#details-drawer.active) .v13-permission-preview{display:flex}
.v13-permission-preview .v13-preview-tag{
  padding:0 5px;
  font-size:7.5px;
  line-height:1;
  font-weight:850;
  letter-spacing:.08em;
  color:#8B96A3;
  text-transform:uppercase;
}
.v13-permission-preview select{
  height:28px;
  padding:0 26px 0 9px;
  border:0;
  border-radius:7px;
  background:#F3F6F9;
  color:#445364;
  font-size:9px;
  font-weight:700;
  outline:none;
}
.v13-permission-preview select:focus{
  box-shadow:0 0 0 2px rgba(36,65,251,.10);
}

#details-drawer.drawer{
  width:min(448px,calc(100vw - 76px))!important;
}
#details-drawer .drawer-header{
  min-height:64px!important;
}
#details-drawer .drawer-content{
  height:calc(100vh - 64px)!important;
  padding:18px 20px 24px!important;
}

/* Header action menu */
.v13-drawer-header-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
.v13-more-wrap{position:relative}
.v13-more-btn{
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:999px;
  background:#F4F6F8;
  color:#657382;
  cursor:pointer;
}
.v13-more-btn:hover{background:#EAF0F6;color:#263547}
.v13-more-btn svg{width:15px;height:15px}
.v13-more-menu{
  position:absolute;
  top:36px;
  right:0;
  width:170px;
  padding:5px;
  border:1px solid #DDE4EC;
  border-radius:10px;
  background:#FFF;
  box-shadow:0 12px 30px rgba(30,43,59,.12);
  z-index:20;
}
.v13-more-menu[hidden]{display:none}
.v13-more-menu button{
  width:100%;
  min-height:32px;
  padding:0 9px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#526171;
  text-align:left;
  font-size:9.5px;
  font-weight:650;
}
.v13-more-menu button:hover{background:#F4F6F8}
.v13-more-menu .danger{color:#A44F43}
.v13-more-menu .danger:hover{background:#FFF2EF}

/* Status/category row */
.v13-summary{
  padding-bottom:18px;
  border-bottom:1px solid #E8EDF3;
}
.v13-summary-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.v13-category,
.v13-status{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 8px;
  border-radius:999px;
  font-size:8px;
  line-height:1;
  font-weight:850;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.v13-category.du-an{background:#EAF0FF;color:#3652C8}
.v13-category.event{background:#FFF0DF;color:#A35E22}
.v13-category.prewed{background:#F1E9FA;color:#7A52B0}
.v13-category.zeng{background:#E2F4ED;color:#347C64}
.v13-status{letter-spacing:0;text-transform:none;font-size:8.5px}
.v13-status.draft{background:#F1F3F5;color:#73808B}
.v13-status.published{background:#EAF0FF;color:#3652C8}
.v13-status.in_progress{background:#E8F8F1;color:#23835F}
.v13-status.completed{background:#EEF1F4;color:#526171}
.v13-status.cancelled{background:#FFF1EE;color:#A34A3C}

.v13-location{
  margin:0;
  font-size:17px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.03em;
  color:#1E2E41;
}
.v13-summary-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px 10px;
  margin-top:7px;
  color:#667585;
  font-size:10.5px;
  font-weight:600;
}
.v13-map-link{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:#2441FB;
  text-decoration:none;
  font-size:9.5px;
  font-weight:760;
}
.v13-map-link svg{width:12px;height:12px}

/* Common sections */
.v13-section{
  padding:18px 0;
  border-bottom:1px solid #E8EDF3;
}
.v13-section:last-of-type{border-bottom:0}
.v13-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.v13-section-title{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0;
  color:#7A8794;
  font-size:9px;
  line-height:1;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.v13-section-title svg{width:13px;height:13px}
.v13-section-stat{
  color:#87939F;
  font-size:8.5px;
  font-weight:700;
}
.v13-body-copy{
  margin:0;
  color:#445364;
  font-size:11px;
  line-height:1.55;
}
.v13-empty{color:#98A2AC;font-style:italic}

/* Conflict */
.v13-conflict{
  margin-top:13px;
  padding:10px 11px;
  border-left:3px solid #B95A49;
  border-radius:7px;
  background:#FFF5F2;
}
.v13-conflict strong{
  display:block;
  margin-bottom:4px;
  color:#93463A;
  font-size:10px;
}
.v13-conflict p{
  margin:0;
  color:#785F59;
  font-size:9.5px;
  line-height:1.45;
}
.v13-conflict-actions{
  display:flex;
  gap:6px;
  margin-top:8px;
}
.v13-mini-btn{
  min-height:28px;
  padding:0 8px;
  border:0;
  border-radius:7px;
  background:#F1F4F7;
  color:#536273;
  font-size:8.5px;
  font-weight:760;
}
.v13-mini-btn.primary{background:#EEF3FF;color:#2441FB}

/* Own assignment */
.v13-own-role{
  margin:14px 0 0;
  padding:11px 12px;
  border-radius:9px;
  background:#F4F7FF;
}
.v13-own-role-label{
  color:#7B88A0;
  font-size:8px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.v13-own-role-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:4px;
}
.v13-own-role-main strong{font-size:11px;color:#2D3D52}
.v13-assignment-state{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#5B6B7C;
  font-size:8.5px;
  font-weight:700;
}
.v13-assignment-state .dot{
  width:7px;height:7px;border-radius:50%;background:#9AA6B2;
}
.v13-assignment-state.confirmed .dot{background:#22A873}
.v13-assignment-state.checked .dot{background:#2441FB}

/* Team */
.v13-team-list{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.v13-team-row{
  display:grid;
  grid-template-columns:88px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  min-height:34px;
}
.v13-team-role{
  color:#83909D;
  font-size:8.5px;
  font-weight:760;
}
.v13-team-person{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  color:#405063;
  font-size:10px;
  font-weight:720;
}
.v13-avatar{
  width:24px;height:24px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#EEF2F6;color:#53677C;
  font-size:8px;font-weight:850;flex:0 0 auto;
}
.v13-team-state{
  color:#8995A1;
  font-size:8px;
  font-weight:700;
  white-space:nowrap;
}
.v13-team-state.ok{color:#25805F}
.v13-team-state.pending{color:#A87726}

/* Notes */
.v13-note{
  padding:10px 11px;
  border-radius:8px;
  background:#F7F9FB;
  color:#4F5E6E;
  font-size:10px;
  line-height:1.5;
}
.v13-note.manager{
  margin-top:8px;
  border-left:3px solid #7E8B98;
  border-radius:5px 8px 8px 5px;
  background:#F4F6F8;
}
.v13-note-label{
  display:block;
  margin-bottom:4px;
  color:#8995A1;
  font-size:7.5px;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* Deliverables + HK */
.v13-deliverables{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.v13-output-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:28px;
  padding:0 9px;
  border-radius:999px;
  background:#EAF8F2;
  color:#267E61;
  font-size:9px;
  font-weight:760;
}
.v13-output-chip svg{width:12px;height:12px}
.v13-hk-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  padding:10px 11px;
  border-radius:8px;
  background:#F4F7FF;
}
.v13-hk-status strong{display:block;color:#40506A;font-size:9.5px}
.v13-hk-status span{display:block;margin-top:2px;color:#8895A3;font-size:8.5px}

/* Audit */
.v13-audit-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0;
  border:0;
  background:transparent;
  color:#566575;
  font-size:9.5px;
  font-weight:760;
  cursor:pointer;
}
.v13-audit-list{
  margin-top:10px;
  padding-left:11px;
  border-left:1px solid #DDE4EB;
}
.v13-audit-item{
  position:relative;
  padding:0 0 12px 10px;
}
.v13-audit-item:last-child{padding-bottom:0}
.v13-audit-item::before{
  content:"";
  position:absolute;left:-14px;top:4px;
  width:5px;height:5px;border-radius:50%;background:#A9B3BE;
}
.v13-audit-time{color:#9AA5B0;font-size:7.5px;font-weight:700}
.v13-audit-text{margin-top:2px;color:#566575;font-size:9px;line-height:1.4}

/* Footer actions adapt by capability */
.v13-drawer-actions{
  position:sticky;
  bottom:-24px;
  z-index:5;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:20px -20px -24px;
  padding:14px 20px 18px;
  border-top:1px solid #E8EDF3;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);
}
.v13-action-primary,
.v13-action-secondary{
  flex:1 1 160px;
  height:36px;
  border-radius:9px;
  font-size:10px;
  font-weight:780;
}
.v13-action-primary{
  border:1px solid #2441FB;background:#2441FB;color:#FFF;
}
.v13-action-secondary{
  border:0;background:#EEF3FF;color:#2441FB;
}
.v13-action-ghost{
  width:100%;
  min-height:26px;
  border:0;background:transparent;color:#566575;
  font-size:9px;font-weight:700;
}
.v13-action-danger{color:#A34A3C}
.v13-action-primary:hover{background:#1938ED}
.v13-action-secondary:hover{background:#E4EBFF}

/* Draft access state */
.v13-access-denied{
  display:flex;
  min-height:260px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#87939F;
}
.v13-access-denied svg{width:28px;height:28px;margin-bottom:10px}
.v13-access-denied strong{color:#445364;font-size:12px}
.v13-access-denied p{max-width:280px;margin:6px 0 0;font-size:9.5px;line-height:1.5}

@media (max-width:900px){
  .v13-permission-preview{
    top:auto;right:12px;bottom:12px;
  }
}
@media (max-width:767px){
  #details-drawer.drawer{width:100%!important}
  .v13-team-row{grid-template-columns:76px minmax(0,1fr)}
  .v13-team-state{grid-column:2}
}


/* ===== calendar-detail-mobile-v13m ===== */
/* =========================================================
   V13M — Mobile Calendar Detail
   Desktop V13 remains unchanged >= 768px.
   ========================================================= */

@media (max-width:767px){
  /* Full-screen operational sheet */
  #drawer-backdrop.drawer-backdrop{
    background:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  #details-drawer.drawer{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    max-width:none!important;
    height:100dvh!important;
    max-height:100dvh!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:#FFFFFF!important;
    box-shadow:none!important;
    z-index:220!important;
    overflow:hidden!important;
    transform:translate3d(100%,0,0)!important;
  }

  #details-drawer.drawer.active{
    transform:translate3d(0,0,0)!important;
  }

  /* Sticky 56px mobile header */
  #details-drawer .drawer-header{
    position:sticky!important;
    top:0!important;
    z-index:30!important;
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr) auto!important;
    grid-template-areas:"back title actions"!important;
    align-items:center!important;
    gap:6px!important;
    min-height:56px!important;
    height:56px!important;
    padding:
      env(safe-area-inset-top)
      10px
      0!important;
    box-sizing:content-box!important;
    border-bottom:1px solid #E8EDF3!important;
    background:rgba(255,255,255,.98)!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
  }

  #details-drawer .drawer-header h3{
    grid-area:title!important;
    margin:0!important;
    padding:0!important;
    font-size:16px!important;
    line-height:1.15!important;
    font-weight:800!important;
    letter-spacing:-.03em!important;
    color:#15263A!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* Existing close button becomes mobile Back */
  #details-drawer .btn-close-drawer{
    grid-area:back!important;
    justify-self:start!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    margin:0!important;
    border:0!important;
    border-radius:999px!important;
    background:transparent!important;
    color:#394A5D!important;
  }
  #details-drawer .btn-close-drawer::before{
    content:"←"!important;
    display:block!important;
    width:auto!important;
    height:auto!important;
    background:none!important;
    font-size:21px!important;
    line-height:1!important;
    font-weight:500!important;
  }
  #details-drawer .btn-close-drawer:hover,
  #details-drawer .btn-close-drawer:active{
    background:#F1F4F7!important;
  }

  #details-drawer .v13-drawer-header-actions{
    grid-area:actions!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:4px!important;
  }

  #details-drawer .v13-more-btn{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    background:transparent!important;
  }
  #details-drawer .v13-more-btn:active{
    background:#F1F4F7!important;
  }
  #details-drawer .v13-more-menu{
    top:48px!important;
    right:0!important;
    width:184px!important;
  }
  #details-drawer .v13-more-menu button{
    min-height:44px!important;
    padding:0 12px!important;
    font-size:10.5px!important;
  }

  /* Content scroll area */
  #details-drawer .drawer-content{
    height:calc(100dvh - 56px - env(safe-area-inset-top))!important;
    max-height:none!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    padding:14px 16px 0!important;
    scrollbar-width:none!important;
  }
  #details-drawer .drawer-content::-webkit-scrollbar{
    display:none!important;
  }

  /* Summary: primary operating information */
  #details-drawer .v13-summary{
    padding:2px 0 16px!important;
    border-bottom:1px solid #E8EDF3!important;
  }
  #details-drawer .v13-summary-top{
    margin-bottom:11px!important;
  }
  #details-drawer .v13-category,
  #details-drawer .v13-status{
    min-height:25px!important;
    padding:0 9px!important;
    font-size:8px!important;
  }
  #details-drawer .v13-location{
    font-size:20px!important;
    line-height:1.18!important;
    letter-spacing:-.035em!important;
  }
  #details-drawer .v13-summary-meta{
    display:grid!important;
    grid-template-columns:1fr auto!important;
    grid-template-areas:
      "time map"
      "date map"!important;
    column-gap:10px!important;
    row-gap:3px!important;
    margin-top:9px!important;
    font-size:11px!important;
  }
  #details-drawer .v13-summary-meta > span:first-child{
    grid-area:time!important;
    font-weight:760!important;
    color:#445467!important;
  }
  #details-drawer .v13-summary-meta > span:nth-child(2){
    grid-area:date!important;
    color:#7B8794!important;
  }
  #details-drawer .v13-map-link{
    grid-area:map!important;
    align-self:center!important;
    min-height:44px!important;
    padding:0 11px!important;
    border-radius:9px!important;
    background:#EEF3FF!important;
    text-decoration:none!important;
    font-size:10px!important;
  }

  /* Own role becomes prominent for assigned members */
  #details-drawer .v13-own-role{
    margin-top:13px!important;
    padding:12px!important;
    border-radius:10px!important;
    background:#F2F6FF!important;
  }
  #details-drawer .v13-own-role-label{
    font-size:8px!important;
  }
  #details-drawer .v13-own-role-main{
    margin-top:5px!important;
  }
  #details-drawer .v13-own-role-main strong{
    font-size:11.5px!important;
  }
  #details-drawer .v13-assignment-state{
    font-size:8.5px!important;
  }

  /* Conflict on mobile is compact by default */
  #details-drawer .v13-conflict{
    margin-top:12px!important;
    padding:10px!important;
    border-radius:8px!important;
  }
  #details-drawer .v13-conflict strong{
    font-size:10.5px!important;
  }
  #details-drawer .v13-conflict p{
    font-size:9.5px!important;
  }
  #details-drawer .v13-conflict-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
  }
  #details-drawer .v13-mini-btn{
    min-height:40px!important;
    padding:0 10px!important;
    font-size:9px!important;
  }

  /* Sections: flatter, less "card stack" */
  #details-drawer .v13-section{
    padding:16px 0!important;
  }
  #details-drawer .v13-section-head{
    margin-bottom:9px!important;
  }
  #details-drawer .v13-section-title{
    font-size:8.5px!important;
  }
  #details-drawer .v13-section-stat{
    font-size:8px!important;
  }
  #details-drawer .v13-body-copy{
    font-size:11px!important;
    line-height:1.55!important;
  }

  /* Team becomes single-column, finger-friendly, compact */
  #details-drawer .v13-team-list{
    gap:2px!important;
  }
  #details-drawer .v13-team-row{
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr) auto!important;
    grid-template-areas:
      "avatar person state"
      "avatar role state"!important;
    align-items:center!important;
    column-gap:9px!important;
    row-gap:2px!important;
    min-height:48px!important;
    padding:4px 0!important;
    border-bottom:1px solid #F0F3F6!important;
  }
  #details-drawer .v13-team-row:last-child{
    border-bottom:0!important;
  }
  #details-drawer .v13-avatar{
    grid-area:avatar!important;
    width:32px!important;
    height:32px!important;
    font-size:9px!important;
  }
  #details-drawer .v13-team-person{
    grid-area:person!important;
    display:block!important;
    font-size:10.5px!important;
    font-weight:760!important;
  }
  #details-drawer .v13-team-person .v13-avatar{
    display:none!important;
  }
  #details-drawer .v13-team-role{
    grid-area:role!important;
    font-size:8px!important;
    font-weight:700!important;
  }
  #details-drawer .v13-team-state{
    grid-area:state!important;
    justify-self:end!important;
    font-size:8px!important;
  }

  /* Notes */
  #details-drawer .v13-note{
    padding:10px 11px!important;
    font-size:10px!important;
  }

  /* Deliverables / HK */
  #details-drawer .v13-deliverables{
    gap:6px!important;
  }
  #details-drawer .v13-output-chip{
    min-height:30px!important;
    padding:0 10px!important;
    font-size:9px!important;
  }
  #details-drawer .v13-hk-status{
    min-height:52px!important;
    padding:10px!important;
  }
  #details-drawer .v13-hk-status .v13-mini-btn{
    min-height:40px!important;
  }

  /* Audit stays collapsed by default and touchable */
  #details-drawer .v13-audit-toggle{
    min-height:44px!important;
    font-size:10px!important;
  }

  /* Sticky mobile action bar */
  #details-drawer .v13-drawer-actions{
    position:sticky!important;
    bottom:0!important;
    z-index:25!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    margin:18px -16px 0!important;
    padding:
      10px
      16px
      calc(10px + env(safe-area-inset-bottom))!important;
    border-top:1px solid #E8EDF3!important;
    background:rgba(255,255,255,.98)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
  }

  #details-drawer .v13-action-primary,
  #details-drawer .v13-action-secondary{
    min-height:46px!important;
    height:46px!important;
    border-radius:10px!important;
    font-size:10.5px!important;
  }

  #details-drawer .v13-action-ghost{
    grid-column:1 / -1!important;
    min-height:44px!important;
    font-size:9.5px!important;
  }

  /* One-action cases should use full width */
  #details-drawer .v13-drawer-actions > :only-child{
    grid-column:1 / -1!important;
  }

  /* Preview role/state tester becomes a small testing panel under the sheet header */
  .v13-permission-preview{
    top:calc(60px + env(safe-area-inset-top))!important;
    right:10px!important;
    bottom:auto!important;
    left:auto!important;
    z-index:260!important;
    display:none!important;
    max-width:calc(100vw - 20px)!important;
    padding:4px!important;
    border-radius:9px!important;
    box-shadow:0 6px 20px rgba(30,43,59,.09)!important;
  }
  body:has(#details-drawer.active) .v13-permission-preview{
    display:flex!important;
  }
  .v13-permission-preview .v13-preview-tag{
    display:none!important;
  }
  .v13-permission-preview select{
    width:auto!important;
    max-width:150px!important;
    height:30px!important;
    font-size:8.5px!important;
  }

  /* No hover-dependent interaction on touch layout */
  #details-drawer .v13-more-btn:hover,
  #details-drawer .v13-mini-btn:hover,
  #details-drawer .v13-action-primary:hover,
  #details-drawer .v13-action-secondary:hover,
  #details-drawer .v13-team-row:hover,
  #details-drawer .v13-map-link:hover{
    transform:none!important;
    text-decoration:none!important;
  }

  /* Access denied */
  #details-drawer .v13-access-denied{
    min-height:calc(100dvh - 140px)!important;
    padding:24px!important;
  }

  /* Legacy V12 sections should never compete with V13-rendered mobile content */
  #details-drawer .mf-drawer-summary,
  #details-drawer .mf-drawer-section-heading,
  #details-drawer .mf-drawer-team-grid,
  #details-drawer #drawer-actions{
    max-width:100%!important;
  }
}

/* Very narrow phones */
@media (max-width:380px){
  #details-drawer .drawer-content{
    padding-left:13px!important;
    padding-right:13px!important;
  }
  #details-drawer .v13-drawer-actions{
    margin-left:-13px!important;
    margin-right:-13px!important;
    padding-left:13px!important;
    padding-right:13px!important;
  }
  #details-drawer .v13-location{
    font-size:18px!important;
  }
  .v13-permission-preview select{
    max-width:132px!important;
  }
}


/* ===== mobile-nav-dna-v13m2 ===== */
/* =========================================================
   V13M.2 — Media Flow mobile bottom navigation DNA
   - line icons, no icon boxes
   - active = blue + top signal line
   - compact operational dock
   ========================================================= */
@media (max-width:767px){
  .dna-mobile-tabs{
    display:grid!important;
    grid-template-columns:repeat(var(--mf-mobile-tab-count,2),minmax(0,1fr))!important;
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:90!important;

    min-height:58px!important;
    padding:
      4px
      max(10px,env(safe-area-inset-right))
      calc(5px + env(safe-area-inset-bottom))
      max(10px,env(safe-area-inset-left))!important;

    background:rgba(255,255,255,.975)!important;
    border-top:1px solid #E8EDF3!important;
    box-shadow:none!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
  }

  .dna-mobile-tab{
    position:relative!important;
    min-width:0!important;
    min-height:48px!important;
    padding:5px 2px 2px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;

    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;

    color:#8794A1!important;
    font-size:8.5px!important;
    line-height:1!important;
    font-weight:680!important;
    letter-spacing:-.01em!important;

    -webkit-tap-highlight-color:transparent;
    transition:
      color 120ms ease,
      transform 100ms cubic-bezier(.2,.8,.2,1)!important;
  }
  .dna-mobile-tab[hidden]{display:none!important}

  .dna-mobile-tab::before{
    content:"";
    position:absolute;
    top:-4px;
    left:50%;
    width:0;
    height:2px;
    border-radius:999px;
    background:#2441FB;
    transform:translateX(-50%);
    opacity:0;
    transition:
      width 170ms cubic-bezier(.16,1,.3,1),
      opacity 130ms ease!important;
  }

  .dna-mobile-icon{
    width:24px!important;
    height:24px!important;
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:inherit!important;
    font-size:0!important;
    line-height:1!important;
    transition:
      color 130ms ease,
      transform 150ms cubic-bezier(.16,1,.3,1)!important;
  }

  .dna-mobile-icon svg{
    width:20px!important;
    height:20px!important;
    display:block!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.85!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
  }

  .dna-mobile-tab.active{
    color:#2441FB!important;
    font-weight:780!important;
    background:transparent!important;
  }

  .dna-mobile-tab.active::before{
    width:28px;
    opacity:1;
  }

  .dna-mobile-tab.active .dna-mobile-icon{
    background:transparent!important;
    color:#2441FB!important;
    transform:translateY(-1px)!important;
  }

  .dna-mobile-tab:active{
    transform:scale(.97)!important;
  }

  .dna-mobile-tab:active .dna-mobile-icon{
    transform:translateY(0) scale(.94)!important;
  }

  /* Give app pages enough room above the dock. */
  body:not(.mf-mobile-detail-open) .main-content{
    padding-bottom:calc(66px + env(safe-area-inset-bottom))!important;
  }

  /* Detail sheet owns the screen; bottom nav stays behind it. */
  body.mf-mobile-detail-open .dna-mobile-tabs{
    pointer-events:none!important;
  }
}

@media (max-width:360px){
  .dna-mobile-tabs{
    padding-left:5px!important;
    padding-right:5px!important;
  }
  .dna-mobile-tab{
    font-size:8px!important;
  }
  .dna-mobile-icon svg{
    width:19px!important;
    height:19px!important;
  }
}


/* ===== schedule-form-redesign-v14 ===== */
/* =========================================================
   V14 — Add / Edit Schedule
   Preserves existing form field IDs and submit logic.
   ========================================================= */

#modal-backdrop.modal-backdrop{
  background:rgba(7,23,47,.20)!important;
  backdrop-filter:blur(3px)!important;
  -webkit-backdrop-filter:blur(3px)!important;
  padding:24px!important;
  align-items:center!important;
  justify-content:center!important;
}

#modal-backdrop .modal-box{
  width:min(760px,calc(100vw - 48px))!important;
  max-width:760px!important;
  max-height:min(860px,calc(100dvh - 48px))!important;
  padding:0!important;
  border:1px solid #DCE3EE!important;
  border-radius:16px!important;
  background:#FFFFFF!important;
  color:#15263A!important;
  box-shadow:0 24px 70px rgba(30,43,59,.16)!important;
  overflow:hidden!important;
  opacity:0;
  transform:translateY(10px) scale(.992);
  transition:
    opacity 160ms ease,
    transform 220ms cubic-bezier(.16,1,.3,1)!important;
}
#modal-backdrop.active .modal-box{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* Header */
#modal-backdrop .modal-header{
  position:sticky!important;
  top:0!important;
  z-index:10!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
  min-height:68px!important;
  margin:0!important;
  padding:14px 18px!important;
  border-bottom:1px solid #E8EDF3!important;
  background:rgba(255,255,255,.97)!important;
  backdrop-filter:blur(14px)!important;
}
#modal-backdrop #modal-title{
  margin:0!important;
  font-size:18px!important;
  line-height:1.2!important;
  font-weight:820!important;
  letter-spacing:-.035em!important;
  color:#13243A!important;
}
.v14-modal-subtitle{
  margin-top:3px;
  color:#87939F;
  font-size:9px;
  font-weight:600;
}
#modal-backdrop .btn-close-modal{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  min-height:32px!important;
  border:0!important;
  border-radius:999px!important;
  background:#F2F5F8!important;
  color:#657382!important;
  box-shadow:none!important;
  font-size:0!important;
}
#modal-backdrop .btn-close-modal::before{
  content:"×";
  display:block;
  font-size:20px;
  line-height:1;
  font-weight:400;
}
#modal-backdrop .btn-close-modal:hover{
  background:#E9EEF3!important;
  color:#344456!important;
}

/* Form scroll */
#schedule-form{
  max-height:calc(min(860px,100dvh - 48px) - 68px)!important;
  overflow-y:auto!important;
  padding:0 18px 88px!important;
  scrollbar-width:thin;
  scrollbar-color:#CDD5DF transparent;
}
#schedule-form::-webkit-scrollbar{width:6px}
#schedule-form::-webkit-scrollbar-thumb{
  border-radius:999px;background:#CDD5DF;
}

/* Section system */
.v14-form-section{
  padding:18px 0!important;
  border-bottom:1px solid #E8EDF3!important;
}
.v14-form-section:last-of-type{border-bottom:0!important}
.v14-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.v14-section-title{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0;
  color:#6F7D8B;
  font-size:9px;
  line-height:1;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.v14-section-title svg{
  width:14px;height:14px;flex:0 0 auto;
}
.v14-section-help{
  color:#9AA4AE;
  font-size:8.5px;
  line-height:1.35;
  text-align:right;
}

/* Fields */
#schedule-form .form-group{
  margin:0!important;
  min-width:0!important;
}
#schedule-form .form-group > label{
  display:block!important;
  margin:0 0 6px!important;
  color:#788592!important;
  font-size:8.5px!important;
  line-height:1.2!important;
  font-weight:780!important;
  letter-spacing:.025em!important;
}
#schedule-form .form-control{
  width:100%!important;
  min-height:38px!important;
  padding:0 11px!important;
  border:1px solid #DCE3EA!important;
  border-radius:9px!important;
  background:#FFFFFF!important;
  color:#344456!important;
  font-size:10.5px!important;
  font-weight:600!important;
  box-shadow:none!important;
  outline:none!important;
  transition:
    border-color 130ms ease,
    box-shadow 130ms ease,
    background-color 130ms ease!important;
}
#schedule-form textarea.form-control{
  min-height:78px!important;
  padding:10px 11px!important;
  resize:vertical!important;
  line-height:1.5!important;
}
#schedule-form .form-control:hover{
  border-color:#CBD5DF!important;
}
#schedule-form .form-control:focus{
  border-color:#AEBEF9!important;
  box-shadow:0 0 0 3px rgba(36,65,251,.07)!important;
}
#schedule-form .form-control::placeholder{
  color:#A6AFB9!important;
  font-weight:500!important;
}

/* Core details grid */
.v14-core-grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(160px,.65fr);
  gap:12px;
}
.v14-date-time-grid{
  display:grid;
  grid-template-columns:minmax(150px,.9fr) repeat(2,minmax(120px,.55fr));
  gap:10px;
  margin-top:12px;
}
.v14-brief-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,.55fr);
  gap:12px;
}

/* Status preview selector */
.v14-status-preview{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:3px;
  border:1px solid #DDE4EC;
  border-radius:10px;
  background:#F5F7FA;
}
.v14-status-preview button{
  min-height:28px;
  padding:0 9px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#7D8996;
  font-size:8.5px;
  font-weight:760;
}
.v14-status-preview button.active{
  background:#FFF;
  color:#2441FB;
  box-shadow:inset 0 0 0 1px rgba(36,65,251,.14);
}
.v14-status-preview-note{
  margin-left:6px;
  color:#A0A9B3;
  font-size:7.5px;
  font-weight:650;
}

/* Role picker */
.v14-role-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  margin:0!important;
}
.v14-role-picker{
  position:relative;
  min-width:0;
  padding:10px!important;
  border:1px solid #E1E7ED;
  border-radius:10px;
  background:#FAFBFC;
}
.v14-role-picker > label{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  margin-bottom:7px!important;
  color:#5F6E7E!important;
  font-size:9px!important;
  font-weight:800!important;
}
.v14-role-picker > label svg{
  width:13px;height:13px;color:#728190;
}
.v14-native-multi{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  min-height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
  clip:rect(0 0 0 0)!important;
}
.v14-selected-people{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  min-height:27px;
  margin-bottom:7px;
}
.v14-person-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:25px;
  padding:0 7px 0 4px;
  border-radius:999px;
  background:#EEF2F6;
  color:#47586A;
  font-size:8.5px;
  font-weight:720;
}
.v14-person-avatar{
  width:18px;height:18px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#DCE4EC;color:#536476;
  font-size:7px;font-weight:850;
}
.v14-role-empty{
  display:flex;
  align-items:center;
  min-height:25px;
  color:#9AA5AF;
  font-size:8.5px;
}
.v14-role-add{
  width:100%;
  min-height:32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:0 8px;
  border:0;
  border-radius:7px;
  background:#F0F4F8;
  color:#657587;
  font-size:8.5px;
  font-weight:730;
  cursor:pointer;
}
.v14-role-add:hover{background:#E9EFF5;color:#405165}
.v14-role-options{
  position:absolute;
  left:9px;right:9px;
  top:calc(100% - 3px);
  z-index:20;
  max-height:190px;
  overflow:auto;
  padding:5px;
  border:1px solid #DCE3EA;
  border-radius:10px;
  background:#FFF;
  box-shadow:0 12px 30px rgba(30,43,59,.12);
}
.v14-role-options[hidden]{display:none}
.v14-role-option{
  width:100%;
  min-height:34px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 8px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#536273;
  font-size:9px;
  font-weight:680;
  text-align:left;
}
.v14-role-option:hover{background:#F3F6F9}
.v14-role-option.selected{
  background:#EEF3FF;
  color:#2441FB;
}
.v14-role-check{
  width:14px;height:14px;border-radius:4px;
  display:inline-grid;place-items:center;
  border:1px solid #C9D3DD;
  color:#FFF;font-size:8px;
}
.v14-role-option.selected .v14-role-check{
  border-color:#2441FB;background:#2441FB;
}

/* Deliverables as chips */
.v14-deliverable-wrap{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
}
#schedule-form .checkbox-group-form{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
}
#schedule-form .form-checkbox-label{
  min-height:34px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  margin:0!important;
  padding:0 10px!important;
  border:0!important;
  border-radius:999px!important;
  background:#F2F5F8!important;
  color:#667586!important;
  font-size:9px!important;
  font-weight:720!important;
  cursor:pointer!important;
}
#schedule-form .form-checkbox-label:has(input:checked){
  background:#EAF8F2!important;
  color:#247E60!important;
}
#schedule-form .checkbox-deliverable{
  width:14px!important;height:14px!important;margin:0!important;
}

/* Conflict preview */
.v14-conflict-slot{
  margin-top:12px;
}
.v14-conflict-alert{
  padding:10px 11px;
  border-left:3px solid #B95A49;
  border-radius:7px;
  background:#FFF5F2;
  color:#795E58;
  font-size:9.5px;
  line-height:1.45;
}
.v14-conflict-alert strong{
  display:block;
  margin-bottom:3px;
  color:#93473B;
  font-size:10px;
}
.v14-conflict-ok{
  display:none;
}

/* Sticky actions */
#schedule-form .form-actions{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:12!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  min-height:68px!important;
  margin:0!important;
  padding:12px 18px!important;
  border-top:1px solid #E8EDF3!important;
  background:rgba(255,255,255,.97)!important;
  backdrop-filter:blur(12px)!important;
}
#schedule-form .form-actions .btn-secondary{
  height:38px!important;
  min-height:38px!important;
  padding:0 13px!important;
  border:0!important;
  border-radius:9px!important;
  background:#F2F5F8!important;
  color:#5E6D7C!important;
  font-size:9.5px!important;
  font-weight:740!important;
  box-shadow:none!important;
}
#schedule-form .form-actions .btn-primary{
  height:38px!important;
  min-height:38px!important;
  padding:0 15px!important;
  border:1px solid #2441FB!important;
  border-radius:9px!important;
  background:#2441FB!important;
  color:#FFF!important;
  font-size:9.5px!important;
  font-weight:790!important;
  box-shadow:none!important;
}
#schedule-form .form-actions .btn-primary:hover{
  background:#1838ED!important;
}

/* Mobile: full screen form */
@media (max-width:767px){
  #modal-backdrop.modal-backdrop{
    inset:0!important;
    padding:0!important;
    background:#FFF!important;
    backdrop-filter:none!important;
  }
  #modal-backdrop .modal-box{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    max-width:none!important;
    height:100dvh!important;
    max-height:100dvh!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    transform:translate3d(100%,0,0)!important;
  }
  #modal-backdrop.active .modal-box{
    transform:translate3d(0,0,0)!important;
  }
  #modal-backdrop .modal-header{
    min-height:56px!important;
    height:56px!important;
    padding:
      env(safe-area-inset-top)
      10px
      0!important;
    box-sizing:content-box!important;
    grid-template-columns:44px minmax(0,1fr)!important;
  }
  #modal-backdrop #modal-title{
    font-size:16px!important;
  }
  .v14-modal-subtitle{display:none}
  #modal-backdrop .btn-close-modal{
    grid-column:1!important;
    grid-row:1!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    justify-self:start!important;
    background:transparent!important;
  }
  #modal-backdrop .btn-close-modal::before{
    content:"←"!important;
    font-size:21px!important;
  }
  #modal-backdrop .modal-header > div:first-child{
    grid-column:2!important;
    grid-row:1!important;
  }
  #schedule-form{
    height:calc(100dvh - 56px - env(safe-area-inset-top))!important;
    max-height:none!important;
    padding:0 14px calc(82px + env(safe-area-inset-bottom))!important;
    scrollbar-width:none!important;
  }
  #schedule-form::-webkit-scrollbar{display:none!important}
  .v14-form-section{
    padding:16px 0!important;
  }
  .v14-section-help{display:none}
  .v14-core-grid,
  .v14-date-time-grid,
  .v14-brief-grid,
  .v14-role-grid{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .v14-date-time-grid{
    grid-template-columns:1fr 1fr!important;
  }
  .v14-date-time-grid .form-group:first-child{
    grid-column:1 / -1!important;
  }
  .v14-role-picker{
    padding:10px!important;
  }
  .v14-role-add{
    min-height:42px!important;
  }
  .v14-role-options{
    position:fixed!important;
    left:12px!important;
    right:12px!important;
    top:auto!important;
    bottom:calc(76px + env(safe-area-inset-bottom))!important;
    max-height:48dvh!important;
    border-radius:14px!important;
    padding:8px!important;
    box-shadow:0 18px 60px rgba(30,43,59,.18)!important;
  }
  .v14-role-option{
    min-height:44px!important;
    font-size:10px!important;
  }
  #schedule-form .form-control{
    min-height:44px!important;
    font-size:11px!important;
  }
  #schedule-form textarea.form-control{
    min-height:96px!important;
  }
  #schedule-form .form-checkbox-label{
    min-height:38px!important;
  }
  #schedule-form .form-actions{
    position:fixed!important;
    min-height:auto!important;
    padding:
      10px
      14px
      calc(10px + env(safe-area-inset-bottom))!important;
  }
  #schedule-form .form-actions .btn-secondary,
  #schedule-form .form-actions .btn-primary{
    flex:1 1 0!important;
    height:46px!important;
    min-height:46px!important;
    font-size:10.5px!important;
  }
  .v14-status-preview{
    width:100%!important;
  }
  .v14-status-preview button{
    flex:1!important;
    min-height:34px!important;
  }
  .v14-status-preview-note{display:none!important}
}


/* ===== schedule-form-one-screen-v15 ===== */
/* =========================================================
   V15 — One-screen staffing form
   Desktop: all scheduling information visible in one viewport.
   Multiple staff per role + temporary freelancer.
   ========================================================= */

@media (min-width:1100px) and (min-height:700px){
  #modal-backdrop.modal-backdrop{
    padding:16px!important;
  }

  #modal-backdrop .modal-box{
    width:min(1120px,calc(100vw - 32px))!important;
    max-width:1120px!important;
    max-height:calc(100dvh - 32px)!important;
    border-radius:15px!important;
  }

  #modal-backdrop .modal-header{
    min-height:60px!important;
    padding:11px 16px!important;
  }

  #schedule-form{
    position:relative!important;
    display:grid!important;
    grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr)!important;
    grid-template-areas:
      "core core"
      "brief team"
      "output team"!important;
    column-gap:18px!important;
    row-gap:0!important;

    max-height:none!important;
    overflow:visible!important;
    padding:0 16px 68px!important;
  }

  #schedule-form .v15-core{grid-area:core!important}
  #schedule-form .v15-brief{grid-area:brief!important}
  #schedule-form .v15-team{
    grid-area:team!important;
    padding-left:18px!important;
    border-left:1px solid #E8EDF3!important;
  }
  #schedule-form .v15-output{grid-area:output!important}

  #schedule-form .v14-form-section{
    padding:13px 0!important;
  }

  /* Core details all sit in one operational row */
  #schedule-form .v15-core{
    display:grid!important;
    grid-template-columns:minmax(250px,1.55fr) minmax(120px,.55fr) minmax(138px,.68fr) minmax(112px,.5fr) minmax(112px,.5fr)!important;
    column-gap:9px!important;
    align-items:end!important;
  }
  #schedule-form .v15-core > .v14-section-head,
  #schedule-form .v15-core > .v14-conflict-slot{
    grid-column:1 / -1!important;
  }
  #schedule-form .v15-core .v14-core-grid,
  #schedule-form .v15-core .v14-date-time-grid{
    display:contents!important;
  }
  #schedule-form .v15-core .v14-section-head{
    margin-bottom:9px!important;
  }
  #schedule-form .v15-core .v14-conflict-slot{
    margin-top:7px!important;
  }

  /* Brief left column: detail + team note in one row */
  #schedule-form .v15-brief .v14-section-head{
    margin-bottom:8px!important;
  }
  #schedule-form .v15-brief .v14-brief-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1.2fr) minmax(180px,.8fr)!important;
    gap:9px!important;
  }
  #schedule-form .v15-brief textarea.form-control{
    min-height:96px!important;
    max-height:96px!important;
  }

  /* Staffing: compact 2×2 board */
  #schedule-form .v15-team .v14-section-head{
    margin-bottom:8px!important;
  }
  #schedule-form .v15-team .v14-role-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  #schedule-form .v15-team .v14-role-picker{
    min-height:128px!important;
    padding:9px!important;
    border-color:#E3E8ED!important;
    background:#FBFCFD!important;
  }
  #schedule-form .v15-team .v14-selected-people{
    align-content:flex-start!important;
    min-height:48px!important;
    max-height:52px!important;
    margin-bottom:6px!important;
    overflow:auto!important;
    scrollbar-width:none!important;
  }
  #schedule-form .v15-team .v14-selected-people::-webkit-scrollbar{
    display:none!important;
  }

  /* Outputs very compact */
  #schedule-form .v15-output{
    padding-top:11px!important;
    border-bottom:0!important;
  }
  #schedule-form .v15-output .v14-section-head{
    margin-bottom:7px!important;
  }

  /* Fixed footer inside modal */
  #schedule-form .form-actions{
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    min-height:60px!important;
    padding:10px 16px!important;
  }
}

/* Role card refinements across desktop sizes */
.v15-role-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:5px;
}
.v14-role-add{
  min-width:0;
}
.v15-freelancer-btn{
  min-width:82px;
  min-height:32px;
  padding:0 7px;
  border:0;
  border-radius:7px;
  background:#FFF5E8;
  color:#9B6726;
  font-size:8px;
  font-weight:760;
  white-space:nowrap;
  cursor:pointer;
}
.v15-freelancer-btn:hover{
  background:#FDEDD7;
  color:#86561E;
}

.v15-freelancer-form{
  position:absolute;
  left:9px;
  right:9px;
  top:calc(100% - 3px);
  z-index:24;
  padding:8px;
  border:1px solid #E0E5EA;
  border-radius:10px;
  background:#FFF;
  box-shadow:0 12px 30px rgba(30,43,59,.12);
}
.v15-freelancer-form[hidden]{display:none}
.v15-freelancer-form-label{
  display:block;
  margin-bottom:6px;
  color:#7A8794;
  font-size:8px;
  font-weight:780;
}
.v15-freelancer-input{
  width:100%;
  height:34px;
  padding:0 9px;
  border:1px solid #DCE3EA;
  border-radius:7px;
  outline:none;
  color:#405063;
  font-size:9.5px;
  font-weight:650;
}
.v15-freelancer-input:focus{
  border-color:#AEBEF9;
  box-shadow:0 0 0 3px rgba(36,65,251,.07);
}
.v15-freelancer-form-actions{
  display:flex;
  justify-content:flex-end;
  gap:5px;
  margin-top:7px;
}
.v15-freelancer-form-actions button{
  min-height:30px;
  padding:0 8px;
  border:0;
  border-radius:7px;
  font-size:8.5px;
  font-weight:760;
}
.v15-freelancer-cancel{
  background:#F2F5F8;
  color:#687789;
}
.v15-freelancer-save{
  background:#2441FB;
  color:#FFF;
}

.v14-person-chip{
  padding-right:3px!important;
}
.v14-person-chip.is-freelancer{
  background:#FFF1DD!important;
  color:#8D6027!important;
}
.v15-person-kind{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:999px;
  background:#F8DEB8;
  color:#8C5B1E;
  font-size:6.5px;
  font-weight:900;
  letter-spacing:.03em;
}
.v15-chip-remove{
  width:20px;
  height:20px;
  display:inline-grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:999px;
  background:transparent;
  color:inherit;
  opacity:.58;
  font-size:12px;
  line-height:1;
  cursor:pointer;
}
.v15-chip-remove:hover{
  background:rgba(0,0,0,.06);
  opacity:1;
}

/* Counter clarifies many people / many roles */
.v15-team-summary{
  color:#7F8B97;
  font-size:8.5px;
  font-weight:700;
  white-space:nowrap;
}
.v15-team-summary strong{
  color:#435365;
}

/* If the desktop is too short, fall back to V14 scrolling instead of clipping. */
@media (min-width:1100px) and (max-height:699px){
  #modal-backdrop .modal-box{
    width:min(980px,calc(100vw - 32px))!important;
  }
}

/* Mobile freelancer picker = bottom sheet-like panel */
@media (max-width:767px){
  .v15-role-actions{
    grid-template-columns:1fr auto!important;
    gap:6px!important;
  }
  .v15-freelancer-btn{
    min-width:96px!important;
    min-height:42px!important;
    font-size:9px!important;
  }
  .v15-freelancer-form{
    position:fixed!important;
    left:12px!important;
    right:12px!important;
    top:auto!important;
    bottom:calc(76px + env(safe-area-inset-bottom))!important;
    padding:12px!important;
    border-radius:14px!important;
    box-shadow:0 18px 60px rgba(30,43,59,.18)!important;
  }
  .v15-freelancer-input{
    height:44px!important;
    font-size:10.5px!important;
  }
  .v15-freelancer-form-actions button{
    min-height:42px!important;
    font-size:9.5px!important;
  }
  .v14-person-chip{
    min-height:30px!important;
  }
  .v15-chip-remove{
    width:24px!important;
    height:24px!important;
  }
}


/* ===== schedule-form-compact-mobile-fab-v16 ===== */
/* =========================================================
   V16 — Compact Add/Edit form + Mobile Add Schedule FAB
   ========================================================= */

/* -------- Desktop: reduce total modal height without hurting readability -------- */
@media (min-width:1100px) and (min-height:700px){
  #modal-backdrop .modal-box{
    max-height:min(760px,calc(100dvh - 56px))!important;
  }

  #modal-backdrop .modal-header{
    min-height:54px!important;
    height:54px!important;
    padding:8px 15px!important;
  }

  #modal-backdrop #modal-title{
    font-size:17px!important;
  }

  .v14-modal-subtitle{
    margin-top:1px!important;
    font-size:8px!important;
  }

  #schedule-form{
    grid-template-columns:minmax(0,1.06fr) minmax(410px,.94fr)!important;
    column-gap:16px!important;
    padding:0 15px 60px!important;
  }

  #schedule-form .v14-form-section{
    padding:10px 0!important;
  }

  #schedule-form .v14-section-head{
    margin-bottom:7px!important;
  }

  #schedule-form .form-group > label{
    margin-bottom:4px!important;
    font-size:8px!important;
  }

  #schedule-form .form-control{
    min-height:34px!important;
    height:34px!important;
    padding:0 10px!important;
    font-size:10px!important;
  }

  #schedule-form textarea.form-control{
    min-height:72px!important;
    max-height:72px!important;
    padding:8px 10px!important;
  }

  #schedule-form .v15-core{
    grid-template-columns:
      minmax(240px,1.5fr)
      minmax(112px,.52fr)
      minmax(132px,.65fr)
      minmax(104px,.48fr)
      minmax(104px,.48fr)!important;
    column-gap:8px!important;
  }

  #schedule-form .v15-core .v14-section-head{
    margin-bottom:7px!important;
  }

  #schedule-form .v15-core .v14-conflict-slot{
    margin-top:5px!important;
  }

  #schedule-form .v15-brief .v14-brief-grid{
    gap:8px!important;
  }

  #schedule-form .v15-team{
    padding-left:16px!important;
  }

  #schedule-form .v15-team .v14-role-grid{
    gap:7px!important;
  }

  #schedule-form .v15-team .v14-role-picker{
    min-height:108px!important;
    padding:7px!important;
  }

  #schedule-form .v15-team .v14-selected-people{
    min-height:34px!important;
    max-height:38px!important;
    margin-bottom:5px!important;
    gap:4px!important;
  }

  #schedule-form .v14-person-chip{
    min-height:22px!important;
    font-size:8px!important;
  }

  #schedule-form .v14-person-avatar{
    width:16px!important;
    height:16px!important;
    font-size:6.5px!important;
  }

  #schedule-form .v14-role-add,
  #schedule-form .v15-freelancer-btn{
    min-height:29px!important;
    height:29px!important;
  }

  #schedule-form .v15-output{
    padding-top:8px!important;
  }

  #schedule-form .form-checkbox-label{
    min-height:30px!important;
    font-size:8.5px!important;
  }

  #schedule-form .form-actions{
    min-height:54px!important;
    height:54px!important;
    padding:8px 15px!important;
  }

  #schedule-form .form-actions .btn-secondary,
  #schedule-form .form-actions .btn-primary{
    height:36px!important;
    min-height:36px!important;
  }
}

/* -------- Mobile: persistent Add Schedule FAB -------- */
#mobile-add-schedule-fab{
  display:none;
}

@media (max-width:767px){
  #mobile-add-schedule-fab{
    position:fixed;
    right:14px;
    bottom:calc(70px + env(safe-area-inset-bottom));
    z-index:95;

    width:50px;
    height:50px;
    min-width:50px;
    min-height:50px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0;
    border:0;
    border-radius:16px;
    background:#2441FB;
    color:#FFFFFF;
    box-shadow:0 8px 24px rgba(36,65,251,.20);

    -webkit-tap-highlight-color:transparent;
    transition:
      transform 110ms cubic-bezier(.2,.8,.2,1),
      opacity 140ms ease,
      background-color 120ms ease;
  }

  #mobile-add-schedule-fab svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  #mobile-add-schedule-fab:active{
    transform:scale(.94);
  }

  /* Hide the top/header CTA on mobile; FAB is the single entry point */
  #btn-add-schedule{
    display:none!important;
  }

  /* Hide FAB whenever another full-screen interaction owns the screen */
  body.mf-mobile-detail-open #mobile-add-schedule-fab,
  body:has(#modal-backdrop.active) #mobile-add-schedule-fab{
    opacity:0;
    pointer-events:none;
    transform:translateY(8px) scale(.94);
  }

  /* Bottom nav and FAB should never collide */
  .dna-mobile-tabs{
    z-index:90!important;
  }

  /* Slightly reduce mobile form vertical density too */
  #schedule-form .v14-form-section{
    padding:13px 0!important;
  }

  #schedule-form .v14-section-head{
    margin-bottom:8px!important;
  }

  #schedule-form .v14-role-picker{
    padding:8px!important;
  }

  #schedule-form .v14-selected-people{
    margin-bottom:5px!important;
  }
}

/* Very small phones */
@media (max-width:360px){
  #mobile-add-schedule-fab{
    right:11px;
    bottom:calc(68px + env(safe-area-inset-bottom));
    width:48px;
    height:48px;
    min-width:48px;
    min-height:48px;
    border-radius:15px;
  }
}


/* ===== schedule-form-mobile-one-screen-v17 ===== */
/* =========================================================
   V17 — Mobile one-screen scheduling board
   Target: common phones ~390x844 / 430x932.
   Keep required scheduling controls visible with minimal scroll.
   ========================================================= */

@media (max-width:767px){
  /* Smaller full-screen header */
  #modal-backdrop .modal-header{
    min-height:48px!important;
    height:48px!important;
    padding:
      env(safe-area-inset-top)
      8px
      0!important;
  }

  #modal-backdrop #modal-title{
    font-size:15px!important;
    line-height:1.1!important;
  }

  #modal-backdrop .btn-close-modal{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
  }

  /* Board fills available height; no long-form spacing */
  #schedule-form{
    height:calc(100dvh - 48px - env(safe-area-inset-top))!important;
    max-height:none!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto minmax(0,1fr) auto auto!important;
    gap:0!important;
    overflow:hidden!important;
    padding:
      0
      10px
      calc(58px + env(safe-area-inset-bottom))!important;
  }

  #schedule-form .v14-form-section{
    min-width:0!important;
    padding:7px 0!important;
    border-bottom:1px solid #EDF1F5!important;
  }

  /* Hide descriptive helper copy on mobile */
  #schedule-form .v14-section-help,
  #schedule-form .v14-status-preview-note{
    display:none!important;
  }

  #schedule-form .v14-section-head{
    align-items:center!important;
    margin-bottom:5px!important;
  }

  #schedule-form .v14-section-title{
    gap:5px!important;
    font-size:7.5px!important;
    letter-spacing:.055em!important;
  }

  #schedule-form .v14-section-title svg{
    width:12px!important;
    height:12px!important;
  }

  /* Compact field labels / inputs */
  #schedule-form .form-group > label{
    margin:0 0 3px!important;
    font-size:7.5px!important;
    line-height:1!important;
  }

  #schedule-form .form-control{
    min-height:34px!important;
    height:34px!important;
    padding:0 8px!important;
    border-radius:8px!important;
    font-size:9.5px!important;
  }

  #schedule-form textarea.form-control{
    min-height:44px!important;
    height:44px!important;
    max-height:44px!important;
    padding:7px 8px!important;
    resize:none!important;
    line-height:1.3!important;
  }

  /* SECTION 1 — Core: location + category, then date/start/end */
  #schedule-form .v15-core{
    padding-top:6px!important;
  }

  #schedule-form .v15-core .v14-section-head{
    margin-bottom:5px!important;
  }

  #schedule-form .v15-core .v14-core-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1.45fr) minmax(105px,.55fr)!important;
    gap:6px!important;
  }

  #schedule-form .v15-core .v14-date-time-grid{
    display:grid!important;
    grid-template-columns:minmax(120px,.9fr) repeat(2,minmax(82px,.55fr))!important;
    gap:6px!important;
    margin-top:6px!important;
  }

  #schedule-form .v15-core .v14-date-time-grid .form-group:first-child{
    grid-column:auto!important;
  }

  #schedule-form .v15-core .v14-conflict-slot{
    margin-top:5px!important;
  }

  #schedule-form .v14-conflict-alert{
    padding:6px 8px!important;
    border-left-width:2px!important;
    font-size:8px!important;
    line-height:1.3!important;
  }

  #schedule-form .v14-conflict-alert strong{
    margin-bottom:1px!important;
    font-size:8.5px!important;
  }

  /* Lifecycle selector is compact and stays in the section head */
  #schedule-form .v14-status-preview{
    width:auto!important;
    padding:2px!important;
    border-radius:8px!important;
  }

  #schedule-form .v14-status-preview button{
    flex:none!important;
    min-height:24px!important;
    height:24px!important;
    padding:0 7px!important;
    border-radius:6px!important;
    font-size:7.5px!important;
  }

  /* SECTION 2 — Brief + note side-by-side */
  #schedule-form .v15-brief{
    padding-top:6px!important;
    padding-bottom:6px!important;
  }

  #schedule-form .v15-brief .v14-section-head{
    display:none!important;
  }

  #schedule-form .v15-brief .v14-brief-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1.35fr) minmax(110px,.65fr)!important;
    gap:6px!important;
  }

  /* SECTION 3 — Staffing board must remain visible */
  #schedule-form .v15-team{
    min-height:0!important;
    overflow:hidden!important;
    padding:6px 0!important;
  }

  #schedule-form .v15-team .v14-section-head{
    margin-bottom:5px!important;
  }

  #schedule-form .v15-team .v14-role-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
    gap:5px!important;
    height:100%!important;
    min-height:150px!important;
  }

  #schedule-form .v15-team .v14-role-picker{
    min-height:0!important;
    height:100%!important;
    padding:6px!important;
    border-radius:8px!important;
    overflow:visible!important;
  }

  #schedule-form .v15-team .v14-role-picker > label{
    margin-bottom:3px!important;
    gap:4px!important;
    font-size:7.5px!important;
  }

  #schedule-form .v15-team .v14-role-picker > label svg{
    width:11px!important;
    height:11px!important;
  }

  #schedule-form .v15-team .v14-selected-people{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:3px!important;
    min-height:24px!important;
    max-height:26px!important;
    margin-bottom:4px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
  }

  #schedule-form .v15-team .v14-selected-people::-webkit-scrollbar{
    display:none!important;
  }

  #schedule-form .v14-person-chip{
    flex:0 0 auto!important;
    min-height:22px!important;
    height:22px!important;
    padding:0 2px 0 3px!important;
    gap:3px!important;
    font-size:7.5px!important;
  }

  #schedule-form .v14-person-avatar{
    width:15px!important;
    height:15px!important;
    font-size:6px!important;
  }

  #schedule-form .v15-person-kind{
    min-width:13px!important;
    height:13px!important;
    padding:0 3px!important;
    font-size:5.5px!important;
  }

  #schedule-form .v15-chip-remove{
    width:18px!important;
    height:18px!important;
    font-size:10px!important;
  }

  #schedule-form .v14-role-empty{
    min-height:22px!important;
    font-size:7.5px!important;
  }

  #schedule-form .v15-role-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:4px!important;
  }

  #schedule-form .v14-role-add,
  #schedule-form .v15-freelancer-btn{
    min-height:28px!important;
    height:28px!important;
    padding:0 6px!important;
    border-radius:6px!important;
    font-size:7.5px!important;
  }

  #schedule-form .v15-freelancer-btn{
    min-width:68px!important;
  }

  #schedule-form .v15-team-summary{
    font-size:7.5px!important;
  }

  /* SECTION 4 — Outputs is a single compact row */
  #schedule-form .v15-output{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:center!important;
    gap:8px!important;
    padding:6px 0!important;
    border-bottom:0!important;
  }

  #schedule-form .v15-output .v14-section-head{
    margin:0!important;
  }

  #schedule-form .v15-output .v14-section-help{
    display:none!important;
  }

  #schedule-form .v15-output .v14-deliverable-wrap{
    min-width:0!important;
  }

  #schedule-form .v15-output .checkbox-group-form{
    justify-content:flex-end!important;
    gap:5px!important;
  }

  #schedule-form .v15-output .form-checkbox-label{
    min-height:28px!important;
    height:28px!important;
    padding:0 8px!important;
    font-size:7.5px!important;
  }

  #schedule-form .v15-output .checkbox-deliverable{
    width:12px!important;
    height:12px!important;
  }

  /* Footer uses less vertical space */
  #schedule-form .form-actions{
    min-height:54px!important;
    height:auto!important;
    padding:
      6px
      10px
      calc(6px + env(safe-area-inset-bottom))!important;
  }

  #schedule-form .form-actions .btn-secondary,
  #schedule-form .form-actions .btn-primary{
    height:40px!important;
    min-height:40px!important;
    border-radius:9px!important;
    font-size:9.5px!important;
  }

  /* Freelancer input stays a bottom sheet, but smaller */
  #schedule-form .v15-freelancer-form{
    left:10px!important;
    right:10px!important;
    bottom:calc(60px + env(safe-area-inset-bottom))!important;
    padding:9px!important;
    border-radius:12px!important;
  }

  #schedule-form .v15-freelancer-input{
    height:38px!important;
    font-size:9.5px!important;
  }

  #schedule-form .v15-freelancer-form-actions button{
    min-height:36px!important;
    font-size:8.5px!important;
  }

  /* Role option picker is shorter and denser */
  #schedule-form .v14-role-options{
    left:10px!important;
    right:10px!important;
    bottom:calc(60px + env(safe-area-inset-bottom))!important;
    max-height:38dvh!important;
    padding:6px!important;
    border-radius:12px!important;
  }

  #schedule-form .v14-role-option{
    min-height:38px!important;
    font-size:9px!important;
  }
}

/* Short phone fallback: preserve one-screen intent but allow tiny internal scroll
   rather than clipping controls. */
@media (max-width:767px) and (max-height:699px){
  #schedule-form{
    overflow-y:auto!important;
    display:block!important;
    padding-bottom:calc(58px + env(safe-area-inset-bottom))!important;
  }

  #schedule-form .v15-team .v14-role-grid{
    min-height:142px!important;
    height:auto!important;
  }
}


/* ===== schedule-form-compact-staffing-v18 ===== */
/* =========================================================
   V18 — Compact staffing matrix
   Remove viewport-stretch from Nhân sự section.
   ========================================================= */

@media (max-width:767px){
  /* Team no longer consumes all remaining viewport height. */
  #schedule-form{
    grid-template-rows:auto auto auto auto auto!important;
  }

  #schedule-form .v15-team{
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
    padding:6px 0!important;
  }

  #schedule-form .v15-team .v14-role-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:auto auto!important;
    gap:5px!important;
    height:auto!important;
    min-height:0!important;
  }

  #schedule-form .v15-team .v14-role-picker{
    height:auto!important;
    min-height:78px!important;
    max-height:none!important;
    padding:6px!important;
    overflow:visible!important;
  }

  #schedule-form .v15-team .v14-selected-people{
    min-height:20px!important;
    height:20px!important;
    max-height:20px!important;
    margin-bottom:4px!important;
  }

  #schedule-form .v15-team .v14-role-empty{
    min-height:20px!important;
    height:20px!important;
    font-size:7.5px!important;
  }

  #schedule-form .v15-team .v15-role-actions{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:4px!important;
  }

  #schedule-form .v15-team .v14-role-add,
  #schedule-form .v15-team .v15-freelancer-btn{
    height:27px!important;
    min-height:27px!important;
    padding:0 6px!important;
  }

  #schedule-form .v15-team .v15-freelancer-btn{
    min-width:66px!important;
  }

  /* Slightly flatter visual treatment: less "large card" feeling. */
  #schedule-form .v15-team .v14-role-picker{
    border-radius:8px!important;
    background:#FAFBFC!important;
    border-color:#E5EAF0!important;
  }

  #schedule-form .v15-team .v14-role-picker > label{
    margin-bottom:2px!important;
  }

  /* With team compacted, let board scroll only if an actual edge case needs it. */
  #schedule-form{
    overflow-y:auto!important;
    scrollbar-width:none!important;
  }
  #schedule-form::-webkit-scrollbar{
    display:none!important;
  }
}

/* Common phone widths can make each role even tighter. */
@media (max-width:430px){
  #schedule-form .v15-team .v14-role-picker{
    min-height:74px!important;
    padding:5px!important;
  }

  #schedule-form .v15-team .v14-role-add,
  #schedule-form .v15-team .v15-freelancer-btn{
    height:26px!important;
    min-height:26px!important;
    font-size:7.2px!important;
  }

  #schedule-form .v15-team .v15-freelancer-btn{
    min-width:62px!important;
  }
}


/* ===== schedule-form-mobile-final-v19 ===== */
/* =========================================================
   V19 — Final mobile Add/Edit form pass
   Fix grid stretch + continuous one-screen flow.
   ========================================================= */

@media (max-width:767px){
  /* Critical fix: do NOT stretch auto grid rows to fill viewport. */
  #schedule-form{
    display:block!important;
    height:calc(100dvh - 48px - env(safe-area-inset-top))!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:
      0
      10px
      calc(58px + env(safe-area-inset-bottom))!important;
    scrollbar-width:none!important;
    align-content:start!important;
  }
  #schedule-form::-webkit-scrollbar{
    display:none!important;
  }

  /* Sections flow continuously, all free space remains only after content. */
  #schedule-form .v14-form-section{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:7px 0!important;
    border-bottom:1px solid #EDF1F5!important;
  }

  #schedule-form .v15-core{
    padding-top:6px!important;
  }

  #schedule-form .v15-brief{
    padding:6px 0!important;
  }

  #schedule-form .v15-team{
    height:auto!important;
    min-height:0!important;
    padding:6px 0!important;
    overflow:visible!important;
  }

  #schedule-form .v15-output{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:center!important;
    gap:8px!important;
    height:auto!important;
    min-height:40px!important;
    padding:6px 0 8px!important;
    border-bottom:0!important;
  }

  /* Brief remains compact and close to the core fields. */
  #schedule-form .v15-brief .v14-brief-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1.35fr) minmax(112px,.65fr)!important;
    gap:6px!important;
  }

  #schedule-form .v15-brief textarea.form-control{
    min-height:44px!important;
    height:44px!important;
    max-height:44px!important;
  }

  /* Staffing stays compact 2x2, content-height only. */
  #schedule-form .v15-team .v14-role-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:auto auto!important;
    gap:5px!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
  }

  #schedule-form .v15-team .v14-role-picker{
    height:auto!important;
    min-height:74px!important;
    padding:5px!important;
    border-radius:8px!important;
    overflow:visible!important;
  }

  #schedule-form .v15-team .v14-selected-people{
    min-height:20px!important;
    height:20px!important;
    max-height:20px!important;
    margin-bottom:4px!important;
  }

  #schedule-form .v15-team .v14-role-empty{
    min-height:20px!important;
    height:20px!important;
  }

  #schedule-form .v15-team .v14-role-add,
  #schedule-form .v15-team .v15-freelancer-btn{
    min-height:26px!important;
    height:26px!important;
    padding:0 6px!important;
    font-size:7.3px!important;
  }

  #schedule-form .v15-team .v15-freelancer-btn{
    min-width:62px!important;
  }

  /* Outputs: remove the second redundant field label. */
  #schedule-form .v15-output .v14-deliverable-wrap > label,
  #schedule-form .v15-output .form-group > label{
    display:none!important;
  }

  #schedule-form .v15-output .v14-section-head{
    margin:0!important;
  }

  #schedule-form .v15-output .checkbox-group-form{
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:flex-end!important;
    gap:5px!important;
  }

  #schedule-form .v15-output .form-checkbox-label{
    min-height:28px!important;
    height:28px!important;
    padding:0 8px!important;
    font-size:7.5px!important;
    white-space:nowrap!important;
  }

  /* Sticky footer visually belongs to the form. */
  #schedule-form .form-actions{
    min-height:54px!important;
    padding:
      6px
      10px
      calc(6px + env(safe-area-inset-bottom))!important;
    border-top:1px solid #E8EDF3!important;
  }

  #schedule-form .form-actions .btn-secondary,
  #schedule-form .form-actions .btn-primary{
    height:40px!important;
    min-height:40px!important;
  }

  /* Preview artifact should never cover production controls. */
  body:has(#modal-backdrop.active)
    > div[style*="position:fixed"][style*="z-index:10000"]{
    display:none!important;
  }

  /* Top nav / FAB are behind a full-screen form. */
  body:has(#modal-backdrop.active) .dna-mobile-tabs,
  body:has(#modal-backdrop.active) #mobile-add-schedule-fab{
    pointer-events:none!important;
  }
}

/* Common 390–430px phones */
@media (min-width:381px) and (max-width:430px){
  #schedule-form{
    padding-left:11px!important;
    padding-right:11px!important;
  }
}

/* On very short devices we permit a small amount of natural scroll,
   but sections stay adjacent rather than being artificially stretched. */
@media (max-width:767px) and (max-height:699px){
  #schedule-form{
    overflow-y:auto!important;
  }
}
/* Permission guard must be last because Calendar layout rules use !important. */
body:not(.can-edit) #btn-add-schedule,
body:not(.can-edit) #mobile-add-schedule-fab{
  display:none!important;
}

/* The v13 drawer must win over its off-canvas base transform whenever open.
   Without this higher-specificity rule, some production layouts retain the
   closed transform even though JS has applied `.active`. */
body.view-calendar #details-drawer.drawer.active{
  transform:translate3d(0,0,0)!important;
}

/* On phones, the mode switch remains available.  The earlier mobile layout
   always hid the grid and always displayed the agenda, so both buttons
   produced the same result. */
@media (max-width:767px){
  /* Mobile calendar command bar: month navigation is the primary action;
     date reset and view selection form a deliberate secondary row. */
  body.view-calendar .calendar-toolbar{
    position:relative!important;
    display:block!important;
    min-height:84px!important;
    margin:0!important;
    padding:0!important;
  }
  body.view-calendar .calendar-nav-phase-a{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) 42px!important;
    grid-template-rows:42px 34px!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
  }
  body.view-calendar .calendar-nav-phase-a .btn-nav-cal{
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
    padding:0!important;
    border:1px solid #DCE5F0!important;
    border-radius:13px!important;
    background:#FFFFFF!important;
    color:#5E6E80!important;
    box-shadow:0 2px 7px rgba(21,40,69,.05)!important;
    font-size:30px!important;
    line-height:1!important;
  }
  body.view-calendar .calendar-nav-phase-a #btn-prev-month{grid-column:1;grid-row:1}
  body.view-calendar .calendar-nav-phase-a #btn-next-month{grid-column:3;grid-row:1}
  body.view-calendar .calendar-nav-phase-a .calendar-month-title{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:center!important;
    margin:0!important;
    color:#0D1D35!important;
    font-size:20px!important;
    font-weight:820!important;
    letter-spacing:-.045em!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  body.view-calendar .calendar-nav-phase-a .btn-cal-today{
    grid-column:1!important;
    grid-row:2!important;
    justify-self:start!important;
    width:auto!important;
    min-width:78px!important;
    height:34px!important;
    min-height:34px!important;
    margin:0!important;
    padding:0 11px!important;
    border:1px solid #DCE5F0!important;
    border-radius:10px!important;
    background:#F7F9FC!important;
    color:#536579!important;
    font-size:10px!important;
    font-weight:760!important;
    box-shadow:none!important;
  }
  body.view-calendar .calendar-toolbar-right{
    position:absolute!important;
    right:0!important;
    bottom:0!important;
    display:block!important;
    width:auto!important;
  }
  body.view-calendar .calendar-toolbar-right .cal-mode-toggle{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    width:166px!important;
    height:34px!important;
    padding:3px!important;
    border:1px solid #D9E3F2!important;
    border-radius:11px!important;
    background:#F2F5FA!important;
    box-shadow:none!important;
  }
  body.view-calendar .calendar-toolbar-right .cal-mode-btn{
    width:100%!important;
    height:26px!important;
    min-height:26px!important;
    padding:0!important;
    border-radius:8px!important;
    color:#718196!important;
    font-size:10px!important;
    font-weight:750!important;
  }
  body.view-calendar .calendar-toolbar-right .cal-mode-btn.active{
    background:#FFFFFF!important;
    color:#2454FF!important;
    box-shadow:0 1px 4px rgba(34,70,136,.11)!important;
  }

  body.view-calendar .calendar-container:not(.cal-list-mode) .calendar-weekdays,
  body.view-calendar .calendar-container:not(.cal-list-mode) #calendar-grid-cells{
    display:grid!important;
  }
  body.view-calendar .calendar-container:not(.cal-list-mode) #calendar-list{
    display:none!important;
  }

  /* Month mode is a scan-first surface: all six weeks fit above the mobile
     dock.  Markers remain tappable; full information is in the drawer or
     Danh sách. */
  body.view-calendar .calendar-container:not(.cal-list-mode) #calendar-grid-cells{
    grid-auto-rows:minmax(58px,auto)!important;
  }
  body.view-calendar .calendar-container:not(.cal-list-mode) .calendar-cell{
    min-height:58px!important;
    padding:4px!important;
  }
  body.view-calendar .calendar-container:not(.cal-list-mode) .calendar-events-container{
    gap:3px!important;
  }
  body.view-calendar .calendar-container:not(.cal-list-mode) .calendar-event-item,
  body.view-calendar .calendar-container:not(.cal-list-mode) .calendar-event-item.is-detail,
  body.view-calendar .calendar-container:not(.cal-list-mode) .calendar-event-item.is-compact{
    display:block!important;
    width:100%!important;
    min-height:5px!important;
    height:5px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:3px!important;
  }
  body.view-calendar .calendar-container:not(.cal-list-mode) .calendar-event-item > span{
    display:none!important;
  }
  body.view-calendar .calendar-container:not(.cal-list-mode) .calendar-event-item.du-an{
    background:#2454FF!important;
  }
  body.view-calendar .calendar-container:not(.cal-list-mode) .calendar-event-item.event{
    background:#E87516!important;
  }
  body.view-calendar .calendar-container:not(.cal-list-mode) .calendar-event-item.prewed{
    background:#7C3AED!important;
  }
  body.view-calendar .calendar-container:not(.cal-list-mode) .calendar-event-item.zeng{
    background:#078C68!important;
  }
  body.view-calendar .calendar-container:not(.cal-list-mode) .calendar-event-item.other{
    background:#64748B!important;
  }
  body.view-calendar .calendar-container:not(.cal-list-mode) .calendar-event-item.has-conflict{
    background:#DC3C2F!important;
  }
  body.view-calendar .calendar-container:not(.cal-list-mode) .calendar-today-label{
    display:none!important;
  }
  body.view-calendar .calendar-container:not(.cal-list-mode) .cal-more-events{
    min-height:16px!important;
    height:16px!important;
    padding:0 3px!important;
    font-size:7px!important;
  }
}