/**
 * Kinetik PM Design System — Linear-Inspired Light Interface
 * Clean, fast, compact, keyboard-friendly, high information density, calm palette.
 */

:root {
    /* Linear Design Tokens (Light Theme Only) */
    --k-bg-canvas: #F6F6F7;          /* Window & sidebar background */
    --k-bg-sidebar: #F6F6F7;         /* Sidebar background */
    --k-bg-surface: #F9F9FA;         /* Main content panel */
    --k-bg-surface-hover: #F3F3F5;   /* Row hover */
    --k-bg-surface-active: #EDEDEF;  /* Selected */
    --k-bg-elevated: #FFFFFF;        /* Modals, popovers and inputs */
    --k-bg-modal: #FFFFFF;

    /* Border Colors (1px hairline) */
    --k-border-subtle: #EBEBED;      /* 1px hairline border */
    --k-border-medium: #EBEBED;      /* 1px hairline border */
    --k-border-strong: #EBEBED;      /* 1px hairline border */
    --k-border-accent: #5E6AD2;

    /* Typography Colors */
    --k-text-primary: #26272B;       /* Primary text */
    --k-text-secondary: #6F7177;     /* Secondary text */
    --k-text-muted: #A0A2A8;         /* Tertiary text and icons */
    --k-text-faint: #A0A2A8;         /* Tertiary text */

    /* Brand Accent & Destructive */
    --k-accent: #5E6AD2;             /* Accent indigo */
    --k-accent-hover: #6E7AE0;       /* Accent hover */
    --k-accent-subtle: #ECEEFB;
    --k-accent-text: #5E6AD2;
    --k-destructive: #EB5757;

    /* Semantic Task Status */
    --k-status-backlog: #A0A2A8;
    --k-status-todo: #A0A2A8;
    --k-status-inprogress: #F2C94C;
    --k-status-inreview: #5E6AD2;
    --k-status-done: #5E6AD2;
    --k-status-canceled: #A0A2A8;

    /* Semantic Task Priority */
    --k-priority-urgent: #F2994A;
    --k-priority-high: #6F7177;
    --k-priority-medium: #6F7177;
    --k-priority-low: #6F7177;
    --k-priority-none: #A0A2A8;

    /* Dimensions & Spacing */
    --k-sidebar-width: 244px;        /* 244px sidebar */
    --k-header-height: 44px;         /* 44px header */
    --k-row-height: 44px;            /* 44px list row height */
    --k-radius-xs: 4px;
    --k-radius-sm: 5px;
    --k-radius-md: 6px;
    --k-radius-lg: 8px;              /* 8px for popovers and content panel */
    --k-radius-xl: 12px;             /* 12px for modals */
    --k-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

[x-cloak] {
    display: none !important;
}

/* Base Body Styles */
body.fi-body {
    background-color: var(--k-bg-canvas);
    color: var(--k-text-primary);
    font-size: 13px;
    letter-spacing: -0.011em;
}

/* Filament Sidebar: Compact, Light & Quiet */
.fi-sidebar {
    background-color: var(--k-bg-sidebar) !important;
    border-right: 1px solid var(--k-border-subtle) !important;
    box-shadow: none !important;
}

@media (min-width: 768px) {
    .fi-sidebar-close-overlay {
        display: none !important;
    }
}

.fi-sidebar-header {
    height: var(--k-header-height) !important;
    padding: 0 0.875rem !important;
    border-bottom: 1px solid var(--k-border-subtle) !important;
    background-color: var(--k-bg-sidebar) !important;
}

.fi-sidebar-nav {
    padding: 0.5rem 0.5rem !important;
}

/* Compact Sidebar Navigation Items */
.fi-sidebar-item {
    margin-bottom: 1px !important;
}

.fi-sidebar-item-btn {
    padding: 0.3rem 0.55rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    border-radius: var(--k-radius-sm) !important;
    color: var(--k-text-secondary) !important;
    transition: all 0.12s ease !important;
}

.fi-sidebar-item-btn:hover {
    background-color: var(--k-bg-surface-active) !important;
    color: var(--k-text-primary) !important;
}

.fi-sidebar-item-btn.fi-active {
    background-color: #ffffff !important;
    color: var(--k-text-primary) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid var(--k-border-subtle) !important;
}

.fi-sidebar-item-btn.fi-active .fi-sidebar-item-icon {
    color: var(--k-accent) !important;
}

.fi-sidebar-group-label {
    padding: 0.75rem 0.55rem 0.25rem !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--k-text-muted) !important;
}

/* Topbar / Context Bar */
.fi-topbar {
    background-color: var(--k-bg-surface) !important;
    border-bottom: 1px solid var(--k-border-subtle) !important;
    box-shadow: none !important;
}

/* Main Content Workspace */
.fi-main {
    background-color: var(--k-bg-canvas) !important;
}

.fi-main-ctn {
    padding: 1.25rem 1.5rem !important;
    max-width: 100% !important;
}

/* Flatten cards — replace heavy shadows with subtle 1px border */
.fi-section {
    background-color: var(--k-bg-surface) !important;
    border: 1px solid var(--k-border-subtle) !important;
    border-radius: var(--k-radius-md) !important;
    box-shadow: none !important;
}

.fi-ta-ctn {
    background-color: var(--k-bg-surface) !important;
    border: 1px solid var(--k-border-subtle) !important;
    border-radius: var(--k-radius-md) !important;
    box-shadow: none !important;
}

.fi-ta-header {
    padding: 0.5rem 0.75rem !important;
    border-bottom: 1px solid var(--k-border-subtle) !important;
}

.fi-ta-row {
    transition: background-color 0.1s ease !important;
}

.fi-ta-row:hover {
    background-color: var(--k-bg-surface-hover) !important;
}

.fi-ta-cell {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
    font-size: 0.8125rem !important;
    border-bottom: 1px solid var(--k-border-subtle) !important;
}

/* Linear-style Task Identifier: Quiet monospace text, not a heavy pill */
.k-identifier {
    font-family: var(--k-font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--k-text-muted);
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
}

/* Status Indicator Dot */
.k-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Linear-style Filter Bar & View Switcher */
.k-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--k-border-subtle);
}

.k-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--k-text-secondary);
    background-color: #ffffff;
    border: 1px solid var(--k-border-subtle);
    border-radius: var(--k-radius-sm);
    cursor: pointer;
    transition: all 0.1s ease;
}

.k-filter-btn:hover {
    background-color: var(--k-bg-surface-hover);
    color: var(--k-text-primary);
    border-color: var(--k-border-medium);
}

.k-filter-btn.active {
    background-color: var(--k-bg-surface-active);
    color: var(--k-text-primary);
    border-color: var(--k-border-medium);
}

.k-view-switcher {
    display: inline-flex;
    background-color: #f3f4f6;
    border: 1px solid var(--k-border-subtle);
    border-radius: var(--k-radius-sm);
    padding: 2px;
}

.k-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--k-text-muted);
    border-radius: var(--k-radius-xs);
    cursor: pointer;
    border: none;
    background: transparent;
    transition: all 0.1s ease;
}

.k-view-btn.active {
    background-color: #ffffff;
    color: var(--k-text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Linear-style Task Row */
.k-task-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: var(--k-row-height);
    padding: 0 0.75rem;
    border-bottom: 1px solid var(--k-border-subtle);
    background-color: #ffffff;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.k-task-row:hover {
    background-color: var(--k-bg-surface-hover);
}

.k-task-row:first-child {
    border-top-left-radius: var(--k-radius-md);
    border-top-right-radius: var(--k-radius-md);
}

.k-task-row:last-child {
    border-bottom-left-radius: var(--k-radius-md);
    border-bottom-right-radius: var(--k-radius-md);
    border-bottom: none;
}

/* Command Palette Modal (Cmd+K) — Light & Crisp */
.k-command-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.25);
    backdrop-filter: blur(2px);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
}

.k-command-dialog {
    width: 100%;
    max-width: 38rem;
    background-color: #ffffff;
    border: 1px solid var(--k-border-medium);
    border-radius: var(--k-radius-lg);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.k-command-input-wrapper {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--k-border-subtle);
    background-color: #ffffff;
}

.k-command-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--k-text-primary);
    font-size: 0.9375rem;
    font-weight: 400;
    margin-left: 0.625rem;
}

.k-command-list {
    max-height: 22rem;
    overflow-y: auto;
    padding: 0.375rem;
}

.k-command-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.65rem;
    border-radius: var(--k-radius-sm);
    color: var(--k-text-secondary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color 0.1s ease, color 0.1s ease;
}

.k-command-item:hover, .k-command-item.k-selected {
    background-color: var(--k-bg-surface-hover);
    color: var(--k-text-primary);
}

.k-shortcut-pill {
    font-family: var(--k-font-mono);
    font-size: 0.6875rem;
    padding: 0.1rem 0.35rem;
    border-radius: var(--k-radius-xs);
    background-color: #f3f4f6;
    border: 1px solid var(--k-border-subtle);
    color: var(--k-text-muted);
}

/* Quick Create Dialog — Light & Clean */
.k-modal-dialog {
    width: 100%;
    max-width: 42rem;
    background-color: #ffffff;
    border: 1px solid var(--k-border-medium);
    border-radius: var(--k-radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

/* Utility Guarantees */
svg {
    display: inline-block;
    vertical-align: middle;
}
.w-2 { width: 0.5rem !important; }
.h-2 { height: 0.5rem !important; }
.w-2\.5 { width: 0.625rem !important; }
.h-2\.5 { height: 0.625rem !important; }
.w-3 { width: 0.75rem !important; }
.h-3 { height: 0.75rem !important; }
.w-3\.5 { width: 0.875rem !important; }
.h-3\.5 { height: 0.875rem !important; }
.w-4 { width: 1rem !important; }
.h-4 { height: 1rem !important; }
.w-5 { width: 1.25rem !important; }
.h-5 { height: 1.25rem !important; }
.w-16 { width: 4rem !important; }
.h-1\.5 { height: 0.375rem !important; }
.rounded-full { border-radius: 9999px !important; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.shrink-0 { flex-shrink: 0; }
.grow { flex-grow: 1; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   Milestone 05: Minimalist Workspace Switcher (Sidebar Top)
   ========================================================================== */
.fi-tenant-menu {
    width: 100% !important;
}

.fi-tenant-menu-trigger {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    padding: 0.4rem 0.6rem !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: var(--k-radius-sm) !important;
    color: var(--k-text-primary) !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}

.fi-tenant-menu-trigger:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

.fi-tenant-menu-trigger-text {
    flex: 1 1 auto !important;
    text-align: left !important;
    min-width: 0 !important;
}

.fi-tenant-menu-trigger-tenant-name {
    display: block !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--k-text-primary) !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ==========================================================================
   Milestone 05: Minimalist Table Design System (image_88fc78.png)
   No external borders, no alternating stripes, 1px subtle divider lines
   ========================================================================== */
.fi-ta-ctn {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}

.fi-ta-table {
    border-collapse: collapse !important;
    width: 100% !important;
}

.fi-ta-header {
    border-bottom: 1px solid var(--k-border-subtle) !important;
    padding: 0.5rem 0 !important;
}

.fi-ta-header-cell {
    background: transparent !important;
    border-bottom: 1px solid var(--k-border-subtle) !important;
    font-size: 0.6875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-weight: 600 !important;
    color: var(--k-text-muted) !important;
    padding: 0.35rem 0.5rem !important;
}

.fi-ta-row {
    background-color: transparent !important;
    border-bottom: 1px solid var(--k-border-subtle) !important;
    transition: background-color 0.12s ease !important;
}

.fi-ta-row:hover {
    background-color: var(--k-bg-surface-hover) !important;
}

.fi-ta-cell {
    padding: 0.5rem 0.5rem !important;
    font-size: 0.8125rem !important;
}

.fi-ta-split {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 1rem !important;
    padding: 0.375rem 0.25rem !important;
}

/* ==========================================================================
   Milestone 05: Auth & Onboarding Sleek Dark Theme (Deep Navy & Charcoal)
   ========================================================================== */
body:has(.fi-simple-layout),
.fi-simple-layout {
    background-color: #0b0d14 !important;
    color: #e4e7ee !important;
    min-height: 100vh !important;
}

body:has(.fi-simple-layout) .fi-simple-main,
.fi-simple-main {
    background: transparent !important;
}

/* Dark Card for Login, Register, Onboarding */
.fi-simple-page {
    background: #11131c !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5), 0 0 1px 1px rgba(255, 255, 255, 0.04) !important;
    padding: 2.25rem 2rem !important;
}

.fi-simple-page .fi-simple-header-heading {
    color: #f1f3f9 !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    font-size: 1.35rem !important;
}

.fi-simple-page .fi-simple-header-subheading {
    color: #8b92a5 !important;
    font-size: 0.85rem !important;
}

/* Inputs in Dark Auth Pages */
.fi-simple-page input,
.fi-simple-page select,
.fi-simple-page textarea {
    background-color: #171925 !important;
    border: 1px solid #282b3d !important;
    color: #f1f3f9 !important;
    border-radius: 5px !important;
    font-size: 0.8125rem !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.fi-simple-page input::placeholder {
    color: #555b70 !important;
}

.fi-simple-page input:focus,
.fi-simple-page select:focus,
.fi-simple-page textarea:focus {
    border-color: #5e6ad2 !important;
    box-shadow: 0 0 0 2px rgba(94, 106, 210, 0.25) !important;
    outline: none !important;
}

.fi-simple-page label,
.fi-simple-page .fi-fo-field-wrp-label {
    color: #a0a6b8 !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

/* Dark Auth Buttons */
.fi-simple-page button[type="submit"],
.fi-simple-page .fi-btn-primary {
    background: #5e6ad2 !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 5px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    transition: background-color 0.15s ease !important;
}

.fi-simple-page button[type="submit"]:hover,
.fi-simple-page .fi-btn-primary:hover {
    background: #4f55c5 !important;
}

.fi-simple-page a {
    color: #818eec !important;
    font-size: 0.8125rem !important;
    transition: color 0.15s ease !important;
}

.fi-simple-page a:hover {
    color: #a5b2f4 !important;
}

/* Google OAuth Button */
.fi-google-btn {
    background-color: #171925 !important;
    border: 1px solid #282b3d !important;
    color: #e4e7ee !important;
    border-radius: 5px !important;
    transition: all 0.15s ease !important;
}

.fi-google-btn:hover {
    background-color: #1e2130 !important;
    border-color: #393e56 !important;
    color: #ffffff !important;
}

.fi-google-btn-text {
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
}