/* ═══════════════════════════════════════════════════════════════════════════
   CreoNovex AI Business Management — Design System
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
  /* Brand Blues (header) */
  --cn-navy-deep:   #091829;
  --cn-navy:        #0f2a5e;
  --cn-navy-mid:    #1a3a6b;
  --cn-navy-light:  #1e4a8a;

  /* Brand Purples (sidebar + section headers) */
  --cn-purple-deep: #1e1b4b;
  --cn-purple:      #3730a3;
  --cn-purple-mid:  #4f46e5;
  --cn-purple-light:#a5b4fc;

  /* Status / feedback colors */
  --cn-red:         #9b1c1c;
  --cn-green:       #14532d;

  /* Surface / backgrounds */
  --cn-bg:          #eef1f8;
  --cn-surface:     #ffffff;
  --cn-sidebar-bg:  #1a1740;

  /* Text */
  --cn-text:        #0f172a;
  --cn-text-mid:    #334155;
  --cn-text-muted:  #64748b;
  --cn-text-light:  #94a3b8;

  /* Borders */
  --cn-border:      #e2e8f0;
  --cn-border-mid:  #cbd5e1;

  /* Shadows */
  --cn-shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --cn-shadow:    0 2px 10px rgba(0,0,0,.09), 0 4px 20px rgba(0,0,0,.05);
  --cn-shadow-lg: 0 4px 28px rgba(0,0,0,.13), 0 8px 40px rgba(0,0,0,.07);

  /* Layout */
  --cn-header-h:  60px;
  --cn-sidebar-w: 218px;
  --cn-radius:    8px;
  --cn-radius-lg: 12px;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui,
               'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--cn-text);
  background: var(--cn-bg);
  margin: 0;
  padding: 0;
  text-align: left;
  padding-top: var(--cn-header-h);
}

img { border: 0; max-width: 100%; }
p   { margin-top: 8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════════════ */
#header {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: var(--cn-header-h) !important;
  width: 100% !important;
  background: linear-gradient(110deg, var(--cn-navy-deep) 0%, var(--cn-navy) 50%, var(--cn-navy-mid) 100%) !important;
  border-bottom: 3px solid var(--cn-purple-mid);
  z-index: 1000;
  display: flex !important;
  align-items: center;
  padding: 0 18px !important;
  gap: 12px;
}

/* Brand block */
.cn-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex-shrink: 0;
}
.cn-brand-icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--cn-purple-mid), var(--cn-navy-light));
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
  box-shadow: 0 2px 10px rgba(79,70,229,.45);
  flex-shrink: 0;
}
.cn-brand-text { line-height: 1.15; }
.cn-brand-name {
  font-size: 19px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.03em;
  display: block;
}
.cn-brand-sub {
  font-size: 10px;
  color: var(--cn-purple-light);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  display: block;
}

/* Divider between brand and nav */
.cn-header-gap { flex: 1; }

/* ── Nav buttons (inside #menu) ─────────────────────────────────────────── */
#menu {
  display: flex !important;
  align-items: center;
  gap: 5px;
  position: static !important;
  margin: 0 !important; padding: 0 !important;
  background: transparent !important;
  height: auto !important;
  top: auto !important; left: auto !important; width: auto !important;
  font-size: 13px !important;
  font-family: inherit;
}
#menu input[type="button"],
#menu input[type="submit"] {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.85);
  border: 1.5px solid rgba(255,255,255,.22);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
#menu input[type="button"]:hover,
#menu input[type="submit"]:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.55);
  color: #fff;
}
#adminpanel {
  background: rgba(79,70,229,.4) !important;
  border-color: var(--cn-purple-mid) !important;
  color: #fff !important;
}
#adminpanel:hover {
  background: rgba(79,70,229,.6) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT SHELL  (#container → flex row)
   ═══════════════════════════════════════════════════════════════════════════ */
#container {
  position: static !important;
  top: auto !important;
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - var(--cn-header-h));
  margin: 0 !important;
  background: none !important;
  border: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════ */
#bar {
  width: var(--cn-sidebar-w);
  flex-shrink: 0;
  position: sticky;
  top: var(--cn-header-h);
  height: calc(100vh - var(--cn-header-h));
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--cn-sidebar-bg) !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 90;
  border-right: 1px solid rgba(255,255,255,.06);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
#bar::-webkit-scrollbar { width: 4px; }
#bar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 2px; }

/* Admin / user info block */
#bar > p, #barinfo {
  margin: 0 !important;
  padding: 12px 14px 10px;
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(255,255,255,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}
#bar > p strong { color: rgba(255,255,255,.88); }
#bar > p a, #barinfo a { color: var(--cn-purple-light) !important; text-decoration: none; }
#bar > p a:hover, #barinfo a:hover { color: #fff !important; text-decoration: underline; }

/* Section heading */
#bar h3 {
  font-size: 9.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,.35) !important;
  padding: 16px 14px 5px !important;
  margin: 0 !important;
  font-weight: 700;
}

/* Nav links */
#bar a {
  display: block;
  padding: 7px 14px;
  font-size: 12.5px;
  color: rgba(255,255,255,.7) !important;
  text-decoration: none !important;
  transition: background .12s, color .12s, padding-left .12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 3px solid transparent;
}
#bar a:hover {
  background: rgba(255,255,255,.09);
  color: #fff !important;
  padding-left: 18px;
  border-left-color: var(--cn-purple-mid);
}

/* Phone / contact label */
#bar h4 {
  font-size: 13px !important;
  color: rgba(255,255,255,.8) !important;
  margin: 8px 0 2px;
  padding: 0 14px;
  font-weight: 700;
}
#bar h4[style*="990000"] { color: rgba(255,255,255,.8) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   MAIN CONTENT AREA
   ═══════════════════════════════════════════════════════════════════════════ */
#main {
  flex: 1;
  min-width: 0;
  background: var(--cn-bg);
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}

/* The content wrapper (replaces old position:absolute; left:225px div) */
.cn-content-wrap {
  padding: 20px 22px 60px;
  max-width: 100%;
  box-sizing: border-box;
}

/* ul#newlist: just a structural container now */
ul#newlist, ul#newlist li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  width: 100% !important;
  float: none !important;
  position: static !important;
}
ul#newlist2, ul#newlist2 li {
  margin: 0 !important; padding: 0 !important;
  list-style: none; width: 100% !important;
  position: static !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION CARDS  (#split + #content)
   ═══════════════════════════════════════════════════════════════════════════ */
#split, #split2, #split3 {
  margin: 0 0 24px 0 !important;
  width: auto !important;
  min-width: 0 !important;
  background: var(--cn-surface);
  border-radius: var(--cn-radius-lg) !important;
  box-shadow: var(--cn-shadow) !important;
  overflow: hidden;
  position: static !important;
  border: 1px solid var(--cn-border);
}

/* Section header bar (deep purple gradient) */
#split h3, #split2 h3, #split3 h3 {
  padding: 12px 18px !important;
  margin: 0 !important;
  text-align: left !important;
  color: #fff !important;
  font-size: 13.5px !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: linear-gradient(110deg, var(--cn-purple-deep) 0%, var(--cn-purple) 55%, var(--cn-purple-mid) 100%) !important;
  border-radius: 0 !important;
}

/* RUZEE shaded-border neutraliser */
#split  .sb-inner, #split2  .sb-inner, #split3  .sb-inner,
#split  .sb-outer, #split2  .sb-outer, #split3  .sb-outer { background: transparent !important; border: none !important; }

#content, #content2, #content3 {
  padding: 18px 20px !important;
  background: var(--cn-surface) !important;
  color: var(--cn-text) !important;
}
#content  .sb-inner, #content2 .sb-inner, #content3 .sb-inner { background: transparent !important; }

/* Hide the unused split0 bar */
#split0 { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════════════════ */
table {
  background: transparent !important;
  border: none !important;
  border-collapse: collapse;
}
td {
  background-color: transparent !important;
  border-bottom: 1px solid var(--cn-border) !important;
  padding: 6px 8px !important;
  vertical-align: middle;
  color: var(--cn-text);
  font-size: 13px;
}
td:first-child {
  color: var(--cn-text-mid);
  font-weight: 500;
  padding-right: 14px !important;
}
th {
  background: var(--cn-purple-deep) !important;
  color: rgba(255,255,255,.9) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px !important;
  padding: 8px 10px !important;
  border: none !important;
  font-weight: 600;
  text-align: left;
}
tr.different td { background-color: #f6f8ff !important; }
tr.head td {
  background: #f1f5fb !important;
  text-transform: uppercase;
  font-size: 11px !important;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--cn-text-muted) !important;
  border-top: 1px solid var(--cn-border) !important;
}
tr.body td { background: #fff !important; }
tr.pricetotal td { font-size: 14px; font-weight: 700; }

/* Estimator's newtable2 */
.newtable2 {
  background: transparent !important;
  border: none !important;
  border-collapse: collapse;
  width: 100%;
}
.newtable2 td {
  background-color: transparent !important;
  border-bottom: 1px solid var(--cn-border) !important;
  padding: 6px 8px !important;
}
.newtable td {
  background-color: transparent !important;
  border-bottom: 1px solid var(--cn-border) !important;
  padding: 6px 8px !important;
}

/* shipto table */
table.shipto td {
  border: 1px solid var(--cn-border) !important;
  background-color: #f9fafb !important;
  padding: 5px 8px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM CONTROLS
   ═══════════════════════════════════════════════════════════════════════════ */
select {
  width: auto;
  padding: 6px 10px;
  border: 1.5px solid var(--cn-border-mid);
  border-radius: 6px;
  background-color: #fff;
  font-size: 13px;
  color: var(--cn-text);
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
select:hover  { border-color: var(--cn-purple); }
select:focus  {
  outline: none;
  border-color: var(--cn-purple-mid);
  box-shadow: 0 0 0 3px rgba(79,70,229,.14);
}

input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea {
  padding: 6px 10px;
  border: 1.5px solid var(--cn-border-mid);
  border-radius: 6px;
  font-size: 13px;
  color: var(--cn-text);
  font-family: inherit;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--cn-purple-mid);
  box-shadow: 0 0 0 3px rgba(79,70,229,.14);
}

/* Form action buttons (Save / Add to Cart / Update) */
input[type="submit"] {
  padding: 8px 20px;
  background: var(--cn-navy);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
input[type="submit"]:hover { background: var(--cn-navy-mid); }

/* Generic non-nav input buttons */
input[type="button"] {
  padding: 7px 15px;
  background: #f1f4f9;
  color: var(--cn-text-mid);
  border: 1.5px solid var(--cn-border-mid);
  border-radius: 6px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
input[type="button"]:hover { background: #e2e8f0; border-color: var(--cn-border-mid); }

/* ── Width helpers for selects that need it ─── */
#expiremonth { width: 70px; }
#expireyear  { width: 100px; }

/* ═══════════════════════════════════════════════════════════════════════════
   LINKS
   ═══════════════════════════════════════════════════════════════════════════ */
a:link, a:visited   { color: var(--cn-purple); text-decoration: none; }
a:hover, a:active   { color: var(--cn-purple-mid); text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   HEADINGS
   ═══════════════════════════════════════════════════════════════════════════ */
h1 { font-size: 18px; font-weight: 700; color: var(--cn-text); }
h2 { font-size: 15px; font-weight: 700; color: var(--cn-text); }
h3 { font-size: 14px; font-weight: 700; color: var(--cn-text); margin-bottom: 0; letter-spacing: 0; }
h4 { font-size: 13px; font-weight: 600; color: var(--cn-text); }

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN PANEL
   ═══════════════════════════════════════════════════════════════════════════ */
#login {
  font-family: inherit;
  font-size: 13px;
  border: 1.5px solid var(--cn-border);
  border-radius: var(--cn-radius-lg);
  width: 360px;
  margin: 48px auto;
  background: var(--cn-surface);
  box-shadow: var(--cn-shadow);
  padding: 28px 28px 24px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MISC
   ═══════════════════════════════════════════════════════════════════════════ */
#error { color: #dc2626; font-size: 12.5px; padding: 4px 0; }

/* ── Scrollbar (Webkit) ── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cn-border-mid); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--cn-text-light); }

/* ═══════════════════════════════════════════════════════════════════════════
   YUI CALENDAR  (preserved from original)
   ═══════════════════════════════════════════════════════════════════════════ */
#examplecontainer { height: 20px; position: relative; }
#cal1Container    { display: none; position: absolute; left: 365px; top: 0; }

a.cal_date:link, a.cal_date:visited, a.cal_date:hover, a.cal_date:active {
  text-decoration: none; color: white; display: block; width: 100%; height: 100%;
}
a.cal:link    { text-decoration:none; color:red; display:block; height:100%; background:white; padding:3px; }
a.cal:visited { text-decoration:none; color:red; display:block; width:100%; height:100%; background:white; padding:3px; }
a.cal:hover   { text-decoration:none; color:white; display:block; width:100%; height:100%; background:#ddd; border:thin solid black; padding:0; }
a.cal:active  { text-decoration:none; color:red; display:block; width:100%; height:100%; background:white; padding:3px; }
a.event:link, a.event:visited { text-decoration:none; color:blue; width:100%; background:lightblue; padding:3px; }
a.deleteevent:link, a.deleteevent:visited { text-decoration:none; color:blue; background:red; padding:3px; border:thin solid black; }
table.cal  { border: thin solid black; }
th.cal     { background: #000; color: #fff; }
td.cal_date { background: #333; color: #fff; }

span.datepicker {
  font-family: inherit;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}