:root {
  --bg:#F0F4F8; --bg2:#FFFFFF; --bg3:#E8EFF5; --bg4:#F7FAFC;
  --border:#D1DDE8; --border2:#B8CCE0;
  --text:#1A2B3C; --text2:#4A6580; --text3:#8BA5BE;
  --accent:#1565C0; --accent2:#1976D2; --accent-light:#E3F0FF; --accent-dim:#1565C015;
  --green:#2E7D32; --green-bg:#E8F5E9; --green-border:#A5D6A7;
  --red:#C62828; --red-bg:#FFEBEE; --red-border:#EF9A9A;
  --yellow:#F57F17; --yellow-bg:#FFFDE7; --yellow-border:#FFE082;
  --orange:#E65100; --orange-bg:#FFF3E0; --purple:#4527A0; --purple-bg:#EDE7F6;
  --shadow-sm:0 1px 3px rgba(21,101,192,.08);
  --shadow:0 4px 12px rgba(21,101,192,.10);
  --shadow-lg:0 8px 24px rgba(21,101,192,.14);
  --font:'Noto Sans SC',sans-serif; --mono:'JetBrains Mono',monospace;
  --radius:10px; --radius-sm:6px; --radius-lg:14px;
  --sidebar-w:210px; --topbar-h:54px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.6;min-height:100vh;overflow-x:hidden;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}

/* ===== LOGIN ===== */
.screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#E3F0FF,#F0F4F8,#E8EFF8);position:relative;overflow:hidden;}
.login-deco{position:absolute;border-radius:50%;pointer-events:none;}
.login-deco-1{width:400px;height:400px;background:radial-gradient(circle,#BBDEFB44,transparent);top:-100px;right:-80px;}
.login-deco-2{width:300px;height:300px;background:radial-gradient(circle,#90CAF944,transparent);bottom:-80px;left:-60px;}
.login-card{position:relative;z-index:1;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.25rem;width:400px;max-width:95vw;box-shadow:var(--shadow-lg);animation:fadeUp .4s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.login-logo{display:flex;align-items:center;gap:14px;margin-bottom:1.75rem;}
.logo-icon{background:var(--accent);color:#fff;font-family:var(--mono);font-weight:700;font-size:13px;padding:8px 11px;border-radius:var(--radius-sm);letter-spacing:1px;box-shadow:0 2px 8px rgba(21,101,192,.3);}
.logo-icon.sm{font-size:11px;padding:5px 9px;}
.logo-title{font-size:17px;font-weight:600;}.logo-sub{font-size:12px;color:var(--text3);}
.tab-group{display:flex;background:var(--bg3);border-radius:var(--radius-sm);padding:3px;margin-bottom:1.5rem;}
.tab{flex:1;background:none;border:none;color:var(--text2);padding:7px 16px;cursor:pointer;font-size:14px;font-family:var(--font);border-radius:5px;transition:all .2s;font-weight:500;}
.tab.active{background:#fff;color:var(--accent);box-shadow:var(--shadow-sm);font-weight:600;}

/* ===== FORMS ===== */
.form-group{margin-bottom:1rem;}
.form-group label{display:block;font-size:13px;color:var(--text2);margin-bottom:5px;font-weight:500;}
.form-group input,.form-group select,.form-group textarea{width:100%;background:var(--bg4);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:14px;padding:9px 12px;font-family:var(--font);outline:none;transition:border-color .2s,box-shadow .2s;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(25,118,210,.12);background:#fff;}
.form-group input::placeholder{color:var(--text3);}
.form-group textarea{resize:vertical;min-height:90px;}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A6580' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px;}
.form-row{display:flex;gap:12px;flex-wrap:wrap;}
.form-row .form-group{flex:1;min-width:140px;}.form-row .form-group.flex2{flex:2;}
.form-error{color:var(--red);font-size:13px;margin-bottom:10px;padding:10px 12px;background:var(--red-bg);border:1px solid var(--red-border);border-radius:var(--radius-sm);}
.form-success{color:var(--green);font-size:13px;margin-bottom:10px;padding:10px 12px;background:var(--green-bg);border:1px solid var(--green-border);border-radius:var(--radius-sm);}
.form-hint{font-size:12px;color:var(--text3);text-align:center;margin-top:10px;}
.req{color:var(--red);}

/* ===== BUTTONS ===== */
.btn-primary{background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);padding:9px 20px;cursor:pointer;font-size:14px;font-family:var(--font);font-weight:600;transition:all .2s;white-space:nowrap;box-shadow:0 2px 6px rgba(21,101,192,.25);}
.btn-primary:hover{background:var(--accent2);box-shadow:0 4px 12px rgba(21,101,192,.35);transform:translateY(-1px);}
.btn-primary.full{width:100%;padding:11px;font-size:15px;}.btn-primary.sm{padding:5px 14px;font-size:13px;}
.btn-secondary{background:#fff;color:var(--text2);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:8px 18px;cursor:pointer;font-size:14px;font-family:var(--font);font-weight:500;transition:all .2s;}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light);}
.btn-danger{background:#fff;color:var(--red);border:1.5px solid var(--red-border);border-radius:var(--radius-sm);padding:6px 14px;cursor:pointer;font-size:13px;font-family:var(--font);font-weight:500;transition:all .2s;}
.btn-danger:hover{background:var(--red-bg);}
.btn-green{background:var(--green);color:#fff;border:none;border-radius:var(--radius-sm);padding:5px 14px;cursor:pointer;font-size:13px;font-family:var(--font);font-weight:500;}
.hidden{display:none!important;}

/* ===== MAIN LAYOUT - KEY FIX ===== */
#app{min-height:100vh;}
#main-app{display:flex;min-height:100vh;width:100%;position:relative;}

#sidebar{
  width:var(--sidebar-w);background:var(--accent);
  display:flex;flex-direction:column;flex-shrink:0;
  position:fixed;top:0;left:0;height:100vh;z-index:100;
  transition:transform .25s;overflow:hidden;
}
.sidebar-logo{display:flex;align-items:center;gap:10px;padding:16px;color:#fff;font-weight:700;font-size:15px;border-bottom:1px solid rgba(255,255,255,.15);flex-shrink:0;}
.sidebar-close{display:none;margin-left:auto;background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;font-size:18px;}
nav{flex:1;padding:8px;overflow-y:auto;}
.nav-section{font-size:10px;font-weight:700;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:1px;padding:10px 8px 4px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;color:rgba(255,255,255,.75);cursor:pointer;text-decoration:none;border-radius:var(--radius-sm);transition:all .15s;font-size:13px;margin-bottom:1px;}
.nav-item:hover{color:#fff;background:rgba(255,255,255,.12);}
.nav-item.active{color:#fff;background:rgba(255,255,255,.22);font-weight:600;}
.nav-icon{font-size:14px;width:20px;flex-shrink:0;}
.sidebar-footer{padding:10px;border-top:1px solid rgba(255,255,255,.15);flex-shrink:0;}
.user-info{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.user-avatar{width:32px;height:32px;background:rgba(255,255,255,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0;color:#fff;}
.nav-username{font-size:13px;font-weight:600;color:#fff;}.nav-role{font-size:11px;color:rgba(255,255,255,.6);}
.btn-logout{width:100%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.85);border-radius:var(--radius-sm);padding:7px;cursor:pointer;font-size:13px;font-family:var(--font);transition:all .2s;}
.btn-logout:hover{background:rgba(255,255,255,.2);color:#fff;}
#sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:99;}

/* CRITICAL FIX: content area fills remaining width */
#content{
  margin-left:var(--sidebar-w);
  flex:1 1 0%;
  min-width:0;
  max-width:calc(100% - var(--sidebar-w));
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
.topbar{display:flex;align-items:center;gap:12px;padding:0 20px;height:var(--topbar-h);background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;box-shadow:var(--shadow-sm);width:100%;}
.topbar h1{font-size:16px;font-weight:600;flex:1;color:var(--text);}
.menu-btn{display:none;background:none;border:none;color:var(--text);font-size:22px;cursor:pointer;line-height:1;padding:4px;}
.topbar-right{display:flex;gap:8px;align-items:center;flex-shrink:0;}
.page{padding:20px;width:100%;flex:1;}

/* ===== STATS ===== */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:18px;}
.stat-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow-sm);border-top:3px solid transparent;transition:transform .15s,box-shadow .15s;}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.stat-card.c-blue{border-top-color:var(--accent);}.stat-card.c-red{border-top-color:var(--red);}
.stat-card.c-green{border-top-color:var(--green);}.stat-card.c-teal{border-top-color:#00838F;}
.stat-card.c-purple{border-top-color:var(--purple);}.stat-card.c-orange{border-top-color:var(--orange);}
.stat-num{font-size:26px;font-weight:700;font-family:var(--mono);}
.stat-label{font-size:12px;color:var(--text2);margin-top:3px;}
.stat-card.c-blue .stat-num{color:var(--accent);}.stat-card.c-red .stat-num{color:var(--red);}
.stat-card.c-green .stat-num{color:var(--green);}.stat-card.c-purple .stat-num{color:var(--purple);}
.stat-card.c-orange .stat-num{color:var(--orange);}.stat-card.c-teal .stat-num{color:#00838F;}

/* ===== FILTER BAR ===== */
.filter-bar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center;}
.filter-bar input[type=search]{flex:1;min-width:180px;background:#fff;border:1.5px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:8px 12px 8px 34px;font-size:13px;font-family:var(--font);outline:none;transition:border-color .2s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238BA5BE' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:10px center;}
.filter-bar input[type=search]:focus{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(25,118,210,.10);}
.filter-bar select{background:#fff;border:1.5px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:8px 26px 8px 10px;font-size:13px;font-family:var(--font);outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234A6580' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;}

/* ===== ISSUE LIST ===== */
.issue-list{display:flex;flex-direction:column;gap:8px;}
.issue-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px 12px;cursor:pointer;transition:box-shadow .15s,transform .15s;border-left:4px solid var(--border);box-shadow:var(--shadow-sm);}
.issue-card:hover{box-shadow:var(--shadow);transform:translateY(-1px);}
.issue-card.severity-high{border-left-color:var(--red);}
.issue-card.severity-medium{border-left-color:var(--yellow);}
.issue-card.severity-low{border-left-color:var(--green);}
.issue-card-header{display:flex;align-items:flex-start;gap:10px;margin-bottom:6px;}
.issue-title{font-size:15px;font-weight:600;flex:1;line-height:1.4;}
.issue-badges{display:flex;gap:4px;flex-wrap:wrap;flex-shrink:0;}
.issue-snippet{font-size:13px;color:var(--text2);margin-top:4px;line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.issue-meta{font-size:12px;color:var(--text3);display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:7px;}
.issue-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px;}

/* ===== BADGES ===== */
.badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;font-weight:600;white-space:nowrap;}
.badge-type-instrument{background:var(--accent-light);color:var(--accent);border:1px solid #BBDEFB;}
.badge-type-software{background:var(--purple-bg);color:var(--purple);border:1px solid #CE93D8;}
.badge-type-field{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border);}
.badge-status-open{background:var(--orange-bg);color:var(--orange);border:1px solid #FFCC80;}
.badge-status-solved{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border);}
.badge-sev-high{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border);}
.badge-sev-medium{background:var(--yellow-bg);color:var(--yellow);border:1px solid var(--yellow-border);}
.badge-sev-low{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border);}
.tag{background:var(--bg3);border:1px solid var(--border);color:var(--text2);font-size:11px;padding:2px 7px;border-radius:20px;}

/* ===== PAGINATION ===== */
.pagination{display:flex;gap:5px;justify-content:center;margin-top:20px;flex-wrap:wrap;align-items:center;}
.page-btn{background:#fff;border:1.5px solid var(--border);color:var(--text2);border-radius:var(--radius-sm);padding:5px 12px;cursor:pointer;font-size:13px;font-family:var(--font);transition:all .15s;font-weight:500;}
.page-btn:hover{border-color:var(--accent);color:var(--accent);}
.page-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;}

/* ===== DETAIL ===== */
.detail-title{font-size:20px;font-weight:700;line-height:1.4;margin-bottom:10px;}
.detail-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px;}
.detail-info-bar{background:var(--bg4);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;display:flex;gap:16px;flex-wrap:wrap;margin-bottom:14px;font-size:13px;color:var(--text2);}
.detail-info-bar span{display:flex;align-items:center;gap:4px;}
.detail-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.section-label{font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.8px;margin:18px 0 8px;display:flex;align-items:center;gap:6px;}
.section-label::after{content:'';flex:1;height:1px;background:var(--border);}
.content-box{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;white-space:pre-wrap;line-height:1.85;font-size:14px;box-shadow:var(--shadow-sm);}
.content-box.solution{border-left:4px solid var(--green);}

/* ===== ATTACHMENTS ===== */
.attachment-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:8px;}
.attachment-item{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:12px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow-sm);transition:box-shadow .15s;}
.attachment-item:hover{box-shadow:var(--shadow);}
.att-preview{width:100%;height:90px;object-fit:cover;border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--border);}
.att-icon-big{font-size:32px;text-align:center;padding:12px 0 6px;}
.att-name{font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.att-size{font-size:11px;color:var(--text3);font-family:var(--mono);}
.att-actions{display:flex;gap:5px;flex-wrap:wrap;}
.upload-area{border:2px dashed var(--border2);border-radius:var(--radius);padding:20px;text-align:center;color:var(--text2);cursor:pointer;transition:all .2s;background:var(--bg4);margin-bottom:10px;}
.upload-area:hover{border-color:var(--accent);background:var(--accent-light);color:var(--accent);}
.upload-area input{display:none;}.upload-icon{font-size:26px;margin-bottom:5px;}

/* ===== LIGHTBOX ===== */
#lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:9999;align-items:center;justify-content:center;cursor:zoom-out;}
#lightbox.show{display:flex;}
#lightbox img{max-width:94vw;max-height:92vh;border-radius:var(--radius);box-shadow:0 8px 40px rgba(0,0,0,.5);}
#lightbox-close{position:absolute;top:14px;right:18px;color:#fff;font-size:28px;cursor:pointer;opacity:.8;line-height:1;}

/* ===== FORM CARD ===== */
.form-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow);width:100%;}
.form-card h2{font-size:18px;margin-bottom:20px;color:var(--text);font-weight:700;}
.form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px;padding-top:14px;border-top:1px solid var(--border);flex-wrap:wrap;}

/* ===== TAG INPUT ===== */
.tag-input-wrap{background:var(--bg4);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:6px 8px;display:flex;flex-wrap:wrap;gap:5px;min-height:42px;align-items:center;}
.tag-input-wrap:focus-within{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(25,118,210,.10);background:#fff;}
.tag-input-wrap input{background:none;border:none;color:var(--text);font-size:13px;outline:none;min-width:80px;flex:1;font-family:var(--font);}
.tag-item{background:var(--accent-light);border:1px solid #BBDEFB;color:var(--accent);font-size:12px;padding:2px 8px;border-radius:20px;display:flex;align-items:center;gap:3px;font-weight:500;}
.tag-item button{background:none;border:none;color:var(--accent);cursor:pointer;font-size:13px;line-height:1;padding:0;opacity:.6;}
.tag-item button:hover{opacity:1;color:var(--red);}

/* ===== DATA TABLE ===== */
.data-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--border);}
.data-table th{text-align:left;font-size:12px;font-weight:700;color:var(--text2);padding:9px 12px;background:var(--bg4);border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.5px;}
.data-table td{padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle;}
.data-table tr:last-child td{border-bottom:none;}
.data-table tr:hover td{background:var(--bg4);}

/* ===== MODAL ===== */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:500;align-items:center;justify-content:center;}
.modal-overlay.show{display:flex;}
.modal{background:#fff;border-radius:var(--radius-lg);padding:26px;width:420px;max-width:95vw;box-shadow:var(--shadow-lg);animation:fadeUp .25s ease;}
.modal h3{font-size:17px;font-weight:700;margin-bottom:16px;}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;}

/* ===== GRID CARDS ===== */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;width:100%;}
.grid-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:14px;cursor:pointer;box-shadow:var(--shadow-sm);transition:box-shadow .15s,transform .15s;}
.grid-card:hover{box-shadow:var(--shadow);transform:translateY(-1px);}
.grid-card-title{font-size:14px;font-weight:600;margin-bottom:5px;color:var(--text);}
.grid-card-meta{font-size:12px;color:var(--text3);display:flex;gap:8px;flex-wrap:wrap;}
.grid-card-body{font-size:13px;color:var(--text2);margin-top:5px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

/* ===== DASHBOARD ===== */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:14px;}
.dash-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm);}
.dash-card-title{font-size:11px;font-weight:700;color:var(--text2);margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px;}
.model-bar{display:flex;align-items:center;gap:8px;margin-bottom:7px;cursor:pointer;}
.model-name{font-size:13px;font-weight:500;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.model-track{flex:1;background:var(--bg3);border-radius:4px;height:7px;overflow:hidden;}
.model-fill{height:100%;background:var(--accent);border-radius:4px;transition:width .6s ease;}
.model-count{font-size:11px;color:var(--text3);font-family:var(--mono);width:20px;text-align:right;}
.rate-circle{display:flex;align-items:center;justify-content:center;flex-direction:column;padding:16px 0;}
.rate-num{font-size:44px;font-weight:700;font-family:var(--mono);color:var(--green);}

/* ===== STATUS PILLS ===== */
.status-pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;border:1.5px solid;}
.status-available{background:#E8F5E9;color:#2E7D32;border-color:#A5D6A7;}
.status-rented{background:var(--orange-bg);color:var(--orange);border-color:#FFCC80;}
.status-maintenance{background:var(--red-bg);color:var(--red);border-color:var(--red-border);}
.status-calibration{background:var(--purple-bg);color:var(--purple);border-color:#CE93D8;}
.sop-cat-measurement{background:#E3F0FF;color:#1565C0;border-color:#90CAF9;}
.sop-cat-calibration{background:var(--green-bg);color:var(--green);border-color:var(--green-border);}
.sop-cat-maintenance{background:var(--orange-bg);color:var(--orange);border-color:#FFCC80;}
.sop-cat-safety{background:var(--red-bg);color:var(--red);border-color:var(--red-border);}
.visit-planned{background:#E3F0FF;color:#1565C0;border-color:#90CAF9;}
.visit-in_progress{background:var(--orange-bg);color:var(--orange);border-color:#FFCC80;}
.visit-completed{background:var(--green-bg);color:var(--green);border-color:var(--green-border);}

/* ===== CONTACT CARD ===== */
.contact-card{background:var(--bg4);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:8px;}
.contact-name{font-size:14px;font-weight:600;}
.contact-info{font-size:12px;color:var(--text2);margin-top:4px;display:flex;gap:12px;flex-wrap:wrap;}

/* ===== INLINE FORM ===== */
.inline-form{background:var(--bg4);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:14px;}
.inline-form h4{font-size:13px;font-weight:600;margin-bottom:10px;color:var(--text2);}

/* ===== CHIP ROW ===== */
.chip-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.chip{background:#fff;border:1.5px solid var(--border);border-radius:20px;padding:4px 12px;font-size:12px;font-weight:500;cursor:pointer;color:var(--text2);transition:all .15s;white-space:nowrap;}
.chip:hover,.chip.active{background:var(--accent);border-color:var(--accent);color:#fff;}

/* ===== RELATED ===== */
.related-item{display:flex;align-items:flex-start;gap:8px;padding:8px 0;border-bottom:1px solid var(--border);cursor:pointer;}
.related-item:last-child{border-bottom:none;}
.related-title{font-size:13px;font-weight:500;flex:1;line-height:1.4;}
.related-item:hover .related-title{color:var(--accent);}

/* ===== TAB PAGES ===== */
.tab-page-group{display:flex;gap:4px;margin-bottom:18px;border-bottom:1px solid var(--border);}
.tab-page{background:none;border:none;padding:9px 18px;font-size:14px;font-family:var(--font);color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:500;transition:all .15s;border-radius:var(--radius-sm) var(--radius-sm) 0 0;}
.tab-page.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600;background:var(--accent-light);}
.tab-page:hover:not(.active){color:var(--text);background:var(--bg3);}

/* ===== EMPTY / LOADING ===== */
.empty-state{text-align:center;padding:50px 20px;color:var(--text3);}
.empty-icon{font-size:40px;margin-bottom:10px;}
.loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:40px;color:var(--text2);}
.spinner{width:18px;height:18px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

/* ===== TOAST ===== */
#toast-container{position:fixed;bottom:20px;right:20px;z-index:9000;display:flex;flex-direction:column;gap:6px;}
.toast{background:var(--text);color:#fff;padding:10px 16px;border-radius:var(--radius-sm);font-size:13px;box-shadow:var(--shadow-lg);animation:slideIn .25s ease;display:flex;align-items:center;gap:8px;max-width:280px;}
.toast.success{background:var(--green);}.toast.error{background:var(--red);}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

/* ===== MOBILE NAV ===== */
#mobile-nav{display:none;}

/* ===== PRINT ===== */
@media print{
  #sidebar,#mobile-nav,.topbar,.detail-actions,.upload-area,.att-actions,#toast-container,.no-print{display:none!important;}
  #content{margin:0!important;max-width:100%!important;}
  .page{padding:0!important;}
  body{background:#fff!important;color:#000!important;}
  .content-box{border:1px solid #ccc!important;box-shadow:none!important;}
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  #sidebar{transform:translateX(-100%);}
  #sidebar.open{transform:translateX(0);}
  #sidebar-overlay.show{display:block;}
  #sidebar .sidebar-close{display:block;}
  #content{margin-left:0;max-width:100%;}
  .menu-btn{display:block;}
  .hide-mobile{display:none!important;}
  .page{padding:12px;}
  .detail-title{font-size:17px;}
  .form-card{padding:14px;border-radius:var(--radius);}
  .stats-row{grid-template-columns:repeat(3,1fr);}
  .attachment-grid{grid-template-columns:repeat(2,1fr);}
  #mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);z-index:90;box-shadow:0 -2px 12px rgba(21,101,192,.10);}
  .mob-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;padding:7px 4px 9px;cursor:pointer;color:var(--text3);font-size:10px;border:none;background:none;font-family:var(--font);gap:2px;}
  .mn-icon{font-size:19px;}
  .mob-nav-item.active{color:var(--accent);}
  #content{padding-bottom:60px;}
  .grid-cards{grid-template-columns:1fr;}
  .dash-grid{grid-template-columns:1fr;}
}