/* KIOT_UI_CORE_V1 - Thiện Tâm DMS Kiot-like visual system */

/* ===== BASE ===== */
:root{
  --kv-blue:#0078ff;
  --kv-blue-dark:#006ee6;
  --kv-border:#d9e4f0;
  --kv-border-soft:#e8eef5;
  --kv-head:#eaf4ff;
  --kv-bg:#f4f6f8;
  --kv-text:#111827;
  --kv-muted:#64748b;
  --kv-radius:8px;
  --kv-font:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}

html,body{
  font-family:var(--kv-font)!important;
  color:var(--kv-text)!important;
  background:var(--kv-bg)!important;
  font-size:14px!important;
}

*{
  box-sizing:border-box!important;
  letter-spacing:0!important;
}

/* ===== TOP APP SHELL ===== */
header,
.app-header,
.topbar,
.navbar,
.tt-header{
  background:#fff!important;
  border-bottom:1px solid var(--kv-border-soft)!important;
  box-shadow:none!important;
}

nav,
.main-nav,
.tt-nav{
  background:#fff!important;
  border-bottom:1px solid var(--kv-border-soft)!important;
  min-height:48px!important;
}

nav a,
nav button,
.main-nav a,
.main-nav button,
.tt-nav a,
.tt-nav button{
  height:36px!important;
  padding:0 16px!important;
  border-radius:8px!important;
  font-size:14px!important;
  font-weight:600!important;
}

nav a.active,
nav button.active,
.main-nav a.active,
.main-nav button.active,
.tt-nav a.active,
.tt-nav button.active,
.active[data-tab],
button.active{
  background:var(--kv-blue)!important;
  color:#fff!important;
  box-shadow:none!important;
}

/* ===== PAGE CONTAINER ===== */
main,
.app-main,
.page,
.page-wrap,
.content,
#app > div{
  font-family:var(--kv-font)!important;
}

.page,
.page-wrap,
.content-area{
  background:var(--kv-bg)!important;
}

/* ===== COMMON TYPOGRAPHY ===== */
h1{
  font-size:24px!important;
  line-height:1.2!important;
  font-weight:760!important;
  margin:0 0 8px!important;
  color:#0f172a!important;
}

h2{
  font-size:20px!important;
  line-height:1.25!important;
  font-weight:740!important;
  margin:0!important;
  color:#0f172a!important;
}

h3{
  font-size:16px!important;
  line-height:1.25!important;
  font-weight:720!important;
  margin:0!important;
  color:#0f172a!important;
}

p,.muted,.subtitle,.desc{
  color:var(--kv-muted)!important;
  font-size:14px!important;
  line-height:1.4!important;
}

/* ===== FORM ===== */
input,
select,
textarea{
  font-family:var(--kv-font)!important;
  border:1px solid #cfdceb!important;
  border-radius:7px!important;
  background:#fff!important;
  color:#1f2937!important;
  font-size:14px!important;
  box-shadow:none!important;
  outline:none!important;
}

input,
select{
  height:38px!important;
  padding:0 11px!important;
}

textarea{
  padding:10px 11px!important;
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--kv-blue)!important;
  box-shadow:0 0 0 2px rgba(0,120,255,.12)!important;
}

input::placeholder,
textarea::placeholder{
  color:#8b98aa!important;
}

/* ===== BUTTONS ===== */
button,
.btn{
  font-family:var(--kv-font)!important;
  border-radius:7px!important;
  font-weight:650!important;
  box-shadow:none!important;
  cursor:pointer;
}

button:not(.active):not(.primary):not(.danger),
.btn:not(.active):not(.primary):not(.danger){
  border:1px solid #cfdceb;
  background:#fff;
  color:#1f2937;
}

button:hover,
.btn:hover{
  filter:brightness(.99);
}

.primary,
.btn-primary,
button.primary{
  background:var(--kv-blue)!important;
  border:1px solid var(--kv-blue)!important;
  color:#fff!important;
}

/* ===== CARD ===== */
.card,
.panel,
.box,
.table-card{
  background:#fff!important;
  border:1px solid var(--kv-border)!important;
  border-radius:10px!important;
  box-shadow:none!important;
}

/* ===== TABLE GENERIC ===== */
table{
  border-collapse:collapse!important;
  width:100%!important;
  font-size:14px!important;
}

thead th{
  background:var(--kv-head)!important;
  color:#1f2937!important;
  font-weight:700!important;
  height:40px!important;
  border-bottom:1px solid #cfe0f3!important;
}

tbody td{
  height:52px!important;
  border-bottom:1px solid var(--kv-border-soft)!important;
  color:#111827!important;
}

tbody tr:hover td{
  background:#f8fbff!important;
}

/* ===== GOODS MODULE KIOT-LIKE ===== */
#ttGoodsV33{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:22px 32px 32px!important;
  font-family:var(--kv-font)!important;
  background:var(--kv-bg)!important;
}

/* giảm hero */
#ttGoodsV33 .goods33-kicker{
  display:block!important;
  font-size:11px!important;
  font-weight:750!important;
  letter-spacing:1.8px!important;
  color:var(--kv-blue-dark)!important;
  margin:0 0 4px!important;
}

#ttGoodsV33 h1{
  font-size:26px!important;
  font-weight:780!important;
  margin:0 0 6px!important;
}

#ttGoodsV33 .goods33-desc,
#ttGoodsV33 .goods33-subtitle{
  font-size:14px!important;
  margin:0!important;
}

#ttGoodsV33 .goods33-head,
#ttGoodsV33 .goods33-hero,
#ttGoodsV33 .goods33-title{
  margin-bottom:12px!important;
}

/* tab */
#ttGoodsV33 .goods33-tabs{
  height:48px!important;
  min-height:48px!important;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  padding:5px!important;
  margin:0 0 12px!important;
  background:#fff!important;
  border:1px solid var(--kv-border)!important;
  border-radius:10px!important;
  box-shadow:none!important;
}

#ttGoodsV33 .goods33-tabs button{
  height:38px!important;
  min-width:140px!important;
  padding:0 16px!important;
  border:0!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#1f2937!important;
  font-size:14px!important;
  font-weight:650!important;
}

#ttGoodsV33 .goods33-tabs button.active,
#ttGoodsV33 .goods33-tabs button[aria-selected="true"]{
  background:var(--kv-blue)!important;
  color:#fff!important;
}

/* body card */
#ttGoodsV33 .goods33-body{
  display:grid!important;
  grid-template-columns:230px minmax(0,1fr)!important;
  width:100%!important;
  min-height:520px!important;
  background:#fff!important;
  border:1px solid var(--kv-border)!important;
  border-radius:10px!important;
  overflow:hidden!important;
  box-shadow:none!important;
}

/* filter */
#ttGoodsV33 .goods33-filter{
  background:#fff!important;
  border-right:1px solid var(--kv-border-soft)!important;
  padding:14px!important;
}

#ttGoodsV33 .goods33-filter h3{
  font-size:18px!important;
  font-weight:760!important;
  margin:0 0 12px!important;
}

#ttGoodsV33 .goods33-filter label,
#ttGoodsV33 .goods33-filter .label{
  display:block!important;
  font-size:13px!important;
  font-weight:650!important;
  color:#1f2937!important;
  margin:12px 0 6px!important;
}

#ttGoodsV33 .goods33-filter input,
#ttGoodsV33 .goods33-filter select{
  width:100%!important;
  height:38px!important;
  border-radius:7px!important;
}

/* main */
#ttGoodsV33 .goods33-main{
  min-width:0!important;
  background:#fff!important;
}

#ttGoodsV33 .goods33-toolbar{
  height:54px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:8px 12px!important;
  background:#fff!important;
  border-bottom:1px solid var(--kv-border-soft)!important;
}

#ttGoodsV33 .goods33-toolbar input{
  height:38px!important;
  border-radius:7px!important;
}

#ttGoodsV33 .goods33-toolbar button,
#ttGoodsV33 .goods33-soft,
#ttGoodsV33 .goods33-icon{
  height:38px!important;
  min-width:38px!important;
  padding:0 14px!important;
  border-radius:7px!important;
  border:1px solid #cfdceb!important;
  background:#fff!important;
  color:#1f2937!important;
  font-size:13px!important;
  font-weight:650!important;
}

#ttGoodsV33 .goods33-primary{
  height:38px!important;
  padding:0 16px!important;
  border-radius:7px!important;
  background:var(--kv-blue)!important;
  border:1px solid var(--kv-blue)!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:700!important;
  box-shadow:none!important;
}

/* table rows */
#ttGoodsV33 .goods33-table-head,
#ttGoodsV33 .goods33-stocktake-head-v2{
  min-height:40px!important;
  background:var(--kv-head)!important;
  border-bottom:1px solid #cfe0f3!important;
  color:#1f2937!important;
  font-size:13px!important;
  font-weight:700!important;
}

#ttGoodsV33 .goods33-row,
#ttGoodsV33 .goods33-stocktake-row-v2{
  min-height:52px!important;
  background:#fff!important;
  border-bottom:1px solid var(--kv-border-soft)!important;
  color:#111827!important;
  font-size:13px!important;
}

#ttGoodsV33 .goods33-row:hover,
#ttGoodsV33 .goods33-stocktake-row-v2:hover{
  background:#f8fbff!important;
}

#ttGoodsV33 .goods33-check-toolbar-v2{
  height:52px!important;
  padding:8px 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  border-bottom:1px solid var(--kv-border-soft)!important;
  background:#fff!important;
}

#ttGoodsV33 .goods33-check-toolbar-v2 h2{
  font-size:18px!important;
  font-weight:760!important;
}

/* chỉ giữ nút cần thiết */
#ttGoodsV33 .goods33-check-actions-v2{
  display:flex!important;
  gap:8px!important;
  align-items:center!important;
}

#ttGoodsV33 .goods33-stocktake-list-v2{
  background:#fff!important;
  overflow:auto!important;
}

/* menu xuất file sạch */
#ttCheckExportMenuClean{
  z-index:999999!important;
}

@media(max-width:1100px){
  #ttGoodsV33{
    padding:16px 12px 28px!important;
  }

  #ttGoodsV33 .goods33-body{
    grid-template-columns:1fr!important;
  }

  #ttGoodsV33 .goods33-filter{
    border-right:0!important;
    border-bottom:1px solid var(--kv-border-soft)!important;
  }
}