/* The icons (Font Awesome Free 6.5.2) are LFS's own copy, linked by every page before this file:
   vendor/fontawesome-6.5.2/css/all.min.css (hotfix 1.0.3d - never from a CDN, so they show offline
   and behind content blockers). */

.sidebar a,
.icon-title,
.icon-label,
.icon-button,
.stat-card span,
.panel h2,
.brand-points span,
.login-card label{
  display:flex;
  align-items:center;
  gap:10px;
}

.sidebar a i,
.icon-title i,
.panel h2 i,
.stat-card span i{
  width:20px;
  min-width:20px;
  color:var(--sidebar-accent);
  font-size:18px;
  line-height:1;
  text-align:center;
}

.sidebar a.active i,
.sidebar a:hover i{
  color:#000;
}

.topbar h1{
  display:flex;
  align-items:center;
  gap:12px;
}

.topbar h1 i{
  color:var(--sidebar-accent);
  font-size:26px;
}

button,
.small-btn,
.credit-actions button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

button i,
.small-btn i,
.credit-actions button i{
  color:inherit;
  font-size:16px;
  line-height:1;
}

/* .theme-toggle (login page + Settings Appearance control) sits on
   whatever surface it's placed on rather than always a gold/light button
   background - its icon must follow the button's own text color, not the
   generic black-icon-on-gold-button default above, or it goes invisible
   on a dark surface (the exact "icon fills become invisible under one
   theme" risk this checkpoint's audit calls out). Higher specificity
   (.theme-toggle i = 0,1,1) than the generic `button i` (0,0,2) above. */
.theme-toggle i,
.logout-navigation-button i,
.login-navigation-button i,
.icon-close-btn i{
  color:inherit;
}

.input-icon{
  position:relative;
  display:block;
  width:100%;
}

.input-icon i{
  position:absolute;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  color:var(--sidebar-accent);
  font-size:16px;
  pointer-events:none;
}

/* Hotfix 1.0.3d (owner 2026-11-03 14:26): the rule above places the FIELD's own icon; an icon inside a
   button in the same box (the Scan button next to Barcode / QR) stays inside its button - it was moved
   onto the field, and on an iPhone the Scan button was left an empty blue square. */
.input-icon button i,
.input-icon [role="button"] i{
  position:static;
  left:auto;
  top:auto;
  transform:none;
  color:inherit;
  font-size:inherit;
}

.input-icon input,
.input-icon select{
  width:100%;
  padding-left:40px !important;
}

.status-icon-success,
.credit-status-paid::before,
.status-ok::before{
  color:var(--tone-ok);
}

.status-icon-warning,
.credit-status-due-today::before,
.status-low::before{
  color:var(--tone-warn);
}

.status-icon-danger,
.credit-status-overdue::before,
.status-out::before{
  color:var(--tone-error);
}

.status-icon-info,
.credit-status-outstanding::before{
  color:var(--tone-info);
}

.status-pill,
.credit-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.btn-save::before,
.btn-add::before{
  content:"\2b";
}

.btn-receive-stock::before{
  content:"\f468";
}

.btn-find::before,
.btn-search::before{
  content:"\f002";
}

.btn-complete::before{
  content:"\f058";
}

.btn-print::before,
.btn-print-receipt::before{
  content:"\f02f";
}

.btn-export-pdf::before{
  content:"\f1c1";
}

.btn-export-excel::before{
  content:"\f1c3";
}

.btn-backup::before{
  content:"\f019";
}

.btn-restore::before{
  content:"\f093";
}

.btn-filter::before{
  content:"\f0b0";
}

.btn-refresh::before{
  content:"\f021";
}

.btn-cancel::before,
.btn-close::before{
  content:"\f00d";
}

.btn-save::before,
.btn-add::before,
.btn-receive-stock::before,
.btn-find::before,
.btn-search::before,
.btn-complete::before,
.btn-print::before,
.btn-print-receipt::before,
.btn-export-pdf::before,
.btn-export-excel::before,
.btn-backup::before,
.btn-restore::before,
.btn-filter::before,
.btn-refresh::before,
.btn-cancel::before,
.btn-close::before{
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  color:inherit;
  font-size:16px;
}

.status-ok::before{
  content:"\f058";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
}

.status-low::before{
  content:"\f071";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
}

.status-out::before{
  content:"\f057";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
}

.credit-status-paid::before{
  content:"\f058";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
}

.credit-status-due-today::before{
  content:"\f071";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
}

.credit-status-overdue::before{
  content:"\f057";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
}

.credit-status-outstanding::before{
  content:"\f05a";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
}

.edit-btn::before{
  content:"\f303";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
}

.danger-btn::before{
  content:"\f2ed";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
}

.credit-actions button:nth-child(1)::before{
  content:"\f53a";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
}

.credit-actions button:nth-child(2)::before{
  content:"\f058";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
}

.credit-actions button:nth-child(3)::before{
  content:"\f06e";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
}

.sales-table button[onclick^="removeFromCart"]::before{
  content:"\f2ed";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
}

.module-placeholder-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.module-placeholder-card{
  background:var(--surface-card);
  color:var(--text-primary);
  border:1px solid rgba(30,158,99,.28);
  border-radius:14px;
  padding:18px;
}

.module-placeholder-card i{
  color:var(--sidebar-accent);
  font-size:22px;
  margin-bottom:10px;
}

@media(max-width:900px){
  .module-placeholder-grid{
    grid-template-columns:minmax(0,1fr);
  }
}

/* Paired status badges own their foreground in both palettes. */
.credit-status::before, .status-ok::before, .status-low::before, .status-out::before { color:inherit; }