/* ==========================================================================
   DASHBOARD BASE / LAYOUT STYLES
   APM IT Manager Dashboard
   Defines shared design tokens (CSS variables) consumed by every other
   dashboard stylesheet (sidebar, cards, tables, charts, responsive).

   Theme: clean light SaaS surface — white cards on a soft light-gray page,
   a single emerald/mint accent, hairline borders, quiet shadows (no neon
   glow). Every other dashboard stylesheet reads its colors from the tokens
   defined here. (The login page keeps its own separate dark blue gradient
   theme, defined in login.css — that was a distinct, deliberate choice.)
   ========================================================================== */

:root {
    /* Base surfaces */
    --color-bg-page: #f5f7fa;
    --color-panel: #ffffff;
    --color-surface: #ffffff;
    --color-border: #e5e9ee;

    /* Text */
    --color-text-main: #0f172a;
    --color-text-muted: #64748b;
    --color-text-faint: #94a3b8;

    /* Primary accent (blue) */
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-primary-light: #eff6ff;
    --color-primary-light-2: #dbeafe;
    --color-mint: #eff6ff;
    --color-mint-2: #dbeafe;

    /* Secondary accent palette (used per KPI/nav category) */
    --color-blue-accent: #3b82f6;
    --color-blue-accent-light: #60a5fa;
    --color-cyan: #06b6d4;
    --color-purple: #8b5cf6;
    --color-teal: #14b8a6;
    --color-pink: #ec4899;
    --color-orange: #f97316;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;

    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 10px;

    --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.05);
    --shadow-hover: 0 4px 14px rgba(15, 23, 42, 0.08);

    --sidebar-width: 260px;
    --sidebar-width-collapsed: 84px;
    --topbar-height: 72px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--color-bg-page);
    color: var(--color-text-main);
    min-height: 100vh;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

button {
    font-family: inherit;
}

/* App shell: sidebar + main content side by side */
.app-shell {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* A class selector like .app-shell beats the UA [hidden] rule's specificity
   (same bug already fixed once for .login-form in login.css) — without this,
   #appView would stay visible even while hidden before sign-in. */
.app-shell[hidden] {
    display: none;
}

.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: var(--sidebar-width);
    transition: margin-left 0.25s ease;
    min-width: 0;
}

.app-shell.sidebar-collapsed .main-wrapper {
    margin-left: var(--sidebar-width-collapsed);
}

/* Top Navbar */
.topbar {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 20;
}

/* Thin accent stripe under the white header — the one flourish carried over
   from the reference's own "premium polish" pass. */
.topbar {
    position: relative;
}

.topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-cyan) 45%, var(--color-purple) 100%);
    opacity: 0.7;
    pointer-events: none;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sidebar-toggle {
    border: 1px solid var(--color-border);
    background: #f8fafc;
    color: var(--color-text-main);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.sidebar-toggle:hover {
    background: var(--color-mint);
    border-color: var(--color-primary);
}

.page-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-text-main);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.current-date {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: #f8fafc;
    color: var(--color-text-main);
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.icon-btn:hover {
    background: var(--color-mint);
    border-color: var(--color-primary);
}

.notification-dot {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-danger);
    border: 2px solid var(--color-panel);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 16px;
    border-left: 1px solid var(--color-border);
}

.user-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.3;
}

.user-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-main);
}

.user-email {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.profile-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Main content area */
.dashboard-content {
    flex: 1;
    padding: 24px 28px 48px;
}

/* Tab panels: one per sidebar nav item. Only the active one is shown; each
   panel manages its own internal layout (Dashboard/Team Overview use flex
   column via .tab-panel-inner, unbuilt tabs use the coming-soon card). */
.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.tab-panel-inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Reusable placeholder for tabs that don't have real data behind them yet —
   no fake numbers, just an honest "this is planned" card. */
.coming-soon-card {
    max-width: 640px;
    margin: 40px auto;
    padding: 40px 36px;
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.coming-soon-suite-badge {
    display: inline-block;
    margin-bottom: 18px;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--icon-c, var(--color-primary));
    background: color-mix(in srgb, var(--icon-c, var(--color-primary)) 12%, transparent);
}

.coming-soon-icon {
    --icon-c: var(--color-primary);
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--icon-c) 12%, transparent);
    color: var(--icon-c);
    font-size: 1.6rem;
}

.coming-soon-badge {
    display: inline-block;
    margin-bottom: 14px;
    padding: 4px 14px;
    border-radius: 999px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #b45309;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.coming-soon-card h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 10px;
}

.coming-soon-card p {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.coming-soon-points {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    text-align: left;
}

.coming-soon-points li {
    position: relative;
    padding-left: 20px;
    font-size: 0.85rem;
    color: var(--color-text-main);
    line-height: 1.4;
}

.coming-soon-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
}