/* Armeni Sejahtera Kreasi Theme: Blue + Yellow dominant
   Applies site-wide, loaded after core/app.css for overrides
*/
:root {
  /* Brand palette from logo */
  --brand-primary: #0f4bd8;       /* deep blue */
  --brand-primary-2: #0a2f9a;     /* navy blend */
  --brand-accent: #f2c300;        /* golden yellow */
  --brand-accent-2: #ffd54a;      /* lighter yellow */
  --brand-text-on-dark: #ffffff;
  --brand-bg: #f6f8ff;
  --brand-shadow: 0 10px 30px rgba(15,75,216,0.18);

  /* Bootstrap CSS variable overrides */
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: 15, 75, 216;
  --bs-warning: var(--brand-accent);
  --bs-warning-rgb: 242, 195, 0;
}

html, body { background: var(--brand-bg); }

/* Navbar: gradient blue with white text */
.navbar.brand-gradient {
  background: linear-gradient(90deg, var(--brand-primary-2), var(--brand-primary));
  color: var(--brand-text-on-dark);
}
.navbar.brand-gradient .navbar-brand, 
.navbar.brand-gradient .nav-link, 
.navbar.brand-gradient .navbar-text {
  color: var(--brand-text-on-dark) !important;
}
.navbar.brand-gradient .btn-outline-secondary, 
.navbar.brand-gradient .btn-outline-light {
  color: #fff; border-color: rgba(255,255,255,.7);
}
.navbar.brand-gradient .btn-outline-secondary:hover {
  background: rgba(255,255,255,.12); color:#fff; border-color: transparent;
}
.navbar.brand-gradient .navbar-toggler { border-color: rgba(255,255,255,.4); }
.navbar.brand-gradient .navbar-toggler-icon { filter: invert(1) brightness(1.2); }

/* Brand mark next to title */
.brand-mark {
  display:inline-flex; align-items:center; gap:.5rem; color:#fff; text-decoration:none;
}
.brand-mark img { height: 100px; width:auto; display:block; }
.brand-mark .brand-text { font-weight:700; letter-spacing:.3px; }

/* Primary buttons with subtle gradient */
.btn-primary, .btn.btn-primary {
  background: linear-gradient(180deg, var(--brand-primary), var(--brand-primary-2));
  border: none;
  box-shadow: 0 6px 18px rgba(15,75,216,0.22);
  color: #ffffff !important;
}
.btn-primary:hover, .btn-primary:focus {
  filter: brightness(1.03);
  box-shadow: 0 8px 22px rgba(15,75,216,0.28);
}
.btn-primary:active { filter: brightness(.97); }
/* Ensure text and icons within blue buttons remain white for readability */
.btn-primary, .btn-primary .icon, .btn.bg-primary, .btn.bg-primary .icon {
  color: #ffffff !important;
  fill: currentColor !important;
}

/* Accent (yellow) buttons for secondary CTA */
.btn-accent {
  background: linear-gradient(180deg, var(--brand-accent), var(--brand-accent-2));
  color:#1b1b1b; border: none; box-shadow: 0 8px 20px rgba(242,195,0,0.25);
}
.btn-accent:hover { filter: brightness(1.02); }

/* Link/button focus ring tuned for dark/gradient backgrounds */
:focus-visible { outline: 3px solid rgba(242,195,0,.6); outline-offset:2px; }

/* Cards: smoother radius and shadow */
.card { border-radius: 12px; box-shadow: 0 4px 18px rgba(10,15,35,0.06); }

/* Tables: clearer header contrast */
.table thead th { background: #f4f6ff; color:#1a2b6d; border-bottom-color:#e3e7ff; }

/* Pills/badges in brand colors */
.badge.bg-success { background: #1b9c85 !important; }
.badge.bg-danger { background: #e53935 !important; }
.badge.bg-primary { background: var(--brand-primary) !important; }

/* Forms: rounded inputs */
.form-control, .form-select { border-radius: 10px; }
.input-group .btn { border-radius: 10px; }

/* Admin toolbar spacing tightening */
.wa-toolbar { background:#fff; border-radius: 12px; padding: .5rem; box-shadow: 0 3px 12px rgba(10,15,35,0.05); }

/* Register page visual polish without touching markup */
.register-hero {
  background: linear-gradient(180deg, var(--brand-primary), var(--brand-primary-2)); color:#fff; border-radius: 12px;
}

/* Compact, elegant pagination */
.pagination .page-link { border-radius: 8px; }

/* Mobile improvements */
@media (max-width: 767px) {
  .container-xxl, .container-fluid { padding-left: 16px; padding-right: 16px; }
  .navbar.brand-gradient { padding-top: .35rem; padding-bottom: .35rem; }
  .card { border-radius: 10px; }
  .table-responsive { border-radius: 10px; }
  /* make modal use more width on mobile */
  .modal-dialog { margin: .5rem; }
  /* slightly smaller navbar logo on small screens */
  .brand-mark img { height: 60px; }
  /* page header toolbar wraps nicely */
  .page-toolbar { width: 100%; margin-top: .35rem; flex-wrap: wrap; justify-content: flex-start; }
  .page-toolbar .btn { flex: 0 1 auto; }
  /* bulk actions form a tidy 2-column grid */
  .bulk-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); width: 100%; }
  .bulk-actions .btn { width: 100%; }
}

/* Desktop toolbar spacing */
.page-toolbar { margin-left: auto; }

/* Utility: gradient text for headings */
.text-brand-gradient {
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Header ribbon under h1 */
.h1, .h2, h1, h2 { position: relative; }
.h1::after, .h2::after, h1::after, h2::after {
  content:""; position:absolute; left:0; bottom:-6px; width:54px; height:4px; border-radius:4px; 
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-primary)); opacity:.8;
}

/* Title with logo utility */
.title-with-logo { display:flex; align-items:center; gap:.5rem; }
.title-with-logo img { height:28px; width:auto; display:inline-block; }
/* Consistent page title sizing across admin pages */
.page-title { font-size: 1.5rem; line-height: 1.25; font-weight: 700; margin: 0; }
@media (max-width: 767px) { .page-title { font-size: 1.35rem; } }