/* ==========================================================================
   Usmania 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 {
  --ue-primary: #2563eb;
  --ue-primary-dark: #1d4ed8;
  --ue-primary-light: #eff6ff;
  --ue-accent: #f59e0b;
  --ue-ink: #1e293b;
  --ue-ink-soft: #64748b;
  --ue-border: #e2e8f0;
  --ue-bg: #f4f6fb;
  --ue-surface: #ffffff;
  --ue-success: #16a34a;
  --ue-danger: #dc2626;
  --ue-radius: 10px;
  --ue-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
  --ue-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

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

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

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

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

.app-topbar {
  background: var(--ue-surface);
  border-bottom: 1px solid var(--ue-border);
  box-shadow: var(--ue-shadow);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  flex-wrap: wrap;
}

.app-topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ue-ink);
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--ue-primary), var(--ue-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;
}

.brand-text .brand-sub {
  font-size: 12px;
  color: var(--ue-ink-soft);
}

.app-topbar .store-info {
  font-size: 12px;
  color: var(--ue-ink-soft);
  margin-left: 4px;
}

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

.app-topbar .user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ue-ink-soft);
  background: var(--ue-bg);
  border: 1px solid var(--ue-border);
  padding: 6px 12px;
  border-radius: 999px;
}

.app-topbar .user-chip b { color: var(--ue-ink); }

.app-topbar .logout-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--ue-danger);
  text-decoration: none;
}

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

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

.sidebar .welcome {
  font-size: 12px;
  color: var(--ue-ink-soft);
  padding: 4px 8px 14px;
  border-bottom: 1px solid var(--ue-border);
  margin-bottom: 10px;
}

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

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

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

.arrowlistmenu { width: 100%; }

.arrowlistmenu .menuheader {
  font: 600 12.5px var(--ue-font) !important;
  color: #fff !important;
  background: var(--ue-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(--ue-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(--ue-ink) !important;
  background: none !important;
}

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

.arrowlistmenu ul li a:hover {
  background: var(--ue-primary-light) !important;
  color: var(--ue-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(--ue-surface);
  border: 1px solid var(--ue-border);
  font-size: 12.5px;
}

table th {
  font-weight: 600;
  text-align: left;
  padding: 9px 10px;
  border: 1px solid var(--ue-border);
  color: var(--ue-ink);
}

table td {
  padding: 7px 10px;
  border: 1px solid var(--ue-border);
  color: var(--ue-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(--ue-surface);
}

tr:hover td:not([bgcolor]) { background: var(--ue-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(--ue-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(--ue-font);
  font-size: 13px;
  padding: 6px 9px;
  border: 1px solid var(--ue-border);
  border-radius: 7px;
  background: #fff;
  color: var(--ue-ink);
}

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

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

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover,
.btn:hover {
  background: var(--ue-primary-dark);
  border-color: var(--ue-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(--ue-primary-dark));
  font-family: var(--ue-font);
}

.login-card {
  width: 340px;
  background: var(--ue-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(--ue-ink);
}

.login-card p.tag {
  font-size: 12.5px;
  color: var(--ue-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(--ue-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(--ue-border); }
}