/* components.css — cards, metrics, forms, buttons, badges, tables */

/* ── CARDS ── */
.card{
  background:var(--bg);
  border:0.5px solid var(--border);
  border-radius:var(--rl);
  padding:1.25rem;margin-bottom:1rem;
  width:100%;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 4px 24px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.05);
  transition:box-shadow .2s;
}
.card:hover{box-shadow:0 6px 32px rgba(0,0,0,0.32),inset 0 1px 0 rgba(255,255,255,0.07);}
.card-header{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:1rem;gap:12px;flex-wrap:wrap;
}
.card-title{font-size:14px;font-weight:600;color:#fff;margin-bottom:2px;}
.card-sub{font-size:12px;color:var(--text2);}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.metric-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:1.5rem;}
.metric{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--rl);padding:14px 16px;position:relative;overflow:hidden;box-shadow:0 2px 16px rgba(0,0,0,.2);transition:transform .15s,box-shadow .15s;}
.metric:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(0,0,0,.3);}
.metric::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.03),transparent);pointer-events:none;}
.metric-label{font-size:11px;color:var(--text2);margin-bottom:5px;font-weight:500;letter-spacing:.01em;}
.metric-value{font-size:22px;font-weight:700;color:#fff;}
.ok{color:var(--green-t)!important;}.warn{color:var(--amber-t)!important;}.alert{color:var(--red-t)!important;}

/* FORM */
label{display:block;font-size:12px;color:var(--text2);margin-bottom:4px;font-weight:500;}
input,select,textarea{width:100%;font-family:inherit;font-size:13px;padding:7px 10px;background:rgba(0,0,0,.3);border:0.5px solid var(--border2);border-radius:var(--r);color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s;}
input:focus,select:focus,textarea:focus{border-color:var(--highlight);box-shadow:0 0 0 3px rgba(255,127,69,.15);}
select option{background:#0b1120;color:#fff;}
textarea{resize:vertical;min-height:65px;}
.field{margin-bottom:10px;}
.add-form{background:rgba(0,0,0,0.3);border-radius:var(--r);padding:1rem;margin-top:1rem;display:none;border:0.5px solid var(--border);backdrop-filter:blur(8px);}
.add-form.open{display:block;}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;font-size:12px;font-weight:500;border-radius:var(--r);cursor:pointer;border:0.5px solid var(--border2);background:rgba(255,255,255,.06);color:var(--text);font-family:inherit;transition:all .15s;}
.btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);}
.btn-primary{background:var(--highlight-grad);color:#fff;border-color:transparent;box-shadow:0 2px 12px rgba(255,127,69,.3);}
.btn-primary:hover{opacity:.9;box-shadow:0 4px 20px rgba(255,127,69,.45);}
.btn-danger{color:var(--red-t);border-color:rgba(255,107,122,.3);}
.btn-danger:hover{background:rgba(255,107,122,.12);}
.btn-sm{padding:4px 9px;font-size:11px;}

/* BADGES */
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.01em;}
.badge-blue{background:rgba(77,168,247,.18);color:var(--blue-t);border:0.5px solid rgba(77,168,247,.3);}
.badge-green{background:rgba(61,232,160,.15);color:var(--green-t);border:0.5px solid rgba(61,232,160,.28);}
.badge-amber{background:rgba(255,159,80,.18);color:var(--amber-t);border:0.5px solid rgba(255,159,80,.32);}
.badge-red{background:rgba(255,107,122,.16);color:var(--red-t);border:0.5px solid rgba(255,107,122,.3);}
.badge-gray{background:rgba(136,150,184,.14);color:var(--gray-t);border:0.5px solid rgba(136,150,184,.24);}
.badge-teal{background:rgba(45,205,196,.16);color:var(--teal-t);border:0.5px solid rgba(45,205,196,.3);}
.badge-purple{background:rgba(167,139,250,.16);color:var(--purple-t);border:0.5px solid rgba(167,139,250,.3);}

/* ROWS / TAGS */
.row-item{display:flex;align-items:flex-start;justify-content:space-between;padding:9px 0;border-bottom:0.5px solid var(--border);gap:12px;}
.row-item:last-child{border-bottom:none;}

/* Compact row used on overview cards */
.ov-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:0.5px solid var(--border);}
.ov-row:last-child{border-bottom:none;}
.ov-name{font-size:12px;font-weight:500;}
.ov-sub{font-size:11px;color:var(--text2);margin-top:1px;}
.ov-scroll{max-height:276px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent;}
.ov-scroll::-webkit-scrollbar{width:4px;}
.ov-scroll::-webkit-scrollbar-track{background:transparent;}
.ov-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:2px;}
[data-theme="light"] .ov-scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);}
.row-actions{display:flex;gap:5px;flex-shrink:0;}
.ov-ship-group{border:0.5px solid var(--border);border-radius:8px;margin-bottom:6px;overflow:hidden;}
.ov-ship-group[open] .ov-ship-summary{border-bottom:0.5px solid var(--border);}
.ov-ship-summary{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;font-size:12px;font-weight:600;cursor:pointer;list-style:none;user-select:none;}
.ov-ship-summary::-webkit-details-marker{display:none;}
.ov-ship-summary::before{content:'▶';font-size:9px;color:var(--text2);margin-right:7px;transition:transform .15s;}
.ov-ship-group[open] .ov-ship-summary::before{transform:rotate(90deg);}
.ov-ship-group .ov-scroll{padding:0 10px;max-height:220px;}
.ov-ship-group .ov-row:last-child{border-bottom:none;}
.tag-list{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
.tag{padding:2px 7px;background:rgba(255,255,255,.07);border:0.5px solid var(--border);border-radius:999px;font-size:10px;}
.empty{font-size:13px;color:var(--text2);padding:.75rem 0;}
.scroll-table{overflow-x:auto;}

/* TABLES */
.data-table{width:100%;border-collapse:collapse;font-size:12px;}
.data-table th{text-align:left;font-size:10px;font-weight:700;color:var(--text2);padding:6px 10px;border-bottom:0.5px solid var(--border);white-space:nowrap;letter-spacing:.03em;text-transform:uppercase;background:rgba(255,255,255,.02);}
.data-table td{padding:8px 10px;border-bottom:0.5px solid var(--border);vertical-align:middle;}
.data-table tr:last-child td{border-bottom:none;}
.data-table tr:hover td{background:rgba(255,255,255,.04);}
.num{text-align:right;font-variant-numeric:tabular-nums;}
.total-row td{font-weight:600;border-top:0.5px solid var(--border2);}

/* FILTERS */
.filters{display:flex;gap:7px;margin-bottom:1rem;flex-wrap:wrap;}
.filter-select{width:auto;min-width:130px;font-size:12px;}

/* ── SCHEDULING RULES ── */
.rule-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:0.5px solid var(--border);font-size:12px;}
.rule-row:last-child{border-bottom:none;}
.rule-dot{color:var(--blue-t);font-size:10px;flex-shrink:0;}
.rule-text{flex:1;line-height:1.4;}

/* ── LIGHT MODE ── */
[data-theme="light"] .card-title{color:var(--text);}
[data-theme="light"] .metric-value{color:var(--text);}
[data-theme="light"] .card{box-shadow:0 1px 4px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.06);}
[data-theme="light"] .card:hover{box-shadow:0 2px 8px rgba(0,0,0,.1),0 8px 24px rgba(0,0,0,.08);}
[data-theme="light"] .metric{box-shadow:0 1px 4px rgba(0,0,0,.08);}
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea{background:#f8faff;border-color:rgba(0,0,0,.2);}
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus{background:#fff;}
[data-theme="light"] .btn{background:#f1f4fa;border-color:rgba(0,0,0,.18);color:var(--text);}
[data-theme="light"] .btn:hover{background:#e4e9f3;border-color:rgba(0,0,0,.28);}
[data-theme="light"] .data-table th{background:rgba(0,0,0,.04);color:var(--text2);}
[data-theme="light"] .data-table tr:hover td{background:rgba(0,0,0,.04);}
[data-theme="light"] .add-form{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.12);}
[data-theme="light"] .tag{background:rgba(0,0,0,.07);border-color:rgba(0,0,0,.14);}