/* Theme: Biru-Toska (shared across all pages) */
:root {
  --primary: #0a8d9f;
  --secondary: #33b5c6;
  --accent: #58c3cf;
  --light-bg: #eaf8fb;
  --surface: #ffffff;
  --border-color: #c7e4ea;
  --text-muted: #4b6b75;
  --shadow: rgba(10,141,159,0.08);
  --shadow-strong: rgba(10,141,159,0.25);
  --hover-secondary: #2aa0b2;
  --input-bg: #f1fcfd;
  --input-group-bg: #dff6f8;
}

html, body { background: var(--light-bg); color: #274048; }

/* Navbar */
.navbar {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important;
  box-shadow: 0 2px 12px var(--shadow) !important;
}
.navbar-brand, .navbar .nav { color: #fff !important; }

/* Sidebar */
.sidebar { background: var(--surface) !important; border-right: 1px solid var(--border-color) !important; box-shadow: 2px 0 12px var(--shadow) !important; }
.nav-link { color: var(--text-muted) !important; }
.nav-link.active { border-left-color: var(--secondary) !important; color: var(--primary) !important; }
.nav-link:hover { background: var(--light-bg) !important; border-left-color: var(--accent) !important; }

/* Cards and headers */
.card, .page-header { background: var(--surface) !important; box-shadow: 0 1px 3px var(--shadow) !important; }
.card-header { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important; color: #fff !important; }

/* Buttons */
.btn-primary { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important; border: none !important; color: #fff !important; }
.btn-primary:hover { box-shadow: 0 4px 16px var(--shadow-strong) !important; }
.btn.btn-back { background: var(--secondary) !important; color: #fff !important; }
.btn.btn-back:hover { background: var(--hover-secondary) !important; }
.btn.btn-cancel { background: var(--input-bg) !important; color: var(--primary) !important; }
.btn.btn-cancel:hover { background: var(--input-group-bg) !important; }

/* Inputs */
.form-control, .form-select { border: 1px solid var(--border-color) !important; }
.form-control:focus, .form-select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 0.25rem rgba(88,195,207,0.18) !important; }
.form-control[readonly] { background: var(--input-bg) !important; }
.input-group-text { background: var(--input-group-bg) !important; color: var(--primary) !important; border: 1px solid var(--border-color) !important; }

/* Misc */
.page-header h2 { color: var(--primary) !important; }

/* Ensure high specificity for overrides */
body * { -webkit-font-smoothing:antialiased; }