/* =====================================================
   KUBYSOFT UI FRAMEWORK
   Created by: Dan Garcia + SM-ARTIE
   Project: U24 Rebuild
   Version: 1.0
   ===================================================== */

:root{
  --ks-bg-page:#f4f7fc;
  --ks-bg-panel:#ffffff;
  --ks-bg-control:#eef4ff;
  --ks-bg-group:#fbfcff;
  --ks-bg-head:#edf2fa;
  --ks-bg-row-hover:#f8fbff;
  --ks-bg-pill:#e8eefc;

  --ks-border:#d9e2ef;
  --ks-border-soft:#e7edf6;

  --ks-text-main:#0f172a;
  --ks-text-muted:#64748b;
  --ks-text-soft:#526b91;
  --ks-text-pill:#3557a2;

  --ks-blue:#2563eb;
  --ks-blue-dark:#1d4ed8;
  --ks-green:#16a34a;
  --ks-orange:#d97706;
  --ks-danger:#b91c1c;

  --ks-radius-sm:10px;
  --ks-radius-md:14px;
  --ks-radius-lg:16px;
  --ks-radius-xl:18px;

  --ks-shadow-card:0 10px 30px rgba(2,8,23,.06);
}

html,body{
  margin:0;
  padding:0;
  background:var(--ks-bg-page);
  color:var(--ks-text-main);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

.ks-page{
  max-width:1220px;
  margin:28px auto;
  padding:0 16px;
}

.ks-card{
  background:var(--ks-bg-panel);
  border:1px solid var(--ks-border);
  border-radius:var(--ks-radius-lg);
  box-shadow:var(--ks-shadow-card);
}

.ks-card-body{
  padding:18px 18px 14px;
}

.ks-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}

.ks-split{
  display:flex;
  gap:16px;
  align-items:stretch;
}

.ks-col{
  flex:1;
  min-width:320px;
}

.ks-divider{
  width:1px;
  background:var(--ks-border);
  margin:0 2px;
}

.ks-title{
  margin:0;
  font-size:22px;
  letter-spacing:-.02em;
  font-weight:800;
  color:var(--ks-text-main);
}

.ks-subtitle{
  margin:6px 0 0;
  color:var(--ks-text-muted);
  font-size:13px;
  line-height:1.3;
}

.ks-pillbox{
  margin-left:auto;
  background:var(--ks-bg-pill);
  border:1px solid #dbeafe;
  border-radius:14px;
  padding:10px 12px;
  min-width:170px;
  text-align:right;
}

.ks-pillbox-big{
  font-weight:800;
  font-size:18px;
}

.ks-pillbox-small{
  color:var(--ks-text-muted);
  font-size:12px;
  margin-top:2px;
}

.ks-topzone{
  margin-top:14px;
  padding:14px;
  border:1px solid var(--ks-border);
  border-radius:var(--ks-radius-xl);
  background:var(--ks-bg-control);
}

.ks-panel{
  padding:12px;
  border:1px solid var(--ks-border);
  border-radius:var(--ks-radius-md);
  background:var(--ks-bg-group);
}

.ks-panel-title{
  margin:0 0 8px;
  font-size:13px;
  color:var(--ks-text-main);
  font-weight:700;
}

.ks-label{
  display:block;
  font-size:12px;
  color:var(--ks-text-muted);
  margin:0 0 6px;
}

.ks-hint,
.ks-muted,
.ks-status{
  font-size:12px;
  color:var(--ks-text-muted);
}

.ks-status{
  text-align:right;
  min-height:18px;
}

.ks-status.is-error{
  color:var(--ks-danger);
}

.ks-input,
.ks-select{
  height:38px;
  border:1px solid var(--ks-border);
  border-radius:var(--ks-radius-sm);
  padding:0 12px;
  background:#fff;
  outline:none;
  font-size:14px;
  min-width:170px;
  box-sizing:border-box;
}

.ks-input:focus,
.ks-select:focus{
  border-color:#93c5fd;
  box-shadow:0 0 0 3px rgba(59,130,246,.15);
}

.ks-input-short{ min-width:120px; }
.ks-input-wide{ min-width:250px; }
.ks-to-label{
  padding:0 6px;
  line-height:38px;
  color:var(--ks-text-muted);
}

.ks-btn{
  height:38px;
  border:1px solid var(--ks-border);
  background:#fff;
  border-radius:12px;
  padding:0 14px;
  cursor:pointer;
  font-weight:700;
  font-size:13px;
  color:var(--ks-text-main);
}

.ks-btn:hover{ background:#f8fafc; }

.ks-btn-primary{
  background:var(--ks-blue);
  border-color:var(--ks-blue);
  color:#fff;
}
.ks-btn-primary:hover{ background:var(--ks-blue-dark); }

.ks-btn-warning{
  background:var(--ks-orange);
  border-color:var(--ks-orange);
  color:#fff;
}

.ks-btn-success{
  background:var(--ks-green);
  border-color:var(--ks-green);
  color:#fff;
}

.ks-tablewrap{
  margin-top:14px;
  border:1px solid var(--ks-border);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}

.ks-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
}

.ks-table th{
  background:var(--ks-bg-head);
  color:var(--ks-text-soft);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:10px;
  border-bottom:1px solid var(--ks-border);
  text-align:left;
}

.ks-table td{
  padding:10px;
  border-bottom:1px solid var(--ks-border);
  font-size:13px;
  vertical-align:top;
}

.ks-table tbody tr:hover{ background:var(--ks-bg-row-hover); }

.ks-tag{
  display:inline-block;
  font-size:11px;
  font-weight:800;
  padding:3px 8px;
  border-radius:999px;
  background:#eef2ff;
  border:1px solid #c7d2fe;
  color:#334155;
}

.ks-ac-wrap{
  position:relative;
  display:inline-block;
}

.ks-ac-list{
  position:absolute;
  left:0;
  right:0;
  top:42px;
  z-index:50;
  background:#fff;
  border:1px solid var(--ks-border);
  border-radius:12px;
  box-shadow:0 16px 35px rgba(2,8,23,.12);
  max-height:280px;
  overflow:auto;
  display:none;
}

.ks-ac-item{
  padding:10px 12px;
  cursor:pointer;
  font-size:13px;
  border-bottom:1px solid var(--ks-border);
}

.ks-ac-item:last-child{ border-bottom:none; }
.ks-ac-item:hover{ background:#f8fafc; }
.ks-ac-item-sub{
  margin:2px 0 0;
  font-size:12px;
  color:var(--ks-text-muted);
}

.ks-filter-block{ display:none; }

@media (max-width:980px){
  .ks-split{ flex-direction:column; }
  .ks-divider{ display:none; }
  .ks-pillbox{ text-align:left; margin-left:0; width:100%; }
}