/* =========================================================================
 * GoneSheet — enhancements.css
 * Formula autocomplete, name box / formula bar, grid polish, dark mode,
 * and responsive tweaks. Loaded AFTER main.css so it can refine things.
 * ====================================================================== */

:root {
    --gs-accent: #5a67d8;
    --gs-accent-soft: rgba(90, 103, 216, 0.10);
    --gs-accent-softer: rgba(90, 103, 216, 0.06);
    --gs-border: #e2e4ea;
}

/* ===================================================================== *
 * Formula bar : name box + fx + input  (Excel-style)
 * ===================================================================== */
#formula-bar {
    gap: 8px;
}

#name-box {
    width: 92px;
    flex: 0 0 auto;
    padding: 6px 8px;
    font-size: 13px;
    text-align: center;
    font-weight: 600;
    color: #333;
    border: 1px solid var(--gs-border);
    border-radius: 6px;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#name-box:focus {
    outline: none;
    border-color: var(--gs-accent);
    box-shadow: 0 0 0 3px var(--gs-accent-soft);
}

#fx-btn {
    flex: 0 0 auto;
    width: 34px;
    height: 30px;
    border: 1px solid var(--gs-border);
    border-radius: 6px;
    background: #fff;
    color: var(--gs-accent);
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

#fx-btn:hover {
    background: var(--gs-accent);
    color: #fff;
    border-color: var(--gs-accent);
    transform: translateY(-1px);
}

#formula-input {
    border-radius: 6px;
    padding: 6px 10px;
}

/* ===================================================================== *
 * Function autocomplete dropdown
 * ===================================================================== */
.fa-dropdown {
    position: fixed;
    z-index: 10050;
    min-width: 320px;
    max-width: 440px;
    max-height: 288px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--gs-border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(20, 20, 50, 0.18);
    padding: 4px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    animation: fa-pop 0.12s ease-out;
}

@keyframes fa-pop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fa-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}

.fa-item:hover { background: var(--gs-accent-softer); }
.fa-item.fa-active { background: var(--gs-accent-soft); }

.fa-tag {
    flex: 0 0 auto;
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: #bbb;
}
.fa-tag-math   { background: #5a67d8; }
.fa-tag-stat   { background: #2f9e7e; }
.fa-tag-logic  { background: #d97706; }
.fa-tag-text   { background: #c026d3; }
.fa-tag-lookup { background: #0ea5e9; }
.fa-tag-date   { background: #e11d48; }
.fa-tag-info   { background: #64748b; }
.fa-tag-fin    { background: #65a30d; }

.fa-name {
    flex: 0 0 auto;
    width: 122px;
    font-family: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    color: #555;
}
.fa-name b { color: var(--gs-accent); font-weight: 700; }

.fa-desc {
    flex: 1 1 auto;
    font-size: 12px;
    color: #777;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Argument / signature hint */
.fa-hint {
    position: fixed;
    z-index: 10050;
    max-width: 460px;
    background: #2b2d3a;
    color: #f4f4f8;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    font-family: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.5;
    animation: fa-pop 0.12s ease-out;
}
.fa-hint-name { color: #9aa6ff; font-weight: 700; }
.fa-hint-arg {
    color: #ffd66b;
    font-weight: 700;
    border-bottom: 2px solid #ffd66b;
}
.fa-hint-desc {
    display: block;
    margin-top: 4px;
    color: #b9bccb;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
}

/* ===================================================================== *
 * Header : theme toggle
 * ===================================================================== */
#theme-toggle {
    cursor: pointer;
    font-size: 22px;
    color: #555;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#theme-toggle:hover {
    color: var(--gs-accent);
    background: var(--gs-accent-soft);
    transform: rotate(-15deg);
}

/* ===================================================================== *
 * Toolbar polish
 * ===================================================================== */
.jexcel_toolbar {
    align-items: center;
    gap: 1px;
}
.jexcel_toolbar > .jexcel_toolbar_item,
.jexcel_toolbar > i {
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.jexcel_toolbar > i:hover {
    background: var(--gs-accent-soft);
    color: var(--gs-accent);
}
.jexcel_toolbar_divisor {
    border-left: 1px solid var(--gs-border);
    margin: 0 6px;
    height: 22px;
}

/* ===================================================================== *
 * Grid polish (light)
 * ===================================================================== */
.jexcel > thead > tr > td {
    background: linear-gradient(to bottom, #f7f8fc, #eef0f6);
    color: #4a4a5a;
    font-weight: 600;
    border-color: var(--gs-border) !important;
}
.jexcel > tbody > tr > td:first-child {
    background: linear-gradient(to right, #f7f8fc, #eef0f6);
    color: #6a6a7a;
    font-weight: 600;
    border-color: var(--gs-border) !important;
}
.jexcel > tbody > tr > td {
    border-color: #eceef3;
    transition: background 0.05s;
}

/* selection accent */
.jexcel > tbody > tr > td.highlight        { background-color: var(--gs-accent-softer) !important; }
.jexcel > tbody > tr > td.highlight-selected { background-color: var(--gs-accent-soft) !important; }
.jexcel > tbody > tr > td.highlight-top    { border-top-color: var(--gs-accent) !important; }
.jexcel > tbody > tr > td.highlight-left   { border-left-color: var(--gs-accent) !important; }
.jexcel > tbody > tr > td.highlight-right  { border-right-color: var(--gs-accent) !important; }
.jexcel > tbody > tr > td.highlight-bottom { border-bottom-color: var(--gs-accent) !important; }

/* highlighted header when its column/row is selected */
.jexcel > thead > tr > td.selected,
.jexcel > tbody > tr > td:first-child.selected {
    background: linear-gradient(to bottom, #e7e9fb, #dfe2f7);
    color: var(--gs-accent);
}

/* fill-handle / corner */
.jexcel_corner { background-color: var(--gs-accent) !important; }

/* built-in search box (search: true) */
.jexcel_filter input,
.jexcel_search {
    border: 1px solid var(--gs-border) !important;
    border-radius: 6px !important;
    padding: 5px 8px !important;
}

/* ===================================================================== *
 * DARK MODE
 * ===================================================================== */
[data-theme="dark"] {
    --gs-border: #3a3a46;
}

[data-theme="dark"] body { background-color: #16161c; color: #e6e6ee; }

[data-theme="dark"] header {
    background: linear-gradient(to bottom, #1e1e26, #1a1a22) !important;
    box-shadow: 0 1px 0 #2a2a33;
}
[data-theme="dark"] .header-left h1 { color: #e6e6ee; }
[data-theme="dark"] #theme-toggle { color: #c7c7d6; }

[data-theme="dark"] #toolbar-container,
[data-theme="dark"] .jexcel_toolbar {
    background: linear-gradient(to bottom, #1f1f28, #1a1a22) !important;
    border-bottom: 1px solid #2a2a33;
    color: #d6d6e2;
}
[data-theme="dark"] .jexcel_toolbar > i { color: #c7c7d6; }
[data-theme="dark"] .jexcel_toolbar > i:hover { background: rgba(154, 166, 255, 0.16); color: #9aa6ff; }
[data-theme="dark"] .jexcel_toolbar select {
    background: #25252f; color: #e6e6ee; border: 1px solid #3a3a46;
}

[data-theme="dark"] #formula-bar {
    background: linear-gradient(to right, #1c1c24, #20202a) !important;
    border-bottom: 1px solid #2a2a33;
}
[data-theme="dark"] #name-box,
[data-theme="dark"] #fx-btn,
[data-theme="dark"] #formula-input {
    background: #25252f;
    color: #e6e6ee;
    border-color: #3a3a46;
}
[data-theme="dark"] #fx-btn { color: #9aa6ff; }
[data-theme="dark"] #fx-btn:hover { background: #9aa6ff; color: #1a1a22; }
[data-theme="dark"] #formula-input::placeholder { color: #75758a; }

/* grid */
[data-theme="dark"] .jexcel_content { background: #16161c; }
[data-theme="dark"] .jexcel > tbody > tr > td {
    background-color: #1d1d25;
    color: #e3e3ee;
    border-color: #2c2c37 !important;
}
[data-theme="dark"] .jexcel > thead > tr > td {
    background: linear-gradient(to bottom, #262630, #20202a);
    color: #b9b9cc;
    border-color: #33333f !important;
}
[data-theme="dark"] .jexcel > tbody > tr > td:first-child {
    background: linear-gradient(to right, #262630, #20202a);
    color: #9a9ab0;
    border-color: #33333f !important;
}
[data-theme="dark"] .jexcel > tbody > tr > td.highlight        { background-color: rgba(154, 166, 255, 0.10) !important; }
[data-theme="dark"] .jexcel > tbody > tr > td.highlight-selected { background-color: rgba(154, 166, 255, 0.18) !important; }
[data-theme="dark"] .jexcel_textarea {
    background: #25252f !important;
    color: #ffffff !important;
}

/* search / context menu / autocomplete on dark */
[data-theme="dark"] .jexcel_search { background: #25252f !important; color: #e6e6ee !important; }
[data-theme="dark"] .jexcel_contextmenu {
    background: #25252f !important; color: #e6e6ee !important; border-color: #3a3a46 !important;
}
[data-theme="dark"] .jexcel_contextmenu a { color: #e6e6ee !important; }

[data-theme="dark"] .fa-dropdown {
    background: #25252f;
    border-color: #3a3a46;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .fa-item:hover { background: rgba(154, 166, 255, 0.12); }
[data-theme="dark"] .fa-item.fa-active { background: rgba(154, 166, 255, 0.20); }
[data-theme="dark"] .fa-name { color: #c7c7d6; }
[data-theme="dark"] .fa-name b { color: #9aa6ff; }
[data-theme="dark"] .fa-desc { color: #9a9ab0; }

/* modal on dark */
[data-theme="dark"] .modal-content { background: #20202a !important; color: #e6e6ee; }
[data-theme="dark"] .modal-content h2 { color: #9aa6ff; }
[data-theme="dark"] .modal-content code { background: rgba(154, 166, 255, 0.15); color: #cdd2ff; }
[data-theme="dark"] .close { background: rgba(255, 255, 255, 0.08); color: #e6e6ee; }

/* ===================================================================== *
 * Toast action button
 * ===================================================================== */
.toast { display: flex; align-items: center; gap: 12px; }
.toast-action {
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.toast-action:hover { background: rgba(255, 255, 255, 0.35); }

/* ===================================================================== *
 * Tip / support modal  (theme-agnostic: gradient button + opacity muting)
 * ===================================================================== */
.tip-modal-content { text-align: center; max-width: 470px; }
.tip-emoji {
    font-size: 56px;
    margin-top: 6px;
    line-height: 1;
    animation: tip-bob 2.6s ease-in-out infinite;
}
@keyframes tip-bob {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50%      { transform: translateY(-7px) rotate(5deg); }
}
.tip-modal-content p { line-height: 1.55; }
.tip-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 22px 0 6px;
}
.tip-button {
    display: inline-block;
    padding: 13px 30px;
    border-radius: 30px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(102, 126, 234, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}
.tip-button::after { display: none !important; }   /* kill global a::after underline */
.tip-button:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 10px 26px rgba(102, 126, 234, 0.5);
    color: #fff !important;
}
.tip-later {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.55;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    padding: 2px 6px;
}
.tip-later:hover { opacity: 0.9; }
.tip-fineprint { font-size: 12px; opacity: 0.6; margin-top: 10px; }

/* ===================================================================== *
 * Custom search box (replaces JSpreadsheet's floating filter band)
 * ===================================================================== */
.jexcel_filter { display: none !important; }   /* hide the awkward built-in band */

#search-box {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    width: 210px;
    padding: 0 8px;
    border: 1px solid var(--gs-border);
    border-radius: 6px;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}
#search-box:focus-within {
    border-color: var(--gs-accent);
    box-shadow: 0 0 0 3px var(--gs-accent-soft);
}
#search-box .material-icons { font-size: 18px; color: #9aa0ad; }
#grid-search {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 6px 0;
    font-size: 13px;
    color: #333;
}

/* Logo: invert the black icon to white in dark mode so it stays visible */
[data-theme="dark"] header img {
    filter: invert(1) brightness(1.1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) !important;
}

/* Search box on dark */
[data-theme="dark"] #search-box { background: #25252f; border-color: #3a3a46; }
[data-theme="dark"] #search-box .material-icons { color: #75758a; }
[data-theme="dark"] #grid-search { color: #e6e6ee; }
[data-theme="dark"] #grid-search::placeholder { color: #75758a; }

/* ===================================================================== *
 * Responsive  (mobile / touch)
 * --------------------------------------------------------------------- *
 * Everything below is scoped to small / touch screens. The desktop
 * layout is dialed in and is intentionally left untouched.
 * ===================================================================== */
@media (max-width: 768px) {
    /* Stop iOS from auto-zooming on input focus, and never let the whole
       document scroll sideways. */
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    html, body { overflow-x: hidden; }

    /* --- App shell --------------------------------------------------- *
     * Mobile browsers lie about 100vh (the URL bar steals space), so the
     * old `height: calc(100vh - 60px)` on #container pushed the bottom
     * rows off-screen. Fill the real viewport via the flex column instead
     * and pass a definite height down to the grid. */
    #app { height: 100vh; height: 100dvh; }
    #container {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    /* The placeholder toolbar div is empty/dead — reclaim its strip. */
    #toolbar-container:empty { display: none; }

    /* --- Header ------------------------------------------------------ */
    header { padding: 8px 10px; }
    .header-left { min-width: 0; }                 /* let the title shrink */
    .header-left h1 {
        font-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .header-left img { height: 30px; margin-right: 8px; }
    .header-right { gap: 6px; }

    /* --- Action bar (the jspreadsheet toolbar) ---------------------- *
     * Keep it on a single row and let it scroll sideways with a finger
     * instead of wrapping into a tall block / spilling off-screen, and
     * give every control a finger-sized hit area. */
    .jexcel_container.with-toolbar { max-width: 100vw; }
    .jexcel_toolbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;                     /* Firefox */
        gap: 2px;
    }
    .jexcel_toolbar::-webkit-scrollbar { display: none; }   /* WebKit */
    .jexcel_toolbar > i,
    .jexcel_toolbar > .jexcel_toolbar_item,
    .jexcel_toolbar > select,
    .jexcel_toolbar > .jexcel_toolbar_divisor {
        flex: 0 0 auto;                            /* force the scroll */
    }
    .jexcel_toolbar i.jexcel_toolbar_item {
        width: 34px;
        height: 34px;
        padding: 6px;
        font-size: 22px;                           /* material-icons glyph */
    }
    .jexcel_toolbar select.jexcel_toolbar_item { height: 34px; font-size: 14px; }

    /* --- Formula bar ------------------------------------------------- *
     * 16px inputs stop iOS zooming in on focus; search drops to its own
     * full-width row. */
    #formula-bar { flex-wrap: wrap; gap: 6px; padding: 6px 8px; }
    #name-box { width: 64px; font-size: 16px; padding: 8px 6px; }
    #fx-btn { width: 38px; height: 36px; }
    #formula-input { flex: 1 1 60%; min-width: 0; font-size: 16px; padding: 8px 10px; }
    #search-box { order: 5; width: 100%; }
    #grid-search { font-size: 16px; padding: 8px 0; }

    /* --- Autocomplete dropdown -------------------------------------- */
    .fa-dropdown { min-width: 240px; max-width: 94vw; }
    .fa-name { width: 96px; }
    .fa-desc { display: none; }

    /* --- Modals: use more of the screen and scroll inside ----------- */
    .modal-content {
        margin: 16px auto;
        width: 92%;
        max-width: 92%;
        max-height: calc(100% - 32px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- Toasts span the width so they're easy to read -------------- */
    #toast-container { left: 12px; right: 12px; bottom: 12px; align-items: stretch; }
}

/* Very small phones: trim the title and keep the Turnstile widget from
   overflowing the header. */
@media (max-width: 480px) {
    .header-left h1 { font-size: 13px; }
    .header-right { flex-wrap: wrap; justify-content: flex-end; }
    .cf-turnstile { transform: scale(0.85); transform-origin: right center; }
}