/* TB GROUP - Premium Gold Theme */
:root{
  --tb-gold:#D4AF37;
  --tb-gold2:#C59B2A;
  --tb-gold3:#9E7C1F;
  --tb-bg:#0F0F10;
  --tb-card:#1A1A1D;
  --tb-border:#2A2A2E;
  --tb-text:#F5F5F5;
  --tb-muted:#CFCFCF;
}

/*
  iOS/iPad Safari bottom "white blur" fix:
  - Pastikan viewport (html) tidak pernah putih.
  - Tambah layer fixed di belakang semua konten untuk menutup area overscroll/safe-area.
*/
html, body{
  background: #1b1608 !important;
  background-image: none !important;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

body{
  position: relative;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: #1b1608;
  z-index: -9999;
  pointer-events: none;
}

/* subtle luxury background */
body{
  background: var(--tb-bg);
}

/* card look (works even if you keep Tailwind classes) */
.tb-card{
  background: var(--tb-card);
  border: 1px solid var(--tb-border);
  border-radius: 14px;
  box-shadow:none;
}

/* primary button */
.tb-btn-gold{
  background: var(--tb-gold);
  color:#111;
  font-weight:700;
  border-radius: 12px;
  border: none;
  box-shadow:none;
  transition: transform .12s ease, filter .12s ease;
}
.tb-btn-gold:hover{ filter: brightness(1.08); transform: translateY(-1px); }

/* nav link active look */
.tb-nav-active{
  color: var(--tb-gold) !important;
  background: rgba(212,175,55,.10) !important;
  border-color: rgba(212,175,55,.18) !important;
}

/* headings highlight */
.tb-title-gold{ color: var(--tb-gold); }

/* inputs focus ring */
input:focus, select:focus, textarea:focus{
  outline: none !important;
  box-shadow:none;
  border-color: rgba(212,175,55,.35) !important;
}

/* === FIX: Windows dropdown list (option) becomes white -> text must stay visible ===
   Banyak browser di Windows meng-render list <option> dengan background putih (native UI),
   sementara theme gelap memberi warna teks putih sehingga jadi "hilang".
   Solusi aman: paksa warna teks option jadi gelap + background putih agar selalu terbaca.
*/
select option,
select optgroup{
  background: #ffffff !important;
  color: #111111 !important;
}

/* Highlight option yang terpilih (jika browser mengizinkan styling) */
select option:checked{
  background: #D4AF37 !important;
  color: #111111 !important;
}

/* Pastikan select field tetap mengikuti tema gelap */
select,
.form-select,
.form-control select{
  background-color: rgba(255,255,255,.08) !important;
  color: var(--tb-text) !important;
  border: 1px solid rgba(255,255,255,.12);
}


/* FORCE SOLID THEME BACKGROUND (NO GRADIENT ANYWHERE) */
body, .login-bg, .auth-bg, .page-bg {
  background: #1b1608 !important; /* dark gold-brown inspired by logo */
  background-image: none !important;
}

/* remove any gradient utility leftovers */
* {
  background-image: none !important;
}


/* === TB Mobile Responsive Enhancements (Phone / iPad / Touch) === */
:root{
  --tb-safe-top: env(safe-area-inset-top, 0px);
  --tb-safe-right: env(safe-area-inset-right, 0px);
  --tb-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tb-safe-left: env(safe-area-inset-left, 0px);
  --tb-radius: 18px;
  --tb-pad: 14px;
}

/* Use corrected vh on mobile */
.min-h-screen{ min-height: calc(var(--vh, 1vh) * 100); }

/* Touch friendly */
.tb-touch a, .tb-touch button, .tb-touch input, .tb-touch select, .tb-touch textarea{
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tb-touch a, .tb-touch button{
  min-height: 44px;
}

/* Scroll helpers */
.tb-scroll-x{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.tb-scroll-x > table{ min-width: 680px; }

/* Mobile nav (bottom-ish) */
.tb-mnav{
  display:flex;
  gap:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  padding:10px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}
.tb-mnav::-webkit-scrollbar{ height: 6px; }
.tb-mnav-item{
  flex: 0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 11px;
  line-height: 1.1;
  white-space: nowrap;
}
.tb-mnav-item i{ font-size: 16px; }

/* Reduce header height & spacing on small screens */
@media (max-width: 640px){
  body{ padding-left: var(--tb-safe-left); padding-right: var(--tb-safe-right); }
  header{ padding-top: var(--tb-safe-top); }
  main{ border-radius: 22px !important; padding: var(--tb-pad) !important; }
  .tb-card{ border-radius: var(--tb-radius); }
  input, select, textarea{ font-size: 16px; } /* prevent iOS zoom */
  .text-xs{ font-size: 12px !important; }
}

/* Landscape on phone: keep nav visible and avoid cramped main */
@media (max-width: 900px) and (orientation: landscape){
  .tb-mobile-footer-nav{
    position: sticky;
    bottom: 0;
    z-index: 60;
    padding-bottom: calc(8px + var(--tb-safe-bottom));
  }
  main{ padding-bottom: calc(18px + 64px) !important; }
  img{ max-height: 56px; }
}

/* iPad / tablet: slightly bigger touch targets */
@media (min-width: 641px) and (max-width: 1024px){
  .tb-mnav-item{ font-size: 12px; padding: 12px 14px; }
  .tb-mnav-item i{ font-size: 18px; }
  main{ padding: 18px !important; }
}



/* === TB Precision Mobile Layout (All Pages) === */
:root{
  --tb-line: rgba(255,255,255,.10);
  --tb-soft: rgba(255,255,255,.06);
}

/* Prevent content overflow */
img, svg, video, canvas { max-width: 100%; height: auto; }
main, header, footer { overflow-x: clip; }
* { box-sizing: border-box; }

/* Make buttons/inputs proportional on mobile */
button, .btn, a.btn { max-width: 100%; }
input, select, textarea { width: 100%; }

/* Smart stacking for common flex rows inside main */
@media (max-width: 640px){
  main .flex{ flex-wrap: wrap; }
  main .flex > *{ max-width: 100%; }
  main .flex > input,
  main .flex > select,
  main .flex > textarea,
  main .flex > button,
  main .flex > a{
    flex: 1 1 100%;
  }

  /* chip nav: show icon only if space is tight */
  .tb-mnav-item{ min-width: 84px; }
}

/* Tablet / landscape: keep more columns */
@media (min-width: 641px) and (max-width: 1024px){
  main .flex > input,
  main .flex > select,
  main .flex > textarea{
    width: auto;
  }
}

/* ===== Responsive tables: portrait -> card rows, landscape -> scroll ===== */
table.tb-table{ width: 100%; }
table.tb-table th, table.tb-table td{ vertical-align: middle; }

@media (max-width: 640px) and (orientation: portrait){
  .tb-scroll-x{ overflow: visible; }
  .tb-scroll-x > table{ min-width: 0 !important; }

  table.tb-table{ display:block; }
  table.tb-table thead{ display:none; }
  table.tb-table tbody{ display:block; }
  table.tb-table tr{
    display:block;
    margin: 0 0 12px 0;
    padding: 12px 12px;
    border: 1px solid var(--tb-line);
    border-radius: 18px;
    background: var(--tb-soft);
  }
  table.tb-table td{
    display:flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--tb-line);
    white-space: normal !important;
  }
  table.tb-table td:first-child{ border-top: 0; padding-top: 2px; }
  table.tb-table td::before{
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 12px;
    color: rgba(255,255,255,.65);
    padding-right: 10px;
  }
  table.tb-table td.tb-td-actions{
    justify-content: flex-end;
  }
  table.tb-table td.tb-td-actions::before{ content: ""; padding-right: 0; }

  /* Actions: wrap nicely and keep touch targets */
  .aksi-wrapper{
    display:flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    width: 100%;
  }
  .aksi-wrapper > *{ flex: 1 1 auto; }
  .aksi-wrapper button,
  .aksi-wrapper select{
    width: 100%;
    min-height: 42px;
  }

  /* Remove truncation on mobile cards */
  .td-truncate{ max-width: none !important; }

  /* Project workers table: stack label above value + tidy actions */
  table.tb-card-stack td{
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
  }
  table.tb-card-stack td::before{
    padding-right: 0;
    font-weight: 600;
    letter-spacing: .2px;
  }
  table.tb-card-stack td.tb-td-actions{
    align-items: stretch;
  }
  table.tb-card-stack .aksi-wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }
  table.tb-card-stack .aksi-wrapper > *{ flex: initial; }
  table.tb-card-stack .aksi-item{ width: 100%; }
  table.tb-card-stack .move-row{
    display:flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  table.tb-card-stack .move-row > *{ width: 100%; }

}

/* Landscape phone: allow scroll table but keep buttons compact */
@media (max-width: 900px) and (orientation: landscape){
  .tb-scroll-x{ overflow-x: auto; }
  .tb-scroll-x > table{ min-width: 720px; }
  .aksi-wrapper{ gap: 6px; }
  .aksi-wrapper button{ min-height: 38px; }
}

/* ===== Form controls alignment ===== */
.tb-field{ display:flex; flex-direction:column; gap:6px; }
.tb-field label{ font-size: 12px; color: rgba(255,255,255,.7); }

@media (max-width: 640px){
  .tb-form-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .tb-form-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .tb-form-actions > *{ width: 100% !important; }
}

/* ===== Icon-only (optional): if element has .tb-icon-only, text hides on phone ===== */
@media (max-width: 420px){
  .tb-icon-only .tb-label{ display:none !important; }
}


/* =========================================================
   LANDSCAPE (mobile/tablet short-height) COMPACT MODE
   Fix: iPhone landscape hits md breakpoint so top navbar appears,
   but height is limited. Make header/nav compact + scrollable.
   ========================================================= */
.tb-topnav{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tb-topnav::-webkit-scrollbar{ display:none; }
.tb-topnav > a{ flex: 0 0 auto; }

/* Short-height landscape: compact header + smaller controls */
@media (orientation: landscape) and (max-height: 520px){
  .tb-header{
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .tb-logo{
    width: 56px !important;
    height: 56px !important;
  }
  .tb-brand-title{
    font-size: 1.05rem !important;
    line-height: 1.2 !important;
  }
  .tb-brand-sub{
    font-size: .72rem !important;
  }

  .tb-topnav{
    gap: 8px !important;
    max-width: 62vw;
    padding-right: 4px;
  }
  .tb-topnav a{
    padding: 8px 10px !important;
    border-radius: 14px !important;
    font-size: .9rem !important;
    line-height: 1 !important;
  }
  .tb-topnav a span{ gap: 8px !important; }
  .tb-topnav i{ font-size: 0.95rem !important; }

  /* Page internal segmented/tabs: allow horizontal scroll when space is tight */
  .tb-seg, .tb-tabs, .tb-tabrow{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tb-seg::-webkit-scrollbar,
  .tb-tabs::-webkit-scrollbar,
  .tb-tabrow::-webkit-scrollbar{ display:none; }
}

/* Even shorter: extremely compact */
@media (orientation: landscape) and (max-height: 420px){
  .tb-logo{ width: 48px !important; height: 48px !important; }
  .tb-topnav{ max-width: 58vw; }
  .tb-topnav a{ padding: 7px 9px !important; font-size: .85rem !important; }
}




/* === Mobile/iPad clean viewport (fix white bottom fade / iOS overscroll) === */
html, body{
  height: 100%;
  min-height: 100%;
  background: var(--tb-bg) !important;
  background-color: var(--tb-bg) !important;
  margin: 0;
}
body{
  min-height: 100vh;
  overscroll-behavior-y: none;
}
/* "cat tembok" full viewport: prevents white showing below content on iOS */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: var(--tb-bg);
  z-index: -1;
}
/* keep safe-area clean */
.tb-body{
  padding-bottom: env(safe-area-inset-bottom);
}

/* Solid surface container (no blur/glass to avoid iOS bottom haze) */
.tb-surface{
  background: rgba(26,26,29,.98) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 26px !important;
  box-shadow: none !important;
}

@media (max-width: 768px){
  .tb-surface{ border-radius: 22px !important; }
}

/* Kill any backdrop blur effects (can cause white haze on iOS when scrolling) */
*[style*="backdrop-filter"], .backdrop-blur{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }



/* =========================================================
   NAVBAR BACKGROUND 75% OPAQUE (User Request)
   ========================================================= */
header.tb-header.sticky{
  background: linear-gradient(90deg,
    rgba(15,15,16,0.75) 0%,
    rgba(26,26,29,0.75) 55%,
    rgba(15,15,16,0.75) 100%
  ) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.35) !important;
}

header.tb-header.sticky[class*="bg-"]{
  background-color: rgba(15,15,16,0.75) !important;
}


/* ==========================================================
   WINDOWS / DESKTOP DROPDOWN (SELECT/OPTION) VISIBILITY FIX
   Problem: on Windows some native <select> dropdown lists show
   white background, making text hard to read in dark theme.
   Fix: explicitly style select + option/optgroup colors.
   ========================================================== */

select{
  color: var(--tb-text);
  background-color: rgba(26,26,29,.92);
  border: 1px solid var(--tb-border);
  /* Hint to the browser that this UI is dark themed */
  color-scheme: dark;
}

select option{
  color: var(--tb-text);
  background-color: #1A1A1D; /* solid to avoid Windows white list */
}

select optgroup{
  color: var(--tb-gold);
  background-color: #1A1A1D;
}

/* Selected / hovered option (best-effort; some browsers limit styling) */
select option:checked,
select option:hover{
  background-color: #2A2A2E;
  color: var(--tb-text);
}

select:disabled{
  opacity: .65;
  cursor: not-allowed;
}