/* ========================================
   Compact UI Overrides
   Loaded LAST (after style.css, admin_dashboard.css,
   and any page-level CSS) so it wins the cascade.
   Goal: reduce the oversized "zoomed in" feel across
   the sidebar, forms, buttons, headers, and cards
   without changing colors, layout, or functionality.
   ======================================== */

/* Slightly smaller root scale -- shrinks every rem-based
   size (icons, headings, badges, spacing) by ~9% site-wide */
html {
  font-size: 14.5px;
}

/* ---------- Sidebar ---------- */
.sidebar-brand {
  padding: 16px 18px;
  margin-bottom: 10px;
}

.sidebar-brand h3 {
  font-size: 1.15rem;
}

.nav {
  padding: 0 10px;
}

.nav-item {
  margin-bottom: 2px;
}

.nav-link {
  padding: 9px 14px;
  font-size: 0.92rem;
  margin-bottom: 2px;
  border-radius: 8px;
}

.nav-link i {
  margin-right: 10px;
  font-size: 0.95rem;
  width: 18px;
}

.sidebar .collapse .nav-link {
  padding: 7px 12px 7px 34px;
  font-size: 0.87rem;
}

/* ---------- Main content ---------- */
.main-content {
  padding: 16px 20px;
}

.page-header {
  margin-bottom: 20px;
  padding-bottom: 14px;
}

.page-header h1 {
  font-size: 1.4rem;
}

.dashboard-header h1 {
  font-size: 1.25rem;
}

.welcome-banner {
  padding: 20px 24px;
  border-radius: 14px;
  margin-bottom: 20px;
}

.welcome-content h2 {
  font-size: 1.4rem;
}

.welcome-content p {
  font-size: 0.9rem;
}

.welcome-content .greeting-icon {
  font-size: 1.9rem;
  margin-right: 10px;
}

.header-date {
  padding: 6px 14px;
  font-size: 0.85rem;
}

/* ---------- Buttons ---------- */
.btn {
  padding: 9px 20px;
  font-size: 0.9rem;
  border-radius: 8px;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.8rem;
}

.btn-lg,
.btn-success.btn-lg {
  padding: 10px 26px !important;
  font-size: 0.95rem !important;
}

/* ---------- Form fields (custom .form-control, login etc.) ---------- */
.form-control {
  padding: 10px 14px;
  font-size: 0.92rem;
  border-radius: 8px;
}

.form-group {
  margin-bottom: 14px;
}

.form-group label {
  margin-bottom: 5px;
  font-size: 0.88rem;
}

.input-group-text {
  padding: 0 12px;
  font-size: 0.95rem;
}

.input-group .form-control {
  padding: 10px 12px;
}

/* ---------- Bootstrap floating-label inputs ----------
   Bootstrap default height is calc(3.5rem + 2px) (~58px on a
   16px root). We bring it down to a more normal ~46px while
   keeping the floated-label math consistent. */
.form-floating {
  margin-bottom: 10px;
}

.form-floating > .form-control,
.form-floating > .form-select {
  height: calc(2.9rem + 2px);
  min-height: calc(2.9rem + 2px);
  padding: 0.75rem 0.75rem 0.35rem;
  font-size: 0.92rem;
}

/* <select> centers its text vertically regardless of top/bottom padding
   split, unlike <input> which respects padding-top. Give it extra
   top padding so the centered text clears the floated label above it. */
.form-floating > .form-select {
  padding-top: 1.4rem;
  padding-bottom: 0.4rem;
}

/* <input type="date"> also vertically centers its content (like <select>)
   in Chrome, ignoring the padding-top/bottom split that plain text inputs
   respect. Give it the same extra top padding, and force its label to
   always sit in the floated position since the browser's own date-format
   hint (dd-mm-yyyy) is not a real placeholder and does not reliably
   trigger :not(:placeholder-shown). */
.form-floating > input[type="date"].form-control {
  padding-top: 1.4rem;
  padding-bottom: 0.4rem;
}

/* Chrome/Edge/Safari render <input type="date"> text via an internal
   shadow-DOM element that vertically centers itself inside the box and
   IGNORES the padding-top/padding-bottom split above (it only respects
   total box height). That's why the label-float alone isn't enough --
   the date value still visually lands on top of the floated label.
   Nudge the actual editable date text down explicitly so it clears
   the floated label above it. Firefox is unaffected (no shadow-DOM
   centering there) and ignores these ::-webkit-* pseudo-elements. */
.form-floating > input[type="date"].form-control::-webkit-datetime-edit {
  position: relative;
  top: 0.5rem;
}

.form-floating > textarea.form-control {
  height: auto;
  min-height: 70px;
}

.form-floating > label {
  padding: 0.65rem 0.75rem;
  font-size: 0.92rem;
}

/* ---------- Floated (small, top-aligned) label state ----------
   ONE consolidated rule covers every case that should show the
   small floated label: focused, has a real value, is a <select>,
   is readonly/prefilled, has the JS-added .has-value class, or is
   a date input (whose native format hint isn't a real placeholder).
   Keeping this as a single rule avoids duplicate/conflicting
   transforms fighting each other. Background is set to transparent
   so Bootstrap's white "cutout" patch behind the label never shows
   -- the translateY below already lifts the label fully inside the
   box, clear of the border, so no cutout is needed. */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label,
.form-floating > input.form-control[readonly] ~ label,
.form-floating > input.form-control.has-value ~ label,
.form-floating > input[type="date"].form-control ~ label {
  opacity: 0.65;
  background-color: transparent;
  transform: scale(0.8) translateY(-0.15rem) translateX(0.1rem);
}

/* ---------- Empty/unfocused label state ----------
   Dim (rather than shrink) the label on empty required fields so
   it reads as hint text instead of looking "stuck" inside the box.
   Excludes date inputs and selects, which are always floated above
   via the rule before this one. */
.form-floating > .form-control:placeholder-shown:not(:focus):not([type="date"]) ~ label {
  opacity: 0.55;
}

.form-floating > .form-select:invalid ~ label {
  opacity: 0.55;
}

/* ---------- Section headers used inside forms (e.g. "Contact Information") ---------- */
.form-section {
  margin-bottom: 1.4rem;
  padding-bottom: 1rem;
}

.form-section-title {
  font-size: 0.92rem;
  margin-bottom: 0.9rem;
  gap: 8px;
}

.section-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 0.85rem;
}

/* ---------- Cards ---------- */
.card {
  border-radius: 12px;
}

.card-body {
  padding: 16px 18px;
}

.card-header {
  padding: 12px 18px;
}

/* ---------- Badges / alerts ---------- */
.badge {
  padding: 4px 9px;
  font-size: 0.72rem;
}

.alert {
  padding: 10px 16px;
  font-size: 0.88rem;
}

/* ---------- Tabs (nav-tabs / nav-pills used as section tabs) ---------- */
.nav-tabs .nav-link,
.nav-pills .nav-link {
  padding: 8px 16px;
  font-size: 0.88rem;
}

.nav-pills.filter-tabs .nav-link {
  padding: 6px 14px;
  font-size: 0.82rem;
}

/* ---------- Login screens ---------- */
.login-header {
  padding: 22px;
}

.login-header .logo i {
  width: 60px;
  height: 60px;
  font-size: 1.5rem;
}

.login-header h2 {
  font-size: 1.4rem;
}

.login-header p {
  font-size: 0.85rem;
}

.login-body {
  padding: 22px;
}

.erp-login-box .form-container {
  padding: 1.5rem;
}

.erp-login-box form input {
  padding: 11px 16px;
  margin: 1.4rem 0;
  font-size: 0.88rem;
}

.erp-login-box form button {
  padding: 11px;
  font-size: 0.95rem;
}

/* ---------- Plain Bootstrap heading/utility classes ----------
   Many pages don't use the custom .page-header/.dashboard-header
   classes at all -- they just use raw Bootstrap headings and
   font-size utilities (h1.h2, .fs-1, .badge.fs-6, etc). Bootstrap's
   defaults for these are large by design, so we scale them down
   the same way as the custom classes above. */
h1, .h1 { font-size: 1.7rem; }
h2, .h2 { font-size: 1.45rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.1rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.9rem; }

.fs-1 { font-size: 1.7rem !important; }
.fs-2 { font-size: 1.45rem !important; }
.fs-3 { font-size: 1.25rem !important; }
.fs-4 { font-size: 1.1rem !important; }
.fs-5 { font-size: 1rem !important; }
.fs-6 { font-size: 0.85rem !important; }

.display-1 { font-size: 4rem !important; }
.display-2 { font-size: 3.4rem !important; }
.display-3 { font-size: 2.8rem !important; }
.display-4 { font-size: 2.3rem !important; }
.display-5 { font-size: 1.9rem !important; }
.display-6 { font-size: 1.5rem !important; }

/* Big quick-action / tile buttons that use Bootstrap's py-3/py-4/py-5
   spacing utilities directly (e.g. class="btn btn-success w-100 py-3") */
.btn.py-3 { padding-top: 0.9rem !important; padding-bottom: 0.9rem !important; }
.btn.py-4 { padding-top: 1.1rem !important; padding-bottom: 1.1rem !important; }
.btn.py-5 { padding-top: 1.4rem !important; padding-bottom: 1.4rem !important; }

/* ---------- Tables (common source of "everything is huge") ---------- */
.table > :not(caption) > * > * {
  padding: 0.5rem 0.65rem;
  font-size: 0.88rem;
}

.table thead th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---------- Responsive: don't let anything grow past normal desktop size ----------
   Neutralizes any page-level rules that scale icons/text UP on
   large screens (1200px / 1400px / 1920px+ breakpoints). */
@media (min-width: 1200px) {
  .section-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.85rem !important;
  }

  .form-section-title {
    font-size: 0.95rem !important;
  }

  .form-floating .form-control,
  .form-floating .form-select {
    font-size: 0.92rem !important;
  }

  .btn-success.btn-lg {
    padding: 10px 26px !important;
    font-size: 0.95rem !important;
  }
}