/**
 * Knowledge Base Editor - Main Styles
 * Imports design system and application-specific styles
 *
 * NOTE: layout.css is NOT imported here. It uses position:fixed, overflow:hidden,
 * grid-template-rows:100vh, and font-size-sm (12px) — all of which conflict with
 * the Work Item Manager's scrollable kanban/list layout. This file defines its own
 * complete layout rules below (position:relative, overflow:visible, font-size-base 16px).
 */

@import url("./css/variables.css");

/* ==========================================================================
   Design System Tokens (Feature: WorkItemManager)
   Maps global theme vars + --wi-* tokens to short names used by components.
   Mirrors the home feature token set so shared CSS works identically.
   ========================================================================== */
body.feature-workitemmanager {
    /* --- Modal --- */
    --modal-bg: var(--panel-2);
    --modal-header-bg: var(--panel-2);
    --modal-footer-bg: var(--panel-2);
    --modal-border: var(--border);

    /* --- Layout --- */
    --bg: var(--sidebar-bg);
    --bg-secondary: var(--sidebar-header-bg);
    --panel: var(--sidebar-bg);
    --panel-2: var(--sidebar-header-bg);
    --card: var(--content-bg);
    --surface: var(--content-bg);

    /* --- Text --- */
    --text: var(--sidebar-text);
    --text-secondary: var(--content-text);
    --muted: var(--content-text);
    --disabled: #6b7280;

    /* --- Semantic colours --- */
    --primary: var(--button-primary-bg);
    --primary-hover: var(--button-primary-hover);
    --primary-light: rgba(77, 163, 250, 0.15);
    --accent: var(--button-primary-bg);
    --accent-hover: var(--button-primary-hover);
    --accent-light: rgba(77, 163, 250, 0.15);
    --accent-2: #6bf2c3;

    --success: var(--success-color);
    --danger: var(--danger-color);
    --warning: var(--warning-color);
    --info: var(--info-color);

    /* --- Borders --- */
    --border: var(--sidebar-border);
    --border-light: var(--sidebar-border);
    --border-focus: var(--accent);

    /* --- Interactive states --- */
    --hover: rgba(255, 255, 255, 0.06);
    --active: rgba(77, 163, 250, 0.18);
    --focus-ring: 0 0 0 2px rgba(77, 163, 250, 0.15);
    --ring: 0 0 0 2px rgba(77, 163, 255, 0.3);

    /* --- Icons --- */
    --icon-color: var(--sidebar-text);
    --icon-color-hover: var(--sidebar-active);

    /* --- Shadows --- */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.12);
    --shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.45);

    /* --- Radii --- */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;

    /* --- Spacing --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* --- Typography --- */
    --font-sans:
        "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-mono:
        "Roboto Mono", ui-monospace, SFMono-Regular, "SF Mono", Consolas,
        "Liberation Mono", Menlo, monospace;

    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 16px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;
    --font-size-4xl: 32px;

    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.6;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* --- Transitions --- */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Z-index --- */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-notification: 800;

    /* --- Overlay / modal backdrop --- */
    --overlay-bg: rgba(0, 0, 0, 0.5);

    /* --- Button shorthand tokens (used by some components) --- */
    --button-bg: var(--panel-2);
    --button-hover: var(--hover);
    --button-text: var(--text);
    --danger-hover: #dc2626;

    /* --- Code block tokens --- */
    --code-bg: rgba(0, 0, 0, 0.25);
    --code-text: var(--text);
    --code-panel: var(--panel-2);
    --code-subtle: var(--muted);
    --paragraph-color: var(--text);

    /* --- Table shorthand tokens --- */
    --table-header-bg: var(--panel-2);
    --table-header-text: var(--text);
    --table-header-focus: var(--accent);

    /* --- Extra spacing aliases --- */
    --space-md: 16px;
    --space-lg: 24px;

    /* --- Contrast helpers --- */
    --text-on-accent-light: #1e3a5f;
    --text-on-accent-dark: #ffffff;
    --text-on-dark-bg: #e2e8f0;
    --text-on-light-bg: #1e293b;
    --inline-code-text: var(--text-on-dark-bg);

    font-synthesis-weight: none;
}

/* === Base Layout === */
body.feature-workitemmanager * {
    box-sizing: border-box;
}
html.feature-workitemmanager,
body.feature-workitemmanager,
body.feature-workitemmanager #app {
    height: 100%;
}
body.feature-workitemmanager {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: var(--font-size-base) / 1.45 var(--font-sans);
}

/* Fixed Grid Layout System */
body.feature-workitemmanager #app {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-rows: auto;
    grid-template-areas: "sidebar main";
    min-height: 100vh;
    height: auto;
    overflow: visible;
    position: relative;
}

/* Ensure sidebar base typography is stable across mode toggles */
body.feature-workitemmanager #app > aside.sidebar {
    font-size: var(--font-size-base) !important;
    line-height: var(--line-height-base);
}

body.feature-workitemmanager .sidebar {
    grid-area: sidebar;
    background: var(--panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    width: 300px;
    height: 100vh;
    position: relative;
    z-index: 10;
    overflow: hidden;
}

body.feature-workitemmanager .main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden; /* main itself does not scroll; the content area below does */
    position: relative;
    background: var(--bg);
    isolation: isolate; /* isolate stacking and blending */
    contain: layout paint; /* prevent internal layout/paint from affecting sidebar */
}

/* Main content scrolling: toolbar stays fixed, content scrolls */
body.feature-workitemmanager .main > section {
    flex: 1;
    min-height: 0; /* allow flex child to shrink and enable scrolling */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

body.feature-workitemmanager .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--panel);
    isolation: isolate; /* ensure blending and stacking are isolated from main toolbar */
}

body.feature-workitemmanager .app-title {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--text);
    font-weight: 600;
}
/* Keep the app title text consistent regardless of mode */
body.feature-workitemmanager .sidebar-header .app-title span {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.2px;
    white-space: nowrap;
}

body.feature-workitemmanager .tree-actions {
    display: flex;
    gap: 6px;
}
body.feature-workitemmanager .sidebar-header .left-controls,
body.feature-workitemmanager .sidebar-header .right-controls,
body.feature-workitemmanager .main-toolbar .left-controls,
body.feature-workitemmanager .main-toolbar .right-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}
body.feature-workitemmanager .status {
    color: var(--muted);
    font-size: 12px;
}

body.feature-workitemmanager .visualization {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: calc(100vh - 50px); /* Account for toolbar height */
    overflow: hidden;
    position: relative;
}

/* Editor, content-area, table, and image styles extracted to editor-content.css */
@import url("./css/components/editor-content.css");

/* Label manager overlay & sidebar styles */
@import url("./components/Labels/label-manager.css");

body.feature-workitemmanager .sep {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 2px;
}

/* Button/select/active styles consolidated in components/Common/buttons.css */

/* Color picker button styling - follow toolbar background */
body.feature-workitemmanager #btnTextColor {
    position: relative;
    background: var(--panel-2);
    border: 1px solid var(--border);
}

body.feature-workitemmanager #btnTextColor:hover {
    background: var(--hover);
    border-color: var(--border-light);
}

body.feature-workitemmanager #btnTextColor::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 3px;
    background: var(--current-color, #4da3ff);
    border-radius: 1px;
    transition: background 0.2s ease;
}

/* Hidden color input */
body.feature-workitemmanager #colorPicker {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}
/* .btn.danger and .btn[disabled] consolidated in components/Common/buttons.css */

body.feature-workitemmanager .tree {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    height: calc(100vh - 120px); /* Account for header and search */
}

/* Lock sidebar tree typography so it doesn't change in Edit/Preview modes */
body.feature-workitemmanager .sidebar .tree {
    font-size: var(--font-size-base) !important;
    line-height: var(--line-height-base);
}
body.feature-workitemmanager .sidebar .tree .tree-item {
    font-size: inherit;
    line-height: inherit;
}
body.feature-workitemmanager .sidebar .tree .tree-item .name {
    font-size: inherit;
    line-height: inherit;
}

body.feature-workitemmanager .main-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    height: 50px;
    flex-shrink: 0;
    z-index: 5;
}
body.feature-workitemmanager .tree ul {
    list-style: none !important;
    margin: 0;
    padding-left: 12px;
}
body.feature-workitemmanager .tree li::marker {
    content: none !important;
}
body.feature-workitemmanager .tree-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text);
    user-select: none; /* Prevent text selection for better UX */
}
body.feature-workitemmanager .tree-item:hover {
    background: rgba(255, 255, 255, 0.04);
}
body.feature-workitemmanager .tree-item.active {
    background: rgba(77, 163, 255, 0.16);
    outline: 1px solid rgba(77, 163, 255, 0.4);
}
body.feature-workitemmanager .tree-item.selected {
    background: rgba(255, 193, 7, 0.16);
    outline: 1px solid rgba(255, 193, 7, 0.4);
}
body.feature-workitemmanager .tree-item .name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.feature-workitemmanager .tree-item .badge {
    font-size: 10px;
    color: var(--muted);
}

/* Enhanced search results */
body.feature-workitemmanager .tree-item.search-result {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.feature-workitemmanager .search-result-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.feature-workitemmanager .search-result-name {
    font-weight: 500;
    font-size: var(--font-size-sm);
    line-height: 1.3;
}

body.feature-workitemmanager .search-result-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

body.feature-workitemmanager .match-type {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body.feature-workitemmanager .search-result-snippet {
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-secondary, #ccc);
    margin-top: 2px;
    max-width: 100%;
    word-wrap: break-word;
}

/* Search highlighting */
body.feature-workitemmanager mark {
    background: rgba(255, 235, 59, 0.3);
    color: var(--text);
    padding: 1px 2px;
    border-radius: 2px;
    font-weight: 500;
}

/* Search results list styling */
body.feature-workitemmanager .search-results {
    padding: 0;
}

body.feature-workitemmanager
    .search-results
    .tree-item.search-result:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.feature-workitemmanager .search-results .tree-item.search-result:hover {
    background: rgba(255, 255, 255, 0.06);
}

body.feature-workitemmanager .search-results .tree-item.search-result.active {
    background: rgba(77, 163, 255, 0.2);
    border-color: rgba(77, 163, 255, 0.3);
}

body.feature-workitemmanager .icon {
    width: 16px;
    height: 16px;
    display: inline-block;
}

/* Folder icons - Orange color */
.tree-item
    .icon
    svg
    body.feature-workitemmanager
    path[d*="M4 7h5l2 2h9v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2Z"] {
    fill: #ff8c00 !important; /* Orange for folders */
}

/* Page icons - Blue/Cyan color */
.tree-item
    .icon
    svg
    body.feature-workitemmanager
    path[d*="M7 3h6l5 5v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z"] {
    fill: #00bfff !important; /* Blue/cyan for pages */
}

body.feature-workitemmanager .drag-over {
    outline: 1px dashed var(--accent);
    background: rgba(77, 163, 255, 0.08);
}

/* Legacy resizable containers - now used only for tables */
body.feature-workitemmanager .resizable {
    display: inline-block;
    position: relative;
    overflow: hidden !important;
    max-width: 100%;
    min-width: 50px;
    min-height: 20px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    line-height: 0;
}

/* Table containers in edit mode */
body.feature-workitemmanager
    .content-area.edit-mode
    .resizable[data-type="table"] {
    resize: both;
    border: 2px dashed #bbb;
    background: rgba(250, 250, 250, 0.8);
    cursor: nw-resize;
    transition: all 0.2s ease;
    padding: 2px;
}

body.feature-workitemmanager
    .content-area.edit-mode
    .resizable[data-type="table"]:hover {
    border-color: var(--accent);
    background-color: rgba(77, 163, 255, 0.1);
}

/* Table containers in preview mode */
body.feature-workitemmanager .content-area.preview-mode .resizable {
    resize: none;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: default;
    display: inline-block;
    line-height: 0;
}

/* Table sizing in containers */
body.feature-workitemmanager .resizable > table {
    width: 100%;
    height: auto;
    border-collapse: collapse;
    display: block;
    overflow: hidden;
}

body.feature-workitemmanager blockquote {
    border-left: 4px solid #d0d7e2;
    padding: 6px 12px;
    background: #f7f9fc;
    color: #111;
}

body.feature-workitemmanager .align-left {
    text-align: left;
}
body.feature-workitemmanager .align-center {
    text-align: center;
}
body.feature-workitemmanager .align-right {
    text-align: right;
}
/* Center/right for block elements like images/tables when class applied */
.resizable.align-center,
.enhanced-table-container.align-center,
body.feature-workitemmanager img.align-center {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.resizable.align-right,
.enhanced-table-container.align-right,
body.feature-workitemmanager img.align-right {
    margin-left: auto;
    margin-right: 0;
    display: block;
}
.resizable.align-left,
.enhanced-table-container.align-left,
body.feature-workitemmanager img.align-left {
    margin-left: 0;
    margin-right: auto;
    display: block;
}

body.feature-workitemmanager kbd {
    background: #111;
    color: #eee;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #333;
    font-family: "Roboto Mono", ui-monospace, monospace;
    font-size: 12px;
}

/* Resize Toast Notification */
body.feature-workitemmanager .resize-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.9);
    color: #ffffff;
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    font-weight: 500;
    display: none;
    opacity: 0;
    z-index: 1100;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    min-width: 200px;
    text-align: center;
}

body.feature-workitemmanager .resize-toast.show {
    display: block;
    opacity: 1;
}

/* Tree item selection styles for bulk operations */
body.feature-workitemmanager .tree-item.selected {
    background: rgba(77, 163, 255, 0.2);
    border-left: 3px solid var(--accent, #4da3ff);
    box-shadow: inset 0 0 0 1px rgba(77, 163, 255, 0.3);
}

body.feature-workitemmanager .tree-item.selected:hover {
    background: rgba(77, 163, 255, 0.3);
}

/* Multi-select mode indicator */
body.feature-workitemmanager .tree-container.multi-select-mode {
    position: relative;
    border: 2px dashed var(--accent, #4da3ff);
    border-radius: 4px;
}

body.feature-workitemmanager .tree-container.multi-select-mode::before {
    content: "Multi-Select Mode - Ctrl+Click to select multiple items";
    position: absolute;
    top: -25px;
    left: 0;
    font-size: 11px;
    color: var(--accent, #4da3ff);
    background: var(--bg, #1a1a1a);
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 10;
}

/* Bulk operations toolbar */
body.feature-workitemmanager .bulk-operations-bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--card, #2a2a2a);
    border: 1px solid var(--border, #3a3a3a);
    border-radius: 8px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
    transition: all 0.3s ease;
}

body.feature-workitemmanager .bulk-operations-bar.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

body.feature-workitemmanager .bulk-operations-bar .selection-count {
    color: var(--accent, #4da3ff);
    font-weight: 500;
    font-size: var(--font-size-sm);
}

body.feature-workitemmanager .bulk-operations-bar .btn {
    padding: var(--btn-sm-padding, 6px 12px);
    font-size: var(--btn-sm-font, 12px);
}

body.feature-workitemmanager .bulk-operations-bar .btn.danger {
    background: var(--btn-danger-bg, #ff5656);
    color: var(--btn-danger-text, white);
    border-color: var(--btn-danger-border, #ff5656);
}

body.feature-workitemmanager .bulk-operations-bar .btn.danger:hover {
    background: var(--btn-danger-bg-hover, #ff4444);
}

/* Image focus state for keyboard resize */
/* image-focused and #contentArea table styles moved to editor-content.css */