/* COMPONENTS CSS */
/* Tabs */
.tabs{display:flex;gap:4px;background:var(--bg-input);border-radius:10px;padding:4px;margin-bottom:24px}
.tab-btn{flex:1;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:500;color:var(--text-muted);transition:var(--transition);white-space:nowrap}
.tab-btn.active{background:var(--bg-card);color:var(--text-primary);box-shadow:0 2px 8px rgba(0,0,0,.3)}

/* Info row in detail views */
.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:20px}
.info-item label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:4px}
.info-item span{font-size:14px;font-weight:500;color:var(--text-primary)}

/* Timeline */
.timeline{display:flex;flex-direction:column;gap:0}
.timeline-item{display:flex;gap:16px;position:relative;padding-bottom:20px}
.timeline-item:last-child{padding-bottom:0}
.timeline-line{display:flex;flex-direction:column;align-items:center}
.timeline-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);border:2px solid var(--bg-card);flex-shrink:0;margin-top:4px;z-index:1}
.timeline-connector{width:2px;flex:1;background:var(--border);margin-top:4px}
.timeline-item:last-child .timeline-connector{display:none}
.timeline-content{flex:1;padding-bottom:4px}
.timeline-title{font-size:13px;font-weight:600;margin-bottom:2px}
.timeline-meta{font-size:11px;color:var(--text-muted)}
.timeline-body{font-size:13px;color:var(--text-secondary);margin-top:6px}

/* User cards */
.user-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;text-align:center;transition:var(--transition)}
.user-card:hover{border-color:var(--border-light);transform:translateY(-2px);box-shadow:var(--shadow-card)}
.user-card-avatar{width:60px;height:60px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--purple));display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;margin:0 auto 12px}
.user-card-name{font-size:15px;font-weight:700;margin-bottom:4px}
.user-card-role{font-size:12px;color:var(--accent-light);margin-bottom:8px}
.user-card-dept{font-size:12px;color:var(--text-muted)}
.user-card-actions{display:flex;gap:8px;justify-content:center;margin-top:14px}

/* Switch toggle */
.switch{position:relative;display:inline-block;width:40px;height:22px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;inset:0;background:var(--border);border-radius:22px;transition:var(--transition)}
.slider::before{content:'';position:absolute;height:16px;width:16px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:var(--transition)}
input:checked+.slider{background:var(--accent)}
input:checked+.slider::before{transform:translateX(18px)}

/* Settings sections */
.settings-section{margin-bottom:28px}
.settings-section-title{font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border)}
.settings-row:last-child{border-bottom:none}
.settings-row-info{flex:1;margin-right:20px}
.settings-row-title{font-size:13px;font-weight:600;margin-bottom:3px}
.settings-row-desc{font-size:12px;color:var(--text-muted)}

/* Donut chart placeholder */
.donut-chart{width:120px;height:120px;border-radius:50%;background:conic-gradient(var(--green) 0% 35%,var(--blue) 35% 60%,var(--yellow) 60% 75%,var(--red) 75% 100%);position:relative;flex-shrink:0}
.donut-chart::after{content:'';position:absolute;inset:20px;border-radius:50%;background:var(--bg-card)}

/* Chart bar simple */
.bar-chart{display:flex;flex-direction:column;gap:12px}
.bar-item{display:flex;align-items:center;gap:12px}
.bar-label{font-size:12px;color:var(--text-secondary);width:100px;flex-shrink:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.bar-track{flex:1;background:var(--border);border-radius:6px;height:8px;overflow:hidden}
.bar-fill{height:100%;border-radius:6px;transition:width .8s ease}
.bar-val{font-size:12px;font-weight:600;width:40px;text-align:right;flex-shrink:0}

/* File upload zone */
.upload-zone{border:2px dashed var(--border);border-radius:var(--radius);padding:32px;text-align:center;cursor:pointer;transition:var(--transition)}
.upload-zone:hover{border-color:var(--accent);background:var(--accent-glow)}
.upload-icon{font-size:36px;margin-bottom:12px}
.upload-text{font-size:14px;font-weight:500;margin-bottom:4px}
.upload-hint{font-size:12px;color:var(--text-muted)}

/* Permission matrix */
.permission-table th,.permission-table td{padding:10px 14px;text-align:center;font-size:12px}
.permission-table th:first-child,.permission-table td:first-child{text-align:left;font-weight:600}
.perm-check{color:var(--green);font-size:16px}
.perm-cross{color:var(--red);font-size:16px}

/* Tags */
.tag{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:6px;font-size:11px;font-weight:500;background:var(--bg-input);border:1px solid var(--border);color:var(--text-secondary)}
.tags{display:flex;flex-wrap:wrap;gap:6px}

/* Divider */
.divider{height:1px;background:var(--border);margin:20px 0}