/* V220 - Company and Contract management visual redesign.
   UI-only, additive, scoped under .cc-v220 (templates/companies.html,
   company_edit.html, contracts.html, contract_detail.html and
   contract_edit.html). No routes, permissions, data, or workflow
   logic are touched here — only presentation of values already
   rendered by the templates. Visually consistent with the V216
   dashboard and V217 task detail redesigns. */

.cc-v220{
  --cc220-ink:#0f172a;
  --cc220-muted:#64748b;
  --cc220-line:#e6ebf2;
  --cc220-shadow:0 1px 2px rgba(15,23,42,.04), 0 18px 40px -24px rgba(15,23,42,.28);
}

/* -------------------------------------------------------------------
   Header row (list & form pages)
   ------------------------------------------------------------------- */
.cc-v220 .cc220-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  padding-bottom:20px;
  margin-bottom:22px;
  border-bottom:1px solid var(--cc220-line);
}

.cc-v220 .cc220-header-text h1{
  margin:0;
  font-size:28px;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--cc220-ink);
}

.cc-v220 .cc220-header-text .muted{
  margin-top:6px;
  font-size:14px;
}

.cc-v220 .cc220-title-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}

.cc-v220 .cc220-title-row h1{
  margin:0;
}

.cc-v220 .cc220-subtitle{
  margin-top:6px;
  font-size:14px;
}

.cc-v220 .cc220-status-badge{
  font-size:12.5px;
}

.cc-v220 .cc220-header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.cc-v220 .cc220-header-actions .btn{
  box-shadow:0 1px 2px rgba(15,23,42,.05);
}

.cc-v220 .cc220-primary-btn{
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  box-shadow:0 10px 22px -6px rgba(37,99,235,.45);
}

.cc-v220 .cc220-primary-btn:hover{
  background:linear-gradient(135deg,#1d4ed8,#1e40af);
}

@media(max-width:640px){
  .cc-v220 .cc220-header-actions{
    width:100%;
  }
  .cc-v220 .cc220-header-actions .btn,
  .cc-v220 .cc220-header-actions a{
    flex:1 1 auto;
    text-align:center;
  }
}

/* -------------------------------------------------------------------
   Panels
   ------------------------------------------------------------------- */
.cc-v220 .cc220-panel{
  border-radius:18px;
  box-shadow:var(--cc220-shadow);
}

.cc-v220 .cc220-panel-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px;
  font-size:16px;
}

.cc-v220 .cc220-panel-title::before{
  content:"";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  min-width:30px;
  border-radius:9px;
  font-size:14px;
  background:#eef4ff;
}

.cc-v220 .cc220-icon-add::before{ content:"➕"; }
.cc-v220 .cc220-icon-search::before{ content:"🔎"; }
.cc-v220 .cc220-icon-list::before{ content:"📋"; }
.cc-v220 .cc220-icon-edit::before{ content:"✎"; }
.cc-v220 .cc220-icon-info::before{ content:"🏢"; }
.cc-v220 .cc220-icon-building::before{ content:"🏢"; }
.cc-v220 .cc220-icon-drug::before{ content:"🧴"; background:#eefaf0; }
.cc-v220 .cc220-icon-count::before{ content:"🔢"; background:#fef6f0; }
.cc-v220 .cc220-icon-date::before{ content:"🗓️"; background:#eefaf0; }

/* -------------------------------------------------------------------
   Form fields / sections
   ------------------------------------------------------------------- */
.cc-v220 .cc220-field{
  margin:0;
}

.cc-v220 .cc220-form-card .form-row{
  margin-bottom:14px;
}

.cc-v220 .cc220-form-section{
  margin-bottom:22px;
  padding-bottom:18px;
  border-bottom:1px solid #f1f5f9;
}

.cc-v220 .cc220-form-section:last-of-type{
  margin-bottom:18px;
  padding-bottom:0;
  border-bottom:0;
}

.cc-v220 .cc220-contract-form .combo-field{
  margin:0;
}

/* -------------------------------------------------------------------
   Table
   ------------------------------------------------------------------- */
.cc-v220 .cc220-table-wrap{
  overflow-x:auto;
}

.cc-v220 .cc220-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

.cc-v220 .cc220-table th{
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#475569;
  text-align:left;
  background:#f8fafc;
  padding:12px;
  border-bottom:1px solid var(--cc220-line);
  white-space:nowrap;
}

.cc-v220 .cc220-table td{
  padding:12px;
  border-bottom:1px solid var(--cc220-line);
  vertical-align:middle;
}

.cc-v220 .cc220-table tbody tr:last-child td{
  border-bottom:0;
}

.cc-v220 .cc220-table tbody tr:hover td{
  background:#fbfdff;
}

/* Company code chip */
.cc-v220 .cc220-code-chip{
  display:inline-flex;
  padding:4px 9px;
  border-radius:8px;
  background:#eef4ff;
  color:#1d4ed8;
  font-weight:800;
  font-size:12.5px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* Row actions */
.cc-v220 .cc220-row-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.cc-v220 .cc220-row-actions form{
  margin:0;
  display:inline-flex;
}

/* -------------------------------------------------------------------
   Empty states
   ------------------------------------------------------------------- */
.cc-v220 .cc220-empty-cell{
  padding:0!important;
  border-bottom:0!important;
}

.cc-v220 .cc220-empty{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px dashed #d7e0ee;
  border-radius:14px;
  padding:18px;
  margin:6px 0;
  background:#fbfdff;
  font-size:13.5px;
  color:var(--cc220-muted);
}

.cc-v220 .cc220-empty-icon{
  font-size:18px;
}

/* Similar-company warning box */
.cc-v220 .cc220-warn-box{
  border-radius:14px;
}

/* -------------------------------------------------------------------
   Plan chips (contract detail: PHI / Hẹp / Rộng)
   ------------------------------------------------------------------- */
.cc-v220 .cc220-plan-chips{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:22px;
}

.cc-v220 .cc220-chip{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  padding:12px 18px;
  border-radius:14px;
  background:#ffffff;
  border:1px solid var(--cc220-line);
  border-top:3px solid #94a3b8;
  box-shadow:var(--cc220-shadow);
}

.cc-v220 .cc220-chip b{
  font-size:22px;
  font-weight:800;
  color:var(--cc220-ink);
  font-variant-numeric:tabular-nums;
}

.cc-v220 .cc220-chip small{
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--cc220-muted);
}

.cc-v220 .cc220-chip-phi{ border-top-color:#2563eb; }
.cc-v220 .cc220-chip-narrow{ border-top-color:#d97706; }
.cc-v220 .cc220-chip-wide{ border-top-color:#16a34a; }

@media(max-width:640px){
  .cc-v220 .cc220-chip{
    flex:1 1 140px;
  }
}

/* -------------------------------------------------------------------
   Consistent section rhythm
   ------------------------------------------------------------------- */
.cc-v220 > .grid-2,
.cc-v220 > .card,
.cc-v220 > .quick-action-card{
  margin-bottom:22px;
}

.cc-v220 > .grid-2:last-child,
.cc-v220 > .card:last-child,
.cc-v220 > .quick-action-card:last-child{
  margin-bottom:0;
}

@media(max-width:640px){
  .cc-v220 .cc220-panel{
    border-radius:16px;
  }
}

/* -------------------------------------------------------------------
   Quick-action card (Company page): icon + title/description + a
   single toggle button that opens/closes the existing create form.
   Shares chrome (radius/border/shadow) with .cc220-panel via the
   global card rules in enterprise-saas-v221.css; only the internal
   row layout is defined here so it lines up 1:1 with the Contract
   page's .saas-create-summary row below.
   ------------------------------------------------------------------- */
.cc-v220 .cc220-quick-action{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 24px;
}

.cc-v220 .cc220-quick-action-info{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.cc-v220 .cc220-quick-action-icon{
  width:40px;
  height:40px;
  flex:0 0 40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#eef2ff;
  color:#3157d5;
  font-size:20px;
}

.cc-v220 .cc220-quick-action-info b{
  display:block;
  color:#111827;
  font-size:16px;
  font-weight:800;
}

.cc-v220 .cc220-quick-action-info small{
  display:block;
  margin-top:3px;
  color:#64748b;
  font-size:13px;
}

.cc-v220 .cc220-quick-action .btn{
  flex:0 0 auto;
}

@media(max-width:640px){
  .cc-v220 .cc220-quick-action{
    flex-direction:column;
    align-items:stretch;
  }
  .cc-v220 .cc220-quick-action .btn{
    width:100%;
    text-align:center;
  }
}

/* =====================================================================
   Contracts list page (contracts.html already ships a dedicated
   "saas-" design system synced with the Users page). Harmonize its
   radius/shadow language with V216/V217/V220 without touching its
   structure or JS behavior.
   ===================================================================== */
.cc-v220.cc-v220-contracts .saas-create-box,
.cc-v220.cc-v220-contracts .saas-table-card{
  border-radius:18px;
  box-shadow:var(--cc220-shadow);
}

.cc-v220.cc-v220-contracts .saas-page-header h1{
  letter-spacing:-.03em;
}

.cc-v220.cc-v220-contracts .contract-status-pill{
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}

/* Align the Contract page's quick-action row (icon + title/description
   + toggle button) with the Company page's .cc220-quick-action so both
   screens present the exact same height/padding/icon size. */
.cc-v220.cc-v220-contracts .saas-create-summary{
  padding:20px 24px;
  gap:16px;
}

.cc-v220.cc-v220-contracts .saas-plus-icon{
  width:40px;
  height:40px;
  flex:0 0 40px;
  font-size:20px;
  font-weight:700;
  background:#eef2ff;
  color:#3157d5;
}

.cc-v220.cc-v220-contracts .saas-create-title b{
  font-size:16px;
}

.cc-v220.cc-v220-contracts .saas-create-title small{
  font-size:13px;
}

.cc-v220.cc-v220-contracts .saas-contract-table tbody tr:hover td{
  background:#f8fbff;
}