/* ================================================================
   VT Core UI kit styles
   Replica of VT_Core_UI_React visual layer — no framework required.
   ================================================================ */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--vt-font-sans);
  font-size: 14px;
  color: var(--vt-body-color);
  background: var(--vt-body-bg);
}

/* ---------- App shell ---------- */
.vt-app {
  display: flex;
  min-height: 100vh;
}
.vt-aside {
  background: #58595B;
  color: #fff;
  width: 250px;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  transition: width .25s ease-in-out, min-width .25s ease-in-out;
}
.vt-aside.collapsed { width: 70px; min-width: 70px; }
.vt-aside .brand {
  padding: 14px 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  height: 8rem;
}
.vt-aside .brand img { width: 100%; max-width: 170px; object-fit: contain; }
.vt-aside.collapsed .brand img { max-width: 42px; }

.vt-nav { list-style: none; padding: 0; margin: 0; flex: 1 1 auto; overflow-y: auto; }
.vt-nav::-webkit-scrollbar { display: none; }
.vt-nav-item > a,
.vt-nav-item > button {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: .625rem 1.625rem;
  color: #fff;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.vt-nav-item > a:hover,
.vt-nav-item > button:hover { background: rgba(255,255,255,.075); border-left: .5rem solid #0BB5A5; padding-left: calc(1.625rem - 5px); }
.vt-nav-item.active > a,
.vt-nav-item.active > button { background: rgba(255,255,255,.075); border-left: .5rem solid #0BB5A5; padding-left: calc(1.625rem - 5px); }
.vt-nav-item i { font-style: normal; width: 18px; text-align: center; }
.vt-aside.collapsed .vt-nav-item span { display: none; }
.vt-submenu { list-style: none; padding: 0; margin: 0; }
.vt-submenu .vt-nav-item > a { padding-left: 3rem; font-size: 14px; }

/* ---------- Main ---------- */
.vt-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.vt-header-wrap { margin: 10px 10px 0; }
.vt-header {
  background: #F5F5F5;
  border-radius: 4px;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 14px;
}
.vt-header .welcome { font-size: 14px; color: var(--vt-body-color); margin-right: auto; }
.vt-header .company {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #ddd; border-radius: 4px;
  padding: 6px 10px; font-size: 13px; cursor: pointer;
  min-width: 200px;
}
.vt-header .company .caret { margin-left: auto; color: var(--vt-muted); }
.vt-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; cursor: pointer; background: #eee; }

/* ---------- Content area ---------- */
.vt-content-wrap { padding: 10px; flex: 1 1 auto; min-height: 0; }
.vt-content {
  background: #F5F5F5;
  border-radius: 4px;
  padding: 16px;
  height: 100%;
  display: flex; flex-direction: column;
  min-height: 0;
}
.vt-page-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.vt-page-title h4 { margin: 0; font-size: 1.5rem; font-weight: 600; }
.vt-page-title .info-btn {
  background: transparent; border: 0; color: var(--vt-muted);
  font-size: 18px; cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.vt-page-title .info-btn:hover { background: rgba(0,0,0,.06); color: var(--vt-body-color); }

/* ---------- Buttons ---------- */
.vt-btn {
  height: 34px; padding: 0 14px; border: 0; border-radius: 4px;
  color: #fff; font: inherit; font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: filter .15s;
}
.vt-btn:hover { filter: brightness(.9); }
.vt-btn:disabled { opacity: .55; cursor: not-allowed; filter: none; }
.vt-btn.success { background: #19BE6B; }
.vt-btn.primary { background: #4994D0; }
.vt-btn.danger  { background: #DE2D26; }
.vt-btn.normal  { background: #fff; color: var(--vt-body-color); border: 1px solid #ddd; }
.vt-btn.normal:hover { filter: none; border-color: #b3b3b3; }
.vt-btn.b1 { background: #975FE5; }
.vt-btn.b2 { background: #5254CF; }
.vt-btn.b3 { background: #0BB5A5; }
.vt-btn.b4 { background: #FF6B3B; }
.vt-btn.b5 { background: #FFCE2B; color: #333; }
.vt-btn.b6 { background: #DC81CB; }
.vt-btn i { color: #fff; font-style: normal; }

/* ---------- Fields ---------- */
.vt-field { margin-bottom: 14px; position: relative; }
.vt-field label {
  display: block; font-size: 12px; color: var(--vt-muted); margin-bottom: 4px;
}
.vt-input, .vt-select {
  width: 100%; box-sizing: border-box;
  height: 37px; padding: 7px 12px;
  border: 1px solid #ddd; border-radius: 4px;
  background: #fff; font: inherit; font-size: 14px;
}
.vt-input:hover, .vt-select:hover { border-color: #b3b3b3; }
.vt-input:focus, .vt-select:focus {
  outline: none; border-color: #4994D0;
  box-shadow: 0 0 0 1px rgba(73,148,208,.2);
}
.vt-input.invalid { border-color: #DE2D26; }
.vt-error { color: #DE2D26; font-size: 12px; margin-top: 4px; }

/* ---------- Card ---------- */
.vt-card {
  background: #fff; border: 1px solid var(--vt-divider);
  border-radius: 4px; padding: 16px;
}

/* ---------- Alert ---------- */
.vt-alert {
  padding: .5rem .75rem; border-radius: 4px; font-size: 13px;
  text-align: center; margin-bottom: 12px;
}
.vt-alert.danger { background: #f8d7da; color: #842029; border: 1px solid #f5c2c7; }
.vt-alert.success { background: #d1e7dd; color: #0f5132; border: 1px solid #badbcc; }
.vt-alert.warning { background: #fff3cd; color: #664d03; border: 1px solid #ffecb5; }
.vt-alert.info { background: #cfe2ff; color: #084298; border: 1px solid #b6d4fe; }

/* ---------- DataGrid ---------- */
.vt-grid-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.vt-search {
  height: 34px; padding: 6px 10px 6px 32px;
  border: 1px solid #ddd; border-radius: 4px;
  width: 260px; font: inherit; font-size: 13px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") no-repeat 10px center;
}
.vt-grid-toolbar .spacer { margin-left: auto; }
.vt-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e5e5e5; }
.vt-table th, .vt-table td { padding: 8px 10px; text-align: center; border: 1px solid #e5e5e5; font-size: 13px; }
.vt-table thead th { background: #F5F5F5; font-weight: 600; color: var(--vt-body-color); }
.vt-table tbody tr:nth-child(even) td { background: #FAFAFA; }
.vt-table tbody tr.selected td { background: #DCF5EE !important; }
.vt-table tbody tr:hover td { background: #F0F9F6; }
.vt-check { color: #19BE6B; font-weight: 700; }
.vt-x { color: #DE2D26; font-weight: 700; }

.vt-pager {
  display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 12px; color: var(--vt-muted);
}
.vt-pager .pages { display: flex; gap: 4px; }
.vt-pager .page { padding: 4px 9px; border-radius: 4px; cursor: pointer; }
.vt-pager .page.sel { background: #DCF5EE; color: var(--vt-body-color); font-weight: 600; }

/* ---------- Toast ---------- */
.vt-toast-stack { position: fixed; top: 16px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.vt-toast {
  min-width: 300px; max-width: 380px;
  background: #fff; border-radius: .25rem; overflow: hidden;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  animation: vt-slideIn .3s ease-out;
}
@keyframes vt-slideIn { from { transform: translateX(100%); opacity: 0 } to { transform: translateX(0); opacity: 1 } }
.vt-toast .th { padding: .5rem .75rem; font-weight: 600; font-size: 13px; display: flex; justify-content: space-between; border-bottom: 1px solid #dee2e6; }
.vt-toast .bd { padding: .75rem; font-size: 13px; }
.vt-toast.success .th { background: #d1e7dd; color: #0f5132; border-bottom-color: #badbcc; }
.vt-toast.error   .th { background: #f8d7da; color: #842029; border-bottom-color: #f5c2c7; }
.vt-toast.warning .th { background: #fff3cd; color: #664d03; border-bottom-color: #ffecb5; }
.vt-toast.info    .th { background: #cfe2ff; color: #084298; border-bottom-color: #b6d4fe; }
.vt-toast .x { cursor: pointer; font-size: 18px; line-height: 1; opacity: .5; user-select: none; }
.vt-toast .x:hover { opacity: .8; }

/* ---------- Modal ---------- */
.vt-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
}
.vt-modal {
  background: #fff; border-radius: 6px; max-width: 500px; width: 90%;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  animation: vt-modalIn .2s ease-out;
}
@keyframes vt-modalIn { from { transform: translateY(8px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.vt-modal .mh { padding: 12px 16px 0; display: flex; justify-content: flex-end; }
.vt-modal .mb { padding: 4px 20px 16px; text-align: center; }
.vt-modal .mf { padding: 0 20px 20px; display: flex; justify-content: center; gap: 10px; }

/* ---------- Login ---------- */
.vt-login-page {
  min-height: 100vh;
  background: #f8f9fa;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
}
.vt-login-card {
  max-width: 600px; width: 100%;
  background: #fff; border-radius: 8px;
  padding: 40px;
  box-shadow: 0 0 10px rgba(0,0,0,.1);
}
.vt-login-card .logo { display: flex; justify-content: center; margin-bottom: 10px; }
.vt-login-card .logo img { height: 200px; width: auto; object-fit: contain; }
.vt-login-card hr {
  border: none; border-top: 3px double #333;
  overflow: visible; text-align: center; height: 5px; margin: 22px 0;
}
.vt-login-card hr::after {
  background: #fff; content: 'OR'; padding: 0 4px;
  position: relative; top: -13px; color: #333; font-size: 12px;
}
.vt-login-card .forgot { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.vt-login-card .forgot a { font-size: 13px; color: #4994D0; text-decoration: none; }
.vt-login-card .forgot a:hover { text-decoration: underline; }
.vt-login-card .actions { display: flex; justify-content: center; margin-top: 14px; }
.vt-login-card .passkey { display: flex; justify-content: center; }

/* ---------- Utilities ---------- */
.vt-row { display: flex; align-items: center; gap: 8px; }
.vt-col { display: flex; flex-direction: column; gap: 8px; }
.vt-grow { flex: 1 1 auto; }

/* ---------- Dropdown menu ---------- */
.vt-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid var(--vt-divider); border-radius: 4px;
  box-shadow: 0 .25rem .5rem rgba(0,0,0,.1);
  min-width: 160px; z-index: 500; padding: 4px 0;
}
.vt-menu button {
  width: 100%; background: transparent; border: 0; text-align: left;
  padding: 8px 14px; font: inherit; cursor: pointer; font-size: 13px;
}
.vt-menu button:hover { background: #F5F5F5; }
.vt-avatar-wrap { position: relative; }