/* ===================================================================
   Capricorn Content Hub — Dark Theme
   Matches capricorn-roadmap design language.
   =================================================================== */

:root {
    /* Brand */
    --chub-primary: #0ea5e9;
    --chub-primary-hover: #38bdf8;
    --chub-accent: #6366f1;

    /* Backgrounds */
    --chub-bg-body: #0a0e17;
    --chub-bg-surface: #111827;
    --chub-bg-surface-2: #1a2332;
    --chub-bg-surface-3: #1f2937;
    --chub-bg-hover: #243044;
    --chub-bg-input: #1a2332;

    /* Text */
    --chub-text: #e2e8f0;
    --chub-text-secondary: #94a3b8;
    --chub-text-muted: #64748b;
    --chub-text-inverse: #0f172a;

    /* Borders */
    --chub-border: #1e293b;
    --chub-border-hover: #334155;
    --chub-radius: 6px;
    --chub-radius-lg: 10px;

    /* Shadows */
    --chub-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --chub-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --chub-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);

    /* Transitions */
    --chub-transition: 150ms ease;
}

/* ─── Base ─── */

body {
    background: var(--chub-bg-body);
    color: var(--chub-text);
    -webkit-font-smoothing: antialiased;
}

/* ─── Tailwind dark overrides ─── */

/* Backgrounds — override Tailwind light classes */
.bg-white       { background: var(--chub-bg-surface) !important; color: var(--chub-text); }
.bg-gray-50     { background: var(--chub-bg-surface-2) !important; }
.bg-gray-100    { background: var(--chub-bg-surface-2) !important; }

/* Border overrides */
.border-gray-200 { border-color: var(--chub-border) !important; }
.border-gray-100 { border-color: var(--chub-border) !important; }
.border-gray-300 { border-color: var(--chub-border-hover) !important; }
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--chub-border) !important; }

/* Text overrides */
.text-gray-900  { color: var(--chub-text) !important; }
.text-gray-800  { color: var(--chub-text) !important; }
.text-gray-700  { color: var(--chub-text-secondary) !important; }
.text-gray-600  { color: var(--chub-text-secondary) !important; }
.text-gray-500  { color: var(--chub-text-muted) !important; }
.text-gray-400  { color: var(--chub-text-muted) !important; }
.text-gray-300  { color: #475569 !important; }

/* Keep colored text intact but darkened for backgrounds */
.text-indigo-600 { color: #818cf8 !important; }
.text-indigo-700 { color: #a5b4fc !important; }
.text-green-600  { color: #4ade80 !important; }
.text-green-700  { color: #86efac !important; }
.text-red-600    { color: #f87171 !important; }
.text-red-500    { color: #f87171 !important; }
.text-red-700    { color: #fca5a5 !important; }
.text-yellow-800 { color: #fde047 !important; }
.text-blue-700   { color: #93c5fd !important; }
.text-emerald-700 { color: #6ee7b7 !important; }

/* Background color badges — darker tones */
.bg-green-50     { background: rgba(34, 197, 94, 0.1) !important; }
.bg-green-100    { background: rgba(34, 197, 94, 0.15) !important; }
.bg-red-50       { background: rgba(239, 68, 68, 0.1) !important; }
.bg-red-100      { background: rgba(239, 68, 68, 0.15) !important; }
.bg-yellow-50    { background: rgba(234, 179, 8, 0.1) !important; }
.bg-yellow-100   { background: rgba(234, 179, 8, 0.15) !important; }
.bg-blue-50      { background: rgba(59, 130, 246, 0.1) !important; }
.bg-blue-100     { background: rgba(59, 130, 246, 0.15) !important; }
.bg-indigo-50    { background: rgba(99, 102, 241, 0.1) !important; }
.bg-indigo-100   { background: rgba(99, 102, 241, 0.15) !important; }
.bg-orange-100   { background: rgba(249, 115, 22, 0.15) !important; }
.bg-purple-100   { background: rgba(168, 85, 247, 0.15) !important; }
.bg-emerald-100  { background: rgba(16, 185, 129, 0.15) !important; }
.bg-gray-100     { background: var(--chub-bg-surface-2) !important; }

/* ─── Hover states ─── */
.hover\:bg-gray-50:hover  { background: var(--chub-bg-hover) !important; }
.hover\:bg-gray-100:hover { background: var(--chub-bg-surface-3) !important; }
.hover\:bg-gray-200:hover { background: var(--chub-bg-hover) !important; }
.hover\:text-gray-700:hover { color: var(--chub-text) !important; }
.hover\:text-gray-900:hover { color: var(--chub-text) !important; }
.hover\:text-indigo-600:hover { color: #a5b4fc !important; }

/* ─── Buttons — keep accent colors, dark base ─── */
.bg-indigo-600   { background: #4f46e5 !important; }
.bg-indigo-700   { background: #4338ca !important; }
.hover\:bg-indigo-700:hover { background: #4338ca !important; }
.hover\:bg-indigo-200:hover { background: rgba(99, 102, 241, 0.25) !important; }
.bg-emerald-600  { background: #059669 !important; }
.hover\:bg-emerald-700:hover { background: #047857 !important; }

/* ─── Ring / focus ─── */
.ring-indigo-200 { --tw-ring-color: rgba(99, 102, 241, 0.3) !important; }
.border-indigo-400 { border-color: rgba(99, 102, 241, 0.4) !important; }

/* ─── Forms ─── */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="file"],
textarea,
select {
    background: var(--chub-bg-input) !important;
    border-color: var(--chub-border-hover) !important;
    color: var(--chub-text) !important;
    transition: border-color var(--chub-transition);
}

input:focus, textarea:focus, select:focus {
    border-color: var(--chub-primary) !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.15);
}

input::placeholder, textarea::placeholder {
    color: var(--chub-text-muted) !important;
}

/* Checkbox and radio dark */
input[type="checkbox"] {
    accent-color: var(--chub-primary);
}

/* ─── Tables ─── */

.bg-gray-50 th,
thead.bg-gray-50 {
    background: var(--chub-bg-surface-2) !important;
}

thead th {
    color: var(--chub-text-secondary) !important;
    border-bottom: 1px solid var(--chub-border) !important;
}

tbody tr {
    border-color: var(--chub-border);
}

tbody tr:hover {
    background: var(--chub-bg-hover) !important;
}

/* ─── Cards / Panels ─── */

.shadow-sm {
    box-shadow: var(--chub-shadow-sm) !important;
}

.rounded-lg {
    border-radius: var(--chub-radius-lg);
}

/* ─── Links ─── */

a { transition: color var(--chub-transition); }

a.text-indigo-600:hover,
a.hover\:underline:hover {
    color: #a5b4fc !important;
}

/* ─── Alerts ─── */

.bg-red-50.border-red-200 {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

.bg-green-50.border-green-200 {
    background: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

/* ─── Pipeline cards (content page) ─── */

.border-indigo-400.bg-indigo-50 {
    background: rgba(99, 102, 241, 0.12) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
}

.border-gray-200.bg-white.hover\:bg-gray-50:hover {
    background: var(--chub-bg-hover) !important;
}

/* ─── Scrollbar ─── */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--chub-bg-body); }
::-webkit-scrollbar-thumb { background: var(--chub-border-hover); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* ─── Danger zone ─── */
.border-red-200 { border-color: rgba(239, 68, 68, 0.4) !important; }
.border-red-300 { border-color: rgba(239, 68, 68, 0.5) !important; }
.border-green-200 { border-color: rgba(34, 197, 94, 0.3) !important; }

/* ─── Rounded-full badges (status pills) ─── */
.rounded-full { border-radius: 9999px; }

/* ─── Font mono ─── */
.font-mono { color: var(--chub-text-secondary) !important; }

/* ─── Graph containers ─── */

.graph-container {
    background: var(--chub-bg-surface);
    border: 1px solid var(--chub-border);
    border-radius: var(--chub-radius-lg);
}

/* ─── Login page ─── */

.bg-gradient-to-br { background: var(--chub-bg-body) !important; }

/* ─── Responsive ─── */

@media (max-width: 768px) {
    /* Tables horizontal scroll */
    .overflow-x-auto { -webkit-overflow-scrolling: touch; }

    /* Stack flex rows */
    .flex-wrap { gap: 0.5rem !important; }

    /* Smaller padding on cards */
    .px-5 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
    .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }

    /* Grid columns → single */
    .lg\:grid-cols-3 { grid-template-columns: 1fr !important; }
    .lg\:grid-cols-2 { grid-template-columns: 1fr !important; }
    .grid-cols-2 { grid-template-columns: 1fr !important; }
    .grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }

    /* Forms stack vertically */
    .lg\:flex-row { flex-direction: column !important; }
    .flex-wrap.items-end { align-items: stretch !important; }
    .flex-wrap.items-end > * { width: 100% !important; min-width: 0 !important; }

    /* Table text smaller */
    table { font-size: 0.75rem; }
    th, td { padding: 8px 6px !important; white-space: nowrap; }

    /* Hide less critical table columns on mobile */
    .hide-mobile { display: none !important; }

    /* Full width selects/inputs */
    select, input[type="text"], input[type="file"] { width: 100% !important; min-width: 0 !important; }
}

.dashboard-widget-subtitle {
    font-size: 13px;
    color: #64748b;
    margin-top: 8px;
}

/* ─── Grid.js dark theme (.hub-grid) ─── */

.hub-grid.gridjs-container {
    color: var(--chub-text);
    font-size: 0.8125rem;
    background: var(--chub-bg-surface);
}

.hub-grid .gridjs-head {
    background: var(--chub-bg-surface-2);
    border-bottom: 1px solid var(--chub-border);
    padding: 8px 12px;
}

.hub-grid .gridjs-search {
    width: 100%;
}

.hub-grid .gridjs-search input.gridjs-input {
    background: var(--chub-bg-input) !important;
    border: 1px solid var(--chub-border-hover) !important;
    color: var(--chub-text) !important;
    border-radius: var(--chub-radius);
    padding: 6px 10px;
    font-size: 0.8125rem;
    width: 280px;
    max-width: 100%;
}

.hub-grid .gridjs-search input.gridjs-input:focus {
    border-color: var(--chub-primary) !important;
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.15) !important;
    outline: none;
}

.hub-grid .gridjs-search input.gridjs-input::placeholder {
    color: var(--chub-text-muted) !important;
}

.hub-grid .gridjs-wrapper {
    border: none;
    box-shadow: none;
    background: var(--chub-bg-surface);
}

.hub-grid table.gridjs-table {
    border-collapse: collapse;
    width: 100%;
    background: var(--chub-bg-surface);
}

.hub-grid th.gridjs-th {
    background: var(--chub-bg-surface-2) !important;
    border-color: var(--chub-border) !important;
    color: var(--chub-text-secondary) !important;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 12px;
    white-space: nowrap;
}

.hub-grid th.gridjs-th .gridjs-th-content {
    display: flex;
    align-items: center;
    gap: 4px;
}

.hub-grid button.gridjs-sort {
    color: var(--chub-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.hub-grid button.gridjs-sort:hover,
.hub-grid button.gridjs-sort-asc,
.hub-grid button.gridjs-sort-desc {
    color: var(--chub-primary);
}

.hub-grid td.gridjs-td {
    background: var(--chub-bg-surface) !important;
    border-color: var(--chub-border) !important;
    color: var(--chub-text) !important;
    padding: 8px 12px;
    vertical-align: middle;
}

.hub-grid tr.gridjs-tr:nth-child(even) td.gridjs-td {
    background: var(--chub-bg-surface-2) !important;
}

.hub-grid tr.gridjs-tr:hover td.gridjs-td {
    background: var(--chub-bg-hover) !important;
}

.hub-grid .gridjs-footer {
    background: var(--chub-bg-surface-2) !important;
    border-top: 1px solid var(--chub-border) !important;
    padding: 8px 12px;
}

.hub-grid .gridjs-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--chub-text-muted);
    font-size: 0.8125rem;
}

.hub-grid .gridjs-pagination .gridjs-summary {
    color: var(--chub-text-muted);
}

.hub-grid .gridjs-pagination .gridjs-pages button {
    background: var(--chub-bg-surface-3) !important;
    border: 1px solid var(--chub-border) !important;
    color: var(--chub-text-secondary) !important;
    border-radius: var(--chub-radius);
    padding: 4px 9px;
    margin: 0 2px;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background var(--chub-transition);
}

.hub-grid .gridjs-pagination .gridjs-pages button:hover:not([disabled]) {
    background: var(--chub-bg-hover) !important;
    color: var(--chub-text) !important;
}

.hub-grid .gridjs-pagination .gridjs-pages button[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}

.hub-grid .gridjs-pagination .gridjs-pages button.gridjs-currentPage {
    background: var(--chub-primary) !important;
    border-color: var(--chub-primary) !important;
    color: #fff !important;
}

.hub-grid .gridjs-notfound,
.hub-grid td.gridjs-message {
    color: var(--chub-text-muted) !important;
    background: var(--chub-bg-surface) !important;
    text-align: center;
    padding: 2rem !important;
}

.hub-grid .gridjs-loading {
    color: var(--chub-text-muted) !important;
}

.hub-grid .gridjs-loading-bar::after {
    background: var(--chub-primary) !important;
}