/*
 * ============================================================
 *  modern_override.css
 *  Koperasi Sekolah — Modern Light Theme Override
 *  Cara pakai: tambahkan SETELAH semua link CSS lain di index.php
 *  <link rel="stylesheet" type="text/css" href="modules/css/modern_override.css">
 *  Tidak mengubah class yang sudah ada, hanya menimpa style-nya.
 * ============================================================
 */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── CSS Variables ────────────────────────────────────────── */
:root {
  /* Primary Palette */
  --clr-primary:       #2563EB;
  --clr-primary-soft:  #EFF6FF;
  --clr-primary-mid:   #BFDBFE;
  --clr-accent:        #0EA5E9;

  /* Neutral */
  --clr-bg:            #F8FAFC;
  --clr-surface:       #FFFFFF;
  --clr-border:        #E2E8F0;
  --clr-border-dark:   #CBD5E1;
  --clr-text:          #1E293B;
  --clr-text-muted:    #64748B;
  --clr-text-light:    #94A3B8;

  /* Semantic */
  --clr-success:       #10B981;
  --clr-success-soft:  #ECFDF5;
  --clr-warning:       #F59E0B;
  --clr-warning-soft:  #FFFBEB;
  --clr-danger:        #EF4444;
  --clr-danger-soft:   #FEF2F2;
  --clr-info:          #06B6D4;
  --clr-info-soft:     #ECFEFF;

  /* Topbar highlight colors (replaces old #FFFFCC, #BBDBE8, #CCFFCC) */
  --clr-hl-yellow:     #FEF9C3;
  --clr-hl-blue:       #DBEAFE;
  --clr-hl-green:      #DCFCE7;
  --clr-hl-orange:     #FEF3C7;
  --clr-hl-red:        #FEE2E2;

  /* Radius & Shadow */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:   0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:   0 10px 25px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.05);

  /* Transition */
  --tr: all .18s ease;
}

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  background: var(--clr-bg) !important;
  color: var(--clr-text) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--clr-bg); }
::-webkit-scrollbar-thumb { background: var(--clr-border-dark); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--clr-primary); }

/* ── Links ────────────────────────────────────────────────── */
a {
  color: var(--clr-primary) !important;
  text-decoration: none !important;
  transition: var(--tr);
}
a:hover { color: var(--clr-accent) !important; text-decoration: underline !important; }

/* ── TOP NAVIGATION BAR ───────────────────────────────────── */
/* Targets the first table (menu bar) — bgcolor="#EEEEFA" */
body > table:first-of-type,
table[style*="border-bottom"] {
  background: var(--clr-surface) !important;
  border-bottom: 2px solid var(--clr-border) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-sm) !important;
  width: 100% !important;
}

body > table:first-of-type td,
table[style*="border-bottom"] td {
  padding: 8px 12px !important;
  vertical-align: middle !important;
  background: transparent !important;
}

/* ── MAIN LAYOUT TABLE ────────────────────────────────────── */
body > table:nth-of-type(2),
table[border="0"][cellspacing="0"][cellpadding="3"] {
  width: 100% !important;
  border: none !important;
}

/* ── SIDEBAR / MENU ───────────────────────────────────────── */
#menu,
td#menu,
td[id="menu"] {
  background: var(--clr-surface) !important;
  border-right: 1px solid var(--clr-border) !important;
  width: 160px !important;
  min-height: calc(100vh - 60px) !important;
  padding: 12px 0 !important;
  box-shadow: 2px 0 8px rgba(0,0,0,.04) !important;
  vertical-align: top !important;
}

/* Menu inner table */
#menu table,
td#menu table {
  width: 100% !important;
  border: none !important;
}

#menu table td,
td#menu table td {
  padding: 3px 10px !important;
  border: none !important;
  background: transparent !important;
}

/* Menu section headers (em tags, old images replaced) */
#menu em,
td#menu em {
  display: block !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--clr-text-light) !important;
  padding: 16px 10px 4px !important;
  border-top: 1px solid var(--clr-border) !important;
  margin-top: 4px !important;
}

/* Menu background cells that used images */
#menu td[style*="background-image"],
td#menu td[style*="background-image"] {
  background-image: none !important;
  background-color: transparent !important;
}

/* Menu links */
#menu a,
td#menu a {
  display: block !important;
  padding: 5px 10px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
  color: var(--clr-text-muted) !important;
  font-weight: 500 !important;
  transition: var(--tr) !important;
}

#menu a:hover,
td#menu a:hover {
  background: var(--clr-primary-soft) !important;
  color: var(--clr-primary) !important;
  text-decoration: none !important;
  padding-left: 14px !important;
}

/* ── CONTENT AREA ─────────────────────────────────────────── */
/* Second td of the main layout — the content pane */
body > table:nth-of-type(2) > tbody > tr > td:last-child,
table[border="0"][cellspacing="0"][cellpadding="3"] > tbody > tr > td:last-child {
  vertical-align: top !important;
  padding: 16px 20px !important;
  background: var(--clr-bg) !important;
}

/* ── FIELDSET ─────────────────────────────────────────────── */
fieldset {
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 14px 18px !important;
  background: var(--clr-surface) !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 14px !important;
}

legend {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--clr-primary) !important;
  padding: 2px 10px !important;
  background: var(--clr-primary-soft) !important;
  border: 1px solid var(--clr-primary-mid) !important;
  border-radius: var(--radius-sm) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

/* ── TABLES ───────────────────────────────────────────────── */
table {
  border-collapse: collapse !important;
}

/* Content data tables */
table:not([style*="border-bottom"]):not(body > table:first-of-type):not(body > table:nth-of-type(2)) {
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
}

/* Caption */
table caption {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--clr-text) !important;
  text-align: left !important;
  padding: 0 0 10px 0 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  border-bottom: 2px solid var(--clr-primary) !important;
  margin-bottom: 8px !important;
}

/* General table cells inside content */
td, th {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif !important;
  font-size: 12px !important;
}

/* ── CSS CLASS OVERRIDES ──────────────────────────────────── */

/* grs_bw — table border bottom/white: used as standard row cells */
.grs_bw {
  border-bottom: 1px solid var(--clr-border) !important;
  border-right: 1px solid var(--clr-border) !important;
  padding: 5px 8px !important;
  background: var(--clr-surface) !important;
}

/* grs_kabw — table header-ish cells with border */
.grs_kabw {
  border: 1px solid var(--clr-border) !important;
  padding: 5px 8px !important;
  background: var(--clr-surface) !important;
}

/* Alternating row hover for tables using these classes */
tr:hover .grs_bw,
tr:hover .grs_kabw {
  background: var(--clr-primary-soft) !important;
}

/* Header rows (bgcolor=#EEEEEE) */
td[bgcolor="#EEEEEE"],
th[bgcolor="#EEEEEE"] {
  background: var(--clr-bg) !important;
  color: var(--clr-text-muted) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  border-bottom: 2px solid var(--clr-border) !important;
  border-right: 1px solid var(--clr-border) !important;
  padding: 7px 8px !important;
}

/* Info display cells (bgcolor=#FFFFCC) — member data display */
td[bgcolor="#FFFFCC"],
td[style*="background-color:#FFFFCC"] {
  background: var(--clr-hl-yellow) !important;
  border: 1px dashed var(--clr-border-dark) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
  color: var(--clr-text) !important;
}

/* Saldo koperasi cell (bgcolor=#BBDBE8) */
td[style*="background-color:#BBDBE8"] {
  background: var(--clr-hl-blue) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 700 !important;
  font-family: 'JetBrains Mono', monospace !important;
  color: var(--clr-primary) !important;
  padding: 4px 10px !important;
  border: 1px solid var(--clr-primary-mid) !important;
}

/* Total cell (bgcolor=#CCFFCC) */
td[style*="background-color:#CCFFCC"] {
  background: var(--clr-hl-green) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 700 !important;
  font-family: 'JetBrains Mono', monospace !important;
  color: var(--clr-success) !important;
  padding: 4px 10px !important;
  border: 1px solid #A7F3D0 !important;
  cursor: pointer !important;
}

/* #CCFFFF cells */
td[style*="background-color:#CCFFFF"] {
  background: var(--clr-info-soft) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  color: var(--clr-info) !important;
  border: 1px solid #A5F3FC !important;
}

/* #FFCC66 — active/selected tab buttons */
input[style*="background-color:#FFCC66"] {
  background-color: var(--clr-warning-soft) !important;
  border-color: var(--clr-warning) !important;
  color: #92400E !important;
  font-weight: 700 !important;
}

/* #EEEEAA */
td[bgcolor="#EEEEAA"] {
  background: var(--clr-hl-yellow) !important;
}

/* #DDDDDD */
td[bgcolor="#DDDDDD"] {
  background: var(--clr-bg) !important;
}

/* txtmsg class */
.txtmsg {
  color: var(--clr-text-muted) !important;
  font-style: italic !important;
  font-size: 11px !important;
}

/* box class */
.box {
  display: inline-block !important;
  background: var(--clr-primary-soft) !important;
  color: #a2a2a2 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 3px 10px !important;
  border-radius: var(--radius-sm) !important;
  letter-spacing: .04em !important;
}

/* ── INPUTS & FORM CONTROLS ───────────────────────────────── */
input[type="text"],
input[type="password"],
input[type="number"],
textarea,
select {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif !important;
  font-size: 12px !important;
  color: var(--clr-text) !important;
  background: var(--clr-surface) !important;
  border: 1px solid var(--clr-border-dark) !important;
  border-radius: var(--radius-sm) !important;
  padding: 5px 9px !important;
  outline: none !important;
  transition: var(--tr) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) inset !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: var(--clr-primary) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15) !important;
  background: var(--clr-surface) !important;
}

/* Readonly inputs */
input[readonly],
input[readonly="readonly"] {
  background: var(--clr-bg) !important;
  color: var(--clr-text-muted) !important;
  border-color: var(--clr-border) !important;
  cursor: default !important;
}

/* Numeric/currency inputs */
input[style*="text-align:right"] {
  text-align: right !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: .03em !important;
}

textarea {
  min-height: 70px !important;
  resize: vertical !important;
}

select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  padding-right: 28px !important;
}

/* ── BUTTONS ──────────────────────────────────────────────── */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-sm) !important;
  /* padding: 6px 16px !important; */
  transition: var(--tr) !important;
  background-image: none !important;   /* remove old gif backgrounds */
  letter-spacing: .02em !important;
}

/* Default/white buttons */
input[type="button"][style*="background-color:#FFFFFF"],
input[type="button"][style*="background-color: #FFFFFF"] {
  background: var(--clr-surface) !important;
  color: var(--clr-text) !important;
  border: 1px solid var(--clr-border-dark) !important;
}

input[type="button"][style*="background-color:#FFFFFF"]:hover,
input[type="button"][style*="background-color: #FFFFFF"]:hover {
  background: var(--clr-primary-soft) !important;
  border-color: var(--clr-primary) !important;
  color: var(--clr-primary) !important;
}

/* Specific action buttons by value/id */
input#add_button,
input[value*="Simpan"],
input[value*="simpan"],
input[value*="Menjurnal"] {
  background: var(--clr-primary) !important;
  color: #fff !important;
  border-color: var(--clr-primary) !important;
  min-width: 160px !important;
}

input#add_button:hover,
input[value*="Simpan"]:hover,
input[value*="simpan"]:hover,
input[value*="Menjurnal"]:hover {
  background: #1D4ED8 !important;
  border-color: #1D4ED8 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(37,99,235,.3) !important;
}

input#add_button:disabled,
input[type="button"]:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Tampil / Refresh button */
input#get_button,
input[value="Tampil"],
input[value="Refresh"] {
  background: var(--clr-success) !important;
  color: #fff !important;
  border-color: var(--clr-success) !important;
}

input#get_button:hover,
input[value="Tampil"]:hover,
input[value="Refresh"]:hover {
  background: #059669 !important;
  border-color: #059669 !important;
}

/* Toggle / Show-Hide menu button */
input#tombol_toggle {
  background: var(--clr-surface) !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--clr-text-muted) !important;
  min-width: 130px !important;
  background-image: none !important;
}

input#tombol_toggle:hover {
  background: var(--clr-primary-soft) !important;
  color: var(--clr-primary) !important;
  border-color: var(--clr-primary-mid) !important;
}

/* Browse "..." button */
input[value="..."] {
  min-width: 28px !important;
  padding: 6px 8px !important;
  font-weight: 700 !important;
  background: var(--clr-bg) !important;
  border: 1px solid var(--clr-border-dark) !important;
}

/* Logout link styled as badge */
a[href*="logout"] {
  background: var(--clr-danger-soft) !important;
  color: var(--clr-danger) !important;
  border: 1px solid #FCA5A5 !important;
  border-radius: var(--radius-sm) !important;
  padding: 4px 12px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-decoration: none !important;
  transition: var(--tr) !important;
}

a[href*="logout"]:hover {
  background: var(--clr-danger) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ── LOGIN PAGE ───────────────────────────────────────────── */
body > table[style*="500px"] {
  margin-top: 80px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body > table[style*="500px"] fieldset {
  width: 420px !important;
  min-height: 180px !important;
  background-image: none !important;
  padding: 28px 32px !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}

body > table[style*="500px"] legend {
  font-size: 14px !important;
  padding: 4px 16px !important;
}

body > table[style*="500px"] input[type="text"],
body > table[style*="500px"] input[type="password"] {
  width: 200px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
}

body > table[style*="500px"] input#login_button {
  background: var(--clr-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  width: 200px !important;
  height: 38px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background-image: none !important;
  letter-spacing: .04em !important;
  cursor: pointer !important;
  transition: var(--tr) !important;
}

body > table[style*="500px"] input#login_button:hover {
  background: #1D4ED8 !important;
  box-shadow: 0 4px 14px rgba(37,99,235,.4) !important;
  transform: translateY(-1px) !important;
}

#response {
  margin-top: 8px !important;
  padding: 8px 12px !important;
  background: var(--clr-danger-soft) !important;
  border: 1px solid #FCA5A5 !important;
  border-radius: var(--radius-sm) !important;
  color: var(--clr-danger) !important;
  font-size: 12px !important;
}

/* ── TAHUN TAKWIM BOX ─────────────────────────────────────── */
/* The box() PHP function output */
td > div[style*="color:#82716B"],
div[style*="color:#82716B"] {
  color: var(--clr-text-muted) !important;
  font-size: 11px !important;
  font-style: italic !important;
}

/* ── DELETE/HAPUS LINKS ───────────────────────────────────── */
a[href*="action=del"],
a[href*="del_trx"] {
  color: var(--clr-danger) !important;
  font-weight: 700 !important;
  background: var(--clr-danger-soft) !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  border: 1px solid #FCA5A5 !important;
  font-size: 11px !important;
}

a[href*="action=del"]:hover,
a[href*="del_trx"]:hover {
  background: var(--clr-danger) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ── STATUS INDICATORS ────────────────────────────────────── */
/* Posting alert */
#posting_alert {
  display: none;
  background: var(--clr-warning-soft) !important;
  color: var(--clr-warning) !important;
  border: 1px solid #FCD34D !important;
  padding: 3px 10px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* Loading gif hidden — use CSS spinner substitute context */
img[src*="loading.gif"] {
  opacity: .7 !important;
  width: 16px !important;
  height: 16px !important;
}

/* ── ADD ALERT / RESPONSE AREAS ───────────────────────────── */
#add_alert {
  margin: 8px 0 !important;
  min-height: 4px !important;
  padding: 6px 12px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
  transition: var(--tr) !important;
}

#add_alert:not(:empty) {
  background: var(--clr-success-soft) !important;
  border: 1px solid #6EE7B7 !important;
  color: #065F46 !important;
  font-weight: 600 !important;
}

/* ── POPUP / OVERLAY ──────────────────────────────────────── */
#overDiv {
  z-index: 9999 !important;
  background: var(--clr-surface) !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 10px !important;
}

/* ── BROWSE POPUP LISTS ───────────────────────────────────── */
#list_anggota {
  background: var(--clr-surface) !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 8px !important;
  max-height: 400px !important;
  overflow-y: auto !important;
  z-index: 500 !important;
}

#list_akad,
#load_akad,
#dmutasi {
  margin-top: 10px !important;
}

/* ── PREV / RESULT AREA ───────────────────────────────────── */
#prev {
  margin-top: 10px !important;
  padding: 10px !important;
  background: var(--clr-surface) !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-md) !important;
}

/* ── UTILITY — Numbers/Currency ───────────────────────────── */
td[align="right"] {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: .02em !important;
}

/* ── HR ───────────────────────────────────────────────────── */
hr {
  border: none !important;
  border-top: 1px solid var(--clr-border) !important;
  margin: 8px 4px !important;
}

/* ── PRINT FRIENDLY ───────────────────────────────────────── */
@media print {
  #menu, td#menu { display: none !important; }
  body { background: #fff !important; }
  .grs_bw, .grs_kabw { border: 1px solid #ccc !important; }
}

.static_menu {
    padding: 3px 10px;
}