/* ── KH Maintenance — Custom Styles ───────────────────────────────────────── */

/* ── Color palette ─────────────────────────────────────────────────────────── */
:root {
    --kh-primary:       #0d9488;  /* teal-600  */
    --kh-primary-dark:  #0f766e;  /* teal-700  */
    --kh-primary-deep:  #115e59;  /* teal-800  */
    --kh-primary-light: #ccfbf1;  /* teal-100  */
    --kh-primary-faint: #f0fdfa;  /* teal-50   */
    --kh-primary-rgb:   13, 148, 136;

    --kh-accent:        #f59e0b;  /* amber-400 */
    --kh-accent-dark:   #d97706;  /* amber-500 */
    --kh-accent-light:  #fef3c7;  /* amber-100 */

    /* Override Bootstrap primary */
    --bs-primary:       var(--kh-primary);
    --bs-primary-rgb:   var(--kh-primary-rgb);
    --bs-link-color:    var(--kh-primary);
    --bs-link-hover-color: var(--kh-primary-dark);
}

[data-bs-theme="dark"] {
    --kh-primary:       #14b8a6;  /* teal-500 — brighter in dark mode */
    --kh-primary-dark:  #0d9488;
    --kh-primary-light: #134e4a;
    --kh-primary-faint: #0d2320;
    --kh-primary-rgb:   20, 184, 166;
    --bs-primary:       var(--kh-primary);
    --bs-primary-rgb:   var(--kh-primary-rgb);
}

/* ── Bootstrap primary overrides ───────────────────────────────────────────── */
.btn-primary {
    --bs-btn-bg:                  #0d9488;
    --bs-btn-border-color:        #0d9488;
    --bs-btn-hover-bg:            #0f766e;
    --bs-btn-hover-border-color:  #0f766e;
    --bs-btn-active-bg:           #115e59;
    --bs-btn-active-border-color: #115e59;
    --bs-btn-disabled-bg:         #0d9488;
    --bs-btn-disabled-border-color: #0d9488;
}

.btn-outline-primary {
    --bs-btn-color:               #0d9488;
    --bs-btn-border-color:        #0d9488;
    --bs-btn-hover-bg:            #0d9488;
    --bs-btn-hover-border-color:  #0d9488;
    --bs-btn-active-bg:           #0d9488;
    --bs-btn-active-border-color: #0d9488;
}

.bg-primary          { background-color: #0d9488 !important; }
.text-primary        { color: #0d9488 !important; }
.border-primary      { border-color: #0d9488 !important; }
.badge.bg-primary    { background-color: #0d9488 !important; }

.nav-link.active,
.navbar-nav .nav-link.active {
    background-color: rgba(255, 255, 255, 0.15);
}

/* ── Layout ─────────────────────────────────────────────────────────────────── */
.main-content {
    padding-top: 76px;
    padding-bottom: 40px;
    min-height: 100vh;
}

.site-footer {
    border-top: 1px solid var(--bs-border-color);
}

/* ── Cards ──────────────────────────────────────────────────────────────────── */
.card {
    transition: box-shadow 0.15s ease;
}

.card-link:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    text-decoration: none;
}

.card-link .card-body {
    color: var(--bs-body-color);
}

.table-header {
    background-color: var(--kh-primary-faint);
}

[data-bs-theme="dark"] .table-header {
    background-color: rgba(20, 184, 166, 0.08);
}

/* ── Stat cards ─────────────────────────────────────────────────────────────── */
.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.stat-icon-primary   { background-color: var(--kh-primary-faint); color: var(--kh-primary); }
.stat-icon-success   { background-color: #f0fdf4; color: #16a34a; }
.stat-icon-warning   { background-color: #fffbeb; color: #d97706; }
.stat-icon-accent    { background-color: var(--kh-accent-light); color: var(--kh-accent-dark); }

[data-bs-theme="dark"] .stat-icon-primary { background-color: rgba(20, 184, 166, 0.12); }
[data-bs-theme="dark"] .stat-icon-success { background-color: rgba(22, 163, 74,  0.12); }
[data-bs-theme="dark"] .stat-icon-warning { background-color: rgba(217, 119, 6,  0.12); }
[data-bs-theme="dark"] .stat-icon-accent  { background-color: rgba(245, 158, 11, 0.12); }

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Login page ─────────────────────────────────────────────────────────────── */
.brand-logo {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--kh-primary), var(--kh-primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    margin: 0 auto;
    box-shadow: 0 4px 20px rgba(13, 148, 136, 0.35);
}

/* ── Navbar tweaks ───────────────────────────────────────────────────────────── */
.navbar-dark .nav-link {
    color: rgba(255, 255, 255, 0.85);
    transition: background-color 0.12s ease, color 0.12s ease;
}

.navbar-dark .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.12);
}

.nav-future {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
}

/* ── Accent utilities ────────────────────────────────────────────────────────── */
.text-accent  { color: var(--kh-accent) !important; }
.bg-accent    { background-color: var(--kh-accent) !important; }
.badge.bg-accent { background-color: var(--kh-accent) !important; color: #fff; }

/* ── Alert info override to use teal ────────────────────────────────────────── */
.alert-info {
    --bs-alert-color:      #0f766e;
    --bs-alert-bg:         var(--kh-primary-faint);
    --bs-alert-border-color: var(--kh-primary-light);
}

[data-bs-theme="dark"] .alert-info {
    --bs-alert-color:      #5eead4;
    --bs-alert-bg:         rgba(20, 184, 166, 0.08);
    --bs-alert-border-color: rgba(20, 184, 166, 0.25);
}

/* ── Document slots ──────────────────────────────────────────────────────────── */
.doc-slot {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.border-dashed {
    border-style: dashed !important;
    border-color: var(--bs-border-color) !important;
}

/* ── Training checkboxes ─────────────────────────────────────────────────────── */
.training-check {
    padding: 6px 10px;
    border-radius: 6px;
    transition: background-color 0.1s ease;
}

.training-check:hover {
    background-color: var(--kh-primary-faint);
}

.training-check.trained {
    background-color: var(--kh-primary-faint);
}

[data-bs-theme="dark"] .training-check:hover,
[data-bs-theme="dark"] .training-check.trained {
    background-color: rgba(20, 184, 166, 0.08);
}

/* ── Communication log ───────────────────────────────────────────────────────── */
.comm-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.comm-icon-sent     { background-color: #dbeafe; color: #1d4ed8; }
.comm-icon-received { background-color: #dcfce7; color: #15803d; }
.comm-icon-note     { background-color: #f1f5f9; color: #64748b; }

[data-bs-theme="dark"] .comm-icon-sent     { background-color: rgba(29, 78, 216, 0.2); color: #93c5fd; }
[data-bs-theme="dark"] .comm-icon-received { background-color: rgba(21,128, 61, 0.2);  color: #86efac; }
[data-bs-theme="dark"] .comm-icon-note     { background-color: rgba(100,116,139, 0.2); color: #94a3b8; }

/* ── Photo grid ──────────────────────────────────────────────────────────────── */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
}

.photo-thumb {
    border-radius: 8px;
    overflow: hidden;
    background: var(--bs-tertiary-bg);
}

.photo-thumb img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    display: block;
}

.photo-caption {
    font-size: 0.68rem;
    padding: 3px 5px;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Schedule status badges (override text contrast) ─────────────────────────── */
.badge.bg-info    { color: #fff !important; }
.badge.bg-warning { color: #000 !important; }

/* ── Current-month highlight ─────────────────────────────────────────────────── */
.bg-primary-subtle {
    background-color: var(--kh-primary-faint) !important;
}

[data-bs-theme="dark"] .bg-primary-subtle {
    background-color: rgba(20, 184, 166, 0.08) !important;
}

/* ── Log viewer ──────────────────────────────────────────────────────────────── */
.log-viewer {
    background: #0d1117;
    color: #c9d1d9;
    font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
    font-size: 0.78rem;
    line-height: 1.5;
    padding: 12px 16px;
    height: 540px;
    overflow-y: auto;
    border-radius: 0 0 8px 8px;
}

.log-line {
    white-space: pre-wrap;
    word-break: break-all;
    padding: 1px 0;
}

.log-error   { color: #ff7b72; }
.log-warning { color: #e3b341; }
.log-info    { color: #56d364; }
.log-dim     { color: #6e7681; }

/* ── Pagination ──────────────────────────────────────────────────────────────── */
.page-item.active .page-link {
    background-color: var(--kh-primary);
    border-color: var(--kh-primary);
}

.page-link {
    color: var(--kh-primary);
}

.page-link:hover {
    color: var(--kh-primary-dark);
}