/**
 * KM Qlik Reference - Frontend Styles
 *
 * Design matched 1:1 to the standalone reference catalogs.
 * Self-contained, no external dependencies (no Tailwind, no icon fonts).
 *
 * @package KM_Qlik_Reference
 * @version 3.0.0
 */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

.km-ref-grid {
    --km-ref-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --km-ref-mono: 'Fira Code', 'Cascadia Code', Consolas, 'Monaco', 'Courier New', monospace;
    --km-ref-primary: #4f46e5;
    --km-ref-primary-light: #eef2ff;
    --km-ref-emerald: #059669;
    --km-ref-slate-50: #f8fafc;
    --km-ref-slate-100: #f1f5f9;
    --km-ref-slate-200: #e2e8f0;
    --km-ref-slate-300: #cbd5e1;
    --km-ref-slate-400: #94a3b8;
    --km-ref-slate-500: #64748b;
    --km-ref-slate-600: #475569;
    --km-ref-slate-700: #334155;
    --km-ref-slate-800: #1e293b;
    --km-ref-slate-900: #0f172a;
    --km-ref-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --km-ref-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --km-ref-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --km-ref-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Category Color Palette
   ========================================================================== */

.km-ref-grid__item[data-category-color="visualization"]    { --cat-color: #059669; }
.km-ref-grid__item[data-category-color="ux-navigation"]    { --cat-color: #0ea5e9; }
.km-ref-grid__item[data-category-color="reporting-export"] { --cat-color: #7c3aed; }
.km-ref-grid__item[data-category-color="data-input"]       { --cat-color: #0f766e; }
.km-ref-grid__item[data-category-color="automation"]       { --cat-color: #f97316; }
.km-ref-grid__item[data-category-color="devops"]           { --cat-color: #1d4ed8; }
.km-ref-grid__item[data-category-color="monitoring"]       { --cat-color: #d97706; }
.km-ref-grid__item[data-category-color="migration"]        { --cat-color: #4c1d95; }
.km-ref-grid__item[data-category-color="governance"]       { --cat-color: #16a34a; }
.km-ref-grid__item[data-category-color="developer"]        { --cat-color: #e11d48; }
.km-ref-grid__item[data-category-color="ai-analytics"]     { --cat-color: #5b21b6; }
.km-ref-grid__item[data-category-color="mobile"]           { --cat-color: #0369a1; }
.km-ref-grid__item[data-category-color="collaboration"]    { --cat-color: #db2777; }

/* Script/expression type colors */
.km-ref-grid[data-type="script"] .km-ref-grid__item      { --cat-color: #059669; }
.km-ref-grid[data-type="expression"] .km-ref-grid__item   { --cat-color: #3b82f6; }

/* ==========================================================================
   Grid Container
   ========================================================================== */

.km-ref-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    font-family: var(--km-ref-font);
    color: var(--km-ref-slate-900);
}

/* ==========================================================================
   Search Bar
   ========================================================================== */

.km-ref-grid__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    gap: 16px;
    flex-wrap: wrap;
}

.km-ref-grid__search {
    position: relative;
    flex: 1;
    max-width: 600px;
    min-width: 240px;
}

.km-ref-grid__search-input {
    width: 100%;
    padding: 14px 44px 14px 20px;
    border: 0;
    border-radius: 16px;
    font-size: 16px;
    font-family: var(--km-ref-font);
    color: var(--km-ref-slate-700);
    background: #fff;
    box-shadow: var(--km-ref-shadow-md), 0 0 0 1px var(--km-ref-slate-200);
    transition: box-shadow 0.2s, transform 0.1s;
    outline: none;
}

.km-ref-grid__search-input::placeholder {
    color: var(--km-ref-slate-400);
}

.km-ref-grid__search-input:focus {
    box-shadow: var(--km-ref-shadow-lg), 0 0 0 2px var(--km-ref-primary);
}

.km-ref-grid__search-clear {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    font-size: 20px;
    color: var(--km-ref-slate-400);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.2s;
}

.km-ref-grid__search-clear:hover {
    color: var(--km-ref-slate-700);
}

/* Count */
.km-ref-grid__count {
    font-size: 14px;
    color: var(--km-ref-slate-500);
    font-weight: 500;
    white-space: nowrap;
}

.km-ref-grid__count-num {
    font-weight: 700;
    color: var(--km-ref-slate-800);
}

/* ==========================================================================
   Layout: Sidebar + Cards
   ========================================================================== */

.km-ref-grid__layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
}

/* ==========================================================================
   Sidebar Filters
   ========================================================================== */

.km-ref-grid__sidebar {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 24px;
    align-self: start;
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--km-ref-shadow-sm);
    border: 1px solid rgba(226, 232, 240, 0.6);
    padding: 12px 0;
    overflow: hidden;
}

.km-ref-grid__filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    background: none;
    border: none;
    padding: 10px 16px;
    font-size: 14px;
    font-family: var(--km-ref-font);
    color: var(--km-ref-slate-700);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-weight: 500;
    white-space: nowrap;
}

.km-ref-grid__filter:hover {
    background: var(--km-ref-slate-50);
    color: var(--km-ref-slate-900);
}

.km-ref-grid__filter--active {
    background: var(--km-ref-slate-200) !important;
    color: var(--km-ref-primary) !important;
    font-weight: 700;
}

.km-ref-grid__filter-count {
    font-size: 12px;
    color: var(--km-ref-slate-400);
    font-weight: 400;
    margin-left: 8px;
}

.km-ref-grid__filter--active .km-ref-grid__filter-count {
    color: rgba(79, 70, 229, 0.5);
}

/* ==========================================================================
   Cards Grid
   ========================================================================== */

.km-ref-grid__cards {
    display: grid;
    grid-template-columns: repeat(var(--km-ref-cols, 2), 1fr);
    gap: 24px;
}

/* ==========================================================================
   Individual Card — Two-Section Design
   Top: white bg (badges + title + description)
   Bottom: slate-50 bg (tags or code block)
   ========================================================================== */

.km-ref-grid__item {
    --cat-color: var(--km-ref-slate-300);
    background: #fff;
    border: 1px solid var(--km-ref-slate-200);
    border-left: 5px solid var(--cat-color);
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    display: flex;
    flex-direction: column;
}

.km-ref-grid__item:hover {
    box-shadow: var(--km-ref-shadow-md);
    border-color: rgba(79, 70, 229, 0.2);
    border-left-color: var(--cat-color);
    transform: translateY(-2px);
}

.km-ref-grid__item[hidden],
.km-ref-grid__item[style*="display: none"] {
    display: none !important;
}

/* -- Top section: white bg ------------------------------------------------ */

.km-ref-grid__item-top {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--km-ref-slate-100);
    background: #fff;
}

.km-ref-grid__item-content {
    flex: 1;
    min-width: 0;
}

/* Badges row inside top */
.km-ref-grid__item-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

/* Title */
.km-ref-grid__item-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.4;
    color: var(--km-ref-slate-900);
}

.km-ref-grid__item-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
}

.km-ref-grid__item:hover .km-ref-grid__item-title a {
    color: var(--km-ref-primary);
}

/* Description / Excerpt */
.km-ref-grid__item-excerpt {
    font-size: 14px;
    color: var(--km-ref-slate-500);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -- Bottom section: slate-50 bg ------------------------------------------ */

.km-ref-grid__item-bottom {
    background: var(--km-ref-slate-50);
    padding: 16px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
}

/* ==========================================================================
   Badges (Status + Difficulty + Domain)
   ========================================================================== */

.km-ref-grid__badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    white-space: nowrap;
}

/* Status badges */
.km-ref-grid__badge--pro {
    background: #fee2e2;
    color: #dc2626;
}

.km-ref-grid__badge--free {
    background: #ecfdf5;
    color: #047857;
}

.km-ref-grid__badge--official {
    background: #dbeafe;
    color: #1d4ed8;
}

.km-ref-grid__badge--open-source {
    background: #f0fdf4;
    color: #166534;
}

/* Domain badge */
.km-ref-grid__badge--domain {
    background: #f0f9ff;
    color: #0284c7;
}

/* Difficulty badges */
.km-ref-grid__badge--beginner {
    background: #ecfdf5;
    color: #047857;
}

.km-ref-grid__badge--intermediate {
    background: #fffbeb;
    color: #b45309;
}

.km-ref-grid__badge--advanced {
    background: #fef2f2;
    color: #b91c1c;
}

/* ==========================================================================
   Code Block (script/expression cards) — Light theme
   ========================================================================== */

.km-ref-grid__item-code {
    position: relative;
    font-size: 13px;
    background: transparent;
    color: var(--km-ref-slate-800);
    padding: 0;
    border-radius: 0;
    overflow-x: auto;
    font-family: var(--km-ref-mono);
    margin: 0;
    line-height: 1.5;
    white-space: pre;
    max-height: 80px;
}

.km-ref-grid__item-code code {
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    background: transparent;
    padding: 0;
}

/* Syntax highlight classes for code in grid cards */
.km-ref-grid__item-code .kw   { color: #4f46e5; font-weight: 500; }
.km-ref-grid__item-code .fn   { color: #0d9488; }
.km-ref-grid__item-code .str  { color: #1d4ed8; }
.km-ref-grid__item-code .num  { color: #166534; }
.km-ref-grid__item-code .cm   { color: #64748b; font-style: italic; }

/* Copy button in code area */
.km-ref-grid__item-copy {
    position: absolute;
    top: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--km-ref-slate-200);
    box-shadow: var(--km-ref-shadow-sm);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-family: var(--km-ref-font);
    color: var(--km-ref-slate-400);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}

.km-ref-grid__item-bottom:hover .km-ref-grid__item-copy {
    opacity: 1;
}

.km-ref-grid__item-copy:hover {
    background: var(--km-ref-primary-light);
    color: var(--km-ref-primary);
    border-color: rgba(79, 70, 229, 0.2);
}

.km-ref-grid__item-copy--copied {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border-color: #a7f3d0 !important;
    opacity: 1 !important;
}

/* ==========================================================================
   Extension Meta (vendor + tags) — in bottom section
   ========================================================================== */

.km-ref-grid__item-vendor {
    font-size: 11px;
    color: var(--km-ref-slate-500);
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

.km-ref-grid__item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.km-ref-grid__item-tag {
    display: inline-block;
    font-size: 11px;
    padding: 3px 8px;
    background: var(--km-ref-slate-100);
    color: var(--km-ref-slate-600);
    border-radius: 999px;
    font-weight: 500;
    white-space: nowrap;
}

/* ==========================================================================
   Card Link
   ========================================================================== */

.km-ref-grid__item-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--km-ref-primary);
    text-decoration: none;
    margin-top: 12px;
    transition: color 0.15s, gap 0.15s;
}

.km-ref-grid__item-link:hover {
    color: #3730a3;
    gap: 8px;
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.km-ref-grid__empty {
    text-align: center;
    padding: 64px 24px;
    background: #fff;
    border-radius: 16px;
    border: 2px dashed var(--km-ref-slate-200);
    grid-column: 1 / -1;
}

.km-ref-grid__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--km-ref-slate-100);
    color: var(--km-ref-slate-400);
    font-size: 28px;
    margin-bottom: 16px;
}

.km-ref-grid__empty h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--km-ref-slate-900);
    margin: 0 0 4px;
}

.km-ref-grid__empty p {
    font-size: 14px;
    color: var(--km-ref-slate-500);
    margin: 0 0 20px;
}

.km-ref-grid__empty-reset {
    display: inline-block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background: var(--km-ref-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    font-family: var(--km-ref-font);
}

.km-ref-grid__empty-reset:hover {
    background: #3730a3;
}

/* ==========================================================================
   Reference Card (Single Post Detail)
   ========================================================================== */

.km-ref-card {
    background: #fff;
    border: 1px solid var(--km-ref-slate-200, #e5e7eb);
    border-left: 5px solid var(--km-ref-slate-300, #d1d5db);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: var(--km-ref-shadow-sm);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.km-ref-card--script     { border-left-color: #10b981; }
.km-ref-card--expression { border-left-color: #3b82f6; }
.km-ref-card--extension  { border-left-color: #8b5cf6; }

.km-ref-card__header {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.km-ref-card__badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
}

.km-ref-card__badge--script     { background: #ecfdf5; color: #065f46; }
.km-ref-card__badge--expression { background: #eff6ff; color: #1e40af; }
.km-ref-card__badge--extension  { background: #f5f3ff; color: #5b21b6; }
.km-ref-card__badge--free       { background: #ecfdf5; color: #065f46; }
.km-ref-card__badge--pro        { background: #fee2e2; color: #dc2626; }
.km-ref-card__badge--official   { background: #dbeafe; color: #1d4ed8; }
.km-ref-card__badge--open-source { background: #f0fdf4; color: #166534; }

.km-ref-card__difficulty {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
}

.km-ref-card__difficulty--beginner     { background: #ecfdf5; color: #047857; }
.km-ref-card__difficulty--intermediate { background: #fffbeb; color: #b45309; }
.km-ref-card__difficulty--advanced     { background: #fef2f2; color: #b91c1c; }

.km-ref-card__version {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.km-ref-card__section {
    margin-bottom: 16px;
    position: relative;
}

.km-ref-card__label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    margin-bottom: 8px;
    display: block;
}

.km-ref-card__code {
    background: var(--km-ref-slate-50, #f8fafc);
    color: var(--km-ref-slate-800, #1e293b);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--km-ref-slate-100, #f1f5f9);
    overflow-x: auto;
    font-family: 'Fira Code', 'Cascadia Code', Consolas, 'Monaco', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.km-ref-card__code code {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: transparent;
    padding: 0;
}

/* Syntax highlighting in detail code blocks */
.km-ref-card__code .kw   { color: #4f46e5; font-weight: 500; }
.km-ref-card__code .fn   { color: #0d9488; }
.km-ref-card__code .str  { color: #1d4ed8; }
.km-ref-card__code .num  { color: #166534; }
.km-ref-card__code .cm   { color: #64748b; font-style: italic; }
.km-ref-card__code .var  { color: #d97706; }
.km-ref-card__code .op   { color: #be185d; }

.km-ref-card__copy {
    position: absolute;
    top: 36px;
    right: 8px;
    font-size: 12px;
    background: #fff;
    color: var(--km-ref-slate-400, #94a3b8);
    border: 1px solid var(--km-ref-slate-200, #e2e8f0);
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    box-shadow: var(--km-ref-shadow-sm);
}

.km-ref-card__copy:hover {
    background: var(--km-ref-primary-light, #eef2ff);
    color: var(--km-ref-primary, #4f46e5);
    border-color: rgba(79, 70, 229, 0.2);
}

.km-ref-card__copy:active,
.km-ref-card__copy--copied {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border-color: #a7f3d0 !important;
}

.km-ref-card__related {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.km-ref-card__related-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.km-ref-card__related-link {
    font-size: 14px;
    color: #059669;
    text-decoration: none;
    padding: 4px 12px;
    background: #ecfdf5;
    border-radius: 6px;
    font-weight: 500;
    transition: background 0.2s;
}

.km-ref-card__related-link:hover { background: #d1fae5; color: #047857; }

.km-ref-card__ext-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: #8b5cf6;
    text-decoration: none;
    margin-bottom: 12px;
    transition: color 0.2s;
}

.km-ref-card__ext-link:hover { color: #7c3aed; }

.km-ref-card__vendor {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 8px;
}

.km-ref-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.km-ref-card__tag {
    font-size: 12px;
    padding: 3px 10px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 999px;
    font-weight: 500;
}

.km-ref-card--embed {
    padding: 16px;
    margin: 0;
    border-radius: 12px;
}

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

@media (max-width: 1024px) {
    .km-ref-grid__cards {
        --km-ref-cols: 2;
    }
}

@media (max-width: 768px) {
    .km-ref-grid__layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .km-ref-grid__sidebar {
        flex-direction: row;
        overflow-x: auto;
        gap: 0;
        position: static;
        padding: 8px;
        -webkit-overflow-scrolling: touch;
    }

    .km-ref-grid__filter {
        flex-shrink: 0;
        padding: 8px 14px;
        border-radius: 8px;
    }

    .km-ref-grid__toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .km-ref-grid__search {
        max-width: none;
    }

    .km-ref-grid__count {
        text-align: center;
    }
}

@media (max-width: 640px) {
    .km-ref-grid__cards {
        --km-ref-cols: 1;
    }

    .km-ref-grid__item-top {
        padding: 16px 16px 12px;
    }

    .km-ref-grid__item-bottom {
        padding: 12px 16px;
    }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
    .km-ref-grid__toolbar,
    .km-ref-grid__sidebar,
    .km-ref-card__copy,
    .km-ref-grid__item-copy {
        display: none;
    }

    .km-ref-grid__layout {
        grid-template-columns: 1fr;
    }

    .km-ref-grid__cards {
        grid-template-columns: 1fr;
    }

    .km-ref-grid__item,
    .km-ref-card {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #d1d5db;
    }

    .km-ref-grid__item:hover { transform: none; }

    .km-ref-card__code {
        border: 1px solid #e5e7eb;
    }
}