/**
 * iBookeeping app UI — light off-white theme + unified compact buttons
 */

/* Off-white light palette (dashboard / app) */
:root,
html[data-theme="light"],
html[data-pc-theme="light"] {
  --bg-primary: #F5F4F0;
  --bg-secondary: #EEEDEA;
  --bg-tertiary: #E6E5E1;
  --bg-card: #FAFAF8;
  --bg-sidebar: #FAFAF8;
  --bg-header: #FAFAF8;
  --bg-modal: #FAFAF8;
  --bg-dropdown: #FAFAF8;
  --bg-input: #FFFFFF;
  --bg-table-header: #F0EFEB;
  --bg-table-row: #FAFAF8;
  --bg-table-row-hover: #F0EFEB;
  --border-color: #D8D6D0;
  --border-color-light: #E8E6E1;
}

body,
.pc-container,
.pc-content {
  background-color: var(--bg-primary) !important;
}

.card,
.modal-content {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color-light) !important;
}

.pc-sidebar,
.pc-header {
  background-color: var(--bg-sidebar) !important;
}

.form-control,
.form-select {
  background-color: var(--bg-input) !important;
  border-color: var(--border-color) !important;
}

.table thead th {
  background-color: var(--bg-table-header) !important;
}

/* ── Unified compact buttons (Export, Add Client, Save, etc.) ── */
:root {
  --btn-app-height: 1.625rem;
  --btn-app-padding-x: 0.625rem;
  --btn-app-font-size: 0.75rem;
  --btn-app-icon-size: 0.8125rem;
  --btn-app-gap: 0.3rem;
}

.btn:not(.btn-icon-action),
a.btn:not(.btn-icon-action),
button.btn:not(.btn-icon-action),
input.btn[type="submit"]:not(.btn-icon-action),
.dropdown-toggle.btn:not(.btn-icon-action) {
  padding: 0.2rem var(--btn-app-padding-x) !important;
  font-size: var(--btn-app-font-size) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  min-height: var(--btn-app-height) !important;
  height: auto !important;
  max-height: none;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--btn-app-gap) !important;
  white-space: nowrap;
}

.btn:not(.btn-icon-action) i,
.btn:not(.btn-icon-action) .ti,
a.btn:not(.btn-icon-action) i,
button.btn:not(.btn-icon-action) i {
  font-size: var(--btn-app-icon-size) !important;
  line-height: 1 !important;
}

/* btn-sm / btn-lg → same compact app size */
.btn-sm:not(.btn-icon-action),
.btn-lg:not(.btn-icon-action) {
  padding: 0.2rem var(--btn-app-padding-x) !important;
  font-size: var(--btn-app-font-size) !important;
  min-height: var(--btn-app-height) !important;
}

.quick-action-btn.btn {
  padding: 0.2rem var(--btn-app-padding-x) !important;
  font-size: var(--btn-app-font-size) !important;
  min-height: var(--btn-app-height) !important;
  font-weight: 500 !important;
}

/* ── Page toolbar: Export + Add Client + similar ── */
.page-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
  width: 100%;
  max-width: 100%;
}

.page-actions .dropdown,
.page-actions .btn,
.page-actions > a {
  flex: 0 0 auto;
}

.page-actions .dropdown .btn {
  width: auto;
}

/* Card header rows with title + actions */
.card-body > .row.align-items-center > .text-end,
.card-body > .row.align-items-center > [class*="text-end"],
.page-actions-col {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
}

.card-body > .d-flex.justify-content-between.align-items-center {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.card-body > .d-flex.justify-content-between.align-items-center > .page-actions,
.card-body > .d-flex.justify-content-between.align-items-center > .d-flex.gap-2 {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-left: auto;
}

/* Form action rows (Save / Cancel) */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

/* Filter fields align with compact buttons */
.card-body form .form-control,
.card-body form .form-select {
  font-size: 0.8125rem;
  min-height: var(--btn-app-height);
  padding: 0.25rem 0.5rem;
}

/* Icon-only search/filter submit
   NOTE: Avoid using `:has()` here because it can accidentally match buttons that
   include BOTH icon + text (e.g. "Filter"), making them too small.
*/
.card-body form button.btn.btn-icon-only[type="submit"],
.card-body form a.btn.btn-icon-only,
.card-body form .btn.btn-icon-only {
  padding: 0 !important;
  width: var(--btn-app-height) !important;
  min-width: var(--btn-app-height) !important;
}

.card-body form .btn.w-100,
.card-body form button[type="submit"].btn {
  min-height: var(--btn-app-height) !important;
}

.dropdown-menu .dropdown-item {
  font-size: 0.8125rem;
  padding: 0.35rem 0.75rem;
}

/* Mobile / small screens: title left, compact actions pinned right */
@media (max-width: 767.98px) {
  .card-body > .row.align-items-center {
    display: flex;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 0.5rem;
  }

  .card-body > .row.align-items-center > [class*="col-"]:first-child,
  .card-body > .row.align-items-center > .col-md-4:first-child,
  .card-body > .row.align-items-center > .col-md-6:first-child {
    flex: 1 1 auto;
    width: auto !important;
    max-width: calc(100% - 11rem);
    min-width: 0;
  }

  .card-body > .row.align-items-center > .text-end,
  .card-body > .row.align-items-center > .col-md-6.text-end,
  .card-body > .row.align-items-center > .col-md-4.text-end,
  .page-actions-col {
    flex: 0 0 auto;
    width: auto !important;
    max-width: 100%;
    margin-left: auto !important;
    justify-content: flex-end !important;
    text-align: right !important;
    padding-left: 0;
  }

  .page-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.35rem;
    width: auto;
    max-width: 100%;
  }

  .page-actions .dropdown,
  .page-actions > .btn,
  .page-actions > a {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0;
  }

  .page-actions .dropdown .btn {
    width: auto !important;
  }

  .card-body > .d-flex.justify-content-between.align-items-center {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 0.5rem;
  }

  .card-body > .d-flex.justify-content-between.align-items-center > h5 {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0 !important;
  }

  .card-body > .d-flex.justify-content-between.align-items-center > .page-actions,
  .card-body > .d-flex.justify-content-between.align-items-center > .d-flex.gap-2 {
    flex: 0 0 auto;
    margin-left: auto !important;
    width: auto !important;
    justify-content: flex-end;
  }
}

/* ── Checkboxes & radios (ensure tick/check visible) ── */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-height: 1.25rem;
  padding-left: 0;
}

.form-check .form-check-input {
  float: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0.15em !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
}

.form-check-label {
  cursor: pointer !important;
  user-select: none;
  padding-top: 0.05em;
}

/* Table / inline checkboxes */
table .form-check-input,
td .form-check-input,
.form-check-inline .form-check-input {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Light-theme chart card headers */
.chart-card .card-header,
.report-card .card-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* ── Sidebar: collapsible section groups + icons on child links ── */
.pc-sidebar .pc-hasmenu > .pc-link {
  cursor: pointer;
  padding-top: 0.85rem !important;
  padding-bottom: 0.45rem !important;
}

.pc-sidebar .pc-hasmenu > .pc-link .pc-mtext {
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #000000 !important;
}

.pc-sidebar .pc-hasmenu > .pc-link .pc-arrow {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: #6c757d;
  transition: transform 0.2s ease;
}

.pc-sidebar .pc-hasmenu.pc-trigger > .pc-link .pc-arrow {
  transform: rotate(90deg);
}

.pc-sidebar .pc-hasmenu .pc-submenu .pc-link {
  padding-left: 1.25rem !important;
}

.pc-sidebar .pc-link {
  display: flex !important;
  align-items: center;
  padding: 0.55rem 1.25rem !important;
}

.pc-sidebar .pc-link .pc-micon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  min-width: 1.35rem;
  height: 1.35rem;
  margin-right: 0.65rem !important;
  flex-shrink: 0;
}

.pc-sidebar .pc-link .pc-micon i {
  display: inline-block !important;
  visibility: visible !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--text-secondary, #495057) !important;
  opacity: 1 !important;
}

.pc-sidebar .pc-link .pc-micon i::before {
  display: inline-block !important;
}

.pc-sidebar .pc-link .pc-mtext {
  font-weight: 500;
  font-size: 0.875rem;
}

.pc-sidebar .pc-item.active > .pc-link .pc-micon i,
.pc-sidebar .pc-link.active .pc-micon i {
  color: inherit !important;
}

.pc-sidebar .pc-item:not(.pc-caption):hover > .pc-link .pc-micon i {
  color: var(--primary-color, #1A73E8) !important;
}

/* ── Table row actions: small icon-only View / Edit / Delete ── */
.table-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  flex-wrap: nowrap;
}

.btn-icon-action {
  width: 1.75rem !important;
  height: 1.75rem !important;
  min-height: 1.75rem !important;
  max-height: 1.75rem !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  border: 1px solid var(--border-color, #D8D6D0) !important;
  background: var(--bg-card, #FAFAF8) !important;
  color: var(--text-secondary, #495057) !important;
  text-decoration: none !important;
  cursor: pointer;
  line-height: 1 !important;
  font-size: 0 !important;
  vertical-align: middle;
}

.btn-icon-action i,
.btn-icon-action .ti {
  font-size: 0.9rem !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.btn-icon-view:hover,
.btn-icon-view:focus {
  border-color: #0d6efd !important;
  color: #0d6efd !important;
  background: rgba(13, 110, 253, 0.08) !important;
}

.btn-icon-edit:hover,
.btn-icon-edit:focus {
  border-color: #d4a106 !important;
  color: #856404 !important;
  background: rgba(255, 193, 7, 0.15) !important;
}

.btn-icon-delete:hover,
.btn-icon-delete:focus {
  border-color: #dc3545 !important;
  color: #dc3545 !important;
  background: rgba(220, 53, 69, 0.08) !important;
}

/* Chart of Accounts & similar data tables */
.table-coa {
  table-layout: fixed;
  width: 100%;
  margin-bottom: 0;
}

.table-coa thead th {
  vertical-align: middle;
  padding: 0.65rem 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #000000 !important;
  background-color: var(--bg-table-header, #F0EFEB) !important;
  border-bottom: 2px solid var(--border-color, #D8D6D0);
  white-space: nowrap;
}

.table-coa tbody td {
  vertical-align: middle;
  padding: 0.6rem 1rem;
  font-size: 0.875rem;
  line-height: 1.4;
}

.table-coa .coa-col-code {
  width: 10%;
  min-width: 5.5rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.table-coa .coa-col-name {
  width: 28%;
  min-width: 10rem;
}

.table-coa .coa-col-desc {
  width: 32%;
  color: var(--text-muted, #6c757d) !important;
}

.table-coa .coa-col-balance {
  width: 14%;
  white-space: nowrap;
}

.table-coa .coa-col-status {
  width: 10%;
  white-space: nowrap;
}

.table-coa .coa-col-actions {
  width: 6%;
  min-width: 6.5rem;
  white-space: nowrap;
}

.table-coa .coa-name-inner {
  display: block;
}

.table-coa tr.coa-level-1 .coa-name-inner {
  padding-left: 1rem;
  border-left: 2px solid var(--border-color-light, #E8E6E1);
}

.table-coa tr.coa-level-2 .coa-name-inner {
  padding-left: 2rem;
  border-left: 2px solid var(--border-color-light, #E8E6E1);
}

.table-coa td.coa-col-actions .table-actions {
  justify-content: flex-end;
}

/* Toolbar search icon button (Chart of Accounts, etc.) */
button.btn.btn-search-icon {
  padding: 0 !important;
  width: var(--btn-app-height) !important;
  min-width: var(--btn-app-height) !important;
  max-width: var(--btn-app-height) !important;
  flex-shrink: 0;
}

button.btn.btn-search-icon i {
  margin: 0 !important;
  font-size: var(--btn-app-icon-size) !important;
}

/* ── Report filter toolbar (date filters + Apply / Clear / Export) ── */
.card-body:has(> .report-filter-bar) {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
}

.report-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  width: 100%;
}

.report-filter-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.report-filter-field {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.report-filter-field label {
  display: block;
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
  color: var(--text-muted, #6c757d);
  line-height: 1.2;
}

.report-filter-field .form-control,
.report-filter-field .form-control-sm {
  min-width: 9.5rem;
  max-width: 11rem;
  height: var(--btn-app-height);
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
  font-size: var(--btn-app-font-size);
}

.report-filter-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: center;
  gap: 0.375rem;
  margin-left: auto;
}

.report-filter-actions.page-actions {
  width: auto;
  justify-content: flex-end;
}

@media (max-width: 767.98px) {
  .card-body:has(> .report-filter-bar) {
    align-items: stretch;
    min-height: 0;
  }

  .report-filter-bar {
    align-items: stretch;
  }

  .report-filter-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }
}

/* ── Invoice detail header actions (badge-sized chips) ── */
.invoice-detail-actions-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.invoice-detail-actions {
  --invoice-chip-height: 1.3125rem;
  --invoice-chip-font: 0.6875rem;
  --invoice-chip-pad-x: 0.5rem;
  --invoice-chip-icon: 0.75rem;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
}

.invoice-detail-actions .invoice-detail-btn,
.invoice-detail-actions .btn.invoice-detail-btn {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: var(--invoice-chip-height) !important;
  height: var(--invoice-chip-height) !important;
  max-height: var(--invoice-chip-height) !important;
  padding: 0 var(--invoice-chip-pad-x) !important;
  font-size: var(--invoice-chip-font) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 0 !important;
  gap: 0.2rem !important;
  justify-content: center;
  white-space: nowrap;
}

.invoice-detail-actions .invoice-detail-btn i,
.invoice-detail-actions .invoice-detail-btn .ti {
  font-size: var(--invoice-chip-icon) !important;
  line-height: 1 !important;
}

.invoice-detail-actions .invoice-detail-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--invoice-chip-height);
  height: var(--invoice-chip-height);
  padding: 0 var(--invoice-chip-pad-x);
  font-size: var(--invoice-chip-font);
  font-weight: 600;
  line-height: 1;
  border-radius: 0;
}

@media (max-width: 767.98px) {
  .invoice-detail-actions-col {
    justify-content: flex-start;
    margin-top: 0.5rem;
  }

  .invoice-detail-actions {
    justify-content: flex-start;
  }
}