/* =========================================================
   BARAKAH EXPO
   High-Tech Business Dashboard
   Dark Teal / Cyan / Neon UI
   ========================================================= */

:root {
  --bg-main: #020f16;
  --bg-deep: #031820;
  --bg-panel: #06242d;
  --bg-panel-2: #082b35;

  --cyan: #00eaff;
  --cyan-bright: #18f4ff;
  --teal: #00d8c8;
  --green: #25e6a5;
  --blue: #238cff;
  --purple: #765cff;
  --gold: #ffbd3d;

  --text: #f4fbff;
  --text-soft: #a8c1ca;
  --text-dim: #68838d;

  --border: rgba(0, 226, 255, 0.55);
  --border-soft: rgba(0, 226, 255, 0.25);

  --shadow: 0 0 18px rgba(0, 220, 255, 0.1), inset 0 0 20px rgba(0, 220, 255, 0.025);

  --glow: 0 0 8px rgba(0, 235, 255, 0.35), 0 0 22px rgba(0, 235, 255, 0.12);
}

/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 75% 5%, rgba(0, 217, 255, 0.07), transparent 30%),
    radial-gradient(circle at 25% 80%, rgba(0, 120, 180, 0.05), transparent 30%), #020e15;

  color: var(--text);

  font-family: "Segoe UI", Inter, Arial, sans-serif;

  font-size: 14px;
  overflow-x: hidden;
}

button {
  font-family: inherit;
}

button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* =========================================================
   HIGH TECH GRID BACKGROUND
   ========================================================= */

.dashboard-page::before {
  content: "";
  position: fixed;
  inset: 0;

  pointer-events: none;
  z-index: -1;

  background-image:
    linear-gradient(rgba(0, 220, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 220, 255, 0.025) 1px, transparent 1px);

  background-size: 28px 28px;

  mask-image: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.7) 65%, transparent 100%);
}

/* =========================================================
   APP SHELL
   ========================================================= */

.app-shell {
  width: calc(100% - 20px);
  max-width: 1536px;
  min-height: calc(100vh - 20px);

  margin: 10px auto;

  background: linear-gradient(180deg, rgba(3, 26, 35, 0.96), rgba(1, 17, 24, 0.98));

  border: 1px solid rgba(0, 230, 255, 0.48);

  border-radius: 14px;

  box-shadow:
    0 0 25px rgba(0, 220, 255, 0.07),
    inset 0 0 40px rgba(0, 220, 255, 0.025);

  overflow: hidden;
}

/* =========================================================
   TOP HEADER
   ========================================================= */

.topbar {
  height: 72px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 20px;

  background: linear-gradient(90deg, #031922, #061e28 45%, #041923);

  border-bottom: 1px solid rgba(0, 230, 255, 0.45);

  box-shadow:
    0 0 18px rgba(0, 220, 255, 0.08),
    inset 0 -1px 0 rgba(0, 230, 255, 0.08);

  position: relative;
  z-index: 10;
}

.topbar-left {
  display: flex;
  align-items: center;
  min-width: 0;
}

.menu-button {
  width: 58px;
  height: 72px;

  margin: -1px 18px -1px -20px;

  border: 0;
  border-right: 1px solid rgba(0, 220, 255, 0.22);

  background: transparent;

  color: white;
  font-size: 29px;

  cursor: pointer;

  transition: 0.2s ease;
}

.menu-button:hover {
  color: var(--cyan);
  text-shadow: 0 0 12px var(--cyan);
}

/* =========================================================
   BRAND
   ========================================================= */

.brand-mark {
  width: 43px;
  height: 43px;

  margin-right: 10px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  font-size: 28px;

  background: radial-gradient(circle, rgba(0, 240, 220, 0.25), rgba(0, 100, 110, 0.04) 70%);

  filter: drop-shadow(0 0 8px rgba(0, 255, 210, 0.35));
}

.brand-logo-img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.brand-text {
  line-height: 1;
}

.logo {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.7px;

  color: #ffffff;

  text-shadow: 0 0 12px rgba(255, 255, 255, 0.1);
}

.brand-subtitle {
  margin-top: 6px;

  color: var(--cyan);

  font-size: 13px;
  font-weight: 600;

  letter-spacing: 0.1px;
}

/* =========================================================
   TOP RIGHT
   ========================================================= */

.topbar-right {
  display: flex;
  align-items: center;
  height: 100%;
}

.top-info {
  display: flex;
  align-items: center;
  gap: 9px;

  white-space: nowrap;
}

.top-icon {
  color: var(--cyan);
  font-size: 16px;

  text-shadow: 0 0 8px var(--cyan);
}

.top-info strong,
.user-box strong {
  display: block;

  color: #fff;

  font-size: 13px;
  font-weight: 700;
}

.top-info small,
.user-box small {
  display: block;

  margin-top: 3px;

  color: #78919a;
  font-size: 10px;
}

.top-divider {
  width: 1px;
  height: 34px;

  margin: 0 17px;

  background: rgba(0, 220, 255, 0.2);
}

.currency-chip {
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
}

.currency-chip strong {
  color: #fff;
}

.notification {
  position: relative;

  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  color: var(--cyan);

  font-size: 20px;

  text-shadow: 0 0 9px var(--cyan);
}

.notification span {
  position: absolute;

  top: -5px;
  right: -4px;

  width: 19px;
  height: 19px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #ffad16;
  color: #071018;

  font-size: 10px;
  font-weight: 800;

  box-shadow: 0 0 10px rgba(255, 173, 22, 0.45);
}

.user-box {
  display: flex;
  align-items: center;
  gap: 9px;

  white-space: nowrap;
}

.user-avatar {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border: 1px solid var(--cyan);
  border-radius: 50%;

  color: var(--cyan);

  background: radial-gradient(circle, rgba(0, 220, 255, 0.15), transparent 65%);

  box-shadow: 0 0 10px rgba(0, 230, 255, 0.25);
}

.user-box > span {
  margin-left: 6px;
  color: #fff;
}

/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.dashboard-layout {
  display: grid;

  grid-template-columns: 184px minmax(0, 1fr);

  min-height: calc(100vh - 92px);
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
  position: relative;

  display: flex;
  flex-direction: column;

  padding: 18px 10px 14px;

  background: linear-gradient(180deg, #03151e, #02131b);

  border-right: 1px solid rgba(0, 225, 255, 0.28);
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.nav-item {
  position: relative;

  width: 100%;
  min-height: 48px;

  display: flex;
  align-items: center;

  gap: 14px;

  padding: 10px 14px;

  border: 1px solid transparent;
  border-radius: 9px;

  background: transparent;

  color: #d6e4e9;

  font-size: 14px;
  font-weight: 600;

  text-align: left;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.nav-item span {
  width: 22px;

  display: inline-flex;
  justify-content: center;

  color: #c7dbe1;

  font-size: 18px;
}

.nav-item:hover {
  color: var(--cyan);

  background: linear-gradient(90deg, rgba(0, 220, 255, 0.09), transparent);

  border-color: rgba(0, 220, 255, 0.18);
}

.nav-item:hover span {
  color: var(--cyan);
}

.nav-item.active {
  color: var(--cyan);

  border-color: rgba(0, 240, 255, 0.55);

  background: linear-gradient(90deg, rgba(0, 235, 255, 0.17), rgba(0, 170, 200, 0.06));

  box-shadow:
    0 0 12px rgba(0, 230, 255, 0.15),
    inset 0 0 12px rgba(0, 230, 255, 0.04);
}

.nav-item.active::before {
  content: "";

  position: absolute;
  left: -1px;
  top: 7px;
  bottom: 7px;

  width: 3px;

  border-radius: 4px;

  background: var(--cyan);

  box-shadow: 0 0 10px var(--cyan);
}

.nav-item.active span {
  color: var(--cyan);
}

/* =========================================================
   SIDEBAR BRAND
   ========================================================= */

.sidebar-brand {
  margin-top: auto;

  padding: 18px 14px;

  border: 1px solid rgba(0, 220, 255, 0.4);

  border-radius: 10px;

  background: linear-gradient(145deg, rgba(0, 220, 255, 0.08), rgba(0, 50, 70, 0.12));

  box-shadow: 0 0 15px rgba(0, 220, 255, 0.06);
}

.mini-leaf {
  font-size: 25px;

  margin-bottom: 8px;

  filter: drop-shadow(0 0 7px rgba(0, 255, 210, 0.35));
}

.mini-logo-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.sidebar-brand strong {
  display: block;

  color: #fff;

  font-size: 13px;
}

.sidebar-brand small {
  display: block;

  margin-top: 5px;

  color: #8da8b1;

  font-size: 9px;
}

.sidebar-brand em {
  display: block;

  margin-top: 8px;

  color: #22dca5;

  font-size: 9px;
  font-style: normal;
}

/* =========================================================
   DASHBOARD CONTENT
   ========================================================= */

.dashboard {
  min-width: 0;

  padding: 25px 20px 28px;

  background: radial-gradient(circle at 95% 0%, rgba(0, 220, 255, 0.05), transparent 30%);
}

/* =========================================================
   WELCOME
   ========================================================= */

.welcome-row {
  margin-bottom: 18px;
}

.welcome-row h1 {
  margin: 0;

  color: #fff;

  font-size: 28px;
  line-height: 1.1;
  font-weight: 800;

  letter-spacing: -0.4px;
}

.welcome-row p {
  position: relative;

  margin: 8px 0 0;
  padding-left: 12px;

  color: #91b2bc;

  font-size: 12px;
}

.welcome-row p::before {
  content: "";

  position: absolute;

  left: 0;
  top: -1px;

  width: 3px;
  height: 18px;

  background: var(--cyan);

  box-shadow: 0 0 9px var(--cyan);
}

/* =========================================================
   SUMMARY PANELS
   ========================================================= */

.summary-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 20px;

  margin-bottom: 15px;
}

.tech-panel {
  min-width: 0;

  overflow: hidden;

  border: 1px solid var(--border);

  border-radius: 12px;

  background: linear-gradient(180deg, rgba(6, 43, 53, 0.83), rgba(3, 27, 35, 0.91));

  box-shadow: var(--shadow);

  position: relative;
}

.tech-panel::after {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background: linear-gradient(
    120deg,
    rgba(0, 255, 255, 0.04),
    transparent 35%,
    transparent 70%,
    rgba(0, 255, 255, 0.02)
  );
}

.panel-head {
  min-height: 50px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 9px 12px;

  border-bottom: 1px solid rgba(0, 220, 255, 0.3);

  position: relative;
  z-index: 1;
}

.panel-title {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 10px;
}

.panel-title h2 {
  margin: 0;

  color: #f2fbff;

  font-size: 14px;
  font-weight: 700;

  white-space: nowrap;
}

.panel-icon {
  width: 32px;
  height: 32px;

  flex: 0 0 32px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(0, 235, 255, 0.75);

  border-radius: 8px;

  color: var(--cyan);

  font-size: 18px;

  background: rgba(0, 220, 255, 0.055);

  box-shadow: 0 0 8px rgba(0, 230, 255, 0.1);
}

.panel-head > button {
  flex: 0 0 auto;

  padding: 6px 11px;

  border: 1px solid rgba(0, 220, 255, 0.42);

  border-radius: 7px;

  background: rgba(0, 160, 190, 0.08);

  color: #d9faff;

  font-size: 10px;
  font-weight: 600;

  cursor: pointer;

  transition: 0.2s ease;
}

.panel-head > button:hover {
  color: var(--cyan);

  border-color: var(--cyan);

  background: rgba(0, 220, 255, 0.12);

  box-shadow: 0 0 9px rgba(0, 230, 255, 0.15);
}

/* =========================================================
   LEDGER SUMMARY STATS
   ========================================================= */

.ledger-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 20px 0 24px;
}

.ledger-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: rgba(2, 20, 27, 0.6);
}

.ledger-stat-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.ledger-stat-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--cyan-bright);
}

@media (max-width: 700px) {
  .ledger-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   TABLES
   ========================================================= */

.table-wrap {
  width: 100%;

  overflow-x: auto;

  position: relative;
  z-index: 1;
}

.tech-panel table {
  width: 100%;

  border-collapse: collapse;

  table-layout: auto;

  font-size: 10px;
}

.tech-panel th {
  height: 36px;

  padding: 0 10px;

  color: #d9faff;

  font-size: 10px;
  font-weight: 700;

  text-align: left;

  white-space: nowrap;

  background: rgba(0, 200, 220, 0.075);

  border-bottom: 1px solid rgba(0, 220, 255, 0.2);
}

.tech-panel td {
  height: 35px;

  padding: 0 10px;

  color: #d2e4e9;

  white-space: nowrap;

  border-bottom: 1px solid rgba(0, 220, 255, 0.1);
}

.tech-panel tbody tr:hover {
  background: rgba(0, 220, 255, 0.035);
}

.tech-panel tbody:empty::after {
  content: "";
}

/* =========================================================
   EMPTY TABLE MESSAGE
   ========================================================= */

.tech-panel td[colspan] {
  height: 55px;

  text-align: center;

  color: #5e7b84;

  font-weight: 600;
}

/* =========================================================
   MANAGEMENT
   ========================================================= */

.management-section {
  margin-top: 3px;
}

.section-heading {
  display: flex;
  align-items: center;

  gap: 8px;

  margin: 0 0 9px;
}

.section-heading > span {
  width: 4px;
  height: 23px;

  border-radius: 4px;

  background: var(--cyan);

  box-shadow: 0 0 8px rgba(0, 235, 255, 0.8);
}

.section-heading h2 {
  margin: 0;

  color: #eaf8fb;

  font-size: 15px;
  font-weight: 700;
}

.management-cards {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 13px;
}

/* =========================================================
   MANAGEMENT CARD
   ========================================================= */

.management-card::after {
  content: "";

  position: absolute;

  top: 9px;
  right: 10px;

  width: 68px;
  height: 55px;

  opacity: 0.7;

  background-image: radial-gradient(circle, rgba(0, 220, 255, 0.3) 1px, transparent 1.5px);

  background-size: 7px 7px;

  mask-image: linear-gradient(135deg, black, transparent);

  pointer-events: none;
}

.management-card:hover {
  transform: translateY(-2px);

  box-shadow:
    0 0 18px rgba(0, 230, 255, 0.12),
    inset 0 0 18px rgba(0, 230, 255, 0.035);
}

/* =========================================================
   CARD ACCENT COLORS
   ========================================================= */

.customers-card {
  --card-accent: #00eaff;
  --card-glow: rgba(0, 234, 255, 0.18);
}

.suppliers-card {
  --card-accent: #168dff;
  --card-glow: rgba(22, 141, 255, 0.18);
}

.purchases-card {
  --card-accent: #20e9a2;
  --card-glow: rgba(32, 233, 162, 0.18);
}

.sales-card {
  --card-accent: #705cff;
  --card-glow: rgba(112, 92, 255, 0.2);
}

.payments-card {
  --card-accent: #ffb934;
  --card-glow: rgba(255, 185, 52, 0.2);
}

.ledger-card {
  --card-accent: #00eaff;
  --card-glow: rgba(0, 234, 255, 0.18);
}

.management-card {
  position: relative;
  min-height: 115px;
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  grid-template-rows: 1fr 34px;
  column-gap: 15px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(0, 220, 255, 0.55);
  border-top: 2px solid var(--cyan);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(5, 42, 52, 0.92), rgba(3, 25, 35, 0.96));
  box-shadow:
    inset 0 0 18px rgba(0, 220, 255, 0.025),
    0 0 10px rgba(0, 220, 255, 0.04);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  border-color: color-mix(in srgb, var(--card-accent) 55%, transparent);
  border-top-color: var(--card-accent);
}

/* =========================================================
   MODULE ICON
   ========================================================= */

.module-icon {
  width: 76px;
  height: 76px;

  align-self: center;

  display: grid;
  place-items: center;

  border: 1px solid var(--card-accent);

  border-radius: 10px;

  background: linear-gradient(145deg, rgba(0, 200, 230, 0.09), rgba(0, 30, 45, 0.32));

  font-size: 35px;

  box-shadow:
    0 0 12px var(--card-glow),
    inset 0 0 14px rgba(0, 220, 255, 0.04);

  position: relative;
  z-index: 2;
}

.module-content {
  min-width: 0;

  position: relative;
  z-index: 2;
}

.module-content h2 {
  margin: 2px 0 5px;

  color: #f6fbff;

  font-size: 14px;
  font-weight: 750;

  white-space: nowrap;
}

.module-content p {
  margin: 0;

  max-width: 240px;

  color: #9ab2ba;

  font-size: 10px;
  line-height: 1.45;
}

/* =========================================================
   MANAGEMENT BUTTON
   ========================================================= */

.management-card > button {
  grid-column: 2;
  grid-row: 2;

  width: 100%;
  height: 32px;

  padding: 0 10px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border: 1px solid color-mix(in srgb, var(--card-accent) 50%, transparent);

  border-radius: 6px;

  background: rgba(0, 170, 200, 0.045);

  color: var(--card-accent);

  font-size: 10px;
  font-weight: 700;

  cursor: pointer;

  position: relative;
  z-index: 2;

  transition: 0.2s ease;
}

.management-card > button:hover {
  background: color-mix(in srgb, var(--card-accent) 10%, transparent);

  border-color: var(--card-accent);

  box-shadow: 0 0 10px var(--card-glow);
}

.management-card > button span {
  font-size: 17px;
  line-height: 1;
}

/* =========================================================
   RECENT TABLES
   ========================================================= */

.recent-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 15px;

  margin-top: 15px;
}

.recent-panel {
  min-height: 140px;
}

.report-totals-line {
  margin: 14px 22px 18px;
  font-size: 13px;
  color: var(--text-soft);
}

.report-totals-line strong {
  color: var(--text);
  margin-right: 6px;
}

.recent-panel .panel-head {
  min-height: 49px;
}

.recent-panel th {
  height: 35px;
}

.recent-panel td {
  height: 35px;
}

/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #03131b;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #087f91, #064653);

  border-radius: 8px;

  border: 1px solid rgba(0, 230, 255, 0.25);
}

::-webkit-scrollbar-thumb:hover {
  background: #00aabd;
}

/* =========================================================
   FOOTER
   ========================================================= */

footer {
  padding: 10px 20px 13px;

  border-top: 1px solid rgba(0, 220, 255, 0.18);

  background: rgba(1, 14, 20, 0.72);

  color: #6d8992;

  text-align: center;

  font-size: 10px;
}

/* =========================================================
   RESPONSIVE — LARGE LAPTOP
   ========================================================= */

@media (max-width: 1200px) {
  .dashboard {
    padding-left: 16px;
    padding-right: 16px;
  }

  .summary-grid {
    gap: 14px;
  }

  .management-cards {
    gap: 11px;
  }

  .management-card {
    grid-template-columns: 78px minmax(0, 1fr);
    column-gap: 12px;

    padding: 12px;
  }

  .module-icon {
    width: 66px;
    height: 66px;
    font-size: 31px;
  }

  .logo {
    font-size: 23px;
  }

  .top-divider {
    margin-left: 10px;
    margin-right: 10px;
  }
}

/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 950px) {
  .dashboard-layout {
    grid-template-columns: 165px minmax(0, 1fr);
  }

  .topbar {
    padding-right: 12px;
  }

  .top-info {
    display: none;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  .management-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recent-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 680px) {
  .app-shell {
    width: 100%;
    min-height: 100vh;

    margin: 0;

    border-radius: 0;
  }

  .topbar {
    height: 64px;

    padding: 0 10px;
  }

  .menu-button {
    width: 46px;
    height: 64px;

    margin-left: -10px;
    margin-right: 10px;

    font-size: 25px;
  }

  .brand-mark {
    width: 34px;
    height: 34px;

    font-size: 22px;
  }

  .logo {
    font-size: 18px;
  }

  .brand-subtitle {
    font-size: 9px;
    margin-top: 4px;
  }

  .currency-chip,
  .notification,
  .user-box small,
  .user-box > span {
    display: none;
  }

  .user-box strong {
    font-size: 9px;
  }

  .user-avatar {
    width: 31px;
    height: 31px;
  }

  .dashboard-layout {
    display: block;
  }

  .sidebar {
    display: none;
  }

  .dashboard {
    padding: 18px 10px 20px;
  }

  .welcome-row h1 {
    font-size: 23px;
  }

  .management-cards {
    grid-template-columns: 1fr;
  }

  .management-card {
    min-height: 112px;
  }

  .recent-grid {
    grid-template-columns: 1fr;
  }

  .panel-title h2 {
    font-size: 12px;
  }
}

/* =========================================================
   EXTRA HIGH-TECH GLOW
   ========================================================= */

.tech-panel:hover {
  border-color: rgba(0, 240, 255, 0.75);

  box-shadow:
    0 0 18px rgba(0, 230, 255, 0.08),
    inset 0 0 18px rgba(0, 230, 255, 0.035);
}

/* =========================================================
   TEXT SELECTION
   ========================================================= */

::selection {
  background: rgba(0, 230, 255, 0.25);
  color: #fff;
}

/* =========================================================
   BARAKAH EXPO — PROFESSIONAL CUSTOMER MANAGEMENT
   High-Tech Teal / Cyan Theme
   ========================================================= */

.customer-form-panel,
.customer-list-panel {
  overflow: hidden;
  border: 1px solid rgba(45, 212, 191, 0.18);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(244, 252, 251, 0.98));
}

/* Customer form area */

.customer-form-body {
  padding: 28px 30px 30px;
}

.customer-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field-full {
  grid-column: 1 / -1;
}

.form-field label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #475569;
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: rgba(2, 20, 27, 0.6);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  padding: 12px 14px;
  outline: none;
  color-scheme: dark;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.form-field textarea {
  min-height: 88px;
  resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--text-dim);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--cyan);
  background: rgba(2, 20, 27, 0.85);
  box-shadow:
    0 0 0 3px rgba(0, 234, 255, 0.15),
    0 0 18px rgba(0, 234, 255, 0.08);
}

.form-field select option {
  background: var(--bg-panel);
  color: var(--text);
}

/* Form buttons */

.primary-action,
.secondary-action {
  min-height: 42px;
  padding: 0 20px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.primary-action {
  border: 1px solid #0d9488;
  background: linear-gradient(135deg, #0f766e, #0891b2);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(8, 145, 178, 0.2);
}

.primary-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(8, 145, 178, 0.28);
}

.primary-action span {
  margin-right: 6px;
  font-size: 16px;
}

.secondary-action {
  border: 1px solid var(--border-soft);
  background: rgba(2, 20, 27, 0.6);
  color: var(--text-soft);
}

.secondary-action:hover {
  background: rgba(2, 20, 27, 0.85);
  border-color: var(--cyan);
  color: var(--cyan-bright);
}

/* Customer table */

.customer-table-wrap {
  width: 100%;
  overflow-x: auto;
}

#customerTable {
  width: 100%;
  min-width: 900px;
  border-collapse: separate;
  border-spacing: 0;
}

#customerTable thead th {
  background: linear-gradient(135deg, #f0fdfa, #ecfeff);
  color: #35545b;
  border-bottom: 1px solid #cfe4e5;
  padding: 14px 16px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

#customerTable tbody td {
  padding: 15px 16px;
  border-bottom: 1px solid #edf2f3;
  color: #334155;
  font-size: 13px;
  background: #ffffff;
  vertical-align: middle;
}

#customerTable tbody tr {
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}

#customerTable tbody tr:hover td {
  background: #f5fdfd;
}

/* Customer code */

#customerTable tbody td:first-child {
  color: #0f766e;
  font-weight: 800;
  letter-spacing: 0.03em;
}

/* Customer name */

#customerTable tbody td:nth-child(2) {
  color: #172033;
  font-weight: 700;
}

/* Currency badge */

/* Customer action buttons */

#customerTable td:last-child {
  white-space: nowrap;
}

#customerTable td:last-child button {
  min-width: 68px;
  margin-right: 6px;
  padding: 7px 11px;
  border-radius: 7px;
  border: 1px solid #d5e3e5;
  background: #ffffff;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

#customerTable td:last-child button:first-child:hover {
  border-color: #14b8a6;
  background: #ecfdf5;
  color: #0f766e;
}

#customerTable td:last-child button:last-child:hover {
  border-color: #f0a3a3;
  background: #fff5f5;
  color: #c24141;
}

/* Customer page bottom */

.customer-back-row {
  display: flex;
  justify-content: flex-start;
  margin-top: 22px;
  margin-bottom: 10px;
}

.back-dashboard-button {
  padding: 10px 17px;
  border: 1px solid #d4e1e3;
  border-radius: 9px;
  background: #ffffff;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

.back-dashboard-button:hover {
  border-color: #14b8a6;
  color: #0f766e;
  background: #f0fdfa;
  transform: translateX(-2px);
}

/* Customer list header */

.customer-list-info {
  color: #7b8b94;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Mobile */

@media (max-width: 900px) {
  .customer-form-grid {
    grid-template-columns: 1fr;
  }

  .form-field-full {
    grid-column: auto;
  }

  .customer-form-body {
    padding: 22px;
  }
}

@media (max-width: 600px) {
  .customer-form-body {
    padding: 18px;
  }

  .form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .primary-action,
  .secondary-action {
    width: 100%;
  }

  .customer-back-row {
    margin-top: 18px;
  }
}

/* =========================================================
   BARAKAH EXPO - CUSTOMER PAGE ONLY
   Add-on styling — does NOT replace existing CSS
   ========================================================= */

/* Customer page header */
body.customers-page .topbar {
  background: #1f2937;
  color: white;
}

/* Customer content */
/* Professional customer cards */
body.customers-page .card {
  background: #ffffff;
  border: 1px solid #e3e8ee;
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.07);
  overflow: hidden;
}

/* Card headings */
body.customers-page .card h2 {
  padding: 20px 24px;
  margin: 0;
  border-bottom: 1px solid #e8edf2;
  color: #172033;
  font-size: 17px;
}

/* Customer form */
body.customers-page #customerForm {
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
}

/* Labels */
body.customers-page #customerForm label {
  display: block;
  margin-bottom: 7px;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

/* Inputs */
body.customers-page #customerForm input,
body.customers-page #customerForm textarea,
body.customers-page #customerForm select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #d7dee6;
  border-radius: 8px;
  background: #ffffff;
  color: #1e293b;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: 0.2s ease;
}

body.customers-page #customerForm input,
body.customers-page #customerForm select {
  height: 44px;
}

body.customers-page #customerForm textarea {
  min-height: 85px;
  resize: vertical;
}

/* Focus effect */
body.customers-page #customerForm input:focus,
body.customers-page #customerForm textarea:focus,
body.customers-page #customerForm select:focus {
  border-color: #14b8a6;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

/* Address full width */
body.customers-page #customerForm label:nth-of-type(3),
body.customers-page #customerForm #address {
  grid-column: 1 / -1;
}

/* Save button */
body.customers-page #customerForm button[type="submit"] {
  grid-column: 2;
  justify-self: end;
  min-width: 155px;
  height: 42px;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  background: #2563eb;
  color: white;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s ease;
}

body.customers-page #customerForm button[type="submit"]:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(37, 99, 235, 0.22);
}

/* Customer table */
body.customers-page #customerTable {
  width: 100%;
  border-collapse: collapse;
}

body.customers-page #customerTable th {
  padding: 13px 15px;
  background: #f3f6f9;
  border-bottom: 1px solid #dfe5eb;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

body.customers-page #customerTable td {
  padding: 14px 15px;
  border-bottom: 1px solid #edf1f4;
  color: #334155;
  font-size: 13px;
  vertical-align: middle;
}

body.customers-page #customerTable tbody tr:hover td {
  background: #f8fbfd;
}

/* Customer code */
body.customers-page #customerTable td:first-child {
  color: #2563eb;
  font-weight: 700;
}

/* Customer name */
body.customers-page #customerTable td:nth-child(2) {
  color: #172033;
  font-weight: 700;
}

/* Action buttons */
body.customers-page #customerTable td:last-child {
  white-space: nowrap;
}

body.customers-page #customerTable td:last-child button {
  padding: 7px 12px;
  margin-right: 5px;
  border: 1px solid #d5dde5;
  border-radius: 6px;
  background: #ffffff;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s ease;
}

body.customers-page #customerTable td:last-child button:first-child:hover {
  border-color: #2563eb;
  color: #2563eb;
  background: #eff6ff;
}

body.customers-page #customerTable td:last-child button:last-child:hover {
  border-color: #ef4444;
  color: #dc2626;
  background: #fef2f2;
}

/* Back button */
body.customers-page .dashboard > button {
  margin-top: 20px;
  padding: 10px 18px;
  border: 1px solid #d5dde5;
  border-radius: 7px;
  background: white;
  color: #475569;
  font-weight: 700;
  cursor: pointer;
}

body.customers-page .dashboard > button:hover {
  border-color: #2563eb;
  color: #2563eb;
}

/* Responsive */
@media (max-width: 700px) {
  body.customers-page #customerForm {
    grid-template-columns: 1fr;
  }

  body.customers-page #customerForm label:nth-of-type(3),
  body.customers-page #customerForm #address {
    grid-column: auto;
  }

  body.customers-page #customerForm button[type="submit"] {
    grid-column: auto;
    justify-self: stretch;
  }

  body.customers-page #customerTable {
    min-width: 850px;
  }
}

/* =========================================================
   SUPPLIER / CUSTOMER PROFESSIONAL FORM
   ADD-ON ONLY - DO NOT REMOVE EXISTING CSS
   ========================================================= */

.customer-form-container {
  padding: 28px 30px 26px;
}

.customer-form-container form {
  width: 100%;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 24px;
  width: 100%;
}

.form-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  margin-bottom: 8px;
  color: #52616d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.7px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  background: rgba(2, 20, 27, 0.6);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  padding: 12px 14px;
  outline: none;
  color-scheme: dark;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.form-group input,
.form-group select {
  height: 46px;
}

.form-group textarea {
  min-height: 88px;
  resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-dim);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 234, 255, 0.15);
  background: rgba(2, 20, 27, 0.85);
}

/* Native <select> dropdown lists are rendered by the OS/browser itself and
   can't be fully dark-styled from CSS in every browser — this at least
   keeps the closed select box and Chromium/Firefox's own dropdown panel
   dark where the browser allows it. */
.form-group select option {
  background: var(--bg-panel);
  color: var(--text);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(20, 180, 195, 0.18);
}

.primary-button,
.secondary-button {
  min-height: 42px;
  padding: 0 22px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.primary-button {
  border: 1px solid #0dd6df;
  color: #ffffff;
  background: linear-gradient(135deg, #087d82, #119ba0);
  box-shadow: 0 7px 18px rgba(0, 180, 190, 0.18);
}

.primary-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 22px rgba(0, 220, 230, 0.25);
}

.secondary-button {
  border: 1px solid var(--border-soft);
  color: var(--text-soft);
  background: rgba(2, 20, 27, 0.6);
}

.secondary-button:hover {
  border-color: var(--cyan);
  color: var(--cyan-bright);
  background: rgba(2, 20, 27, 0.85);
  transform: translateY(-1px);
}

/* =========================================================
   SALES INVOICE - BUTTONS TO MATCH CUSTOMER PAGE
   ========================================================= */

.sales-page .primary-button {
  border: 1px solid #0d9488;
  background: linear-gradient(135deg, #0f766e, #0891b2);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(8, 145, 178, 0.2);
}

.sales-page .primary-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(8, 145, 178, 0.28);
}

.sales-page .secondary-button {
  border: 1px solid var(--border-soft);
  background: rgba(2, 20, 27, 0.6);
  color: var(--text-soft);
}

.sales-page .secondary-button:hover {
  background: rgba(2, 20, 27, 0.85);
  border-color: var(--cyan);
  color: var(--cyan-bright);
}

/* Supplier Master table */

#supplierTable {
  width: 100%;
  border-collapse: collapse;
}

#supplierTable th,
#supplierTable td {
  padding: 13px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(20, 180, 195, 0.14);
}

#supplierTable th {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
}

#supplierTable td {
  color: var(--text);
  font-size: 13px;
}

#supplierTable tbody tr:hover {
  background: rgba(12, 205, 215, 0.04);
}

/* Sales Invoices list (same treatment as Supplier table above) */

#salesTable {
  width: 100%;
  border-collapse: collapse;
}

#salesTable th,
#salesTable td {
  padding: 13px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(20, 180, 195, 0.14);
}

#salesTable th {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
}

#salesTable td {
  color: var(--text);
  font-size: 13px;
}

#salesTable tbody tr:hover {
  background: rgba(12, 205, 215, 0.04);
}

/* Responsive */

@media (max-width: 850px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-group.full-width {
    grid-column: auto;
  }

  .form-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* =========================================================
   BARAKAH EXPO - CUSTOMER PAGE PROFESSIONAL THEME
   Customer page only - does NOT affect Dashboard/Suppliers
   ========================================================= */

body.customers-page {
  background: linear-gradient(rgba(0, 20, 27, 0.72), rgba(0, 20, 27, 0.72)), #03151b;
}

/* Customer main content */
body.customers-page .dashboard {
  max-width: 1400px;
  margin: 0 auto;
  background:
    linear-gradient(rgba(2, 20, 27, 0.9), rgba(2, 20, 27, 0.9)),
    repeating-linear-gradient(
      90deg,
      rgba(0, 220, 255, 0.025) 0,
      rgba(0, 220, 255, 0.025) 1px,
      transparent 1px,
      transparent 45px
    );
}

/* Page title */
body.customers-page .dashboard h1 {
  color: #f4fbff;
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 6px;
}

body.customers-page .dashboard > p {
  color: #8ea9b2;
}

/* =========================================================
   CUSTOMER FORM PANEL
   ========================================================= */

body.customers-page .customer-form-panel,
body.customers-page .card {
  background: linear-gradient(145deg, rgba(5, 34, 42, 0.98), rgba(3, 23, 30, 0.98)) !important;

  border: 1px solid rgba(0, 220, 255, 0.45) !important;
  border-radius: 14px !important;

  box-shadow:
    0 0 0 1px rgba(0, 220, 255, 0.05),
    0 12px 35px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;

  color: #eafaff;
}

/* Form heading */
body.customers-page .customer-form-panel h2,
body.customers-page .card h2 {
  color: #f4fbff;
  font-weight: 800;
}

/* Form labels */
body.customers-page label {
  display: block;
  color: #b7cbd1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 7px;
}

/* Form layout */
body.customers-page .form-field {
  min-width: 0;
}

body.customers-page .form-field.full-width {
  grid-column: 1 / -1;
}

/* Inputs */
body.customers-page input,
body.customers-page textarea,
body.customers-page select {
  width: 100%;
  box-sizing: border-box;

  background: rgba(4, 27, 34, 0.92) !important;
  color: #eafaff !important;

  border: 1px solid rgba(80, 180, 200, 0.3) !important;
  border-radius: 8px !important;

  padding: 12px 14px;
  min-height: 44px;

  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

/* Address */
body.customers-page textarea {
  min-height: 92px;
  resize: vertical;
}

/* Placeholder */
body.customers-page input::placeholder,
body.customers-page textarea::placeholder {
  color: #78929b;
}

/* Focus */
body.customers-page input:focus,
body.customers-page textarea:focus,
body.customers-page select:focus {
  border-color: #00e5ff !important;

  box-shadow:
    0 0 0 2px rgba(0, 229, 255, 0.08),
    0 0 16px rgba(0, 229, 255, 0.1);

  background: rgba(5, 34, 42, 1) !important;
}

/* Dropdown */
body.customers-page select option {
  background: #06232b;
  color: #ffffff;
}

/* =========================================================
   FORM BUTTONS
   ========================================================= */

body.customers-page .form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;

  margin-top: 24px;
  padding-top: 20px;

  border-top: 1px solid rgba(0, 220, 255, 0.12);
}

body.customers-page button.primary-action,
body.customers-page button[type="submit"] {
  background: linear-gradient(135deg, #087f87, #08a7b5) !important;

  color: #ffffff !important;

  border: 1px solid rgba(0, 229, 255, 0.55) !important;
  border-radius: 8px !important;

  padding: 11px 22px;

  font-weight: 700;
  cursor: pointer;

  box-shadow: 0 5px 18px rgba(0, 220, 255, 0.16);

  transition: all 0.2s ease;
}

body.customers-page button.primary-action:hover,
body.customers-page button[type="submit"]:hover {
  transform: translateY(-1px);

  box-shadow: 0 7px 22px rgba(0, 220, 255, 0.25);
}

body.customers-page .form-actions button:not(.primary-action) {
  background: rgba(7, 35, 43, 0.95) !important;
  color: #c8d9de !important;

  border: 1px solid rgba(100, 170, 185, 0.3) !important;
  border-radius: 8px !important;

  padding: 11px 20px;
  font-weight: 700;
}

/* =========================================================
   CUSTOMER MASTER TABLE
   ========================================================= */

body.customers-page table {
  width: 100%;
  border-collapse: collapse;
}

body.customers-page table thead th {
  background: rgba(0, 100, 112, 0.3) !important;

  color: #c8f7ff !important;

  border-bottom: 1px solid rgba(0, 220, 255, 0.25);

  padding: 13px 14px;

  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;

  text-align: left;
}

body.customers-page table tbody td {
  background: rgba(3, 28, 35, 0.82) !important;

  color: #d6e5e9 !important;

  border-bottom: 1px solid rgba(70, 150, 165, 0.12);

  padding: 13px 14px;

  font-size: 13px;
}

body.customers-page table tbody tr:hover td {
  background: rgba(0, 190, 210, 0.06) !important;
}

/* Customer code */
body.customers-page table tbody td:first-child {
  color: #00e5ff !important;
  font-weight: 800;
}

/* Currency badge */
body.customers-page .currency-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 42px;

  padding: 5px 9px;

  border-radius: 6px;

  background: rgba(0, 190, 150, 0.1);
  border: 1px solid rgba(0, 220, 180, 0.28);

  color: #68e4c5;
  font-size: 11px;
  font-weight: 800;
}

/* =========================================================
   EDIT / DELETE BUTTONS
   ========================================================= */

body.customers-page table button {
  border-radius: 7px !important;
  padding: 7px 14px !important;

  font-size: 12px;
  font-weight: 700;

  cursor: pointer;
}

body.customers-page table button:first-child {
  background: rgba(0, 150, 220, 0.1) !important;
  color: #65dfff !important;
  border: 1px solid rgba(0, 200, 255, 0.3) !important;
}

body.customers-page table button:last-child {
  background: rgba(220, 70, 70, 0.08) !important;
  color: #ff9b9b !important;
  border: 1px solid rgba(255, 90, 90, 0.25) !important;
}

body.customers-page table button:hover {
  filter: brightness(1.2);
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {
  body.customers-page .customer-form-grid {
    grid-template-columns: 1fr;
  }

  body.customers-page .form-field.full-width {
    grid-column: auto;
  }

  body.customers-page .form-actions {
    justify-content: stretch;
    flex-direction: column;
  }

  body.customers-page .form-actions button {
    width: 100%;
  }

  body.customers-page .customer-list-panel {
    overflow-x: auto;
  }
}

/* =========================================================
   CUSTOMER PAGE - FINAL LAYOUT CORRECTION
   ========================================================= */

body.customers-page .customer-form-panel {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Form body */
body.customers-page .customer-form-body {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 30px 34px 28px !important;
}

/* Proper 2-column form */
body.customers-page .customer-form-grid {
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr) !important;
  gap: 22px 28px !important;
  width: 100% !important;
}

/* Full width fields */
body.customers-page .customer-form-grid .full-width {
  grid-column: 1 / -1 !important;
}

/* Every field */
body.customers-page .customer-form-grid .form-field {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Labels */
body.customers-page .customer-form-grid label {
  display: block !important;
  width: 100% !important;
  margin-bottom: 8px !important;

  color: #a9c0c7 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
}

/* Inputs */
body.customers-page .customer-form-grid input,
body.customers-page .customer-form-grid select,
body.customers-page .customer-form-grid textarea {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Address */
body.customers-page .customer-form-grid textarea {
  min-height: 100px !important;
}

/* Form actions */
body.customers-page .customer-form-panel .form-actions {
  width: 100% !important;
  box-sizing: border-box !important;

  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;

  gap: 12px !important;
  margin-top: 26px !important;
  padding-top: 20px !important;

  border-top: 1px solid rgba(0, 220, 255, 0.12) !important;
}

/* =========================================================
   CUSTOMER MASTER - DARK PROFESSIONAL PANEL
   ========================================================= */

body.customers-page .customer-list-panel {
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 18px !important;
  background: linear-gradient(145deg, rgba(5, 34, 42, 0.98), rgba(3, 23, 30, 0.98)) !important;
  border: 1px solid rgba(0, 220, 255, 0.42) !important;
  border-radius: 14px !important;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
  overflow: hidden !important;
}

/* Master header */
body.customers-page .customer-list-header {
  background: linear-gradient(90deg, rgba(0, 150, 170, 0.14), rgba(0, 60, 75, 0.08)) !important;

  border-bottom: 1px solid rgba(0, 220, 255, 0.22) !important;
}

/* Master title */
body.customers-page .customer-list-header h2,
body.customers-page .customer-list-header span {
  color: #eafaff !important;
}

/* Table container */
body.customers-page .customer-list-panel .table-wrap {
  width: 100% !important;
  overflow-x: auto !important;
}

/* Master table */
body.customers-page .customer-list-panel table {
  width: 100% !important;
  min-width: 760px !important;
  background: transparent !important;
}

/* Table header */
body.customers-page .customer-list-panel table thead th {
  background: rgba(0, 110, 125, 0.22) !important;
  color: #bceff7 !important;

  padding: 13px 14px !important;

  border-bottom: 1px solid rgba(0, 220, 255, 0.2) !important;
}

/* Table rows */
body.customers-page .customer-list-panel table tbody td {
  background: rgba(2, 27, 34, 0.9) !important;
  color: #d5e5e9 !important;

  padding: 14px !important;

  border-bottom: 1px solid rgba(70, 150, 165, 0.12) !important;
}

/* Hover */
body.customers-page .customer-list-panel table tbody tr:hover td {
  background: rgba(0, 210, 230, 0.06) !important;
}

/* Customer code */
body.customers-page .customer-list-panel table tbody td:first-child {
  color: #00dff5 !important;
  font-weight: 800 !important;
}

/* =========================================================
   BETTER WIDTH ON LARGE SCREENS
   ========================================================= */

@media (min-width: 1100px) {
  body.customers-page .customer-form-body {
    padding-left: 34px !important;
    padding-right: 34px !important;
  }

  body.customers-page .customer-form-grid {
    grid-template-columns:
      minmax(340px, 1fr)
      minmax(340px, 1fr) !important;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {
  body.customers-page .customer-form-grid {
    grid-template-columns: 1fr !important;
  }

  body.customers-page .customer-form-grid .full-width {
    grid-column: auto !important;
  }

  body.customers-page .customer-form-body {
    padding: 22px 18px !important;
  }

  body.customers-page .customer-form-panel .form-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.customers-page .customer-form-panel .form-actions button {
    width: 100% !important;
  }
}

/* =========================================================
   CUSTOMER PAGE - FINAL FORM LAYOUT
   Does NOT change Dashboard styling
   ========================================================= */

/* Labels */
.customers-page #customerForm label {
  display: block;
  margin-top: 0;
  margin-bottom: 8px;
}

/* Inputs */
.customers-page #customerForm input,
.customers-page #customerForm textarea,
.customers-page #customerForm select {
  width: 100%;
  box-sizing: border-box;
}

/* Address takes full width */
.customers-page #customerForm #address,
.customers-page #customerForm label[for="address"] {
  grid-column: 1 / -1;
}

.customers-page #customerForm #address {
  min-height: 100px;
  resize: vertical;
}

/* Opening balance stays on left */
.customers-page #customerForm #openingBalance {
  width: 100%;
}

/* ---------------------------------------------------------
   BUTTON AREA
   --------------------------------------------------------- */

.customers-page #customerForm button[type="submit"] {
  grid-column: 2;
  justify-self: end;
  align-self: end;

  margin-top: 8px;
  min-width: 160px;
  height: 44px;

  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}

/* Clear Form button */
.customers-page #customerForm button:not([type="submit"]) {
  grid-column: 2;
  justify-self: end;
  margin-top: -52px;
  margin-right: 170px;

  min-width: 120px;
  height: 44px;

  border-radius: 10px;
  cursor: pointer;
}

/* ---------------------------------------------------------
   FORM BOTTOM SPACE
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   CUSTOMER MASTER TABLE
   --------------------------------------------------------- */

.customers-page #customerTable {
  width: 100%;
  border-collapse: collapse;
}

.customers-page #customerTable th,
.customers-page #customerTable td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: middle;
}

/* Action buttons */
/* Edit */
.customers-page #customerTable button[onclick^="editCustomer"] {
  color: #00d9ff;
}

/* Delete */
.customers-page #customerTable button[onclick^="deleteCustomer"] {
  color: #ff7777;
}

/* ---------------------------------------------------------
   MOBILE / SMALL SCREEN
   --------------------------------------------------------- */

@media (max-width: 800px) {
  .customers-page #customerForm {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .customers-page #customerForm #address,
  .customers-page #customerForm label[for="address"] {
    grid-column: 1;
  }

  .customers-page #customerForm button[type="submit"],
  .customers-page #customerForm button:not([type="submit"]) {
    grid-column: 1;
    justify-self: stretch;
    margin: 8px 0 0;
    width: 100%;
  }

  .customers-page #customerTable {
    min-width: 800px;
  }
}

/* =========================================================
   BARAKAH EXPO - CUSTOMER PAGE BUTTON & FORM FIX
   Customer page only - Dashboard style is NOT affected
   ========================================================= */

.customers-page .customer-form-body {
  width: 100%;
  box-sizing: border-box;
}

.customers-page #customerForm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  row-gap: 8px;
  padding: 28px 32px 24px;
  position: relative;
  padding-bottom: 90px;
  width: 100%;
  box-sizing: border-box;
}

/* Customer fields */
.customers-page .customer-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px 24px;
  width: 100%;
}

/* Full-width address */
.customers-page .customer-form-grid .form-field-full {
  grid-column: 1 / -1;
}

/* Make every field fill its column */
.customers-page .customer-form-grid .form-field {
  min-width: 0;
}

.customers-page .customer-form-grid input,
.customers-page .customer-form-grid select,
.customers-page .customer-form-grid textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* =========================================================
   BUTTON AREA
   ========================================================= */

.customers-page #customerForm .form-actions {
  width: 100%;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 12px !important;

  margin-top: 26px !important;
  padding-top: 20px !important;

  border-top: 1px solid rgba(0, 220, 255, 0.15);

  box-sizing: border-box;
}

/* Save Customer */
.customers-page #customerForm .form-actions .primary-action {
  order: 2;

  width: auto !important;
  min-width: 160px;
  height: 44px;

  padding: 0 22px;

  border-radius: 10px;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;

  cursor: pointer;

  background: linear-gradient(135deg, #08b8c9, #087f91) !important;

  color: #ffffff !important;

  border: 1px solid #08d9ef !important;

  box-shadow: 0 0 12px rgba(0, 220, 255, 0.2);
}

/* Save hover */
.customers-page #customerForm .form-actions .primary-action:hover {
  background: linear-gradient(135deg, #0bd8e8, #0994a8) !important;

  box-shadow: 0 0 18px rgba(0, 220, 255, 0.35);
}

/* Clear Form */
.customers-page #customerForm .form-actions .secondary-action {
  order: 1;

  width: auto !important;
  min-width: 120px;
  height: 44px;

  padding: 0 20px;

  border-radius: 10px;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  background: rgba(5, 30, 38, 0.85) !important;

  color: #b8cbd0 !important;

  border: 1px solid rgba(0, 210, 240, 0.3) !important;
}

/* Clear hover */
.customers-page #customerForm .form-actions .secondary-action:hover {
  color: #ffffff !important;

  border-color: #00d9ef !important;

  background: rgba(0, 150, 170, 0.15) !important;
}

/* =========================================================
   CUSTOMER TABLE BUTTONS
   ========================================================= */

.customers-page #customerTable button {
  height: 36px;
  min-width: 70px;
  margin-right: 6px;
  padding: 0 14px;
  border-radius: 8px;
  cursor: pointer;
}

/* Edit */
.customers-page #customerTable button:first-child {
  color: #00d9ef !important;
  background: rgba(0, 160, 190, 0.08) !important;
  border: 1px solid rgba(0, 210, 240, 0.3) !important;
}

/* Delete */
.customers-page #customerTable button:last-child {
  color: #ff7f88 !important;
  background: rgba(180, 40, 50, 0.08) !important;
  border: 1px solid rgba(255, 90, 100, 0.25) !important;
}

.customers-page #customerTable button:first-child:hover {
  background: rgba(0, 210, 240, 0.15) !important;
}

.customers-page #customerTable button:last-child:hover {
  background: rgba(255, 70, 80, 0.15) !important;
}

/* =========================================================
   BACK TO DASHBOARD
   ========================================================= */

.customers-page .customer-back-row {
  display: flex;
  justify-content: flex-start;
  margin-top: 18px;
  margin-bottom: 20px;
}

.customers-page .back-dashboard-button {
  height: 42px;
  padding: 0 20px;

  border-radius: 9px;

  cursor: pointer;

  background: rgba(5, 30, 38, 0.9) !important;
  color: #b8cbd0 !important;

  border: 1px solid rgba(0, 210, 240, 0.28) !important;
}

.customers-page .back-dashboard-button:hover {
  color: #ffffff !important;
  border-color: #00d9ef !important;
  background: rgba(0, 150, 170, 0.15) !important;
}

/* =========================================================
   SMALL SCREEN
   ========================================================= */

@media (max-width: 800px) {
  .customers-page .customer-form-grid {
    grid-template-columns: 1fr;
  }

  .customers-page .customer-form-grid .form-field-full {
    grid-column: 1;
  }

  .customers-page #customerForm .form-actions {
    justify-content: stretch !important;
  }

  .customers-page #customerForm .form-actions button {
    flex: 1;
  }
}

/* =========================================================
   CUSTOMER FORM - BUTTON POSITION FIX
   Do not affect Dashboard or other pages
   ========================================================= */

body.dashboard-page #customerForm {
  position: relative;
  padding-bottom: 95px !important;
}

/* Save Customer button */
body.dashboard-page #customerForm button[type="submit"] {
  position: absolute !important;
  right: 55px !important;
  bottom: 35px !important;

  width: 170px !important;
  height: 48px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;

  border-radius: 10px !important;
  border: 1px solid #00d9e8 !important;

  background: linear-gradient(135deg, #0bb8c8, #087f91) !important;

  color: #ffffff !important;

  font-size: 14px !important;
  font-weight: 700 !important;

  cursor: pointer !important;
}

/* Clear Form button */
body.dashboard-page #customerForm button:not([type="submit"]) {
  position: absolute !important;
  right: 240px !important;
  bottom: 35px !important;

  width: 130px !important;
  height: 48px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;

  border-radius: 10px !important;
  border: 1px solid rgba(0, 220, 235, 0.45) !important;

  background: rgba(3, 27, 36, 0.9) !important;

  color: #d9f8fa !important;

  font-size: 14px !important;
  font-weight: 600 !important;

  cursor: pointer !important;
}

/* Save hover */
body.dashboard-page #customerForm button[type="submit"]:hover {
  transform: translateY(-1px);

  background: linear-gradient(135deg, #12cddd, #0999aa) !important;

  box-shadow: 0 0 18px rgba(0, 220, 235, 0.35);
}

/* Clear hover */
body.dashboard-page #customerForm button:not([type="submit"]):hover {
  border-color: #00d9e8 !important;
  background: rgba(0, 150, 165, 0.15) !important;
  color: #ffffff !important;
}

/* =========================================================
   SUPPLIER FORM - SAME STYLE AS CUSTOMER FORM
   ========================================================= */

body.dashboard-page #supplierForm {
  position: relative;
  padding-bottom: 95px !important;
}

/* Save Supplier button */
body.dashboard-page #supplierForm button[type="submit"] {
  position: absolute !important;
  right: 55px !important;
  bottom: 35px !important;

  width: 170px !important;
  height: 48px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;

  border-radius: 10px !important;
  border: 1px solid #00d9e8 !important;

  background: linear-gradient(135deg, #0bb8c8, #087f91) !important;

  color: #ffffff !important;

  font-size: 14px !important;
  font-weight: 700 !important;

  cursor: pointer !important;
}

/* Clear Supplier Form button */
body.dashboard-page #supplierForm button:not([type="submit"]) {
  position: absolute !important;
  right: 240px !important;
  bottom: 35px !important;

  width: 130px !important;
  height: 48px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;

  border-radius: 10px !important;
  border: 1px solid rgba(0, 220, 235, 0.45) !important;

  background: rgba(3, 27, 36, 0.9) !important;

  color: #d9f8fa !important;

  font-size: 14px !important;
  font-weight: 600 !important;

  cursor: pointer !important;
}

/* Save Supplier hover */
body.dashboard-page #supplierForm button[type="submit"]:hover {
  transform: translateY(-1px);

  background: linear-gradient(135deg, #12cddd, #0999aa) !important;

  box-shadow: 0 0 18px rgba(0, 220, 235, 0.35);
}

/* Clear Supplier hover */
body.dashboard-page #supplierForm button:not([type="submit"]):hover {
  border-color: #00d9e8 !important;
  background: rgba(0, 150, 165, 0.15) !important;
  color: #ffffff !important;
}

/* =========================================================
   SUPPLIER CURRENCY BADGE
   ========================================================= */

.currency-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(0, 220, 235, 0.45);
  border-radius: 8px;
  background: rgba(0, 180, 195, 0.1);
  color: #00d9e8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

/* Supplier table buttons */

.table-edit-btn {
  min-width: 70px;
  height: 36px;

  margin-right: 6px;

  border: 1px solid rgba(0, 220, 235, 0.45);
  border-radius: 8px;

  background: rgba(0, 150, 170, 0.1);

  color: #00d9e8;

  font-weight: 700;
  cursor: pointer;
}

.table-edit-btn:hover {
  background: rgba(0, 210, 225, 0.18);
  border-color: #00d9e8;
}

.table-delete-btn {
  min-width: 70px;
  height: 36px;

  border: 1px solid rgba(255, 80, 90, 0.45);
  border-radius: 8px;

  background: rgba(180, 30, 40, 0.08);

  color: #ff6b73;

  font-weight: 700;
  cursor: pointer;
}

.table-delete-btn:hover {
  background: rgba(220, 40, 50, 0.16);
  border-color: #ff6b73;
}

/* =========================================================
   SUPPLIER FORM — MATCH CUSTOMER DARK STYLE
   ========================================================= */

#supplierForm input,
#supplierForm textarea,
#supplierForm select {
  width: 100%;

  background: #061f27 !important;
  color: #e8fbff !important;

  border: 1px solid rgba(0, 220, 235, 0.28) !important;
  border-radius: 10px;

  font-family: inherit;
  font-size: 14px;

  padding: 12px 14px;

  outline: none;

  box-sizing: border-box;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

/* Placeholder text */

#supplierForm input::placeholder,
#supplierForm textarea::placeholder {
  color: #78939b !important;
}

/* Focus */

#supplierForm input:focus,
#supplierForm textarea:focus,
#supplierForm select:focus {
  background: #082831 !important;

  border-color: #00d9e8 !important;

  box-shadow:
    0 0 0 3px rgba(0, 217, 232, 0.08),
    0 0 18px rgba(0, 217, 232, 0.12);
}

/* Supplier labels */

#supplierForm label {
  color: #a9c5cc !important;
}

/* Supplier textarea */

#supplierForm textarea {
  min-height: 88px;
  resize: vertical;
}

/* Supplier dropdown */

#supplierForm select {
  appearance: auto;
  color: #e8fbff !important;
}

/* Dropdown options */

#supplierForm select option {
  background: #082831;
  color: #e8fbff;
}

/* =========================================================
   BACK TO DASHBOARD BUTTON
   ========================================================= */

.back-dashboard-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 170px;
  height: 44px;

  padding: 0 20px;

  background: rgba(0, 180, 195, 0.08) !important;
  color: #dffcff !important;

  border: 1px solid rgba(0, 220, 235, 0.45) !important;
  border-radius: 10px;

  font-family: inherit;
  font-size: 14px;
  font-weight: 700;

  cursor: pointer;

  box-shadow: none;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.back-dashboard-btn:hover {
  background: rgba(0, 210, 225, 0.16) !important;
  border-color: #00d9e8 !important;

  box-shadow: 0 0 15px rgba(0, 217, 232, 0.15);

  transform: translateY(-1px);
}

.back-dashboard-btn:active {
  transform: translateY(0);
}

/* ==========================================
   CUSTOMER FORM - KEEP DARK ON FOCUS
   ========================================== */

.customers-page #customerForm input:focus,
.customers-page #customerForm textarea:focus,
.customers-page #customerForm select:focus {
  background: #061f27 !important;
  color: #e8fbff !important;
  border-color: rgba(0, 220, 235, 0.65) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0, 220, 235, 0.08) !important;
}

/* Keep placeholder text dark-theme friendly */
.customers-page #customerForm input::placeholder,
.customers-page #customerForm textarea::placeholder {
  color: rgba(232, 251, 255, 0.45) !important;
}

/* ==========================================
   CUSTOMER FORM - DARK TEAL INPUTS
   ========================================== */

.customers-page .form-field input,
.customers-page .form-field textarea,
.customers-page .form-field select,
.customers-page .form-field input:focus,
.customers-page .form-field textarea:focus,
.customers-page .form-field select:focus {
  background: #061f27 !important;
  color: #e8fbff !important;
  border-color: rgba(0, 220, 235, 0.35) !important;
}

.customers-page .form-field input::placeholder,
.customers-page .form-field textarea::placeholder {
  color: rgba(232, 251, 255, 0.45) !important;
}

.customers-page .form-field input:focus,
.customers-page .form-field textarea:focus,
.customers-page .form-field select:focus {
  border-color: rgba(0, 220, 235, 0.7) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0, 220, 235, 0.08) !important;
}

/* =========================================================
   CUSTOMER FORM - PREVENT CHROME WHITE AUTOFILL / FOCUS
   ========================================================= */

.customers-page #customerForm input,
.customers-page #customerForm textarea,
.customers-page #customerForm select,
.customers-page #customerForm input:focus,
.customers-page #customerForm textarea:focus,
.customers-page #customerForm select:focus {
  background-color: #061f27 !important;
  background: #061f27 !important;
  color: #e8fbff !important;
}

/* Chrome / Edge Autofill */
.customers-page #customerForm input:-webkit-autofill,
.customers-page #customerForm input:-webkit-autofill:hover,
.customers-page #customerForm input:-webkit-autofill:focus,
.customers-page #customerForm textarea:-webkit-autofill,
.customers-page #customerForm textarea:-webkit-autofill:hover,
.customers-page #customerForm textarea:-webkit-autofill:focus,
.customers-page #customerForm select:-webkit-autofill,
.customers-page #customerForm select:-webkit-autofill:hover,
.customers-page #customerForm select:-webkit-autofill:focus {
  -webkit-text-fill-color: #e8fbff !important;
  -webkit-box-shadow: 0 0 0 1000px #061f27 inset !important;
  box-shadow: 0 0 0 1000px #061f27 inset !important;
  background-color: #061f27 !important;
  background: #061f27 !important;
  color: #e8fbff !important;
}

/* Supplier page - keep form fields dark */
.suppliers-page #supplierForm input,
.suppliers-page #supplierForm textarea,
.suppliers-page #supplierForm select,
.suppliers-page #supplierForm input:focus,
.suppliers-page #supplierForm textarea:focus,
.suppliers-page #supplierForm select:focus {
  background-color: #061f27 !important;
  background: #061f27 !important;
  color: #e8fbff !important;
}

.suppliers-page #supplierForm input:-webkit-autofill,
.suppliers-page #supplierForm input:-webkit-autofill:hover,
.suppliers-page #supplierForm input:-webkit-autofill:focus,
.suppliers-page #supplierForm textarea:-webkit-autofill,
.suppliers-page #supplierForm textarea:-webkit-autofill:hover,
.suppliers-page #supplierForm textarea:-webkit-autofill:focus,
.suppliers-page #supplierForm select:-webkit-autofill,
.suppliers-page #supplierForm select:-webkit-autofill:hover,
.suppliers-page #supplierForm select:-webkit-autofill:focus {
  -webkit-text-fill-color: #e8fbff !important;
  -webkit-box-shadow: 0 0 0 1000px #061f27 inset !important;
  box-shadow: 0 0 0 1000px #061f27 inset !important;
  background-color: #061f27 !important;
  background: #061f27 !important;
  color: #e8fbff !important;
}

/* Supplier Master - make records clearly visible */
.suppliers-page #supplierTable tbody tr,
.suppliers-page #supplierTable tbody td {
  color: #e8fbff !important;
  opacity: 1 !important;
}

.suppliers-page #supplierTable tbody td {
  background: transparent !important;
}

.suppliers-page #supplierTable tbody tr {
  filter: none !important;
}

/* Purchase Bills - Dark Form Fields */

.purchases-page input,
.purchases-page textarea,
.purchases-page select,
.purchases-page input:focus,
.purchases-page textarea:focus,
.purchases-page select:focus {
  background-color: #061f27 !important;
  background: #061f27 !important;
  color: #e8fbff !important;
  border-color: #1aaec2 !important;
}

.purchases-page input::placeholder,
.purchases-page textarea::placeholder {
  color: #9bb8be !important;
  opacity: 1 !important;
}

/* Purchase item table fields */
.purchases-page #purchaseItems input,
.purchases-page #purchaseItems select,
.purchases-page #purchaseItems input:focus,
.purchases-page #purchaseItems select:focus {
  background-color: #061f27 !important;
  background: #061f27 !important;
  color: #e8fbff !important;
  border-color: #1aaec2 !important;
}

/* Sales item table fields (same treatment as Purchase item table fields above) */
.sales-page #salesItems input,
.sales-page #salesItems select,
.sales-page #salesItems input:focus,
.sales-page #salesItems select:focus {
  background-color: #061f27 !important;
  background: #061f27 !important;
  color: #e8fbff !important;
  border-color: #1aaec2 !important;
}

/* Chrome / Edge autofill */
.purchases-page input:-webkit-autofill,
.purchases-page input:-webkit-autofill:hover,
.purchases-page input:-webkit-autofill:focus,
.purchases-page textarea:-webkit-autofill,
.purchases-page textarea:-webkit-autofill:hover,
.purchases-page textarea:-webkit-autofill:focus,
.purchases-page select:-webkit-autofill,
.purchases-page select:-webkit-autofill:hover,
.purchases-page select:-webkit-autofill:focus {
  -webkit-text-fill-color: #e8fbff !important;
  -webkit-box-shadow: 0 0 0 1000px #061f27 inset !important;
  box-shadow: 0 0 0 1000px #061f27 inset !important;
  background-color: #061f27 !important;
  background: #061f27 !important;
  color: #e8fbff !important;
}

/* =========================================
   PURCHASE BILLS - BUTTON STYLE
   ========================================= */

.purchases-page button {
  background: #061f27 !important;
  color: #e8fbff !important;
  border: 1px solid #1aaec2 !important;
  border-radius: 8px !important;
  padding: 10px 18px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

.purchases-page button:hover {
  background: #0b3440 !important;
  color: #ffffff !important;
  border-color: #20d5e8 !important;
}

/* Save Purchase Bill */
.purchases-page .primary-button {
  background: #0aa9b8 !important;
  color: #ffffff !important;
  border-color: #20d5e8 !important;
}

.purchases-page .primary-button:hover {
  background: #0cc4d5 !important;
}

/* Add Item / Clear buttons */
.purchases-page .secondary-button {
  background: #061f27 !important;
  color: #e8fbff !important;
  border-color: #1aaec2 !important;
}

/* Back to Dashboard */
/* Remove button inside Item table */
/* =========================================
   PURCHASE BILLS - BUTTON ALIGNMENT
   ========================================= */

.purchases-page .form-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 18px !important;
}

/* Add Item button */
.purchases-page .form-actions .secondary-button {
  min-width: 130px !important;
  height: 42px !important;
  padding: 10px 18px !important;
  text-align: center !important;
}

/* Save Purchase Bill button */
.purchases-page .form-actions .primary-button {
  min-width: 180px !important;
  height: 42px !important;
  padding: 10px 20px !important;
  text-align: center !important;
}

/* Back to Dashboard */
.purchases-page .back-dashboard-btn {
  background: #061f27 !important;
  color: #e8fbff !important;
  border: 1px solid #1aaec2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 180px !important;
  height: 42px !important;
  padding: 10px 20px !important;
  margin-top: 5px !important;
}

/* Remove button inside item table */
.purchases-page #purchaseItems button {
  background: #061f27 !important;
  color: #e8fbff !important;
  border: 1px solid #1aaec2 !important;
  padding: 7px 12px !important;
  min-width: 75px !important;
  height: 36px !important;
  text-align: center !important;
}

/* =========================================
   PURCHASE BILLS - TABLE ACTION BUTTONS
   Same style as Supplier Master
   ========================================= */

.purchases-page #purchaseTable .action-buttons {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.purchases-page #purchaseTable .action-buttons button {
  min-width: 62px !important;
  height: 38px !important;
  padding: 7px 14px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  background: #061f27 !important;
  color: #e8fbff !important;
  border: 1px solid #1aaec2 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

.purchases-page #purchaseTable .action-buttons button:hover {
  background: #0b3440 !important;
  border-color: #20d5e8 !important;
  color: #ffffff !important;
}

/* =========================================
   PURCHASE BILLS - ACTION BUTTONS
   Match Supplier Master
   ========================================= */

.purchases-page #purchaseTable td:last-child button:hover {
  background: #0b3440 !important;
  border-color: #20d5e8 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 72px !important;
  height: 36px !important;
  margin: 0 3px !important;
}

/* =========================================================
   PURCHASE BILLS TABLE
   Match Supplier Master layout and spacing
   ========================================================= */

.purchases-page #purchaseTable {
  width: 100%;
  border-collapse: collapse;
}

.purchases-page #purchaseTable th,
.purchases-page #purchaseTable td {
  padding: 13px 14px !important;
  text-align: left !important;
  vertical-align: middle !important;
  border-bottom: 1px solid rgba(20, 180, 195, 0.14) !important;
}

.purchases-page #purchaseTable th {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
}

.purchases-page #purchaseTable td {
  color: #e8fbff !important;
  font-size: 13px !important;
}

/* Action column */
.purchases-page #purchaseTable td:last-child {
  white-space: nowrap !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* Edit / Delete buttons */
.purchases-page #purchaseTable td:last-child button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 72px !important;
  height: 36px !important;
  margin: 0 3px !important;
  padding: 7px 12px !important;
  border: 1px solid #1aaec2 !important;
  border-radius: 8px !important;
  background: #061f27 !important;
  color: #00d9ff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

/* Delete button */
.purchases-page #purchaseTable td:last-child button[onclick^="deletePurchase"] {
  color: #ff7777 !important;
  border-color: #1aaec2 !important;
}

/* Hover */

/* =========================================================
   PURCHASE BILL - ITEMS COMFORTABLE SPACING
   ========================================================= */

.purchases-page #purchaseItems {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
  table-layout: fixed;
}

/* Header */
.purchases-page #purchaseItems th {
  padding: 13px 14px !important;
  text-align: left !important;
  vertical-align: middle !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
}

/* Item row cells */
.purchases-page #purchaseItems td {
  padding: 10px 10px !important;
  vertical-align: middle !important;
}

/* Comfortable column widths */
.purchases-page #purchaseItems th:nth-child(1),
.purchases-page #purchaseItems td:nth-child(1) {
  width: 25%;
}

.purchases-page #purchaseItems th:nth-child(2),
.purchases-page #purchaseItems td:nth-child(2) {
  width: 18%;
}

.purchases-page #purchaseItems th:nth-child(3),
.purchases-page #purchaseItems td:nth-child(3) {
  width: 12%;
}

.purchases-page #purchaseItems th:nth-child(4),
.purchases-page #purchaseItems td:nth-child(4) {
  width: 20%;
}

.purchases-page #purchaseItems th:nth-child(5),
.purchases-page #purchaseItems td:nth-child(5) {
  width: 12%;
}

.purchases-page #purchaseItems th:nth-child(6),
.purchases-page #purchaseItems td:nth-child(6) {
  width: 13%;
}

/* Item input fields */
.purchases-page #purchaseItems input,
.purchases-page #purchaseItems select {
  width: 100% !important;
  height: 38px !important;
  box-sizing: border-box !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
}

/* Total amount */
.purchases-page #purchaseItems .item-total {
  padding: 10px 8px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* Remove button */
.purchases-page #purchaseItems td:last-child {
  text-align: center !important;
  white-space: nowrap !important;
}

.purchases-page #purchaseItems td:last-child button {
  min-width: 76px !important;
  height: 38px !important;
  padding: 7px 12px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
}

/* =========================================================
   SALES INVOICE - ITEMS COMFORTABLE SPACING
   (same treatment as Purchase Bill items above)
   ========================================================= */

.sales-page #salesItems {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
  table-layout: fixed;
}

/* Header */
.sales-page #salesItems th {
  padding: 13px 14px !important;
  text-align: left !important;
  vertical-align: middle !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
}

/* Item row cells */
.sales-page #salesItems td {
  padding: 10px 10px !important;
  vertical-align: middle !important;
}

/* Comfortable column widths */
.sales-page #salesItems th:nth-child(1),
.sales-page #salesItems td:nth-child(1) {
  width: 25%;
}

.sales-page #salesItems th:nth-child(2),
.sales-page #salesItems td:nth-child(2) {
  width: 18%;
}

.sales-page #salesItems th:nth-child(3),
.sales-page #salesItems td:nth-child(3) {
  width: 12%;
}

.sales-page #salesItems th:nth-child(4),
.sales-page #salesItems td:nth-child(4) {
  width: 20%;
}

.sales-page #salesItems th:nth-child(5),
.sales-page #salesItems td:nth-child(5) {
  width: 12%;
}

.sales-page #salesItems th:nth-child(6),
.sales-page #salesItems td:nth-child(6) {
  width: 13%;
}

/* Item input fields */
.sales-page #salesItems input,
.sales-page #salesItems select {
  width: 100% !important;
  height: 38px !important;
  box-sizing: border-box !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
}

/* Total amount */
.sales-page #salesItems .sales-item-total {
  padding: 10px 8px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* Remove button */
.sales-page #salesItems td:last-child {
  text-align: center !important;
  white-space: nowrap !important;
}

.sales-page #salesItems td:last-child button {
  min-width: 76px !important;
  height: 38px !important;
  padding: 7px 12px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
}