/* ===========================
   components.css — reusable UI components
   Purpose: sidebar/topbar chrome, cards, buttons, tables, and
            fully-themed form controls for a dark UI.
   Note: Colors/tokens come from theme.css (e.g. --bg-dark = #0f1115).
   =========================== */

/* ========== Layout chrome: Sidebar + Main ========== */
.sidebar {
   position: fixed;
   inset: 0 auto 0 0;
   /* top:0, right:auto, bottom:0, left:0 */
   width: 280px;
   /* keep in sync with .main margin-left */
   background: var(--bg-sidebar);
   color: var(--text-main);
   border-right: 1px solid var(--border);
   padding: 16px;
   overflow-y: auto;
}

.main {
   margin-left: 280px;
   /* pushes content right of the sidebar */
   min-height: 100vh;
}

/* Sticky top bar inside main area */
.topbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 20px;
   border-bottom: 1px solid var(--border);
   background: var(--bg-card);
   position: sticky;
   top: 0;
   z-index: 2;
}

/* ========== Branding ========== */
.logo-box {
   background: var(--grad-orange);
   color: #fff;
   width: 36px;
   height: 36px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 8px;
   font-weight: 800;
   letter-spacing: 1px;
}

.brand-block {
   margin-left: 10px;
}

.brand-title {
   font-size: 18px;
   font-weight: 700;
}

.brand-tag {
   font-size: 12px;
   color: var(--text-muted);
   margin-top: -2px;
   display: block;
}

/* ========== Sidebar Nav ========== */
.nav {
   margin-top: 16px;
}

.nav a {
   display: block;
   padding: 10px 8px;
   border-radius: 8px;
   color: var(--text-main);
   margin-bottom: 6px;
   text-decoration: none;
}

.nav a:hover {
   background: #2f2f2f;
}

/* subtle hover on dark */
.nav a.active {
   background: #353535;
   border: 1px solid var(--border);
}

/* ========== Cards ========== */
.card {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: 12px;
   padding: 16px;
   margin-bottom: 10px;
}

/* ========== Buttons ========== */
.button {
   background: var(--grad-orange);
   /* orange gradient */
   border: none;
   color: #fff;
   padding: 10px 16px;
   border-radius: 10px;
   cursor: pointer;
   font-weight: 700;
   transition: 0.2s;
}

.button:hover {
   opacity: 0.95;
}

.button.ghost {
   background: transparent;
   border: 1px solid var(--border);
}

/* ========== Form Controls (dark-themed) ========== */
/* Labels */
label {
   display: block;
   font-size: 13px;
   color: var(--text-muted);
   margin-bottom: 6px;
}

/* Base rule — styles ANY input/textarea/select (even if type="" is missing) */
input,
textarea,
select {
   width: 100%;
   padding: 10px 12px;
   background: var(--field-bg);
   /* from theme.css */
   color: var(--text-main);
   border: 1px solid var(--field-border);
   border-radius: 10px;
   outline: none;
   transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Hover/Focus states (shared) */
input:hover,
textarea:hover,
select:hover {
   background: var(--field-bg-hover);
   border-color: var(--field-border);
}

input:focus,
textarea:focus,
select:focus {
   background: var(--field-bg-focus);
   border-color: var(--field-border-focus);
   box-shadow: 0 0 0 3px var(--field-ring);
   /* subtle orange glow */
}

/* Placeholder */
input::placeholder,
textarea::placeholder {
   color: var(--field-placeholder);
}

/* Textarea sizing */
textarea {
   min-height: 96px;
   resize: vertical;
}

/* Search input niceties (keep standard + prefixed) */
input[type="search"] {
   -webkit-appearance: none;
   /* Safari/Chrome */
   appearance: none;
   /* Standard */
   background-clip: padding-box;
}

input[type="search"]::-webkit-search-cancel-button {
   filter: invert(1) opacity(.6);
}

/* Number inputs — normalize across browsers */
input[type="number"] {
   -moz-appearance: textfield;
   /* Firefox */
   appearance: textfield;
   /* Standard */
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
   -webkit-appearance: none;
   /* WebKit spinner off */
   margin: 0;
   filter: invert(1) opacity(.7);
}

/* Date/time pickers (WebKit icons visible on dark) */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
   filter: invert(1) opacity(.8);
}

/* File input button */
input[type="file"]::file-selector-button {
   margin-right: 10px;
   padding: 8px 12px;
   border: 0;
   border-radius: 8px;
   background: var(--grad-orange);
   color: #fff;
   cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
   opacity: .95;
}

/* Select: custom chevron + dark dropdown (keep standard + prefixes) */
select {
   -webkit-appearance: none;
   /* Safari/Chrome */
   -moz-appearance: none;
   /* Firefox */
   appearance: none;
   /* Standard */
   background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23cfcfcf' viewBox='0 0 20 20'><path d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z'/></svg>");
   background-repeat: no-repeat;
   background-position: right 12px center;
   background-size: 14px;
   padding-right: 36px;
   /* room for arrow */
}

select option {
   background-color: var(--bg-card);
   /* dark dropdown panel */
   color: var(--text-main);
}

/* Disabled / read-only */
input:disabled,
textarea:disabled,
select:disabled {
   opacity: .6;
   cursor: not-allowed;
}

input[readonly],
textarea[readonly] {
   opacity: .8;
}

/* Autofill (Chrome) — remove yellow on dark */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
   -webkit-text-fill-color: var(--text-main);
   box-shadow: 0 0 0px 1000px var(--field-bg) inset;
   transition: background-color 9999s ease-in-out 0s;
}

/* Helper / error text */
.form-help {
   color: var(--text-dim);
   font-size: 12px;
   margin-top: 6px;
}

.input-error {
   border-color: var(--danger) !important;
}

.error-text {
   color: var(--danger);
   font-size: 12px;
   margin-top: 6px;
}

/* ========== Form Grid Helpers ========== */
form .row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
}

form .row-3 {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 12px;
}

/* ========== Tables ========== */
.table {
   width: 100%;
   border-collapse: collapse;
}

.table th,
.table td {
   border-bottom: 1px solid var(--border);
   padding: 10px;
   text-align: left;
}

.table th {
   color: var(--text-muted);
   font-weight: 600;
}

.table tr:hover {
   background: #262626;
}

/* ========== Small Status Tags ========== */
.tag {
   font-size: 12px;
   padding: 3px 8px;
   border-radius: 999px;
   border: 1px solid var(--border);
   display: inline-block;
}

.tag.ok {
   color: var(--ok);
   border-color: var(--ok);
}

.tag.overdue {
   color: var(--danger);
   border-color: var(--danger);
}

.tag.warn {
   color: var(--warn);
   border-color: var(--warn);
}

/* ========== QR visuals (white for scan contrast) ========== */
.qr-box canvas,
.qr-box img {
   border: 1px solid var(--border);
   border-radius: 8px;
   background: #fff;
}

/* ========== Utilities ========== */
.right {
   text-align: right;
}

.mono {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.small {
   color: var(--text-muted);
   font-size: 12px;
}