* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #f5f7fb;
    color: #1f2937;
}
.topbar {
    background: white;
    border-bottom: 1px solid #e5e7eb;
    min-height: 64px;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.brand { font-weight: 800; letter-spacing: .5px; }
nav { display:flex; gap: 14px; align-items:center; }
a { color:#2563eb; text-decoration:none; }
.container { max-width: 1320px; margin: 28px auto; padding: 0 20px; }
h1 { margin-top: 0; }
.btn-primary, button {
    background:#2563eb;
    color:#fff;
    border:0;
    padding:10px 16px;
    border-radius:8px;
    cursor:pointer;
}
.cards {
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:14px;
    margin-bottom:20px;
}
.card, .form-card, .detail-card {
    background:white;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:18px;
}
.card b { display:block; font-size:28px; margin-bottom:5px; }
.card span, .muted { color:#6b7280; }
.filter {
    background:white;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:14px;
    display:flex;
    gap:10px;
    margin-bottom:16px;
}
input, select, textarea {
    width:100%;
    padding:10px 12px;
    border:1px solid #d1d5db;
    border-radius:8px;
    background:white;
}
.filter input { flex:1; }
.filter select { width:220px; }
.table-wrap { overflow:auto; background:white; border:1px solid #e5e7eb; border-radius:12px; }
table { border-collapse:collapse; width:100%; min-width:1050px; }
th, td { padding:12px; border-bottom:1px solid #eef2f7; text-align:left; font-size:14px; }
th { background:#f8fafc; }
.empty { text-align:center; padding:40px; color:#6b7280; }
.grid {
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:16px;
}
label { display:block; font-weight:600; font-size:14px; }
label input, label select, label textarea { margin-top:7px; font-weight:400; }
.form-card > label { margin-top:16px; }
.actions { display:flex; align-items:center; gap:16px; margin-top:20px; }
.detail-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.detail-card {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}
.detail-card div span { display:block; color:#6b7280; font-size:13px; margin-bottom:5px; }
.detail-card .full { grid-column:1/-1; }

@media (max-width: 800px) {
    .cards { grid-template-columns:repeat(2,1fr); }
    .grid, .detail-card { grid-template-columns:1fr; }
    .filter { flex-direction:column; }
    .filter select { width:100%; }
    .topbar { padding:12px 16px; gap:10px; }
}

.section-title{
    margin:24px 0 12px;
    padding-bottom:8px;
    border-bottom:1px solid #e5e7eb;
    font-size:18px;
    font-weight:800;
}
.span2{grid-column:1/-1;}

.version{
    font-size:11px;
    font-weight:700;
    background:#eef2ff;
    padding:3px 6px;
    border-radius:6px;
    margin-left:4px;
}
.page-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.subcards{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin:-6px 0 18px;
}
.subcards span{
    background:white;
    border:1px solid #e5e7eb;
    border-radius:999px;
    padding:7px 12px;
    font-size:13px;
}
.warning-card{border-left:4px solid #d97706;}
.expired-card{border-left:4px solid #dc2626;}
.head-actions{display:flex;gap:12px;align-items:center;}
.person-ref{margin-bottom:18px;}
.status-pill{
    display:inline-block;
    padding:5px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
}
.status-active{background:#dcfce7;color:#166534;}
.status-warning{background:#fef3c7;color:#92400e;}
.status-expired{background:#fee2e2;color:#991b1b;}
.status-neutral{background:#e5e7eb;color:#374151;}
.days-left{font-size:11px;color:#6b7280;margin-top:4px;}
.row-actions{display:flex;gap:10px;align-items:center;}
.row-actions form{margin:0;}
.link-danger{
    background:none;
    color:#dc2626;
    padding:0;
    border:0;
    font-size:14px;
}
.empty-panel{
    background:white;
    border:1px dashed #d1d5db;
    border-radius:12px;
    padding:25px;
    color:#6b7280;
}
.contract-table{min-width:900px;}

@media (max-width:800px){
    .head-actions{flex-direction:column;align-items:flex-end;}
    .page-title{align-items:flex-start;}
}

.nav-form{margin:0;display:inline;}
.nav-link-btn{
    background:none;
    color:#2563eb;
    padding:0;
    border:0;
    font-size:inherit;
}
.section-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.document-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}
.document-card{
    display:flex;
    gap:14px;
    background:white;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:14px;
}
.doc-icon{
    min-width:56px;
    height:56px;
    border-radius:10px;
    background:#f1f5f9;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:800;
}
.doc-body{min-width:0;flex:1;}
.small{font-size:12px;margin-top:4px;overflow-wrap:anywhere;}
.doc-notes{font-size:13px;margin-top:8px;}
.doc-actions{display:flex;gap:12px;align-items:center;margin-top:10px;}
.doc-actions form{margin:0;}
.help{font-size:12px;color:#6b7280;margin-top:6px;font-weight:400;}
@media (max-width:800px){
    .document-grid{grid-template-columns:1fr;}
}

.excel-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    margin-top:20px;
}
.tool-card,.info-panel{
    background:white;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:20px;
}
.tool-card h2{margin-top:0;font-size:18px;}
.tool-card p{color:#6b7280;min-height:42px;}
.tool-card form{display:flex;flex-direction:column;gap:12px;}
.info-panel{margin-top:16px;line-height:1.7;}
.result-cards{grid-template-columns:repeat(3,1fr);}
.error-list{margin:0;padding-left:22px;line-height:1.7;}
@media (max-width:900px){
    .excel-grid{grid-template-columns:1fr;}
}

.user-chip{
    font-size:12px;
    padding:6px 9px;
    border-radius:999px;
    background:#f1f5f9;
    color:#475569;
}
.login-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.login-card{
    width:min(430px,100%);
    background:white;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:28px;
    box-shadow:0 15px 40px rgba(15,23,42,.08);
}
.login-card .big{font-size:18px;margin-bottom:24px;}
.login-form{display:flex;flex-direction:column;gap:16px;}
.login-error{
    background:#fee2e2;
    color:#991b1b;
    padding:10px 12px;
    border-radius:8px;
    margin-bottom:15px;
}
.default-account{
    margin-top:20px;
    padding:12px;
    border-radius:10px;
    background:#f8fafc;
    color:#64748b;
    font-size:12px;
    line-height:1.6;
}
.user-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.user-actions form{
    display:flex;
    gap:6px;
    margin:0;
}
.user-actions input{width:140px;}
.audit-wrap{margin-top:18px;}

.placeholder-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-top:14px;
}
.placeholder-grid code{
    display:block;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:7px;
    padding:8px;
    font-size:12px;
    overflow-wrap:anywhere;
}
.word-help{margin-top:18px;}
.word-alert{margin-top:18px;}
@media (max-width:900px){
    .placeholder-grid{grid-template-columns:1fr;}
}

.template-library{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-top:20px;
}
.template-card{display:flex;flex-direction:column;gap:10px;}
.template-card h2{margin:0;font-size:17px;}
.template-group{
    font-size:11px;font-weight:800;text-transform:uppercase;
    color:#64748b;letter-spacing:.5px;
}
.template-state{display:flex;gap:6px;flex-wrap:wrap;}
.contract-doc-row td{background:#f8fafc;padding-top:8px;padding-bottom:8px;}
.contract-files{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;align-items:center;}
@media(max-width:1000px){.template-library{grid-template-columns:1fr;}}

.calendar-panel{display:grid;grid-template-columns:1.4fr .9fr;gap:16px;}
.calendar-events,.calendar-form{
    background:white;border:1px solid #e5e7eb;border-radius:12px;padding:14px;
}
.calendar-item{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid #eef2f7;}
.calendar-item:last-child{border-bottom:0;}
.calendar-date{min-width:90px;font-weight:800;color:#2563eb;}
.calendar-grow{flex:1;}
.auto-event{background:#f8fafc;padding-left:8px;padding-right:8px;border-radius:8px;}
.calendar-form{display:flex;flex-direction:column;gap:10px;height:max-content;}
@media(max-width:900px){.calendar-panel{grid-template-columns:1fr;}}


/* V1.9 - giao diện linh hoạt hơn nhưng vẫn phù hợp web nội bộ */
body{
    background:
      radial-gradient(circle at top right, rgba(37,99,235,.07), transparent 24%),
      #f5f7fb;
}
.topbar{
    position:sticky;
    top:0;
    z-index:20;
    box-shadow:0 1px 10px rgba(15,23,42,.06);
}
.brand{
    display:flex;
    align-items:center;
    gap:8px;
}
.cards .card{
    transition:transform .18s ease, box-shadow .18s ease;
}
.cards .card:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(15,23,42,.07);
}
.filter-pro{
    align-items:center;
    box-shadow:0 4px 14px rgba(15,23,42,.04);
}
.filter-pro .search-box{flex:1;min-width:260px;}
.filter-pro select{width:210px;}
.clear-filter{
    white-space:nowrap;
    padding:9px 4px;
}
.quick-filters{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:-6px 0 16px;
}
.quick-filters a{
    padding:7px 11px;
    border-radius:999px;
    background:#fff;
    border:1px solid #dbe4f0;
    font-size:13px;
    color:#334155;
    transition:.15s ease;
}
.quick-filters a:hover{
    border-color:#2563eb;
    color:#2563eb;
    transform:translateY(-1px);
}
.excel-form-buttons{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-top:12px;
}
.excel-form-buttons a{
    background:#eff6ff;
    border:1px solid #bfdbfe;
    color:#1d4ed8;
    border-radius:9px;
    padding:10px 12px;
    font-weight:700;
    text-align:center;
}
.excel-form-buttons a:hover{background:#dbeafe;}
@media(max-width:900px){
    .filter-pro{align-items:stretch;}
    .filter-pro select{width:100%;}
    .excel-form-buttons{grid-template-columns:1fr;}
}
\n.batch-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid #dbe4f0;border-radius:12px;padding:12px 14px;margin-bottom:10px;box-shadow:0 3px 12px rgba(15,23,42,.04)}\n.batch-select-all{display:flex;align-items:center;gap:7px;font-weight:700;margin:0}.batch-select-all input,.person-select{width:auto;margin:0}.batch-toolbar button{margin-left:auto}.select-col{width:62px;text-align:center}\n

/* COMPLETE: nội dung chữ màu đen, màu chỉ dùng cho nút/trạng thái */
body, h1, h2, h3, p, div, span, label, th, td, b, strong {
    color:#000;
}
.muted, .small, .help, .days-left, .doc-notes {
    color:#000 !important;
}
a {
    color:#000;
}
nav a, .topbar a {
    color:#000;
}
.btn-primary, button, a.btn-primary {
    color:#fff !important;
}
.status-pill {
    color:inherit;
}
.user-chip {
    color:#000 !important;
}
.version {
    color:#000 !important;
}
.record-extra {
    background:#fafafa;
    color:#000;
}
.complete-six {
    grid-template-columns:repeat(3,minmax(0,1fr));
    margin-bottom:18px;
}
.complete-six a {
    color:#000;
}
.import-doc-card {
    margin-top:18px;
}
@media(max-width:900px){
    .complete-six{grid-template-columns:1fr;}
}


/* ============================================================
   HOSOWEB COMPLETE 2.1 - UI REFRESH
   ============================================================ */
:root{
    --bg:#f6f8fc;
    --surface:#ffffff;
    --surface-2:#f8fafc;
    --line:#e7eaf0;
    --line-strong:#d8dee8;
    --text:#0f172a;
    --muted:#667085;
    --blue:#2563eb;
    --blue-dark:#1d4ed8;
    --blue-soft:#eff6ff;
    --warning:#f59e0b;
    --danger:#ef4444;
    --radius:14px;
    --shadow:0 8px 30px rgba(15,23,42,.055);
}

html{scroll-behavior:smooth;}
body{
    margin:0;
    font-family:Inter, "Segoe UI", Arial, Helvetica, sans-serif;
    background:var(--bg);
    color:#000;
    line-height:1.45;
}
button,input,select,textarea{font:inherit;}
a{color:#000;text-decoration:none;}
h1,h2,h3,p{color:#000;}
h1{font-size:30px;line-height:1.18;letter-spacing:-.6px;margin:0;}
h2{font-size:18px;margin:0;}
p{margin:0;}

.app-shell{min-height:100vh;display:flex;}
.sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:246px;
    background:#fff;
    border-right:1px solid var(--line);
    padding:18px 14px;
    display:flex;
    flex-direction:column;
    z-index:50;
}
.sidebar-head{
    display:flex;
    align-items:center;
    gap:11px;
    padding:4px 8px 20px;
}
.brand-mark{
    width:42px;height:42px;border-radius:12px;
    display:grid;place-items:center;
    background:#111827;color:#fff;
    font-size:14px;font-weight:900;letter-spacing:.5px;
}
.brand-title{font-size:14px;font-weight:900;letter-spacing:.3px;color:#000;}
.brand-subtitle{font-size:11px;color:#667085;margin-top:2px;}
.sidebar-section-label{
    font-size:10px;font-weight:800;letter-spacing:1.1px;
    color:#98a2b3;
    padding:14px 12px 7px;
}
.sidebar-nav{display:flex;flex-direction:column;gap:3px;}
.sidebar-nav a,.sidebar-action{
    min-height:42px;
    display:flex;align-items:center;gap:10px;
    padding:9px 11px;
    border-radius:10px;
    color:#111827;
    font-size:13px;font-weight:650;
    background:transparent;
    border:0;
    width:100%;
    text-align:left;
}
.sidebar-nav a:hover,.sidebar-action:hover{background:#f3f6fb;}
.sidebar-nav a.active{
    background:#edf3ff;
    color:#000;
    box-shadow:inset 3px 0 0 var(--blue);
}
.nav-icon{
    width:22px;height:22px;
    display:grid;place-items:center;
    font-size:16px;
    color:#344054;
}
.sidebar-bottom{
    margin-top:auto;
    padding-top:14px;
    border-top:1px solid var(--line);
}
.sidebar-backup{margin:0 0 10px;}
.account-card{
    display:flex;align-items:center;gap:9px;
    padding:10px 8px;
    border-radius:12px;
    background:#f8fafc;
}
.avatar{
    width:34px;height:34px;border-radius:10px;
    display:grid;place-items:center;
    background:#e2e8f0;color:#111827;
    font-weight:900;font-size:13px;
}
.account-meta{min-width:0;flex:1;}
.account-meta b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.account-meta span{display:block;font-size:10px;color:#667085;text-transform:capitalize;margin-top:1px;}
.logout-icon{font-size:18px;color:#667085;padding:4px;}

.app-content{
    margin-left:246px;
    min-width:0;
    width:calc(100% - 246px);
}
.content-topbar{
    height:64px;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 28px;
    position:sticky;top:0;z-index:30;
}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:12px;color:#667085;}
.breadcrumb b{color:#111827;}
.breadcrumb .dot{color:#cbd5e1;}
.top-actions{display:flex;gap:8px;}

.container{
    max-width:1500px;
    margin:0 auto;
    padding:28px 30px 48px;
}
.mobile-topbar{display:none;}
.sidebar-overlay{display:none;}

.hero-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
    margin-bottom:20px;
}
.eyebrow{
    font-size:10px;
    letter-spacing:1.5px;
    font-weight:900;
    color:#667085;
    margin-bottom:7px;
}
.page-desc{
    color:#667085;
    font-size:13px;
    margin-top:7px;
}
.hero-actions{display:flex;gap:9px;align-items:center;}

.btn-primary,.btn-secondary,.btn-ghost,button{
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:9px;
    padding:9px 14px;
    min-height:38px;
    font-size:13px;
    font-weight:750;
    cursor:pointer;
    transition:.15s ease;
}
.btn-primary,button{
    border:1px solid var(--blue);
    background:var(--blue);
    color:#fff !important;
}
.btn-primary:hover,button:hover{
    background:var(--blue-dark);
    border-color:var(--blue-dark);
    transform:translateY(-1px);
}
.btn-primary.compact{min-height:34px;padding:7px 12px;}
.btn-secondary{
    background:#fff;
    border:1px solid var(--line-strong);
    color:#111827;
}
.btn-secondary:hover{border-color:#aeb8c7;background:#f8fafc;}
.btn-ghost{
    background:transparent;
    border:1px solid transparent;
    color:#475467;
}
.btn-ghost:hover{background:#f3f4f6;}

.dashboard-cards{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin-bottom:12px;
}
.metric-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:17px;
    display:flex;
    align-items:center;
    gap:13px;
    box-shadow:0 2px 8px rgba(15,23,42,.025);
}
.metric-icon{
    flex:0 0 42px;
    width:42px;height:42px;border-radius:11px;
    display:grid;place-items:center;
    background:#f1f5f9;
    color:#111827;
    font-size:11px;font-weight:900;
}
.metric-warning .metric-icon{background:#fffbeb;}
.metric-danger .metric-icon{background:#fef2f2;}
.metric-body{display:flex;flex-direction:column;gap:2px;}
.metric-body span{font-size:12px;color:#667085;}
.metric-body b{font-size:25px;line-height:1.1;color:#000;}

.mini-stats{
    display:flex;gap:7px;flex-wrap:wrap;
    margin-bottom:18px;
}
.mini-stats>a,.mini-stats>span{
    display:flex;align-items:center;gap:8px;
    padding:7px 10px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#fff;
    font-size:11px;
    color:#475467;
}
.mini-stats b{font-size:12px;color:#000;}

.panel,.form-card,.detail-card,.tool-card,.info-panel,.calendar-events,.calendar-form{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:0 2px 10px rgba(15,23,42,.025);
}
.panel{overflow:hidden;}
.panel-head{
    padding:18px 20px 12px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}
.panel-head h2{font-size:17px;}
.panel-head p{font-size:12px;color:#667085;margin-top:4px;}
.record-count{
    padding:5px 9px;
    background:#f8fafc;
    border:1px solid var(--line);
    border-radius:999px;
    color:#475467;
    font-size:11px;
    white-space:nowrap;
}

.filter-modern{
    display:grid;
    grid-template-columns:minmax(260px,1fr) 190px 210px auto auto;
    gap:8px;
    padding:8px 20px 12px;
}
.search-field{position:relative;}
.search-symbol{
    position:absolute;left:11px;top:50%;transform:translateY(-50%);
    color:#98a2b3;font-size:18px;
}
.search-field input{padding-left:35px;}
input,select,textarea{
    width:100%;
    min-height:38px;
    padding:8px 11px;
    background:#fff;
    color:#000;
    border:1px solid var(--line-strong);
    border-radius:9px;
    outline:none;
    transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
    border-color:#93b4ff;
    box-shadow:0 0 0 3px rgba(37,99,235,.08);
}
textarea{min-height:90px;resize:vertical;}

.modern-chips{
    padding:0 20px 13px;
    margin:0;
    display:flex;gap:6px;align-items:center;flex-wrap:wrap;
}
.modern-chips .chip-label{font-size:11px;color:#98a2b3;margin-right:3px;}
.modern-chips a{
    padding:5px 9px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#fff;
    font-size:11px;
    color:#344054;
}
.modern-chips a:hover{background:#f8fafc;border-color:#cfd6e0;}

.modern-batch{
    margin:0 20px 10px;
    padding:9px 11px;
    display:flex;align-items:center;gap:12px;
    border:1px dashed #cfd7e3;
    border-radius:10px;
    background:#fbfcfe;
    font-size:12px;
}
.modern-batch label{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:650;}
.modern-batch input{width:15px;min-height:auto;}
.modern-batch #selected-count{color:#667085;flex:1;}

.table-wrap.modern-table{
    border:0;
    border-radius:0;
    overflow:auto;
    box-shadow:none;
}
.modern-table table{min-width:1080px;}
.modern-table th{
    position:sticky;top:0;
    background:#f8fafc;
    font-size:10px;
    color:#667085;
    text-transform:uppercase;
    letter-spacing:.45px;
    padding:10px 12px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}
.modern-table td{
    padding:11px 12px;
    font-size:12.5px;
    border-bottom:1px solid #f0f2f5;
    color:#111827;
}
.modern-table tbody tr{transition:background .12s;}
.modern-table tbody tr:hover{background:#fafcff;}
.person-name{font-weight:800;color:#111827;}
.person-name:hover{text-decoration:underline;}
.person-sub{font-size:10px;color:#98a2b3;margin-top:2px;}
.type-badge{
    display:inline-block;
    padding:4px 7px;
    border-radius:7px;
    background:#f2f4f7;
    font-size:10px;
    font-weight:800;
    color:#344054;
}
.soft-status{
    display:inline-block;
    padding:4px 7px;
    border-radius:999px;
    background:#ecfdf3;
    border:1px solid #d1fadf;
    font-size:10px;
    font-weight:700;
    color:#166534;
}
.contract-count{
    width:25px;height:25px;
    display:grid;place-items:center;
    border-radius:7px;
    background:#f1f5f9;
    font-weight:800;
}
.row-view{font-size:11px;font-weight:750;color:#344054;white-space:nowrap;}
.row-view:hover{text-decoration:underline;}
.mono-cell{font-family:"Segoe UI",Arial,sans-serif;white-space:nowrap;}
.stt{color:#98a2b3;}
.row-checkbox{width:15px;min-height:auto;}

.empty-state{
    min-height:170px;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:6px;
}
.empty-state .empty-icon{
    width:46px;height:46px;border-radius:13px;
    display:grid;place-items:center;
    background:#f1f5f9;
    font-weight:900;
    color:#667085;
}
.empty-state b{font-size:14px;}
.empty-state span{font-size:12px;color:#98a2b3;}

.section-title{
    font-size:15px;
    margin:24px 0 10px;
    padding:0 0 8px;
    border-bottom:1px solid var(--line);
}
.form-card,.detail-card{padding:18px;}
.detail-head{gap:14px;}
.detail-card{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}
.detail-card div{
    padding:10px;
    background:#fafbfc;
    border-radius:9px;
    border:1px solid #f0f2f5;
}
.detail-card div span{font-size:10px;color:#667085;margin-bottom:4px;}
.table-wrap{
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
}
th{background:#f8fafc;color:#475467;font-size:11px;}
td{color:#111827;}
.empty-panel{
    border:1px dashed #d4dae4;
    background:#fbfcfe;
    color:#667085;
    padding:20px;
}

.login-page{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:24px;
    background:#f5f7fb;
}
.login-shell{
    width:min(880px,100%);
    display:grid;
    grid-template-columns:1fr 1fr;
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 24px 70px rgba(15,23,42,.10);
}
.login-brand-panel{
    background:#111827;
    color:#fff;
    padding:44px 38px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.login-brand-panel h1{color:#fff;font-size:32px;margin:14px 0 8px;}
.login-brand-panel p{color:#cbd5e1;font-size:13px;line-height:1.7;margin-bottom:24px;}
.login-logo{
    width:50px;height:50px;border-radius:14px;
    display:grid;place-items:center;
    background:#fff;color:#111827;
    font-weight:900;
}
.login-feature{color:#e2e8f0;font-size:12px;margin:6px 0;}
.login-card{
    width:auto;
    border:0;
    border-radius:0;
    box-shadow:none;
    padding:44px 38px;
}
.login-kicker{font-size:10px;font-weight:900;letter-spacing:1.5px;color:#98a2b3;}
.login-card h2{font-size:25px;margin:8px 0 4px;}
.login-desc{font-size:12px;color:#667085;margin-bottom:22px;}
.login-form label{font-size:12px;color:#344054;}
.login-form input{margin-top:6px;}
.login-submit{width:100%;margin-top:4px;}
.login-error{font-size:12px;}

@media(max-width:1100px){
    .dashboard-cards{grid-template-columns:repeat(2,1fr);}
    .filter-modern{grid-template-columns:1fr 1fr;}
    .search-field{grid-column:1/-1;}
}
@media(max-width:850px){
    .mobile-topbar{
        height:56px;
        display:flex;align-items:center;justify-content:space-between;
        padding:0 14px;
        background:#fff;
        border-bottom:1px solid var(--line);
        position:sticky;top:0;z-index:60;
    }
    .menu-toggle{
        width:36px;height:36px;min-height:36px;padding:0;
        border-radius:8px;
    }
    .mobile-brand{font-size:12px;font-weight:900;}
    .mobile-user{font-size:10px;color:#667085;}
    .sidebar{
        transform:translateX(-105%);
        transition:transform .2s ease;
        box-shadow:12px 0 30px rgba(15,23,42,.12);
    }
    .sidebar.open{transform:translateX(0);}
    .sidebar-overlay{
        position:fixed;inset:0;background:rgba(15,23,42,.25);
        z-index:45;
    }
    .sidebar-overlay.show{display:block;}
    .app-content{margin-left:0;width:100%;}
    .content-topbar{display:none;}
    .container{padding:20px 14px 35px;}
    .hero-row{align-items:flex-start;}
    .hero-actions{display:none;}
    .detail-card{grid-template-columns:1fr;}
}
@media(max-width:640px){
    h1{font-size:25px;}
    .dashboard-cards{grid-template-columns:1fr 1fr;gap:8px;}
    .metric-card{padding:13px;gap:8px;}
    .metric-icon{width:34px;height:34px;flex-basis:34px;border-radius:9px;}
    .metric-body b{font-size:21px;}
    .metric-body span{font-size:10px;}
    .filter-modern{grid-template-columns:1fr;padding:8px 14px 12px;}
    .search-field{grid-column:auto;}
    .modern-chips{padding:0 14px 12px;}
    .modern-batch{
        margin:0 14px 10px;
        flex-wrap:wrap;
    }
    .modern-batch #selected-count{order:3;flex-basis:100%;}
    .panel-head{padding:15px 14px 10px;}
    .record-count{display:none;}
    .mini-stats{display:grid;grid-template-columns:1fr 1fr;}
    .mini-stats>a,.mini-stats>span{justify-content:space-between;}
    .login-shell{grid-template-columns:1fr;}
    .login-brand-panel{display:none;}
    .login-card{padding:30px 24px;}
}


/* COMPLETE 2.2 - Bulk PDF */
.bulk-upload-panel{margin-bottom:16px;}
.bulk-drop-form{padding:0 20px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.bulk-drop-zone{
    flex:1 1 100%;
    min-height:145px;
    border:1.5px dashed #b8c3d4;
    border-radius:14px;
    background:#fbfcfe;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    cursor:pointer;
    transition:.15s ease;
}
.bulk-drop-zone:hover{border-color:#6d92e8;background:#f7faff;}
.bulk-drop-zone input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;}
.bulk-drop-icon{
    width:46px;height:46px;border-radius:12px;
    display:grid;place-items:center;
    background:#eef3fb;
    font-size:11px;font-weight:900;
}
.bulk-drop-zone b{font-size:14px;}
.bulk-drop-zone span,.bulk-file-count{font-size:11px;color:#667085;}
.bulk-file-count{flex:1;}
.pending-panel{margin-bottom:16px;}
.pending-confirm-form{display:flex;gap:7px;min-width:370px;}
.pending-confirm-form select{min-width:260px;}
.pending-confirm-form button{white-space:nowrap;}
.pending-no-candidate{font-size:11px;color:#667085;max-width:340px;display:block;}
.btn-danger-soft{
    background:#fff;
    border:1px solid #fecaca;
    color:#991b1b !important;
    min-height:34px;
    padding:7px 10px;
}
.btn-danger-soft:hover{background:#fef2f2;border-color:#fca5a5;}
.compact-empty{min-height:130px;}
.bulk-rule-panel{padding:15px 18px;}
.bulk-rules{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:12px;}
.bulk-rules span{color:#344054;}
.bulk-rules i{
    width:21px;height:21px;border-radius:7px;
    display:inline-grid;place-items:center;
    background:#eef2f7;font-style:normal;font-weight:800;margin-right:4px;
}
.upload-result-cards{grid-template-columns:repeat(3,minmax(0,1fr));max-width:850px;}
.upload-errors{margin-top:14px;}
.error-list{padding:0 20px 20px;}
.error-list div{padding:7px 0;border-bottom:1px solid #f1f3f5;font-size:12px;}
.result-actions{display:flex;gap:9px;margin-top:18px;}
@media(max-width:700px){
    .upload-result-cards{grid-template-columns:1fr;}
    .pending-confirm-form{min-width:260px;flex-direction:column;}
    .pending-confirm-form select{min-width:0;}
}


/* COMPLETE 2.3 - Mobile connection */
.mobile-connect-grid{
    display:grid;
    grid-template-columns:minmax(320px,.85fr) minmax(360px,1.15fr);
    gap:14px;
    margin-bottom:14px;
}
.connect-card{overflow:hidden;}
.qr-card{text-align:center;}
.qr-wrap{
    padding:8px 20px 14px;
    display:grid;
    place-items:center;
}
.qr-wrap img{
    width:min(260px,70vw);
    height:auto;
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:10px;
    background:#fff;
}
.server-url-box{
    margin:0 18px 18px;
    padding:13px;
    border:1px solid #e5e7eb;
    border-radius:11px;
    background:#f8fafc;
    display:grid;
    grid-template-columns:1fr auto;
    gap:5px 10px;
    align-items:center;
    text-align:left;
}
.server-url-box span{grid-column:1/-1;font-size:10px;color:#667085;}
.server-url-box b{font-size:15px;word-break:break-all;}
.copy-url{min-height:34px;padding:7px 10px;}
.mobile-steps{padding:0 20px 14px;display:flex;flex-direction:column;gap:12px;}
.mobile-steps>div{display:flex;gap:10px;align-items:flex-start;}
.mobile-steps i{
    flex:0 0 26px;
    width:26px;height:26px;border-radius:8px;
    display:grid;place-items:center;
    background:#eef2f7;
    font-style:normal;font-size:11px;font-weight:900;
}
.mobile-steps span{font-size:12px;line-height:1.55;}
.connection-note{
    margin:0 20px 20px;
    border:1px solid #e5e7eb;
    background:#fbfcfe;
    border-radius:10px;
    padding:12px;
}
.connection-note b{display:block;font-size:12px;}
.connection-note span{display:block;font-size:11px;color:#667085;margin-top:3px;}
.mobile-features{margin-bottom:14px;}
.mobile-feature-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    padding:0 20px 20px;
}
.mobile-feature-grid>div{
    padding:13px;
    border:1px solid #edf0f4;
    background:#fafbfc;
    border-radius:11px;
}
.mobile-feature-grid b{display:block;font-size:12px;margin-bottom:4px;}
.mobile-feature-grid span{font-size:11px;color:#667085;line-height:1.5;}
.mobile-http-note{display:flex;flex-direction:column;gap:4px;}
.mobile-http-note span{font-size:11px;color:#667085;}
.section-actions-inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.mobile-camera-shell{max-width:720px;margin:0 auto;}
.mobile-camera-form{display:flex;flex-direction:column;gap:14px;}
.camera-pick-card{
    min-height:165px;
    border:1.5px dashed #9ca8b8;
    border-radius:14px;
    background:#fbfcfe;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    cursor:pointer;
    text-align:center;
    padding:18px;
}
.camera-pick-card input{
    position:absolute;
    width:1px;height:1px;opacity:0;
    pointer-events:none;
}
.camera-symbol{
    width:48px;height:48px;border-radius:13px;
    display:grid;place-items:center;
    background:#eef2f7;
    font-size:10px;font-weight:900;
}
.camera-pick-card b{font-size:14px;}
.camera-pick-card span{font-size:11px;color:#667085;}
@media(max-width:900px){
    .mobile-connect-grid{grid-template-columns:1fr;}
    .mobile-feature-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:600px){
    .mobile-feature-grid{grid-template-columns:1fr;}
    .server-url-box{grid-template-columns:1fr;}
    .copy-url{width:100%;}
    .mobile-sticky-actions{
        position:sticky;
        bottom:8px;
        z-index:5;
        background:rgba(255,255,255,.96);
        border:1px solid #e5e7eb;
        border-radius:11px;
        padding:8px;
        box-shadow:0 8px 28px rgba(15,23,42,.12);
    }
    .mobile-sticky-actions>*{flex:1;}
}


/* UPDATE 2.4 - PDF/DOCX safe reader */
.doc-reader-panel{margin-bottom:14px;}
.doc-reader-upload{padding:0 20px 20px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.doc-reader-upload .bulk-drop-zone{flex:1 1 100%;}
.doc-read-error{max-width:none;margin-bottom:14px;}
.alias-examples{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px;}
.alias-examples span{
    border:1px solid #e5e7eb;
    background:#fafbfc;
    border-radius:999px;
    padding:6px 9px;
    font-size:11px;
}
.scan-warning,.existing-match{
    padding:13px 15px;
    border-radius:11px;
    margin-bottom:13px;
    display:flex;
    flex-direction:column;
    gap:3px;
    font-size:12px;
}
.scan-warning{background:#fffbeb;border:1px solid #fde68a;}
.existing-match{background:#eff6ff;border:1px solid #bfdbfe;}
.preview-form{display:flex;flex-direction:column;gap:14px;}
.preview-top{
    padding:0 20px 20px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}
.preview-fields-panel{overflow:hidden;}
.preview-grid{
    padding:0 20px 20px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}
.preview-field{
    padding:10px;
    border:1px solid #e7eaf0;
    border-radius:10px;
    background:#fff;
}
.preview-field.state-review{background:#fffbeb;border-color:#fde68a;}
.preview-field.state-missing{background:#fafafa;}
.preview-label{
    display:flex;
    justify-content:space-between;
    gap:8px;
    font-size:11px;
    font-weight:750;
    margin-bottom:6px;
}
.preview-label em{
    font-style:normal;
    font-size:9px;
    color:#667085;
    font-weight:600;
}
.preview-confirm-bar{
    position:sticky;
    bottom:8px;
    z-index:12;
    display:flex;
    justify-content:flex-end;
    gap:9px;
    padding:9px;
    background:rgba(255,255,255,.96);
    border:1px solid #e5e7eb;
    border-radius:12px;
    box-shadow:0 8px 28px rgba(15,23,42,.10);
}
@media(max-width:1000px){.preview-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:650px){
    .preview-grid,.preview-top{grid-template-columns:1fr;}
    .preview-confirm-bar>*{flex:1;}
}


/* FIX 2.4.1 - visible file picker, compatible with desktop/mobile */
.doc-file-picker{
    flex:1 1 100%;
    min-height:96px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:12px;
    padding:16px;
    border:1px solid #d9dee7;
    border-radius:12px;
    background:#fbfcfe;
}
.doc-picker-copy{display:flex;flex-direction:column;gap:3px;}
.doc-picker-copy b{font-size:13px;}
.doc-picker-copy span{font-size:11px;color:#667085;}
.file-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:8px 14px;
    border-radius:9px;
    background:#fff;
    border:1px solid #bfc7d4;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
    white-space:nowrap;
}
.file-button:hover{background:#f8fafc;border-color:#98a2b3;}
.doc-upload-input{
    position:absolute !important;
    left:-10000px !important;
    top:auto !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
    pointer-events:auto !important;
}
.selected-file-box{
    flex:1;
    min-width:250px;
    padding:9px 11px;
    border:1px solid #e5e7eb;
    border-radius:9px;
    background:#fff;
    font-size:11px;
}
.selected-file-box span{color:#667085;margin-right:5px;}
.selected-file-box b{word-break:break-all;}
.doc-read-submit:disabled{
    opacity:.45;
    cursor:not-allowed;
    transform:none !important;
}
@media(max-width:650px){
    .doc-file-picker{
        grid-template-columns:auto 1fr;
    }
    .file-button{
        grid-column:1/-1;
        width:100%;
    }
    .selected-file-box{
        min-width:0;
        width:100%;
    }
    .doc-read-submit{
        width:100%;
    }
}


/* FIX 2.4.2 - multiple select + drag and drop */
.multi-drop-zone{
    flex:1 1 100%;
    min-height:130px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:14px;
    padding:20px;
    border:1.5px dashed #aeb8c7;
    border-radius:14px;
    background:#fbfcfe;
    transition:.15s ease;
}
.multi-drop-zone.drag-over{
    border-color:#2563eb;
    background:#eff6ff;
    box-shadow:0 0 0 4px rgba(37,99,235,.06);
}
.multi-file-summary{
    flex:1 1 100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    font-size:12px;
}
.multi-file-summary span{color:#667085;margin-right:4px;}
.selected-file-list{
    flex:1 1 100%;
    display:flex;
    flex-direction:column;
    gap:5px;
    max-height:240px;
    overflow:auto;
}
.selected-file-row{
    display:grid;
    grid-template-columns:26px minmax(0,1fr) 80px 30px;
    align-items:center;
    gap:8px;
    padding:7px 9px;
    border:1px solid #edf0f4;
    border-radius:9px;
    background:#fff;
    font-size:11px;
}
.selected-file-row b{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.selected-file-row>span:nth-child(3){color:#667085;text-align:right;}
.selected-file-row button{
    min-height:26px;
    width:26px;
    padding:0;
    border-radius:7px;
    background:#fff;
    color:#991b1b !important;
    border:1px solid #fecaca;
}
.file-order{
    width:22px;height:22px;border-radius:7px;
    display:grid;place-items:center;
    background:#f1f5f9;font-size:10px;font-weight:800;
}
.batch-doc-summary{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px;}
.batch-preview-list{
    display:flex;
    flex-direction:column;
    padding:0 18px 18px;
}
.batch-preview-row{
    display:grid;
    grid-template-columns:38px minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid #eef1f4;
}
.batch-preview-row:last-child{border-bottom:0;}
.batch-file-icon{
    width:34px;height:34px;border-radius:10px;
    display:grid;place-items:center;
    background:#eef2f7;
    font-size:11px;font-weight:900;
}
.batch-preview-row.has-error .batch-file-icon{
    background:#fef2f2;color:#991b1b;
}
.batch-file-main b{font-size:12px;}
.batch-meta{
    display:flex;gap:6px;flex-wrap:wrap;margin-top:5px;
}
.batch-meta span{
    padding:3px 6px;
    border-radius:6px;
    background:#f8fafc;
    border:1px solid #eef1f4;
    color:#667085;
    font-size:9px;
}
.existing-mini{
    margin-top:5px;
    font-size:10px;
    color:#475467;
}
.batch-error-text{
    display:block;
    margin-top:4px;
    color:#991b1b;
    font-size:10px;
}
.batch-file-action .btn-primary{
    white-space:nowrap;
    min-height:34px;
    padding:7px 10px;
}
@media(max-width:700px){
    .multi-drop-zone{
        grid-template-columns:auto 1fr;
    }
    .multi-drop-zone .file-button{
        grid-column:1/-1;
        width:100%;
    }
    .selected-file-row{
        grid-template-columns:24px minmax(0,1fr) 28px;
    }
    .selected-file-row>span:nth-child(3){display:none;}
    .batch-preview-row{
        grid-template-columns:34px minmax(0,1fr);
    }
    .batch-file-action{
        grid-column:1/-1;
    }
    .batch-file-action .btn-primary{
        width:100%;
    }
}


/* FIX 2.4.3 - batch continuity */
.batch-progress-line{
    display:inline-flex;align-items:center;gap:4px;
    margin-top:7px;padding:5px 8px;
    border:1px solid #e5e7eb;background:#fff;
    border-radius:999px;font-size:10px;color:#475467;
}
.preview-nav-left{
    display:flex;align-items:center;gap:7px;margin-right:auto;
}
@media(max-width:650px){
    .preview-confirm-bar{flex-wrap:wrap;}
    .preview-nav-left{width:100%;display:grid;grid-template-columns:1fr 1fr;}
    .preview-confirm-bar>button{width:100%;}
}


/* 2.5.3 - compact saved profile */
.compact-detail-card{
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.compact-detail-card>div{
    min-height:56px;
}
.compact-detail-card>div.full{
    grid-column:1/-1;
}
.record-extra-row td{
    border-top:0;
}
.record-extra{
    white-space:pre-line;
}

/* V2.7 Account */
.auth-card{width:min(560px,calc(100% - 32px));margin:48px auto;background:#fff;border-radius:18px;padding:28px;box-shadow:0 20px 60px rgba(15,23,42,.14)}
.auth-links{display:flex;gap:10px;justify-content:center;margin-top:18px}.auth-links a,.auth-card a{color:#2563eb;text-decoration:none}.auth-success{padding:12px 14px;margin:12px 0;border-radius:10px;background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}.notice-card{padding:12px 14px;margin:12px 0;border-radius:10px;background:#fffbeb;border:1px solid #fde68a}.dev-link{display:inline-block;padding:10px 14px;border-radius:9px;background:#eef2ff;font-weight:700}.inline-form{display:flex;gap:6px;align-items:center}.grid label small{display:block;margin-top:5px;color:#64748b}


/* V2.7.1.1 - auth actions: prominent register / forgot-password buttons */
.auth-action-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:18px;
}
.auth-action-btn{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:64px;
    padding:11px 12px;
    border:1px solid #d0d5dd;
    border-radius:12px;
    text-decoration:none;
    color:#1d2939;
    background:#fff;
    transition:.15s ease;
}
.auth-action-btn:hover{
    transform:translateY(-1px);
    border-color:#98a2b3;
    box-shadow:0 5px 16px rgba(15,23,42,.07);
}
.auth-action-register{
    background:#eff6ff;
    border-color:#bfdbfe;
    color:#1d4ed8;
}
.auth-action-forgot{
    background:#f8fafc;
}
.auth-action-icon{
    width:32px;
    height:32px;
    flex:0 0 32px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:#fff;
    border:1px solid currentColor;
    font-size:18px;
    font-weight:900;
}
.auth-action-btn span:last-child{display:flex;flex-direction:column;line-height:1.25;}
.auth-action-btn b{font-size:12px;}
.auth-action-btn small{font-size:10px;color:#667085;margin-top:3px;}
.login-help{
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid #eaecf0;
    color:#667085;
    font-size:10px;
    text-align:center;
}
@media(max-width:520px){
    .auth-action-grid{grid-template-columns:1fr;}
    .auth-action-btn{min-height:58px;}
}

/* V2.7.1.2 - visible logout actions */
.logout-button{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:10px;text-decoration:none;color:#b42318;font-weight:700;font-size:13px;background:#fff1f0;border:1px solid #ffd5d2;white-space:nowrap;}
.logout-button:hover{background:#ffe4e1;color:#912018;}
.logout-symbol{font-size:16px;line-height:1;}
.mobile-account-actions{display:flex;align-items:center;gap:8px;margin-left:auto;}
.mobile-logout{display:inline-flex;align-items:center;padding:7px 9px;border-radius:9px;text-decoration:none;font-size:11px;font-weight:700;color:#b42318;background:#fff1f0;border:1px solid #ffd5d2;}
@media (max-width: 900px){.mobile-user{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.account-card .logout-button{padding:8px 9px;}}

/* V2.7.1.3 - unmistakable logout/version */
.top-logout-button{display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;border-radius:10px;text-decoration:none;font-size:12px;font-weight:800;letter-spacing:.03em;color:#fff;background:#b42318;border:1px solid #b42318;white-space:nowrap;box-shadow:0 2px 6px rgba(180,35,24,.18);}
.top-logout-button:hover{background:#912018;color:#fff;}
.app-version-badge{display:inline-flex;align-items:center;padding:6px 9px;border-radius:999px;background:#eef2ff;color:#344054;font-size:11px;font-weight:700;white-space:nowrap;}
.login-version{text-align:center;margin-top:18px;font-size:12px;color:#98a2b3;font-weight:600;}
@media (max-width:900px){.content-topbar .app-version-badge{display:none;}.content-topbar .top-logout-button{display:none;}}

/* ==========================================================
   V2.8.3 - 3 nút tạo Word theo đúng nhóm HĐLĐ
   ========================================================== */
.word-group-actions{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    padding:6px 8px;border:1px solid #dbe3ee;border-radius:12px;background:#fff;
}
.word-group-label{font-size:13px;font-weight:800;color:#475569;margin-right:2px;}
a.word-group-btn,.word-submit{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:38px;padding:8px 13px;border-radius:9px;
    color:#fff!important;text-decoration:none!important;font-weight:800;
    border:2px solid transparent;box-shadow:0 2px 6px rgba(15,23,42,.10);
}
a.word-group-btn:hover,.word-submit:hover{filter:brightness(.95);transform:translateY(-1px);}
.word-hlv{background:#2563eb!important;}
.word-vdv18{background:#16a34a!important;}
.word-vdvu18{background:#ea580c!important;}
a.word-group-btn.recommended{border-color:#0f172a;box-shadow:0 0 0 2px #fff,0 0 0 4px #0f172a;}
a.word-group-btn.recommended::before{content:'✓ ';}
.selected-word-group{display:flex;gap:14px;align-items:center;flex-wrap:wrap;color:#fff;padding:14px 16px;border-radius:12px;margin:16px 0;}
.selected-word-group span{opacity:.92}.selected-word-group em{font-style:normal;font-weight:700;background:rgba(255,255,255,.18);padding:4px 8px;border-radius:7px;}
.selected-word-group .group-warning{background:#fff;color:#9a3412;}
.word-submit{border:0;cursor:pointer;}
@media(max-width:900px){
  .head-actions{align-items:stretch!important;}
  .word-group-actions{width:100%;}
  a.word-group-btn{flex:1 1 120px;}
}

/* V2.8.4 - chọn loại HĐ bên trong từng nhóm */
.contract-type-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:18px;margin:22px 0;}
.contract-type-card{display:flex;flex-direction:column;gap:8px;border:2px solid #dbe3ef;border-radius:18px;padding:22px;text-decoration:none!important;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.06);}
.contract-type-card strong{font-size:24px;}.contract-type-card span{color:#64748b;}
a.contract-type-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(15,23,42,.11);}
.hdld-card{border-color:#2563eb;background:#eff6ff;}.hdld-card strong{color:#1d4ed8;}
.cnll-card{border-color:#7c3aed;background:#f5f3ff;}.cnll-card strong{color:#6d28d9;}
.cnll-choice-list{display:flex;flex-direction:column;gap:8px;margin-top:8px;}.cnll-choice-list a{display:block;padding:10px 12px;border-radius:10px;background:#fff;border:1px solid #ddd6fe;color:#5b21b6;font-weight:700;text-decoration:none;}
@media(max-width:760px){.contract-type-grid{grid-template-columns:1fr;}}

/* V2.8.5 - khóa nhóm hồ sơ, không khóa loại hợp đồng */
.word-group-btn.locked { opacity:.42; cursor:not-allowed; filter:grayscale(.65); pointer-events:none; }
.selected-word-group em { display:block; margin-top:6px; font-style:normal; opacity:.85; }
.contract-export-label { display:block; margin-top:14px; font-size:13px; letter-spacing:.02em; }
.cnll-choice-list a { display:block; margin-top:10px; padding:12px 14px; border-radius:10px; text-decoration:none; }

/* V2.9.0.8.3 - Sidebar must remain scrollable when menu grows taller than screen. */
.sidebar{
    height:100vh;
    height:100dvh;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
}
.sidebar-bottom{flex-shrink:0;}