/* ============================================================
   Naga Console Theme (Material Indigo) — matches the tabbed shell
   ------------------------------------------------------------
   COSMETIC ONLY. Colours, borders, radius, background, spacing.
   Does NOT change display / position / width / float on
   structural elements, and never styles checkboxes/radios, so it
   cannot break page layout or function. Remove the <link> in
   header.php to revert instantly.
   ============================================================ */

:root {
  --naga-accent:   #8c1c2b;
  --naga-accent-2: #a83246;
  --naga-canvas:   #f0f2f5;
  --naga-strip:    #f0f2f5;
  --naga-line:     #e6e9ee;
  --naga-ink:      #344767;
  --naga-muted:    #67748e;
}

/* ---- Slimmer sidebar (save horizontal space) ---------------------------- */
/* xl only — below xl the sidenav is off-canvas, so no offset is needed.
   Sidebar 250px -> 180px; tighter left margin + item padding. */
@media (min-width: 1200px) {
  #sidenav-main { width: 11.25rem !important; margin-left: .5rem !important; }  /* 180px, 8px from edge */
  .main-content { margin-left: 12rem !important; }                              /* 192px */

  /* Tighter horizontal padding inside menu items (was 16px each side) */
  #sidenav-main .navbar-nav .nav-link { padding-left: .5rem !important; padding-right: .4rem !important; }
  #sidenav-main .navbar-nav .nav-link > div { margin-right: .35rem !important; }

  /* Auto-fit: keep the whole list visible without scrolling. The scrollbar is
     removed and a script (header.php) fine-tunes item padding; the rules below
     compact the header/icons so the list fits on common laptop heights too. */
  #sidenav-main,
  #sidenav-main #sidenav-collapse-main { overflow: hidden !important; }
  #sidenav-main .navbar-nav .nav-item { margin-top: 0 !important; margin-bottom: 0 !important; }

  /* Compact logo header + divider */
  #sidenav-main .sidenav-header { padding-top: .35rem !important; padding-bottom: .1rem !important; text-align: left !important; }
  #sidenav-main .navbar-brand-img { max-height: 30px !important; }
  /* Title left-aligned + smaller so "Naga IOT System" fits the slim sidebar */
  #sidenav-main .sidenav-header .navbar-brand { padding-left: 5px !important; white-space: nowrap; }
  #sidenav-main .sidenav-header .navbar-brand span { font-size: .85rem !important; line-height: 1.05 !important; }
  #sidenav-main hr.horizontal { margin-top: .2rem !important; margin-bottom: .3rem !important; }

  /* Hide the "Account" section label row to reclaim vertical space
     (Profile / Sign Out remain listed just below it). */
  #sidenav-main .navbar-nav > li.nav-item.mt-3 { display: none !important; }

  /* Smaller icon boxes + icons + tight line-height so each row is shorter */
  #sidenav-main .navbar-nav .nav-link { padding-top: .35rem; padding-bottom: .35rem; }
  #sidenav-main .navbar-nav .nav-link > div { width: 26px !important; height: 26px !important; min-width: 26px !important; }
  #sidenav-main .navbar-nav .nav-link .material-icons { font-size: 17px !important; }
  #sidenav-main .navbar-nav .nav-link .nav-link-text { line-height: 1.1 !important; }
}

/* ---- Page canvas -------------------------------------------------------- */
body.g-sidenav-show { background: var(--naga-canvas) !important; }

/* ---- Content width: index.php function pages at 98% with side gaps ------- */
.main-content .card.my-4 {
  width: 98%;
  max-width: 98%;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* On auth/guest pages (no sidebar) the login form is wrapped in the big content
   card — strip it so only the sign-in card shows, not a huge empty box. */
body:not(:has(#sidenav-main)) .card.my-4 {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* One-page auth layout: fix the page to the viewport, pin the footer to the
   bottom, and centre the login card in the space above — so the footer is
   always visible with no page scroll. */
body:not(:has(#sidenav-main)) {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  margin: 0 !important;
  overflow: hidden !important;
}
body:not(:has(#sidenav-main)) > .row {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: auto;
  display: flex; align-items: center; justify-content: center;
}
body:not(:has(#sidenav-main)) > .footer { flex: 0 0 auto !important; }
body:not(:has(#sidenav-main)) .card.my-4,
body:not(:has(#sidenav-main)) .card.my-4 > .card-body,
body:not(:has(#sidenav-main)) > .row > .col-12,
body:not(:has(#sidenav-main)) .container.my-auto { height: auto !important; min-height: 0 !important; margin: 0 !important; }
body:not(:has(#sidenav-main)) .footer.py-4 { padding-top: .5rem !important; padding-bottom: .5rem !important; }

/* ---- Cards -------------------------------------------------------------- */
.card {
  border-radius: 12px;
  border: 1px solid var(--naga-line);
  box-shadow: 0 1px 2px rgba(52,71,103,.06);
}
.card .card-header { border-radius: 12px 12px 0 0; }

/* ---- Tables (match the Payment List theme: compact + hover) ------------- */
.table {
  color: var(--naga-ink);
  font-size: .8rem;                        /* compact, like table-sm */
  vertical-align: middle;
}
.table > :not(caption) > * > * {           /* cells: tighter padding */
  padding: .5rem .5rem !important;
}
.table th, .table td { border-color: var(--naga-line) !important; }
/* Header rows: uppercase, muted, small — like payment_list's <thead> */
.table thead th,
tr.fieldlbl > th,
tr.fieldlbl > td,
.fieldlbl {
  background: transparent !important;
  color: #8392ab !important;               /* text-secondary */
  border-bottom: 1px solid var(--naga-line) !important;
  text-transform: uppercase !important;
  letter-spacing: .4px;
  font-size: .65rem !important;            /* text-xxs */
  font-weight: 700 !important;
}
.table tbody tr:hover { background: #f7f8fb; }

/* ---- Content typography to match the Payment List page ------------------ */
.main-content { font-size: .875rem; }
.main-content .card-header h6,
.main-content h6 { font-size: .95rem; }

/* ---- Form controls (native legacy inputs get the console look) ---------- */
/* Note: checkbox / radio / submit / button / file are intentionally excluded. */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
select,
textarea {
  border: 1px solid #d2d6da;
  border-radius: .5rem;
  padding: .4rem .65rem;
  color: var(--naga-ink);
  background-color: #fff;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
select:focus,
textarea:focus {
  border-color: var(--naga-accent);
  box-shadow: 0 0 0 2px rgba(140,28,43,.15);
}

/* Match Bootstrap-classed selects to the native inputs (border + radius only;
   leave Bootstrap's right padding intact so the dropdown arrow isn't clipped). */
select,
select.form-select,
.form-select {
  border: 1px solid #d2d6da !important;
  border-radius: .5rem !important;
}
select:focus,
.form-select:focus {
  border-color: var(--naga-accent) !important;
  box-shadow: 0 0 0 2px rgba(140,28,43,.15) !important;
}

/* ---- Buttons ------------------------------------------------------------ */
input[type="submit"],
input[type="button"] {
  background: var(--naga-accent);
  color: #fff;
  border: 0;
  border-radius: .5rem;
  padding: .4rem .95rem;
  font-size: .85rem;
  cursor: pointer;
  transition: filter .15s ease;
}
input[type="submit"]:hover,
input[type="button"]:hover { filter: brightness(1.08); }

.btn.bg-gradient-primary,
.bg-gradient-primary {
  background-image: linear-gradient(195deg, var(--naga-accent), var(--naga-accent-2)) !important;
}

/* ---- Links (content area only; exclude nav / buttons / pagination) ------ */
main a:not(.btn):not(.nav-link):not(.page-link):not(.navbar-brand):not(:has(> i.material-icons)) {
  color: var(--naga-accent);
}

/* ---- Pagination (modern pill style, on-theme) --------------------------- */
/* Material Dashboard forces these with !important (round 50% buttons), so we
   override with !important too. */
.pagination { gap: 4px; }
.pagination .page-item .page-link {
  margin: 0 !important;               /* undo Bootstrap's connected -1px overlap */
  min-width: 32px;
  height: 32px;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--naga-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--naga-ink) !important;
  font-size: .78rem !important;
  line-height: 1;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.pagination .page-item .page-link:hover {
  background: var(--naga-strip) !important;
  border-color: var(--naga-accent) !important;
  color: var(--naga-accent) !important;
}
.pagination .page-item.active .page-link {
  background: var(--naga-accent) !important;
  border-color: var(--naga-accent) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(140,28,43,.28) !important;
}
.pagination .page-item.disabled .page-link {
  color: #b7bcc7 !important;
  background: #fff !important;
  border-color: var(--naga-line) !important;
  box-shadow: none !important;
}
.pagination .page-link:focus { outline: none; box-shadow: 0 0 0 2px rgba(140,28,43,.15) !important; }

.text-primary { color: var(--naga-accent) !important; }

/* ---- Footer (small + on-theme) ------------------------------------------ */
.footer { font-size: .72rem; }
/* Force both sides to the same size (left .copyright had Material's text-sm). */
.footer .copyright,
.footer .copyright *,
.footer .nav-footer .nav-link { font-size: .72rem !important; }
.footer .copyright,
.footer .copyright a { color: var(--naga-muted) !important; }
.footer img { height: 18px !important; width: auto !important; }
.footer .material-symbols-outlined { font-size: 14px !important; color: var(--naga-muted) !important; }
.footer .text-black { color: var(--naga-ink) !important; }
.footer .nav-footer .nav-link {
  font-size: .72rem !important;
  color: var(--naga-muted) !important;
  padding-top: .1rem; padding-bottom: .1rem;
}
.footer .nav-footer .nav-link:hover { color: var(--naga-accent) !important; }

/* ---- List filter panels (merchant, device, payment, audit, etc.) -------- */
.list-filter-panel { text-align: left; }
.list-filter-panel .form-label {
  font-size: .75rem;
  font-weight: 600;
  margin-bottom: .25rem;
  color: var(--naga-ink);
}
.list-filter-panel .filter-section-title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--naga-muted);
  margin-bottom: .35rem;
}
.list-filter-panel .form-check {
  min-height: 1.25rem;
  margin-bottom: .15rem;
}
.list-filter-panel .form-check-label {
  font-size: .8125rem;
}
.list-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}