/* ==========================================================================
   SorceryNet Webpanel Theme (Dark + Gold)
   Drop-in replacement for the panel's style.css
   ========================================================================== */

/* Fonts (keep existing choices; you can switch to system-ui if preferred) */
@import url(//fonts.googleapis.com/css?family=Open+Sans:300,400);
@import url(//fonts.googleapis.com/css?family=Port+Lligat+Slab);

/* ----- Theme tokens ----- */
:root{
  --bg-page:        #020b17;           /* site page background */
  --bg-header:      #030d19;           /* site header background */
  --bg-surface:     #0b1b2e;           /* cards/panels/inputs */
  --text:           #f3f4f6;           /* primary text */
  --muted:          #a7b3cc;           /* secondary text */
  --accent:         #E4C66C;           /* light gold */
  --accent-strong:  #CAA44A;           /* dark gold (buttons) */
  --accent-weak:    rgba(228,198,108,.12);
  --border:         rgba(255,255,255,.12);
  --border-subtle:  rgba(255,255,255,.08);
  --shadow:         0 10px 28px rgba(0,0,0,.25);

  /* Zebra striping for tables */
  --row-odd-dark:   rgba(255,255,255,.03);
  --row-even-dark:  rgba(255,255,255,.07);
}

/* Universal font + base text color */
*, html, body, h1, h2, h3, h4, div, p, span, a, button {
  font-family: 'Open Sans', sans-serif;
  color: var(--text);
}

/* Page background */
body{
  background: var(--bg-page);
  /* Remove the old light cubes; if you want a subtle texture, add it here */
  background-image: none !important;
}

/* Headings spacing */
h2{ margin: 0 0 10px 0; }
h4{ margin-top: 30px; }

/* Labels / badges */
.label{
  font-size: 13px;
  font-weight: 600;
  border-radius: 9999px;
  padding: .2rem .5rem;
  display: inline-block;
}
.label-info{
  background-color: var(--accent-weak);
  color: var(--accent);
}
.label-info[href]:hover,
.label-info[href]:focus{
  background-color: rgba(228,198,108,.2);
}

/* Login form */
.form-signin .form-signin-heading,
.form-signin .checkbox{ margin-bottom: 10px; }
.form-signin .checkbox{ font-weight: normal; }

.form-signin .form-control{
  position: relative;
  font-size: 16px;
  height: auto;
  padding: 10px;
  box-sizing: border-box;
  background: var(--bg-surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.form-signin .form-control:focus{
  z-index: 2;
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}

/* Footer */
.footer{
  margin-top: 20px;
  color: var(--muted);
}

/* Panel (Bootstrap 3) */
.panel{
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.panel-default>.panel-heading{
  background: #0f2239;
  color: #fff;
  border-bottom: 1px solid var(--border);
  font-size: 20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.panel-heading a{ color: var(--accent); }
.panel-body{ color: var(--text); }

/* Tables */
.table{
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: transparent;
}
.table th,
.table td{
  padding: .75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text);
}
.table thead>tr>th{
  background: #0f2239; /* sticky surface header */
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 1px solid var(--border);
}
.table tbody>tr:nth-child(odd){  background: var(--row-odd-dark); }
.table tbody>tr:nth-child(even){ background: var(--row-even-dark); }
.table tbody>tr:hover{ background: var(--accent-weak); }

/* Info tables used in panel */
#tableInfo td,
#tableInfoNorm td,
#tableInfoMemos td,
#tableAccess td{ vertical-align: middle; }

#tableInfo td:first-child,
#tableInfoNorm td:first-child,
#tableInfoMemos td:first-child{
  font-weight: 700;
  padding-right: 10px;
  text-align: left;
  width: 25%;
  color: var(--muted);
}
#tableAccess td:first-child{ padding-right: 10px; text-align: left; }
#tableAccess td:last-child{ padding-right: 10px; text-align: right; }
#tableInfoMemos th small,
#tableAccess th small{ font-weight: normal; color: var(--muted); }

/* Lists */
#channelList li{ margin-top: 10px; }

/* Navbar (Bootstrap 3) */
.navbar, .well{
  background-color: var(--bg-header) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.navbar{
  border-radius: 10px;
}
.navbar-brand{
  font-size: 24px;
  font-family: 'Port Lligat Slab', serif;
  color: var(--accent) !important;
}
.navbar-brand small{
  font-family: 'Port Lligat Slab', serif;
  color: var(--muted);
}
.navbar-default .nav{ margin-bottom: -1px; }

/* Top-level nav links */
.navbar-default .nav>li>a{
  color: var(--accent);
  background: transparent;
  border-radius: 6px;
  margin: .2rem .25rem;
  transition: background .15s ease, color .15s ease;
}
.navbar-default .nav>li>a:hover,
.navbar-default .nav>li>a:focus{
  color: #fff;
  background: rgba(202,164,74,.18);
  border-top: 0;
  margin-top: 0;
}

/* Active item */
.navbar-default .nav>li.active>a,
.navbar-default .nav>li.active>a:hover,
.navbar-default .nav>li.active>a:focus{
  color: #fff !important;
  background-color: rgba(202,164,74,.22) !important;
  border-bottom-color: transparent;
}

/* Buttons */
button, .btn, input[type=submit], input[type=button]{
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #0b1220;
  border-radius: 8px !important;
  padding: .45rem .9rem;
  font-weight: 700;
  transition: filter .12s ease, transform .02s ease;
}
button:hover, .btn:hover, input[type=submit]:hover, input[type=button]:hover{
  filter: brightness(1.07);
}
button:active, .btn:active{ transform: translateY(1px); }

.btn-default{
  background: #1a2b45;
  border-color: var(--border);
  color: var(--text);
}
.btn-default:hover{
  background: #213553;
}

/* Links */
a{ color: var(--accent); text-decoration: underline; }
a:hover{ color: #FFD778; }

/* Form controls (Bootstrap 3) */
.form-control{
  background: var(--bg-surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.form-control:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}
input::placeholder, textarea::placeholder{ color: var(--muted); }

/* Popover */
.popover{
  max-width: 450px;
  box-shadow: 0 1px 10px rgba(0,0,0,.8);
  background: var(--bg-surface);
  border: 1px solid var(--border);
}
.popover .popover-title{
  background: #0f2239;
  color: #fff;
  border-bottom: 1px solid var(--border);
}

/* Misc spacing / utility */
#frontPages{ padding-top: 20px; }
#loggedIn{ margin: 15px 15px 0 0; }
#navPanel{ margin: 0; padding: 0; }

/* Make any “well” components match cards */
.well{
  background: var(--bg-surface);
  border-color: var(--border);
  border-radius: 10px;
}

/* Small helper for muted text */
.text-muted{ color: var(--muted) !important; }