/* ==========================================================================
   Shaheen Electronics - modern UI skin
   Applies site-wide via header.php / start.php. Restyles generic elements
   (tables, forms, buttons, links) so existing pages inherit the new look
   without needing per-page markup changes.
   ========================================================================== */

:root {
  --se-primary: #1d4ed8;       /* Royal Blue */
  --se-primary-dark: #1e3a8a;  /* Deep Navy Blue */
  --se-primary-light: #f0f5ff; /* Soft Royal Blue light background */
  --se-accent: #06b6d4;        /* Bright Cyan */
  --se-ink: #0f172a;           /* Dark Slate Text */
  --se-ink-soft: #475569;      /* Slate Gray */
  --se-border: #cbd5e1;        /* Medium Light Slate Border */
  --se-bg: #f8fafc;            /* Clean Slate White Background */
  --se-surface: #ffffff;
  --se-success: #10b981;
  --se-danger: #ef4444;
  --se-radius: 10px;
  --se-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --se-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  background: var(--se-bg);
  font-family: var(--se-font);
  color: var(--se-ink);
  font-size: 14px;
  margin: 0;
  padding: 0;
}

a { color: var(--se-primary); }
a:hover { color: var(--se-primary-dark); }

/* ---- app shell / layout ------------------------------------------------ */

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-topbar {
  background: var(--se-primary-dark);
  border-bottom: 3px solid var(--se-accent);
  box-shadow: var(--se-shadow);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  flex-wrap: wrap;
  color: #ffffff;
}

.app-topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #ffffff !important;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--se-primary), var(--se-primary-dark));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex: none;
}

.brand-text .brand-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  color: #ffffff !important;
}

.brand-text .brand-sub {
  font-size: 12px;
  color: var(--se-primary-light) !important;
}

.app-topbar .store-info {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85) !important;
  margin-left: 4px;
}

.app-topbar .spacer { flex: 1; }

.app-topbar .user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  padding: 6px 12px;
  border-radius: 999px;
}

.app-topbar .user-chip b { color: #ffffff !important; }

.app-topbar .logout-link {
  font-size: 12px;
  font-weight: 600;
  color: #ff8a8a !important;
  text-decoration: none;
}

.app-topbar select {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  border-radius: 4px;
  padding: 4px 8px;
}

.app-topbar select option {
  background: var(--se-primary-dark) !important;
  color: #ffffff !important;
}

.app-body {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.sidebar {
  width: 220px;
  flex: none;
  background: var(--se-primary-light);
  border-right: 1px solid var(--se-border);
  min-height: calc(100vh - 60px);
  padding: 14px 10px;
}

.sidebar .welcome {
  font-size: 12px;
  color: var(--se-primary-dark) !important;
  padding: 4px 8px 14px;
  border-bottom: 1px solid var(--se-border);
  margin-bottom: 10px;
}

.app-content {
  flex: 1;
  min-width: 0;
  padding: 18px;
}

.content-card {
  background: var(--se-surface);
  border: 1px solid var(--se-border);
  border-radius: var(--se-radius);
  box-shadow: var(--se-shadow);
  padding: 16px;
}

/* ---- sidebar accordion menu (menunew.php / menunewuser.php) ------------ */

.arrowlistmenu { width: 100%; }

.arrowlistmenu .menuheader {
  font: 600 12.5px var(--se-font) !important;
  color: #fff !important;
  background: var(--se-primary) !important;
  border-radius: 7px;
  margin: 4px 0 !important;
  text-transform: none !important;
  letter-spacing: .2px;
  padding: 9px 10px !important;
  cursor: pointer;
}

.arrowlistmenu .menuheader.openheader {
  background: var(--se-primary-dark) !important;
}

.arrowlistmenu ul {
  list-style: none;
  margin: 0 0 6px !important;
  padding: 2px 0 2px 6px !important;
}

.arrowlistmenu ul li { padding: 0 !important; }

.arrowlistmenu ul li a {
  display: block !important;
  padding: 7px 10px !important;
  border-radius: 7px;
  border-bottom: none !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  text-decoration: none !important;
  color: var(--se-ink) !important;
  background: none !important;
}

.arrowlistmenu ul li a span {
  background: none !important;
  color: inherit !important;
}

.arrowlistmenu ul li a:hover {
  background: var(--se-primary-light) !important;
  color: var(--se-primary-dark) !important;
}

/* ---- generic table styling (Bootstrap-like look, applies to every table,
   including legacy pages that never carry a class) ------------------------ */

table {
  border-collapse: collapse;
  width: 100%;
  background: var(--se-surface);
  border: 1px solid var(--se-border);
  font-size: 12.5px;
}

table th {
  font-weight: 600;
  text-align: left;
  padding: 9px 10px;
  border: 1px solid var(--se-border);
  background: var(--se-primary-dark) !important;
  color: #ffffff !important;
}

table td {
  padding: 7px 10px;
  border: 1px solid var(--se-border);
  color: var(--se-ink);
}

/* Cells that carry an explicit bgcolor attribute are intentional status
   badges (e.g. green/red/black paid/balance cells, usually paired with
   <font color="#fff">). Don't declare a background for them at all so the
   HTML bgcolor attribute is free to apply - declaring anything here
   (even "initial") would still take priority over it and blank it out. */
table td:not([bgcolor]),
table th:not([bgcolor]) {
  background: var(--se-surface);
}

tr:hover td:not([bgcolor]) { background: var(--se-primary-light); }

/* actb.js autocomplete suggestion dropdown (#tat_table) paints its own
   row backgrounds via inline JS styles and expects transparent cells for
   that to show through - the generic table rules above would otherwise
   paint every td white and hide it (white text becomes invisible). ID
   selectors here outrank the generic element rules regardless of source
   order, so no !important is needed. */
#tat_table,
#tat_table tr,
#tat_table th,
#tat_table td {
  background: transparent;
  border: none;
  width: auto;
}

/* keep the previous named classes visually identical to the generic table
   rules above, just with the extra rounded/overflow treatment */
table.altrowstable,
table.gridtable,
table.hor-minimalist-a,
table.hor-minimalist-b {
  border-radius: var(--se-radius);
  overflow: hidden;
}

/* ---- forms / inputs / buttons ------------------------------------------ */

input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="search"],
input[type="tel"],
select,
textarea {
  font-family: var(--se-font);
  font-size: 13px;
  padding: 6px 9px;
  border: 1px solid var(--se-border);
  border-radius: 7px;
  background: #fff;
  color: var(--se-ink);
}

.altrowstable input[type="text"],
.altrowstable select {
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
}

input[type="text"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--se-primary);
  box-shadow: 0 0 0 3px var(--se-primary-light);
}

input[type="submit"],
input[type="button"],
button,
.btn {
  font-family: var(--se-font);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 7px;
  border: 1px solid var(--se-primary);
  background: var(--se-primary);
  color: #fff;
  cursor: pointer;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover,
.btn:hover {
  background: var(--se-primary-dark);
  border-color: var(--se-primary-dark);
}

.btn-xs { padding: 4px 9px; font-size: 11.5px; }

/* ---- login page --------------------------------------------------------- */

.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f172a, var(--se-primary-dark));
  font-family: var(--se-font);
}

.login-card {
  width: 340px;
  background: var(--se-surface);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  padding: 30px 28px 26px;
  text-align: center;
}

.login-card .brand-mark {
  margin: 0 auto 14px;
  width: 54px;
  height: 54px;
  font-size: 18px;
}

.login-card h1 {
  font-size: 17px;
  margin: 0 0 2px;
  color: var(--se-ink);
}

.login-card p.tag {
  font-size: 12.5px;
  color: var(--se-ink-soft);
  margin: 0 0 20px;
}

.login-card input[type="text"],
.login-card input[type="password"] {
  width: 100%;
  margin-bottom: 12px;
  padding: 10px 12px;
}

.login-card input[type="submit"] {
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
}

.login-error {
  background: #fef2f2;
  color: var(--se-danger);
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  margin-bottom: 14px;
}

@media (max-width: 800px) {
  .app-body { flex-direction: column; }
  .sidebar { width: 100%; min-height: auto; border-right: none; border-bottom: 1px solid var(--se-border); }
}

/* Zebra row overrides for clean modern look */
.oddrowcolor, tr.oddrowcolor td {
  background-color: #f8fafc !important;
  color: var(--se-ink) !important;
}
.evenrowcolor, tr.evenrowcolor td {
  background-color: #ffffff !important;
  color: var(--se-ink) !important;
}

/* ---- Invoice Creation Form (newsales.php) & Purchase Edit (printpurchasesnew.php) Styling ---- */

.invoice-shell {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}

.invoice-top-cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.invoice-card {
  background: #eff6ff; /* light blue background matching screenshot */
  border: 1px solid #bfdbfe;
  border-radius: var(--se-radius);
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.invoice-card.left-card {
  flex: 1 1 200px;
}

.invoice-card.center-card {
  flex: 2 1 400px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.invoice-card.right-card {
  flex: 2 1 400px;
  background: #ffffff; /* white bg for new customer */
  border: 2px solid #bfdbfe;
}

.invoice-card h3 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--se-primary-dark);
  border-bottom: 1px solid #bfdbfe;
  padding-bottom: 6px;
  text-align: left;
}

/* Flex group for form input alignments */
.form-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.form-row label {
  width: 110px;
  font-weight: 600;
  color: var(--se-ink);
  text-align: left;
}

.form-row input[type="text"],
.form-row select {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--se-border);
  border-radius: 6px;
  background: #ffffff;
  font-size: 13px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
}

.form-row input[type="text"]:focus,
.form-row select:focus {
  border-color: var(--se-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

.new-cust-table {
  width: 100%;
  border: none;
  background: transparent;
}

.new-cust-table td {
  border: none;
  padding: 4px 6px;
}

.new-cust-table label {
  font-weight: 700;
  color: #16a34a !important; /* Green labels for new customer matching screenshot */
}

/* Modern inputs within the main item list tables */
table.altrowstable input[type="text"],
table.altrowstable select {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--se-border);
  border-radius: 6px;
  background: #ffffff;
  font-size: 13px;
  transition: all 0.2s ease;
}

table.altrowstable input[type="text"]:focus,
table.altrowstable select:focus {
  border-color: var(--se-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

/* Modern styling for printed list filters (printpurchasesnew.php) */
.filter-bar {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--se-radius);
  padding: 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-bar label {
  font-weight: 600;
  color: var(--se-ink-soft);
}

.filter-bar input[type="text"],
.filter-bar select {
  padding: 6px 10px;
  border: 1px solid var(--se-border);
  border-radius: 6px;
  background: #ffffff;
  font-size: 13px;
}

.link-button-bar {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 12px;
}

.link-button-bar a {
  padding: 6px 12px;
  border-radius: 6px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  text-decoration: none;
  color: var(--se-primary-dark);
  font-weight: 600;
  font-size: 13px;
}

.link-button-bar a:hover {
  background: var(--se-primary-light);
  border-color: var(--se-primary);
}