/* ============================================================
   Web Monitor – Custom Design System
   Overrides Bootstrap 5 for a modern, consistent look
   ============================================================ */

/* 1. DESIGN TOKENS
   ============================================================ */
:root {
    --wm-navy:          #0f172a;
    --wm-navy-800:      #1e293b;
    --wm-navy-700:      #334155;
    --wm-navy-600:      #475569;
    --wm-accent:        #6366f1;
    --wm-accent-hover:  #4f46e5;
    --wm-accent-light:  rgba(99, 102, 241, 0.1);
    --wm-body-bg:       #f1f5f9;
    --wm-card-bg:       #ffffff;
    --wm-border:        #e2e8f0;
    --wm-border-faint:  #f1f5f9;
    --wm-text:          #1e293b;
    --wm-text-muted:    #64748b;
    --wm-text-light:    #94a3b8;
    --wm-shadow-sm:     0 1px 2px rgba(15,23,42,0.05);
    --wm-shadow:        0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04);
    --wm-shadow-md:     0 4px 8px rgba(15,23,42,0.07), 0 2px 4px rgba(15,23,42,0.04);
    --wm-radius-sm:     0.375rem;
    --wm-radius:        0.5rem;
    --wm-radius-lg:     0.75rem;
    --wm-t:             150ms ease;
}

/* 2. BASE
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

body {
    background-color: var(--wm-body-bg);
    color: var(--wm-text);
    font-size: 0.9rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Remove the harsh Bootstrap bg-light override */
body.bg-light {
    background-color: var(--wm-body-bg) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--wm-text);
}

a {
    color: var(--wm-accent);
    transition: color var(--wm-t);
}

a:hover { color: var(--wm-accent-hover); }

.text-muted {
    color: var(--wm-text-muted) !important;
}

/* 3. NAVIGATION
   ============================================================ */
.navbar {
    background-color: var(--wm-navy) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-top: 0;
    padding-bottom: 0;
    min-height: 56px;
}

.navbar-brand {
    font-size: 0.925rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    padding: 0.95rem 0;
    color: #f1f5f9 !important;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
}

.navbar-brand .bi {
    color: var(--wm-accent);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.navbar-nav .nav-link {
    padding: 0.95rem 0.7rem;
    font-size: 0.85rem;
    color: #94a3b8 !important;
    transition: color var(--wm-t);
    position: relative;
    white-space: nowrap;
    text-decoration: none;
}

.navbar-nav .nav-link:hover {
    color: #e2e8f0 !important;
}

.navbar-nav .nav-link.active {
    color: #c7d2fe !important;
    font-weight: 500;
}

.navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0.7rem;
    right: 0.7rem;
    height: 2px;
    background: var(--wm-accent);
    border-radius: 2px 2px 0 0;
}

/* Alarm badge in nav */
.navbar-nav .nav-link .badge {
    font-size: 0.65rem !important;
    padding: 0.2em 0.45em !important;
    vertical-align: middle;
}

/* Navbar utilities section */
.navbar .text-secondary {
    color: #475569 !important;
    font-size: 0.8rem;
}

.navbar .btn-outline-secondary {
    border-color: var(--wm-navy-700);
    color: #94a3b8;
    font-size: 0.8rem;
    padding: 0.25rem 0.65rem;
}

.navbar .btn-outline-secondary:hover {
    background-color: var(--wm-navy-800);
    border-color: var(--wm-navy-600);
    color: #e2e8f0;
}

.navbar-toggler {
    border-color: rgba(255,255,255,0.1);
    padding: 0.35rem 0.6rem;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* 4. DROPDOWN
   ============================================================ */
.dropdown-menu {
    border: 1px solid var(--wm-border);
    border-radius: var(--wm-radius);
    box-shadow: var(--wm-shadow-md);
    padding: 0.35rem;
    min-width: 200px;
    margin-top: 0.25rem !important;
}

.dropdown-item {
    border-radius: var(--wm-radius-sm);
    font-size: 0.85rem;
    padding: 0.45rem 0.75rem;
    color: var(--wm-text);
    transition: background var(--wm-t), color var(--wm-t);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--wm-accent-light);
    color: var(--wm-accent);
}

.dropdown-item.active {
    background-color: var(--wm-accent-light);
    color: var(--wm-accent);
}

.dropdown-divider {
    margin: 0.35rem 0;
    border-color: var(--wm-border);
}

/* 5. CARDS
   ============================================================ */
.card {
    background: var(--wm-card-bg);
    border: 1px solid var(--wm-border);
    border-radius: var(--wm-radius);
    box-shadow: var(--wm-shadow);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--wm-border);
    padding: 0.875rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wm-text);
    display: flex;
    align-items: center;
}

.card-header.d-flex { display: flex !important; }

.card-body {
    padding: 1.1rem;
}

.card-footer {
    background: transparent;
    border-top: 1px solid var(--wm-border);
    padding: 0.75rem 1.1rem;
}

/* Shadow variant */
.card.shadow-sm {
    box-shadow: var(--wm-shadow) !important;
}

/* Hover cards (dashboard project cards etc.) */
.card.card-hover {
    transition: box-shadow var(--wm-t), border-color var(--wm-t), transform var(--wm-t);
}

.card.card-hover:hover {
    box-shadow: var(--wm-shadow-md);
    border-color: #c7d2fe;
    transform: translateY(-1px);
}

/* Hover-able metric cards */
.card-metric-hover {
    transition: box-shadow var(--wm-t), transform var(--wm-t);
}
.card-metric-hover:hover {
    box-shadow: var(--wm-shadow-md);
    transform: translateY(-1px);
}

/* 6. TABLES
   ============================================================ */
.table {
    font-size: 0.875rem;
    color: var(--wm-text);
    --bs-table-hover-bg: #f8fafc;
}

.table thead th,
.table-light thead th,
.table > thead > tr > th {
    background-color: #f8fafc !important;
    border-bottom: 1px solid var(--wm-border) !important;
    color: var(--wm-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.65rem 1.1rem;
    white-space: nowrap;
}

.table tbody td {
    padding: 0.75rem 1.1rem;
    border-color: var(--wm-border-faint);
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: #f8fafc;
}

.table-sm tbody td {
    padding: 0.5rem 1.1rem;
}

/* 7. FORMS
   ============================================================ */
.form-control,
.form-select {
    border: 1px solid var(--wm-border);
    border-radius: var(--wm-radius-sm);
    font-size: 0.875rem;
    color: var(--wm-text);
    background-color: #fff;
    transition: border-color var(--wm-t), box-shadow var(--wm-t);
    padding: 0.45rem 0.75rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--wm-accent);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
    outline: none;
}

.form-control-sm,
.form-select-sm {
    font-size: 0.82rem;
    padding: 0.3rem 0.65rem;
}

.form-control::placeholder {
    color: var(--wm-text-light);
}

.form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wm-text);
    margin-bottom: 0.35rem;
}

.form-text {
    font-size: 0.78rem;
    color: var(--wm-text-muted);
    margin-top: 0.3rem;
}

.form-check-input:checked {
    background-color: var(--wm-accent);
    border-color: var(--wm-accent);
}

.form-check-input:focus {
    border-color: var(--wm-accent);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}

/* 8. BUTTONS
   ============================================================ */
.btn {
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--wm-radius-sm);
    transition: all var(--wm-t);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-sm {
    font-size: 0.8rem;
    padding: 0.3rem 0.7rem;
}

.btn-primary {
    background-color: var(--wm-accent);
    border-color: var(--wm-accent);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--wm-accent-hover) !important;
    border-color: var(--wm-accent-hover) !important;
    color: #fff !important;
}

.btn-outline-primary {
    color: var(--wm-accent);
    border-color: var(--wm-accent);
}
.btn-outline-primary:hover {
    background-color: var(--wm-accent);
    border-color: var(--wm-accent);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--wm-text-muted);
    border-color: var(--wm-border);
    background: transparent;
}
.btn-outline-secondary:hover {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
    color: var(--wm-text);
}

.btn-outline-success {
    color: #059669;
    border-color: #6ee7b7;
}
.btn-outline-success:hover {
    background-color: #ecfdf5;
    border-color: #6ee7b7;
    color: #065f46;
}

.btn-outline-danger {
    color: #dc2626;
    border-color: #fca5a5;
}
.btn-outline-danger:hover {
    background-color: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
}

.btn-outline-info {
    color: #0369a1;
    border-color: #7dd3fc;
}
.btn-outline-info:hover {
    background-color: #e0f2fe;
    border-color: #7dd3fc;
    color: #0c4a6e;
}

.btn-success {
    background-color: #059669;
    border-color: #059669;
}
.btn-success:hover {
    background-color: #047857;
    border-color: #047857;
}

.btn-link {
    color: var(--wm-accent);
    text-decoration: none;
}
.btn-link:hover {
    color: var(--wm-accent-hover);
    text-decoration: underline;
}
.btn-link.text-danger {
    color: #dc2626 !important;
}
.btn-link.text-success {
    color: #059669 !important;
}

/* 9. BADGES & STATUS
   ============================================================ */
.badge {
    font-weight: 500;
    font-size: 0.72rem;
    border-radius: 4px;
    padding: 0.28em 0.58em;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

/* Status: done / success */
.badge.bg-success {
    background-color: #dcfce7 !important;
    color: #15803d !important;
}

/* Status: failed / danger */
.badge.bg-danger {
    background-color: #fee2e2 !important;
    color: #b91c1c !important;
}

/* Status: pending / warning */
.badge.bg-warning {
    background-color: #fef9c3 !important;
    color: #854d0e !important;
}
.badge.bg-warning.text-dark {
    color: #854d0e !important;
}

/* Secondary / neutral */
.badge.bg-secondary {
    background-color: #f1f5f9 !important;
    color: var(--wm-text-muted) !important;
}

/* Primary / accent */
.badge.bg-primary {
    background-color: #ede9fe !important;
    color: #5b21b6 !important;
}

/* Info */
.badge.bg-info {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
}
.badge.bg-info.text-dark {
    color: #0369a1 !important;
}

/* Dark */
.badge.bg-dark {
    background-color: var(--wm-navy-800) !important;
    color: #cbd5e1 !important;
}

/* Bootstrap 5 subtle variants */
.badge.bg-primary-subtle   { background-color: #ede9fe !important; color: #5b21b6 !important; }
.badge.bg-secondary-subtle { background-color: #f1f5f9 !important; color: var(--wm-text-muted) !important; }
.badge.bg-success-subtle   { background-color: #dcfce7 !important; color: #15803d !important; }
.badge.bg-danger-subtle    { background-color: #fee2e2 !important; color: #b91c1c !important; }
.badge.bg-warning-subtle   { background-color: #fef9c3 !important; color: #854d0e !important; }

/* Bootstrap 5.3 text-bg-* combined utilities */
.text-bg-success   { background-color: #dcfce7 !important; color: #15803d !important; }
.text-bg-danger    { background-color: #fee2e2 !important; color: #b91c1c !important; }
.text-bg-warning   { background-color: #fef9c3 !important; color: #854d0e !important; }
.text-bg-primary   { background-color: #ede9fe !important; color: #5b21b6 !important; }
.text-bg-secondary { background-color: #f1f5f9 !important; color: var(--wm-text-muted) !important; }
.text-bg-info      { background-color: #e0f2fe !important; color: #0369a1 !important; }
.text-bg-dark      { background-color: var(--wm-navy-800) !important; color: #cbd5e1 !important; }

/* 10. ALERTS
   ============================================================ */
.alert {
    border: none;
    border-left: 3px solid transparent;
    border-radius: var(--wm-radius);
    font-size: 0.875rem;
    padding: 0.875rem 1.1rem;
}

.alert-success {
    background-color: #f0fdf4;
    color: #166534;
    border-left-color: #22c55e;
}
.alert-danger {
    background-color: #fef2f2;
    color: #991b1b;
    border-left-color: #ef4444;
}
.alert-warning {
    background-color: #fffbeb;
    color: #92400e;
    border-left-color: #f59e0b;
}
.alert-info {
    background-color: #eff6ff;
    color: #1e40af;
    border-left-color: #3b82f6;
}

/* 11. NAV TABS
   ============================================================ */
.nav-tabs {
    border-bottom: 1px solid var(--wm-border);
    gap: 0.1rem;
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.65rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--wm-text-muted);
    margin-bottom: -1px;
    transition: color var(--wm-t), border-color var(--wm-t);
}

.nav-tabs .nav-link:hover {
    color: var(--wm-text);
    border-bottom-color: var(--wm-border);
    background: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--wm-accent);
    border-bottom-color: var(--wm-accent);
    background: transparent;
    font-weight: 600;
}

/* 12. LIST GROUPS
   ============================================================ */
.list-group-item {
    border-color: var(--wm-border-faint);
    padding: 0.875rem 1.1rem;
    font-size: 0.875rem;
    background: transparent;
}

.list-group-flush > .list-group-item:first-child {
    border-top: none;
}
.list-group-flush > .list-group-item:last-child {
    border-bottom: none;
}

/* 13. PAGINATION
   ============================================================ */
.pagination {
    font-size: 0.8rem;
    gap: 0.2rem;
    flex-wrap: wrap;
}

.page-link {
    border-radius: var(--wm-radius-sm) !important;
    border: 1px solid var(--wm-border) !important;
    color: var(--wm-text-muted);
    padding: 0.3rem 0.65rem;
    transition: all var(--wm-t);
}

.page-link:hover {
    background-color: #f1f5f9;
    border-color: #cbd5e1 !important;
    color: var(--wm-text);
}

.page-item.active .page-link {
    background-color: var(--wm-accent) !important;
    border-color: var(--wm-accent) !important;
    color: #fff;
}

.page-item.disabled .page-link {
    color: var(--wm-text-light);
    background-color: #f8fafc;
}

/* 14. CODE & PRE
   ============================================================ */
code {
    color: var(--wm-accent);
    background-color: #f5f3ff;
    padding: 0.1em 0.35em;
    border-radius: 3px;
    font-size: 0.82em;
    font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
}

pre {
    background-color: var(--wm-navy-800);
    color: #e2e8f0;
    border-radius: var(--wm-radius);
    padding: 1rem 1.1rem;
    font-size: 0.8rem;
    line-height: 1.65;
    overflow-x: auto;
}

pre code {
    background: transparent;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* 15. CHAT INTERFACE
   ============================================================ */
/* User bubble – use accent instead of Bootstrap blue */
[style*="background:#0d6efd"] {
    background: var(--wm-accent) !important;
}

/* Thinking block */
.chat-thinking {
    background: #f8fafc;
    border-left: 2px solid var(--wm-border);
    border-radius: 0 var(--wm-radius-sm) var(--wm-radius-sm) 0;
}

/* Chat content markdown */
.chat-content {
    border-radius: var(--wm-radius) !important;
    border-color: var(--wm-border) !important;
    background-color: #fff !important;
}

.chat-content img { max-width: 100%; border-radius: var(--wm-radius-sm); margin-top: 8px; }
.chat-content p   { margin-bottom: 0.4rem; }
.chat-content p:last-child { margin-bottom: 0; }
.chat-content table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.chat-content th,
.chat-content td   { border: 1px solid var(--wm-border); padding: .3rem .65rem; }
.chat-content th   { background: #f8fafc; font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wm-text-muted); }
.chat-content code { background: #f5f3ff; padding: .1em .3em; border-radius: 3px; font-size: .875em; color: var(--wm-accent); }
.chat-content pre  { background: var(--wm-navy-800); color: #e2e8f0; padding: .75rem 1rem; border-radius: var(--wm-radius); overflow-x: auto; }

/* 16. DETAILS / SUMMARY
   ============================================================ */
details > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

details > summary::-webkit-details-marker { display: none; }

details > summary::before {
    content: '▶ ';
    font-size: 0.7em;
    opacity: 0.5;
}

details[open] > summary::before {
    content: '▼ ';
}

/* 17. UTILITIES & MISC
   ============================================================ */

/* Breadcrumb-style back links */
.text-muted.text-decoration-none.small,
a.text-muted.small {
    color: var(--wm-text-light) !important;
    font-size: 0.8rem;
}

a.text-muted.small:hover {
    color: var(--wm-text-muted) !important;
}

/* bg-light override inside cards */
.bg-light {
    background-color: #f8fafc !important;
}

/* Inline border box metric cards */
.border.rounded.p-3 {
    border-color: var(--wm-border) !important;
    border-radius: var(--wm-radius) !important;
    transition: box-shadow var(--wm-t), border-color var(--wm-t);
}

.border.rounded.p-3:hover {
    border-color: #c7d2fe !important;
    box-shadow: var(--wm-shadow-md);
}

/* Font monospace improvements */
.font-monospace {
    font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.82em;
}

/* Filter tag in projects */
.badge.text-decoration-none {
    border-radius: 100px;
    padding: 0.35em 0.8em;
    font-size: 0.78rem;
    font-weight: 500;
    transition: opacity var(--wm-t), transform var(--wm-t);
    cursor: pointer;
}

.badge.text-decoration-none:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* Info box at bottom of alarm-scripts */
.bg-light.border.rounded.small {
    background-color: #f8fafc !important;
    border-color: var(--wm-border) !important;
    border-radius: var(--wm-radius) !important;
    padding: 0.875rem 1.1rem !important;
}

/* Page container padding */
.container.py-4 {
    padding-top: 1.75rem !important;
    padding-bottom: 2.5rem !important;
}

/* H2/H3 page titles */
.h3.mb-0,
h1.h3,
h2.h3 {
    font-size: 1.1rem;
}

/* Collapse border */
[x-show].card-body.border-bottom {
    border-bottom: 1px solid var(--wm-border) !important;
}

/* Empty state icons */
.bi.fs-1 {
    font-size: 2rem !important;
    opacity: 0.2;
}

/* HTTP status colors */
.text-success { color: #059669 !important; }
.text-danger  { color: #dc2626 !important; }
.text-info    { color: #0284c7 !important; }
.text-warning { color: #d97706 !important; }
.text-primary { color: var(--wm-accent) !important; }

/* 18. LOGIN PAGE
   ============================================================ */
body.login-page {
    background: linear-gradient(135deg, var(--wm-navy) 0%, #1e293b 60%, #0f172a 100%) !important;
    min-height: 100vh;
}

.login-card {
    border: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04) !important;
    border-radius: var(--wm-radius-lg) !important;
}

.login-card .card-body {
    padding: 2rem !important;
}

.login-card .card-title {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--wm-text);
}

.login-card .card-title .bi {
    color: var(--wm-accent);
}

/* 19. SCROLLBAR
   ============================================================ */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* 20. ANIMATIONS
   ============================================================ */
.fade {
    transition: opacity 0.15s ease !important;
}

/* Spinner inherit color fix */
.spinner-border,
.spinner-grow {
    vertical-align: middle;
}

/* Transition for Alpine x-show */
[x-cloak] { display: none !important; }