/* =====================================================================
   Finorova — Documentation Stylesheet
   Matches the dashboard design tokens (Plus Jakarta Sans, emerald-teal
   brand, refined neutral palette). Dark mode via [data-theme="dark"].
   ===================================================================== */

/* ---------------------------------------------------------------------
   Design tokens
   --------------------------------------------------------------------- */
:root {
    --fh-font-sans: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --fh-font-mono: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* Brand */
    --fh-brand:        #0fa68a;
    --fh-brand-700:    #0c8a72;
    --fh-brand-softmid:#c4e7de;
    --fh-brand-soft:   #e6f5f1;
    --fh-brand-softer: #f1faf7;

    /* Ink */
    --fh-ink-900: #1b1f2a;
    --fh-ink-700: #424a5c;
    --fh-ink-500: #6b7488;
    --fh-ink-400: #8e96a8;
    --fh-ink-300: #b6bcc9;
    --fh-line:    #e8eaf0;

    /* Surfaces */
    --fh-surface:  #f5f8fb;
    --fh-card:     #ffffff;
    --fh-card-alt: #fafbfc;
    --fh-hover:    #f4f6fa;

    /* Semantic accents */
    --fh-info:      #607cbb;
    --fh-info-soft: #eef0f6;
    --fh-warn:      #b89968;
    --fh-warn-soft: #f5efe2;
    --fh-neg:       #b27a78;
    --fh-neg-soft:  #f4ecea;
    --fh-pos:       #549677;
    --fh-pos-soft:  #ecfaf5;

    /* Layout */
    --fh-sidebar-w: 280px;
    --fh-header-h:  64px;
}

[data-theme="dark"] {
    --fh-brand:        #2bc29c;
    --fh-brand-700:    #34d4ac;
    --fh-brand-soft:   rgba(43, 194, 156, 0.16);
    --fh-brand-softer: rgba(43, 194, 156, 0.08);

    --fh-ink-900: #e6e9f1;
    --fh-ink-700: #b6bcc9;
    --fh-ink-500: #8c93a4;
    --fh-ink-400: #6f7689;
    --fh-ink-300: #4d5568;
    --fh-line:    #2b3142;

    --fh-surface:  #0f1419;
    --fh-card:     #1a1f2b;
    --fh-card-alt: #232938;
    --fh-hover:    #232938;

    --fh-info-soft: rgba(96, 124, 187, 0.18);
    --fh-warn-soft: rgba(184, 153, 104, 0.18);
    --fh-neg-soft:  rgba(178, 122, 120, 0.18);
    --fh-pos-soft:  rgba(84, 150, 119, 0.18);
}

/* ---------------------------------------------------------------------
   Base typography
   --------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--fh-header-h) + 16px); }

body {
    font-family: var(--fh-font-sans);
    font-size: 15px;
    line-height: 1.65;
    color: var(--fh-ink-700);
    background-color: var(--fh-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
    transition: background-color 0.2s ease, color 0.2s ease;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fh-font-sans);
    color: var(--fh-ink-900);
    font-weight: 700;
    letter-spacing: -0.018em;
    line-height: 1.25;
}

h1 { font-size: 2rem; font-weight: 800; letter-spacing: -0.025em; margin: 0 0 0.75rem; }
h2 { font-size: 1.5rem; margin: 2.5rem 0 0.75rem; padding-top: 0.5rem; }
h3 { font-size: 1.15rem; margin: 1.75rem 0 0.5rem; }
h4 { font-size: 1rem; margin: 1.25rem 0 0.5rem; }

p { margin: 0 0 1rem; }
strong { color: var(--fh-ink-900); font-weight: 600; }
a { color: var(--fh-brand); text-decoration: none; }
a:hover { color: var(--fh-brand-700); text-decoration: underline; }

ul, ol { padding-left: 1.25rem; margin: 0 0 1rem; }
li { margin-bottom: 0.35rem; }

/* ---------------------------------------------------------------------
   Top header
   --------------------------------------------------------------------- */
.doc-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--fh-header-h);
    background-color: var(--fh-card);
    border-bottom: 1px solid var(--fh-line);
    z-index: 1030;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.doc-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--fh-ink-900);
    text-decoration: none;
    letter-spacing: -0.018em;
}
.doc-brand:hover { color: var(--fh-brand); text-decoration: none; }
.doc-brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.doc-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.doc-version {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.15rem 0.5rem;
    background: var(--fh-brand-soft);
    color: var(--fh-brand-700);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.doc-header-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }

.doc-search {
    position: relative;
    width: 260px;
}
.doc-search input {
    width: 100%;
    height: 36px;
    padding: 0 0.75rem 0 2rem;
    border: 1px solid var(--fh-line);
    border-radius: 0.5rem;
    background-color: var(--fh-card-alt);
    color: var(--fh-ink-900);
    font-family: inherit;
    font-size: 0.85rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
}
.doc-search input::placeholder { color: var(--fh-ink-400); }
.doc-search input:focus {
    outline: none;
    border-color: var(--fh-brand);
    box-shadow: 0 0 0 3px var(--fh-brand-soft);
}
.doc-search-icon {
    position: absolute;
    top: 50%;
    left: 0.6rem;
    transform: translateY(-50%);
    color: var(--fh-ink-400);
    font-size: 0.95rem;
    pointer-events: none;
}

.theme-toggle {
    background: transparent;
    border: 1px solid var(--fh-line);
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fh-ink-500);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    padding: 0;
}
.theme-toggle:hover {
    background-color: var(--fh-hover);
    color: var(--fh-ink-900);
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline-block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; color: #f5c97a; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.sidebar-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--fh-line);
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    align-items: center;
    justify-content: center;
    color: var(--fh-ink-700);
    cursor: pointer;
    margin-right: 0.5rem;
    padding: 0;
}

/* ---------------------------------------------------------------------
   Layout — sidebar + content
   --------------------------------------------------------------------- */
.doc-layout {
    display: flex;
    padding-top: var(--fh-header-h);
    min-height: 100vh;
}

.doc-sidebar {
    width: var(--fh-sidebar-w);
    flex-shrink: 0;
    position: fixed;
    top: var(--fh-header-h);
    left: 0;
    bottom: 0;
    z-index: 1025;
    background-color: var(--fh-card);
    border-right: 1px solid var(--fh-line);
    overflow-y: auto;
    padding: 1.5rem 1rem 2rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.25s ease;
}

.doc-sidebar::-webkit-scrollbar { width: 6px; }
.doc-sidebar::-webkit-scrollbar-track { background: transparent; }
.doc-sidebar::-webkit-scrollbar-thumb { background: var(--fh-line); border-radius: 3px; }

.sidebar-section { margin-bottom: 1.25rem; }
.sidebar-heading {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fh-ink-500);
    padding: 0.5rem 0.75rem 0.4rem;
    margin: 0;
}

.sidebar-nav { list-style: none; padding: 0; margin: 0; }
.sidebar-nav li { margin-bottom: 2px; }
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--fh-ink-700);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    position: relative;
}
.sidebar-link i {
    color: var(--fh-ink-400);
    font-size: 1rem;
    width: 18px;
    text-align: center;
    transition: color 0.15s ease;
}
.sidebar-link:hover {
    background-color: var(--fh-brand-softer);
    color: var(--fh-brand-700);
    text-decoration: none;
}
.sidebar-link:hover i { color: var(--fh-brand); }
.sidebar-link.active {
    background-color: var(--fh-brand-soft);
    color: var(--fh-brand-700);
    font-weight: 600;
}
.sidebar-link.active i { color: var(--fh-brand); }

.sidebar-group-trigger {
    cursor: pointer;
    justify-content: space-between;
}
.sidebar-group-trigger > span {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}
.sidebar-group-trigger .chevron {
    margin-left: auto;
    color: var(--fh-ink-400);
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}
.sidebar-group-trigger.expanded .chevron { transform: rotate(90deg); }

.sidebar-submenu {
    list-style: none;
    padding-left: 1.7rem;
    margin: 4px 0 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease;
}
.sidebar-submenu.expanded { max-height: 600px; }
.sidebar-submenu .sidebar-link {
    padding: 0.4rem 0.6rem;
    font-size: 0.82rem;
    color: var(--fh-ink-500);
}
.sidebar-submenu .sidebar-link:hover { color: var(--fh-brand-700); }
.sidebar-submenu .sidebar-link.active { color: var(--fh-brand-700); background-color: var(--fh-brand-softer); }

/* ---------------------------------------------------------------------
   Main content
   --------------------------------------------------------------------- */
.doc-content {
    flex: 1;
    margin-left: var(--fh-sidebar-w);
    padding: 2.5rem 3rem 4rem;
    width: 80%;
    max-width: none;
}

.doc-hero {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--fh-line);
}
.doc-eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fh-brand);
    margin-bottom: 0.5rem;
}
.doc-lead {
    font-size: 1.05rem;
    color: var(--fh-ink-500);
    max-width: 640px;
    line-height: 1.6;
}

.doc-section { scroll-margin-top: calc(var(--fh-header-h) + 16px); }
.doc-section h2 {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--fh-line);
}

/* Feature row — alternating layout */
.feature-row {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 1.75rem 0;
    padding: 1.5rem;
    background-color: var(--fh-card);
    border: 1px solid var(--fh-line);
    border-radius: 0.75rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.feature-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(27, 31, 42, 0.06);
}
[data-theme="dark"] .feature-row:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); }

.feature-row.reverse { flex-direction: row-reverse; }

.feature-text { flex: 1 1 55%; min-width: 0; }
.feature-text h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--fh-ink-900);
}
.feature-text h3 i {
    color: var(--fh-brand);
    font-size: 1.1rem;
}
.feature-text p { color: var(--fh-ink-500); margin-bottom: 0; font-size: 0.92rem; }

.feature-media {
    flex: 1 1 65%;
    /* aspect-ratio: 16 / 10; */
    background-color: var(--fh-card-alt);
    border: 1px dashed var(--fh-line);
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fh-ink-400);
    font-size: 0.8rem;
    overflow: hidden;
}
.feature-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.feature-media .placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}
.feature-media .placeholder i { font-size: 1.6rem; color: var(--fh-ink-300); }

/* Sub-feature list (e.g. Reports → Revenue / User Growth / etc.) */
.sub-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
}
.sub-list li {
    background: var(--fh-card-alt);
    border: 1px solid var(--fh-line);
    border-radius: 0.5rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.82rem;
    color: var(--fh-ink-700);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}
.sub-list li i { color: var(--fh-brand); font-size: 0.9rem; }

/* ---------------------------------------------------------------------
   Requirement grid (PHP extensions list)
   --------------------------------------------------------------------- */
.req-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.6rem;
    list-style: none;
    padding: 0;
    margin: 1rem 0 1.5rem;
}
.req-grid li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--fh-card);
    border: 1px solid var(--fh-line);
    border-radius: 0.5rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.85rem;
    font-family: var(--fh-font-mono);
    color: var(--fh-ink-700);
    margin: 0;
}
.req-grid li i {
    color: var(--fh-pos);
    font-size: 0.95rem;
}

/* ---------------------------------------------------------------------
   Numbered install steps
   --------------------------------------------------------------------- */
.install-step {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    margin: 1rem 0;
    background-color: var(--fh-card);
    border: 1px solid var(--fh-line);
    border-radius: 0.75rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.install-step-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fh-brand-soft);
    color: var(--fh-brand-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}
.install-step-body { flex: 1; min-width: 0; }
.install-step-body h4 {
    margin-top: 0.15rem;
    margin-bottom: 0.5rem;
    color: var(--fh-ink-900);
    font-size: 1rem;
    font-weight: 700;
}
.install-step-body p:last-child { margin-bottom: 0; }
.install-step-body ul,
.install-step-body ol { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   Callouts
   --------------------------------------------------------------------- */
.callout {
    padding: 1rem 1.15rem;
    margin: 1.25rem 0;
    border-left: 3px solid;
    border-radius: 0.5rem;
    font-size: 0.92rem;
}
.callout-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
}
.callout p:last-child { margin-bottom: 0; }
.callout-tip {
    background-color: var(--fh-brand-soft);
    border: 2px solid var(--fh-brand-softmid);
    color: var(--fh-ink-700);
}
.callout-tip .callout-title { color: var(--fh-brand-700); }
.callout-note {
    background-color: var(--fh-info-soft);
    border: 2px solid var(--fh-info);
    color: var(--fh-ink-700);
}
.callout-note .callout-title { color: var(--fh-info); }
.callout-warning {
    background-color: var(--fh-warn-soft);
    border: 2px solid var(--fh-warn);
    color: var(--fh-ink-700);
}
.callout-warning .callout-title { color: var(--fh-warn); }

/* ---------------------------------------------------------------------
   Code blocks + copy button
   --------------------------------------------------------------------- */
.code-block {
    position: relative;
    margin: 1.25rem 0;
}
.code-block pre {
    margin: 0;
    padding: 1rem 1.15rem;
    background-color: #1b1f2a;
    color: #e6e9f1;
    border-radius: 0.6rem;
    overflow-x: auto;
    font-family: var(--fh-font-mono);
    font-size: 0.85rem;
    line-height: 1.6;
}
[data-theme="dark"] .code-block pre {
    background-color: #0f1419;
    border: 1px solid var(--fh-line);
}
.code-copy {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(255, 255, 255, 0.08);
    border: 0;
    color: #c0c6d3;
    padding: 0.3rem 0.55rem;
    border-radius: 0.35rem;
    cursor: pointer;
    font-size: 0.75rem;
    font-family: inherit;
    transition: background-color 0.15s ease;
}
.code-copy:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.code-copy.copied { background: var(--fh-brand); color: #fff; }

code:not(pre code) {
    background-color: var(--fh-card-alt);
    border: 1px solid var(--fh-line);
    color: var(--fh-brand-700);
    padding: 0.1rem 0.4rem;
    border-radius: 0.3rem;
    font-family: var(--fh-font-mono);
    font-size: 0.85em;
}
[data-theme="dark"] code:not(pre code) { color: var(--fh-brand); }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.doc-footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--fh-line);
    color: var(--fh-ink-500);
    font-size: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
}

/* ---------------------------------------------------------------------
   Search hide/show
   --------------------------------------------------------------------- */
.sidebar-link.hidden, .sidebar-section.hidden { display: none; }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .doc-search { width: 180px; }
    .doc-content { padding: 2rem 1.5rem 3rem; }
}

@media (max-width: 767.98px) {
    .sidebar-toggle { display: inline-flex; }
    .doc-search { display: none; }

    .doc-sidebar {
        transform: translateX(-100%);
        box-shadow: 6px 0 24px rgba(0, 0, 0, 0.18);
        width: 280px;
    }
    .doc-sidebar.open { transform: translateX(0); }
    .doc-content { margin-left: 0; padding: 1.5rem 1.15rem 2.5rem; }

    .feature-row { flex-direction: column; align-items: stretch; gap: 1.15rem; }
    .feature-row.reverse { flex-direction: column; }
    .feature-media { aspect-ratio: 16 / 9; }

    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.25rem; }
}

/* ---------------------------------------------------------------------
   Screenshot figures inside feature rows
   --------------------------------------------------------------------- */
.doc-screenshot {
    margin: 0;
    width: 100%;
}
.doc-screenshot img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.45rem;
}
/* Override the generic feature-media img rule for real screenshots */
.feature-media .doc-screenshot img {
    object-fit: initial;
    height: auto;
}
.doc-screenshot figcaption {
    font-size: 0.76rem;
    color: var(--fh-ink-400);
    text-align: center;
    padding: 0.4rem 0.6rem 0.1rem;
    font-style: italic;
}

/* ---------------------------------------------------------------------
   Backdrop when mobile sidebar open */
.sidebar-backdrop {
    display: none;
    position: fixed;
    top: var(--fh-header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 20, 25, 0.5);
    z-index: 1020;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.sidebar-backdrop.show { display: block; opacity: 1; }