/* ====== Components: Buttons, Forms, Tables, Badges, Cards ====== */
.page-header{margin-bottom:24px}
.page-header h2{font-size:22px;font-weight:650;letter-spacing:-.3px}
.page-header p{color:var(--text2);margin-top:4px;font-size:13px}

.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.btn{padding:8px 18px;border-radius:20px;border:.5px solid var(--border);background:var(--card);cursor:pointer;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:6px;transition:all var(--transition);box-shadow:var(--shadow)}
.btn:hover{background:var(--bg);border-color:var(--text3)}
.btn-pri{background:var(--pri);color:#fff;border-color:var(--pri);box-shadow:var(--shadow)}
.btn-pri:hover{background:#444;border-color:#444}
.btn-suc{background:var(--suc);color:#fff;border-color:var(--suc)}
.btn-dan{background:var(--dan);color:#fff;border-color:var(--dan)}
.btn-sm{padding:5px 12px;font-size:12px;border-radius:16px}
.btn-ghost{background:transparent;border-color:transparent;color:var(--pri);box-shadow:none}
.btn-ghost:hover{background:var(--pri-lt)}
.search-box{padding:8px 16px;border-radius:20px;border:.5px solid var(--border);font-size:13px;width:240px;outline:none;background:var(--bg)}
.search-box:focus{border-color:var(--pri);background:#fff}
select.box{padding:8px 16px;border-radius:20px;border:.5px solid var(--border);font-size:13px;outline:none;background:#fff}

table{width:100%;border-collapse:collapse}
th,td{padding:11px 16px;text-align:left;border-bottom:.5px solid var(--border);font-size:13px}
th{background:var(--bg);font-weight:550;color:var(--text2);font-size:12px;text-transform:uppercase;letter-spacing:.3px}
tr:hover td{background:var(--pri-lt)}

.badge{padding:3px 10px;border-radius:14px;font-size:11px;font-weight:550;display:inline-block;letter-spacing:.2px}
.badge-suc{background:var(--suc-lt);color:var(--suc)}
.badge-war{background:var(--war-lt);color:var(--war)}
.badge-dan{background:var(--dan-lt);color:var(--dan)}
.badge-blu{background:var(--blu-lt);color:var(--blu)}
.badge-pri{background:var(--pri-lt);color:var(--pri)}

.card{background:var(--card);border-radius:var(--r);padding:20px 24px;border:.5px solid var(--border);box-shadow:var(--shadow)}
.card-title{font-size:14px;font-weight:600;margin-bottom:12px}
.card-subtitle{font-size:12px;color:var(--text2)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.grid4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:18px}

.stat-num{font-size:28px;font-weight:650;letter-spacing:-.5px}
.stat-label{font-size:12px;color:var(--text2);margin-top:3px}

/* Forms */
.form-group{margin-bottom:14px}
.form-label{font-size:12px;color:var(--text2);margin-bottom:5px;font-weight:550}
.form-row{display:flex;gap:12px}
.form-row .form-group{flex:1}
input[type="text"],input[type="number"],input[type="date"],input[type="password"],input[type="email"],textarea,select.form-control{width:100%;padding:9px 14px;border:.5px solid var(--border);border-radius:var(--rs);font-size:13px;outline:none;font-family:inherit;background:var(--bg);transition:all var(--transition)}
input:focus,textarea:focus,select.form-control:focus{border-color:var(--pri);background:#fff}
textarea{min-height:80px;resize:vertical}
.form-error{font-size:11px;color:var(--dan);margin-top:3px;display:none}
.form-error.show{display:block}
input.invalid,textarea.invalid{border-color:var(--dan)}

/* Tabs */
.view-tabs{display:flex;gap:0;border-bottom:1.5px solid var(--border);margin-bottom:18px}
.view-tab{padding:9px 18px;font-size:13px;cursor:pointer;border:none;background:none;color:var(--text2);border-bottom:2px solid transparent;margin-bottom:-1.5px;transition:all var(--transition);font-weight:450}
.view-tab:hover{color:var(--text)}
.view-tab.active{color:var(--pri);border-bottom-color:var(--pri);font-weight:600}
.tabs{display:flex;gap:0;border-bottom:1.5px solid var(--border);margin-bottom:18px}
.tab-btn{padding:9px 20px;border:none;background:none;font-size:13px;cursor:pointer;color:var(--text2);border-bottom:2px solid transparent;margin-bottom:-1.5px;font-weight:450;transition:all var(--transition)}
.tab-btn.active{color:var(--pri);border-color:var(--pri);font-weight:600}

/* Charts */
.chart-box{background:var(--card);border-radius:var(--r);padding:20px 24px;border:.5px solid var(--border);box-shadow:var(--shadow)}
.chart-placeholder{height:200px;display:flex;align-items:flex-end;gap:18px;padding-top:20px}
.bar{flex:1;background:var(--pri);border-radius:4px 4px 0 0;min-width:24px;transition:height .3s;position:relative;opacity:.85}
.bar-label{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--text2);white-space:nowrap}
.bar-val{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:550}
.funnel{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 0}
.funnel-bar{height:34px;background:var(--pri);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:550;transition:all .3s}

/* Misc */
.stars{color:#e8a317;font-size:16px;letter-spacing:3px}
.phase-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 12px;border-radius:12px;font-size:11px;font-weight:600}
.clickable-row{cursor:pointer;transition:background .1s}
.clickable-row:hover{background:var(--pri-lt)}
.link-text{color:var(--blu);cursor:pointer;text-decoration:none;font-size:12px;font-weight:500;border-bottom:1px dashed var(--blu)}
.link-text:hover{color:var(--pri);border-color:var(--pri)}
.kv-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:.5px solid var(--border);font-size:13px}
.kv-row:last-child{border-bottom:none}
.kv-key{color:var(--text2)}
.kv-val{color:var(--text);font-weight:500;text-align:right}
.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:6px}