/* ============================================================
   CW&T CMS Theme Settings
   Edit values below and refresh the browser to see changes.
   No build step required.
   ============================================================ */

:root {
  /* --- Colors --- */
  --color-text: #000000;
  --color-bg: #ffffff;
  --color-page-bg: #dcdcdc;
  --color-border: #000000;
  --color-sidebar-bg: #000000;
  --color-sidebar-text: #ffffff;
  --color-sidebar-active: #ffff00;
  --color-sidebar-section-opacity: 0.5;
  --color-topbar-bg: #000000;
  --color-topbar-border: #000000;

  /* --- Typography --- */
  --font-family: "Space Mono", monospace;
  --font-size-body: 12px;
  --font-size-nav: 12px;
  --font-size-table: 12px;
  --font-size-heading: 12px;
  --font-weight: 400;
  --line-height: 1.6;

  /* --- Spacing --- */
  --sidebar-width: 14rem;
  --topbar-height: 2.5rem;
  --table-cell-padding: 0.5rem 0.75rem;
  --input-padding-left: 10px;

  /* --- Borders --- */
  --border-width: 1px;
  --border-radius: 0px;

  /* --- Section Cards --- */
  --section-border-color: #000000;
  --section-header-bg: darkgrey;
  --section-header-text: #000000;
}

/* --- Apply variables globally --- */

body {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: var(--font-size-body);
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-page-bg);
}

/* Sidebar */
.lg\:w-56 { width: var(--sidebar-width); }
.lg\:pl-56 { padding-left: var(--sidebar-width); }
.max-w-xs { max-width: var(--sidebar-width); }

/* Sidebar active nav link */
.sidebar-active {
  color: var(--color-sidebar-active) !important;
  text-decoration-color: var(--color-sidebar-active) !important;
}

/* Sidebar background */
[class*="bg-black"]:is(nav *, .flex.grow) {
  background-color: var(--color-sidebar-bg);
}

/* Topbar */
.sticky.top-0.z-40 {
  background-color: var(--color-topbar-bg);
  border-color: var(--color-topbar-border);
  height: var(--topbar-height);
}

/* Tables */
table { font-size: var(--font-size-table); }
th, td { padding: var(--table-cell-padding); }

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight);
  font-family: var(--font-family);
}

/* All border radius */
*, *::before, *::after {
  border-radius: var(--border-radius);
}


/* --- Text inputs: left padding across site --- */

input[type="text"]:not([class*="pl-"]),
input[type="email"]:not([class*="pl-"]),
input[type="search"]:not([class*="pl-"]),
input[type="password"]:not([class*="pl-"]),
input[type="number"]:not([class*="pl-"]),
input[type="tel"]:not([class*="pl-"]),
input[type="url"]:not([class*="pl-"]),
input[type="date"]:not([class*="pl-"]),
textarea:not([class*="pl-"]),
select:not([class*="pl-"]) {
  padding-left: var(--input-padding-left);
}

/* --- Dropdowns: black ring + caret margin --- */
select {
  --tw-ring-color: #000000;
  padding-right: 1.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='%23000000'%3E%3Cpath d='M6.5 3.5l7 6.5-7 6.5V3.5z' transform='rotate(90 10 10)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 10px;
}

/* --- Fix: inputs inside ring-bordered wrappers must be transparent
       so the parent's inset box-shadow ring is visible --- */

[class*="ring-"] > input,
[class*="ring-"] > select,
[class*="ring-"] > textarea {
  background: transparent;
}

/* --- White content panels: 1px black border --- */
.overflow-hidden.bg-white {
  border: 1px solid var(--color-border);
}

/* --- Section Cards --- */

.section-card {
  border: 1px solid var(--section-border-color);
  background-color: var(--color-bg);
  overflow: visible;
}

.section-card-header {
  background-color: var(--section-header-bg);
  color: var(--section-header-text);
  padding: 0.25rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid black;
}

.section-card-header h3 {
  color: var(--section-header-text);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  line-height: 1;
}

/* Variant detail definition list: vertically center labels */
.section-card dl > div {
  align-items: center;
}

.section-card dl > div > dt {
  align-self: center;
}

.section-card dl > div > dd {
  align-self: center;
}

.section-card-header .btn-outline {
  background-color: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 0.175rem 0.75rem;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-family: var(--font-family);
  font-weight: var(--font-weight);
}

.section-card-header .btn-outline:hover {
  background-color: var(--color-text);
  color: var(--color-bg);
}