/*
 * app-custom.css
 * Project-level overrides on top of the Crown template.
 * Loaded after main.min.css so it wins.
 */

:root {
  --bs-body-font-size: 0.8125rem;   /* 13px base — smaller, cleaner */
  --bs-body-line-height: 1.55;

  /* Text palette. The previous values were a light, blue-tinted grey (#4a5568),
     which read as washed out against white. These are darker and close to neutral,
     so copy looks crisp rather than cold. Driven through the Bootstrap tokens as
     well as the rules below, so components like .text-muted follow along. */
  --bs-body-color: #1f2733;
  --bs-body-color-rgb: 31, 39, 51;
  --bs-emphasis-color: #10161f;
  --bs-secondary-color: #5b6472;    /* .text-muted — muted but still legible */
}

body {
  font-size: 0.8125rem;
  color: #1f2733;
}

/* ---- Headings: tighten the scale ---- */
h1, .h1 { font-size: 1.65rem; }
h2, .h2 { font-size: 1.4rem; }
h3, .h3 { font-size: 1.2rem; }
h4, .h4 { font-size: 1.05rem; }
h5, .h5 { font-size: 0.95rem; }
h6, .h6 { font-size: 0.85rem; }

.app-hero-header h3 { font-size: 1.25rem; }
.breadcrumb { font-size: 0.78rem; }

/* ---- Cards: softer, modern shadow ---- */
.card {
  border: 1px solid #eef0f5;
  border-radius: 0.65rem;
  box-shadow: 0 2px 10px rgba(33, 41, 70, 0.04);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid #eef0f5;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}
.card-title { font-size: 0.95rem; font-weight: 600; }

/* ---- Tables: compact & readable ---- */
.table > thead > tr > th,
table.dataTable > thead > tr > th,
table.dataTable thead th,
.table thead th {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #161d27 !important;          /* dark, clearly readable */
  background-color: #eef2f7 !important;/* light header band */
  font-weight: 700;
  border-bottom: 1px solid #dfe4ec;
}
.table > tbody > tr > td {
  font-size: 0.8125rem;
  vertical-align: middle;
}
.table-hover > tbody > tr:hover > * {
  background-color: #f7f9fc;
}

/* DataTables controls */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  font-size: 0.78rem;
}

/* ---- Forms ---- */
.form-label { font-size: 0.78rem; font-weight: 600; color: #39414f; margin-bottom: 0.3rem; }
.form-control, .form-select { font-size: 0.8125rem; }
.form-control-lg, .form-select-lg { font-size: 0.875rem; }

/* ---- Buttons ---- */
.btn { font-size: 0.8125rem; }
.btn-sm { font-size: 0.74rem; }

/* ---- Sidebar ---- */
.sidebar-wrapper .sidebar-menu li a { font-size: 0.82rem; }
.sidebar-title h6 { font-size: 0.68rem; letter-spacing: 0.6px; text-transform: uppercase; opacity: 0.7; }

/* ---- Action icon boxes in tables ---- */
.icon-box.xs {
  width: 30px; height: 30px;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.icon-box.icon-box-hover:hover { transform: translateY(-1px); }

/* ---- Badges ---- */
.badge { font-weight: 600; font-size: 0.68rem; }

/* ---- Select2 — sized & themed to match Crown form controls ---- */
.select2-container .select2-selection--single {
  height: calc(1.5em + 0.75rem + 2px);
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  font-size: 0.8125rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal;
  padding-left: 0.75rem;
  color: #1f2733;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}
.select2-dropdown {
  border: 1px solid #e4e8f0;
  border-radius: 0.5rem;
  box-shadow: 0 8px 28px rgba(33, 41, 70, 0.12);
  font-size: 0.8125rem;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #0d6efd; }
.select2-search--dropdown .select2-search__field { border-radius: 0.375rem; border: 1px solid #dee2e6; }

/* Select2 inside an icon input-group: keep it flush with the addon */
.input-group > .select2-container { flex: 1 1 auto; width: 1% !important; }
.input-group > .select2-container .select2-selection--single {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  height: calc(1.5em + 0.75rem + 2px);
}

/* ---- jQuery UI datepicker — themed to match Crown ---- */
.ui-datepicker {
  width: 18rem;
  padding: 0.5rem !important;
  border: 1px solid #e4e8f0 !important;
  border-radius: 0.65rem !important;
  background: #fff !important;
  box-shadow: 0 8px 28px rgba(33, 41, 70, 0.12) !important;
  font-size: 0.8rem;
  z-index: 1060 !important;
}
.ui-datepicker .ui-datepicker-header {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0.5rem !important;
  padding: 0.25rem 0 0.5rem !important;
  font-weight: 600;
}
.ui-datepicker .ui-datepicker-title { color: #161d27; font-weight: 700; }
.ui-datepicker .ui-datepicker-title select {
  font-size: 0.78rem;
  padding: 0.15rem 0.35rem;
  margin: 0 0.15rem;
  border: 1px solid #e4e8f0;
  border-radius: 0.35rem;
  background: #fff;
  color: #1f2733;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  top: 0.4rem !important;
  height: 1.7rem; width: 1.7rem;
  border-radius: 0.4rem;
  cursor: pointer;
  background: #f1f4f9 !important;
  border: 0 !important;
}
.ui-datepicker .ui-datepicker-prev { left: 0.4rem !important; }
.ui-datepicker .ui-datepicker-next { right: 0.4rem !important; }
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span { background-image: none !important; }
.ui-datepicker .ui-datepicker-prev:before,
.ui-datepicker .ui-datepicker-next:before {
  font-family: "bootstrap-icons";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #39414f; font-size: 0.85rem;
}
.ui-datepicker .ui-datepicker-prev:before { content: "\f284"; }   /* bi-chevron-left */
.ui-datepicker .ui-datepicker-next:before { content: "\f285"; }   /* bi-chevron-right */
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover { background: #e3e9f2 !important; }
.ui-datepicker table { font-size: 0.78rem; margin: 0; }
.ui-datepicker th { color: #6b7484; font-weight: 600; padding: 0.35rem 0; }
.ui-datepicker td { padding: 1px; }
.ui-datepicker td a,
.ui-datepicker td span {
  text-align: center;
  padding: 0.4rem 0 !important;
  border: 0 !important;
  border-radius: 0.4rem !important;
  color: #39414f !important;
  background: transparent !important;
}
.ui-datepicker td a.ui-state-hover { background: #eef2f7 !important; }
.ui-datepicker td a.ui-state-active,
.ui-datepicker td a.ui-state-highlight {
  background: #0d6efd !important;
  color: #fff !important;
}
.ui-datepicker .ui-datepicker-today a { box-shadow: inset 0 0 0 1px #0d6efd; }

/* ---- Compact fields on the invoice form ---- */
#invoiceform .form-control,
#invoiceform .form-select,
#invoiceform .form-control-lg {
  font-size: 0.8125rem;
  padding: 0.35rem 0.6rem;
  min-height: calc(1.4em + 0.7rem + 2px);
  border-radius: 0.4rem;
}
#invoiceform textarea.form-control { min-height: 52px; }
#invoiceform .form-label,
#invoiceform label { font-size: 0.75rem; margin-bottom: 0.2rem; }

/* ---- Invoice line-item blocks ---- */
.invo-add-projects {
  position: relative;
  border: 1px solid #e6e9f0;
  border-radius: 0.6rem;
  background: #f9fbff;
  padding: 1rem 1rem 0.25rem;
  margin-bottom: 1rem;
}
.invo-add-projects .description { min-height: 58px; }
.invo-add-projects .removeDivButton {
  position: absolute;
  top: -0.65rem;
  right: -0.65rem;
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(220, 53, 69, 0.35);
  z-index: 2;
}

/* ---- Legacy StarAdmin grid spacing (used on the invoice page) ---- */
.grid-margin { margin-bottom: 1.5rem; }
.stretch-card { display: flex; align-items: stretch; }
.stretch-card > .card { width: 100%; }

/* ---- Misc polish ---- */
.app-hero-header { margin-bottom: 1.25rem; }
.notify-banner { font-size: 0.82rem; }
sub.text-danger { font-size: 0.7rem; }

/* ---- Sidebar: keep every menu item reachable ----
   The theme sets .sidebarMenuScroll to a hardcoded height with overflow:hidden and
   relies entirely on the OverlayScrollbars plugin to scroll it. As the menu grew
   (Subscription Types, Subscriptions, Commissions, Company & GST, Renew AMC,
   AMC Status...) the lower "Renewals & Reports" items fell outside that box, and
   with overflow:hidden they could not be reached at all.

   Lay the sidebar out as a column so the menu takes the leftover space and the
   settings row pins to the bottom, instead of depending on a magic pixel value. */
.sidebar-wrapper {
  display: flex;
  flex-direction: column;
}
.sidebar-wrapper .sidebarMenuScroll {
  flex: 1 1 auto;
  height: auto;          /* replaces calc(100vh - 140px) */
  min-height: 0;         /* lets a flex child actually shrink and scroll */
}
.sidebar-wrapper .sidebar-settings { flex: 0 0 auto; }

/* Native scrolling whenever the plugin has not taken over (it adds .os-host),
   so the menu still works if OverlayScrollbars fails to initialise. */
.sidebarMenuScroll:not(.os-host) { overflow-y: auto; overflow-x: hidden; }

/* A slim, always-visible track so it's obvious there is more menu below. */
.sidebarMenuScroll:not(.os-host)::-webkit-scrollbar { width: 6px; }
.sidebarMenuScroll:not(.os-host)::-webkit-scrollbar-thumb {
  background: #c7d2e3;
  border-radius: 3px;
}
.sidebarMenuScroll:not(.os-host)::-webkit-scrollbar-thumb:hover { background: #a9b9d0; }