/*
 * CTHub - CloudTree Customer Portal
 * Brand overrides for Bootstrap 5
 */

/* ========================================
   Brand Colours
   ======================================== */
:root {
    --ct-primary:        #008000;
    --ct-primary-hover:  #015501;
    --ct-primary-subtle: rgba(0, 128, 0, 0.10);
    --ct-secondary:      #5d6778;
    --ct-dark:           #1a1a2e;
    --ct-light:          #f8f9fa;

    /* Widget accent palette */
    --ct-amber:          #f59e0b;
    --ct-amber-subtle:   rgba(245, 158, 11, 0.10);
    --ct-blue:           #3b82f6;
    --ct-blue-subtle:    rgba(59, 130, 246, 0.10);
    --ct-purple:         #8b5cf6;
    --ct-purple-subtle:  rgba(139, 92, 246, 0.10);

    /* Shadows */
    --card-shadow:       0 1px 4px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.07);
    --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.08), 0 12px 28px rgba(0,0,0,0.12);
}

/* ========================================
   Typography — single font: Inter
   ======================================== */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #333;
    font-size: 0.9rem;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

/* Tame <strong> — readable distinction without heaviness */
strong, b {
    font-weight: 500;
}

/* Tables: lighter headers, normal-weight cell text */
.table th {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6c757d;
}

.table td strong {
    font-weight: 500;
}

/* ========================================
   Brand Button & Background Utilities
   ======================================== */
.app-btn-primary {
    background: var(--ct-primary);
    color: #fff;
    border-color: var(--ct-primary);
}

.app-btn-primary:hover,
.app-btn-primary:active {
    color: #fff;
    background: var(--ct-primary-hover);
    border-color: var(--ct-primary-hover);
}

.btn-cthub-primary {
    background-color: var(--ct-primary);
    border-color: var(--ct-primary);
    color: #fff;
}

.btn-cthub-primary:hover,
.btn-cthub-primary:focus {
    background-color: var(--ct-primary-hover);
    border-color: var(--ct-primary-hover);
    color: #fff;
}

.bg-cthub-primary {
    background-color: var(--ct-primary) !important;
}

.text-cthub-primary {
    color: var(--ct-primary) !important;
}

/* ========================================
   Auth Page Layout (split-screen: form left, image right)
   ======================================== */
.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: row;
}

/* Left panel — 40% width */
.auth-panel-left {
    flex: 0 0 40%;
    background: #dde1e7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4rem 3rem;
}

.auth-panel-inner {
    width: 420px;
}

/* White floating card */
.auth-card {
    background: #fff;
    border-radius: 14px;
    padding: 2.5rem 2.5rem 2.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
}

/* Logo */
.auth-logo-img {
    display: block;
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

/* Page heading */
.auth-heading {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.6rem;
    color: #1a1a2e;
    text-align: center;
}

/* Subheading below main heading */
.auth-subheading {
    font-size: 0.9rem;
    color: #6c757d;
    text-align: center;
    margin: 0;
}

/* Remember Me / Forgot Password row */
.auth-row-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Label above input */
.auth-label {
    display: block;
    font-weight: 500;
    font-size: 0.875rem;
    color: #374151;
    margin-bottom: 0.5rem;
}

/* Label row: label on left, inline link on right */
.auth-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.auth-label-row .auth-label {
    margin-bottom: 0;
}

/* Inputs */
.auth-card .form-control {
    border: 1.5px solid #d0d5dd;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-card .form-control:focus {
    border-color: var(--ct-primary);
    box-shadow: 0 0 0 3px rgba(21, 163, 98, 0.15);
}

/* Login button */
.auth-card .theme-btn {
    padding: 0.85rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    width: 100%;
    display: block;
}

/* Footer */
.auth-footer {
    margin-top: 2.5rem;
    padding: 0 0.5rem;
}

.auth-footer p {
    font-size: 0.72rem;
    color: #888;
    margin: 0;
}

/* Links */
.auth-link {
    font-size: 0.85rem;
    color: var(--ct-primary);
    text-decoration: none;
}

.auth-link:hover {
    color: var(--ct-primary-hover);
    text-decoration: underline;
}

/* Right panel — takes all remaining space */
.auth-panel-right {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #0d1117; /* fallback while video loads */
}

.auth-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Darkening gradient over video so hero text is always legible */
.auth-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        160deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.35) 50%,
        rgba(0, 0, 0, 0.60) 100%
    );
}

/* ========================================
   Login Page — Animated Hero Overlay
   ======================================== */
.auth-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}

.auth-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
    max-width: 580px;
    text-align: center;
}

/* Pill badge */
.auth-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.375rem 1rem;
    border-radius: 100px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    letter-spacing: 0.01em;
}

/* Main heading */
.auth-hero-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(2.25rem, 3.5vw, 3.5rem);
    font-weight: 300;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0;
}

/* Animated word row */
.auth-hero-words-wrap {
    display: block;
    position: relative;
    overflow: hidden;
    height: 1.25em; /* exactly one line at the current font-size */
    padding-top: 0.1em;
}

/* Each word — default state: waiting below */
.auth-hero-word {
    position: absolute;
    inset: 0;
    font-weight: 600;
    opacity: 0;
    transform: translateY(70px);
    transition:
        opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Current word — visible, centred */
.auth-hero-word.word-active {
    opacity: 1;
    transform: translateY(0);
}

/* Already-shown words — exit upward */
.auth-hero-word.word-exit-up {
    opacity: 0;
    transform: translateY(-70px);
}

/* Body text */
.auth-hero-desc {
    color: rgba(255, 255, 255, 0.75);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
    max-width: 480px;
}

/* CTA buttons row */
.auth-hero-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.auth-hero-btn-outline {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.375rem;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.auth-hero-btn-outline:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.9);
}

.auth-hero-btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.375rem;
    background: var(--ct-primary);
    border: 1.5px solid var(--ct-primary);
    color: #fff;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.auth-hero-btn-primary:hover {
    background: var(--ct-primary-hover);
    border-color: var(--ct-primary-hover);
}

/* ========================================
   AdminLTE Overrides — Sidebar
   ======================================== */
.app-sidebar .nav-link {
    border-left: 3px solid transparent;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.app-sidebar .nav-link.active {
    background-color: rgba(21, 163, 98, 0.18) !important;
    color: #fff !important;
    border-left-color: var(--ct-primary) !important;
}

.app-sidebar .sidebar-brand .brand-image {
    width: 33px;
    height: 33px;
    object-fit: contain;
}

/* ========================================
   AdminLTE Overrides — Header / Navbar
   ======================================== */
.app-header .nav-link:hover {
    color: var(--ct-primary);
}

/* ========================================
   AdminLTE Overrides — Cards
   ======================================== */
.card {
    border: none;
    border-radius: 0.625rem;
    box-shadow: var(--card-shadow);
}

/* Card-headers that contain a heading + subheading: stack vertically. */
.card-header:not(.d-flex) {
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* ========================================
   Dashboard Welcome Section
   ======================================== */
.dashboard-welcome {
    padding: 1.25rem 1.5rem;
    background: #fff;
    border-radius: 0.625rem;
    box-shadow: var(--card-shadow);
    border-left: 4px solid var(--ct-primary);
}

.dashboard-welcome h2 {
    font-size: 1.4rem;
    color: var(--ct-dark);
    margin-bottom: 0.2rem;
}

.dashboard-welcome p {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0;
}

/* ========================================
   Dashboard Widget Cards
   ======================================== */

/* Base clickable card */
.widget-card {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

.widget-card:hover {
    box-shadow: var(--card-shadow-hover) !important;
    transform: translateY(-3px);
}

/* Top-border accent colours */
.widget-card.widget-border-green  { border-top: 3px solid var(--ct-primary) !important; }
.widget-card.widget-border-amber  { border-top: 3px solid var(--ct-amber) !important; }
.widget-card.widget-border-blue   { border-top: 3px solid var(--ct-blue) !important; }
.widget-card.widget-border-purple { border-top: 3px solid var(--ct-purple) !important; }

/* Stat layout inside widget cards */
.widget-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
}

.widget-stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #9ca3af;
    margin-bottom: 0.4rem;
    font-family: 'Inter', sans-serif;
}

.widget-stat-value {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ct-dark);
    margin: 0;
    font-family: 'Inter', sans-serif;
}

.widget-stat-sub {
    font-size: 0.78rem;
    color: #9ca3af;
    margin-top: 0.375rem;
    margin-bottom: 0;
}

/* Icon tile */
.widget-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.widget-card:hover .widget-stat-icon {
    transform: scale(1.08);
}

/* Icon colour variants */
.widget-icon-green  { background: var(--ct-primary-subtle); color: var(--ct-primary); }
.widget-icon-amber  { background: var(--ct-amber-subtle);   color: var(--ct-amber); }
.widget-icon-blue   { background: var(--ct-blue-subtle);    color: var(--ct-blue); }
.widget-icon-purple { background: var(--ct-purple-subtle);  color: var(--ct-purple); }

/* ========================================
   Service Status Widget
   ======================================== */
.status-health-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.status-health-banner.health-operational {
    background: rgba(21, 163, 98, 0.08);
    color: #0d7a48;
    border: 1px solid rgba(21, 163, 98, 0.20);
}

.status-health-banner.health-degraded {
    background: rgba(245, 158, 11, 0.08);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.20);
}

.status-health-banner.health-outage {
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.20);
}

.status-health-banner.health-maintenance {
    background: rgba(59, 130, 246, 0.08);
    color: #1d4ed8;
    border: 1px solid rgba(59, 130, 246, 0.20);
}

/* ========================================
   Icon & Element Size Utilities
   ======================================== */
.icon-widget {
    font-size: 2rem;
}

.icon-widget-lg {
    font-size: 3rem;
}

.icon-submenu {
    font-size: 0.4rem;
    vertical-align: middle;
}

.icon-info {
    font-size: 0.9rem;
    cursor: default;
}

.conversation-avatar {
    width: 36px;
    height: 36px;
}

.conversation-body {
    max-width: 80%;
}

/* ========================================
   Admin Impersonation Banner
   ======================================== */
.admin-impersonation-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #f0ad4e;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-bottom: 2px solid #d97706;
    z-index: 9999;
}

body.admin-impersonating .app-wrapper {
    margin-top: 40px;
}

/* ========================================
   Responsive adjustments
   ======================================== */

/* Tablet: card becomes fluid so it doesn't overflow the screen */
@media (max-width: 767.98px) {
    .auth-page {
        flex-direction: column;
    }
    .auth-panel-left {
        width: 100%;
        min-height: 100vh;
        padding: 2rem 1.25rem;
    }
    .auth-panel-inner {
        width: 100%;
        max-width: 420px;
    }
    .auth-card {
        padding: 2rem 1.5rem;
    }
    .auth-panel-right {
        display: none;
    }

    .widget-stat {
        padding: 1.25rem;
    }

    .widget-stat-value {
        font-size: 1.875rem;
    }
}