/* =========================
   TRI HITA UI TOKENS v1.1
   Light mode default
   ========================= */
:root{
  /* Brand Core (Tri Datu + Green) */
  --tridatu-black: #111111; /* Primary */
  --tridatu-white: #FFFFFF; /* Base */
  --tridatu-red:   #C1121F; /* Secondary */
  --eco-green:     #2E7D32; /* Accent */
  --eco-green-dk:  #1B5E20; /* Hover/Active */

  /* Neutral */
  --bg:            #FAFAFA; /* App Background */
  --surface:       #FFFFFF; /* Card/Surface */
  --border:        #E0E0E0; /* Divider */
  --text:          #111111; /* Primary text */
  --text-2:        #424242; /* Secondary text */
  --muted:         #757575; /* Muted text */

  /* State */
  --success:       #2E7D32; /* Eco green */
  --danger:        #C1121F; /* Tridatu red */
  --warning:       #F59E0B;
  --info:          #424242;

  /* Component tokens */
  --primary:       var(--tridatu-black);
  --primary-hover: #000000;
  --secondary:     var(--tridatu-red);
  --secondary-hover:#A00F18;

  --link:          var(--eco-green);
  --link-hover:    var(--eco-green-dk);

  --ring:          rgba(46,125,50,.25); /* green focus ring */
  --radius:        12px;

  --shadow:        0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
}

/* Optional: Dark mode via attribute (no auto) */
:root[data-theme="dark"]{
  --bg:      #111111;
  --surface: #1C1C1C;
  --border:  #2A2A2A;
  --text:    #FFFFFF;
  --text-2:  #E0E0E0;
  --muted:   #BDBDBD;

  --info:    #E0E0E0;

  --shadow:  0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.35);
}

/* =========================
   Base
   ========================= */
*{ box-sizing:border-box; }
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
a{ color:var(--link); text-decoration:none; }
a:hover{ color:var(--link-hover); text-decoration:underline; }

.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

hr{ border:none; border-top:1px solid var(--border); }

/* =========================
   Layout blocks
   ========================= */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.nav .left, .nav .right{ display:flex; align-items:center; gap:12px; }
.nav .brand{ font-weight:700; letter-spacing:.2px; }

.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.h1{ font-size: 20px; margin: 0 0 10px; }
.h2{ font-size: 16px; margin: 0 0 10px; color: var(--text-2); }

/* =========================
   Buttons
   ========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor:pointer;
  font-weight: 600;
  line-height: 1;
  user-select:none;
}

.btn:focus{
  outline:none;
  box-shadow: 0 0 0 4px var(--ring);
}

/* Primary Button: BG #111111, Text #FFFFFF, Hover #000000 */
.btn-primary{
  background: var(--primary);
  color: var(--tridatu-white);
}
.btn-primary:hover{ background: var(--primary-hover); }

/* Secondary Button: BG #C1121F, Hover #A00F18 */
.btn-secondary{
  background: var(--secondary);
  color: var(--tridatu-white);
}
.btn-secondary:hover{ background: var(--secondary-hover); }

/* Outline Button */
.btn-outline{
  background: var(--surface);
  border-color: var(--primary);
  color: var(--primary);
}
.btn-outline:hover{ background: #F5F5F5; }

/* =========================
   Badges / Status
   ========================= */
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}
.badge-success{ border-color: rgba(46,125,50,.35); color: var(--success); }
.badge-danger{  border-color: rgba(193,18,31,.35); color: var(--danger); }
.badge-warning{ border-color: rgba(245,158,11,.35); color: var(--warning); }
.badge-info{    border-color: rgba(66,66,66,.35); color: var(--info); }

/* =========================
   Forms
   ========================= */
.label{ display:block; font-size:12px; color:var(--text-2); margin-bottom:6px; font-weight:600; }
.input{
  width:100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.input:focus{
  outline:none;
  border-color: rgba(46,125,50,.55);
  box-shadow: 0 0 0 4px var(--ring);
}

/* =========================
   Table
   ========================= */
.table{
  width:100%;
  border-collapse: collapse;
  overflow:hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}
.table th, .table td{
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  text-align:left;
  font-size: 13px;
}
.table th{
  color: var(--text-2);
  font-weight: 700;
  background: #F7F7F7;
}
:root[data-theme="dark"] .table th{ background:#161616; }
.table tr:last-child td{ border-bottom:none; }

/* =========================
   Tri Datu accent divider (subtle)
   ========================= */
.tridatu-line{
  display:flex;
  height:3px;
  border-radius:999px;
  overflow:hidden;
}
.tridatu-line > span{ flex:1; }
.tridatu-line .blk{ background: var(--tridatu-black); }
.tridatu-line .wht{ background: var(--tridatu-white); }
.tridatu-line .red{ background: var(--tridatu-red); }