/* Stored-files browser: the list panel, and the floating dialog that wraps it.
   Colours come from the app's theme tokens so this follows light/dark with
   everything else rather than pinning its own palette. */

.gst-files {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 100%;
}

/* ---- toolbar ---------------------------------------------------------- */

.gst-files-toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.gst-files-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 240px;
    min-width: 0;
}

.gst-files-search > .bi-search {
    position: absolute;
    left: .65rem;
    font-size: .85rem;
    opacity: .55;
    pointer-events: none;
}

.gst-files-search input {
    width: 100%;
    padding: .45rem .5rem .45rem 2rem;
    border: 1px solid var(--bs-border-color, #d7dbe0);
    border-radius: 8px;
    background: var(--bs-body-bg, #fff);
    color: inherit;
    font-size: .875rem;
    line-height: 1.3;
}

.gst-files-search input:focus {
    outline: none;
    border-color: var(--theme-default, #7366ff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-default, #7366ff) 22%, transparent);
}

/* The clear button sits inside the field, so it must not push the text. */
.gst-files-clear {
    position: absolute;
    right: .4rem;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: .5;
    padding: .15rem .3rem;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
}

.gst-files-clear:hover { opacity: 1; background: rgba(0, 0, 0, .06); }

.gst-files-count {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    opacity: .75;
    white-space: nowrap;
}

.gst-files-refresh {
    border: 1px solid var(--bs-border-color, #d7dbe0);
    background: transparent;
    color: inherit;
    border-radius: 7px;
    padding: .25rem .45rem;
    cursor: pointer;
    line-height: 1;
}

.gst-files-refresh:hover { background: rgba(0, 0, 0, .05); }

/* ---- list ------------------------------------------------------------- */

/* overflow-y is what makes Virtualize work: it needs a scrolling ancestor to
   measure, and without a bounded height it renders every row. */
.gst-files-list {
    overflow-y: auto;
    border: 1px solid var(--bs-border-color, #e3e6ea);
    border-radius: 10px;
    background: var(--bs-body-bg, #fff);
}

.gst-file-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .7rem;
    border-bottom: 1px solid var(--bs-border-color, #eef0f3);
    /* Must match Virtualize ItemSize (58) or the scrollbar drifts from reality. */
    height: 58px;
    box-sizing: border-box;
}

.gst-file-row:last-child { border-bottom: 0; }
.gst-file-row:hover { background: color-mix(in srgb, var(--theme-default, #7366ff) 7%, transparent); }

.gst-file-badge {
    flex: 0 0 auto;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .2rem .4rem;
    border-radius: 5px;
    min-width: 46px;
    text-align: center;
    color: #fff;
}

.gst-file-badge-pdf { background: #c0392b; }
.gst-file-badge-json { background: #2f6fed; }
.gst-file-badge-excel { background: #1e7d44; }
.gst-file-badge-other { background: #6b7280; }

.gst-file-main { flex: 1 1 auto; min-width: 0; }

.gst-file-name {
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gst-file-meta {
    display: flex;
    gap: .5rem;
    font-size: .72rem;
    opacity: .7;
    white-space: nowrap;
    overflow: hidden;
}

.gst-file-meta > span:not(:last-child)::after {
    content: "·";
    margin-left: .5rem;
    opacity: .5;
}

.gst-file-actions {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex: 0 0 auto;
}

.gst-file-open {
    flex: 0 0 auto;
    border: 1px solid var(--bs-border-color, #d7dbe0);
    border-radius: 7px;
    padding: .3rem .5rem;
    color: inherit;
    text-decoration: none;
    line-height: 1;
}

.gst-file-open:hover {
    background: var(--theme-default, #7366ff);
    border-color: var(--theme-default, #7366ff);
    color: #fff;
}

/* ---- placeholder + empty --------------------------------------------- */

.gst-file-row-ghost { opacity: .5; }

.gst-file-badge-ghost {
    background: var(--bs-border-color, #e3e6ea);
    min-width: 46px;
    height: 18px;
}

.gst-file-ghost {
    height: 9px;
    width: 40%;
    border-radius: 4px;
    background: var(--bs-border-color, #e3e6ea);
    margin: .25rem 0;
}

.gst-file-ghost-wide { width: 70%; }

.gst-files-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1.5rem 1rem;
    border: 1px dashed var(--bs-border-color, #d7dbe0);
    border-radius: 10px;
    font-size: .85rem;
    opacity: .8;
    text-align: center;
}

.gst-files-error { border-color: #e0b4b4; color: #a33; }

/* ---- floating dialog -------------------------------------------------- */

.gst-files-dialog {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: min(560px, calc(100vw - 2.5rem));
    z-index: 1080;
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #1f2933);
    border: 1px solid var(--bs-border-color, #d7dbe0);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .22);
    overflow: hidden;
}

.gst-files-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem .8rem;
    border-bottom: 1px solid var(--bs-border-color, #eef0f3);
    background: color-mix(in srgb, var(--theme-default, #7366ff) 8%, transparent);
}

.gst-files-dialog-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    font-size: .9rem;
    min-width: 0;
}

/* Two-line title: company name, GSTIN under it. min-width:0 so a long trade name
   ellipsises instead of shoving the minimise/close buttons off the header. */
.gst-files-dialog-titles {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

/* The name flexes and truncates; the Open link never does. Without min-width:0 on
   the name, a long trade name refuses to shrink and pushes the link out of view. */
.gst-files-dialog-headline {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    min-width: 0;
}

.gst-files-dialog-heading {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gst-files-dialog-open {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .72rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--theme-default, #7366ff);
    padding: .1rem .35rem;
    border-radius: 6px;
    white-space: nowrap;
}

.gst-files-dialog-open:hover {
    background: color-mix(in srgb, var(--theme-default, #7366ff) 14%, transparent);
    text-decoration: none;
}

.gst-files-dialog-gstin {
    font-size: .7rem;
    font-weight: 500;
    opacity: .7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gst-files-dialog-actions { display: flex; gap: .25rem; flex: 0 0 auto; }

.gst-files-dialog-actions button {
    border: 0;
    background: transparent;
    color: inherit;
    border-radius: 6px;
    padding: .25rem .45rem;
    cursor: pointer;
    line-height: 1;
    opacity: .7;
}

.gst-files-dialog-actions button:hover { opacity: 1; background: rgba(0, 0, 0, .07); }

.gst-files-dialog-flash {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .8rem;
    font-size: .78rem;
    color: #1e7d44;
    background: rgba(30, 125, 68, .08);
}

.gst-files-dialog-body { padding: .7rem .8rem .9rem; }

/* ---- minimised pill --------------------------------------------------- */

.gst-files-pill {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .8rem;
    border: 1px solid var(--bs-border-color, #d7dbe0);
    border-radius: 999px;
    background: var(--bs-body-bg, #fff);
    color: inherit;
    font-size: .82rem;
    font-weight: 600;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .18);
    cursor: pointer;
}

.gst-files-pill:hover { border-color: var(--theme-default, #7366ff); }

.gst-files-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--theme-default, #7366ff);
    color: #fff;
    font-size: .7rem;
}

/* ---- embedded in the gst-links Download Returns tab ------------------- */

.gst-download-stored {
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--bs-border-color, #e3e6ea);
}

.gst-download-stored-head {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    margin-bottom: .7rem;
    font-size: .9rem;
    font-weight: 600;
}

.gst-download-stored-head .bi { align-self: center; opacity: .7; }

/* Explains the section without competing with its heading. Hidden on narrow screens
   where it would wrap onto its own line and cost more than it says. */
.gst-download-stored-head small {
    font-size: .72rem;
    font-weight: 400;
    opacity: .6;
}

@media (max-width: 576px) {
    .gst-download-stored-head small { display: none; }
}

/* ---- organised browser: toolbar --------------------------------------- */

.gst-fb-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .6rem;
    min-height: 32px;
}

.gst-fb-summary {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    min-width: 0;
    font-size: .78rem;
    overflow: hidden;
}

.gst-fb-total { font-weight: 700; }
.gst-fb-sep { opacity: .4; }

.gst-fb-scope {
    opacity: .7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gst-fb-refresh {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    padding: .3rem .55rem;
    border: 1px solid var(--bs-border-color, #d7dbe0);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
}

.gst-fb-refresh:hover { background: rgba(0, 0, 0, .05); }

/* Files have arrived since this list was built. Deliberately loud — the list is
   stale and only the user can decide when to disturb it. */
.gst-fb-refresh.is-pending {
    border-color: #1e7d44;
    background: rgba(30, 125, 68, .12);
    color: #14663a;
    animation: gst-fb-pulse 1.8s ease-in-out infinite;
}

.gst-fb-refresh.is-pending .bi-arrow-clockwise { animation: gst-fb-spin-hint 1.8s ease-in-out infinite; }

.gst-fb-refresh-label { white-space: nowrap; }

@keyframes gst-fb-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(30, 125, 68, .35); }
    50%      { box-shadow: 0 0 0 5px rgba(30, 125, 68, 0); }
}

@keyframes gst-fb-spin-hint {
    0%, 70%, 100% { transform: rotate(0deg); }
    85%           { transform: rotate(180deg); }
}

/* Respect a user who has asked the OS for less motion: keep the colour, drop the
   movement. The pending state must still be obvious without animating. */
@media (prefers-reduced-motion: reduce) {
    .gst-fb-refresh.is-pending,
    .gst-fb-refresh.is-pending .bi-arrow-clockwise { animation: none; }
}

/* ---- organised browser: FY rail + month tabs + format tabs ------------ */

.gst-fb-shell {
    display: grid;
    /* Fixed rail, fluid content. minmax(0,1fr) rather than 1fr so a long file name
       cannot force the grid wider than its container. */
    grid-template-columns: 148px minmax(0, 1fr);
    gap: .85rem;
    align-items: start;
}

.gst-fb-years {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    max-height: 420px;
    overflow-y: auto;
    padding-right: .15rem;
}

.gst-fb-year {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    width: 100%;
    padding: .45rem .6rem;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
}

.gst-fb-year:hover { background: color-mix(in srgb, var(--theme-default, #7366ff) 9%, transparent); }

.gst-fb-year.is-active {
    background: var(--theme-default, #7366ff);
    border-color: var(--theme-default, #7366ff);
    color: #fff;
}

.gst-fb-main { min-width: 0; }

.gst-fb-months,
.gst-fb-formats {
    display: flex;
    gap: .35rem;
    /* Horizontal scroll rather than wrap: twelve months plus badges wraps into a
       three-line block that pushes the file list off-screen. */
    overflow-x: auto;
    padding-bottom: .3rem;
    scrollbar-width: thin;
}

.gst-fb-months { margin-bottom: .5rem; }

.gst-fb-formats {
    margin-bottom: .6rem;
    border-bottom: 1px solid var(--bs-border-color, #e3e6ea);
    padding-bottom: .5rem;
}

.gst-fb-month,
.gst-fb-format {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    padding: .35rem .6rem;
    border: 1px solid var(--bs-border-color, #d7dbe0);
    border-radius: 999px;
    background: var(--bs-body-bg, #fff);
    color: inherit;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.gst-fb-month:hover,
.gst-fb-format:hover { border-color: var(--theme-default, #7366ff); }

.gst-fb-month.is-active,
.gst-fb-format.is-active {
    background: var(--theme-default, #7366ff);
    border-color: var(--theme-default, #7366ff);
    color: #fff;
}

/* Selection is the theme's job, everywhere. The format chips reuse the badge classes
   for their names only — the per-type colours (red/blue/green) stay on the row badges,
   where they identify a file type rather than signalling "this tab is chosen".
   Letting them colour the active tab too would mean the FY, month and format rows
   each highlighted in a different colour. */
.gst-fb-format.gst-file-badge-pdf,
.gst-fb-format.gst-file-badge-json,
.gst-fb-format.gst-file-badge-excel,
.gst-fb-format.gst-file-badge-other {
    background: var(--bs-body-bg, #fff);
    color: inherit;
    min-width: 0;
    letter-spacing: normal;
}

.gst-fb-format.gst-file-badge-pdf.is-active,
.gst-fb-format.gst-file-badge-json.is-active,
.gst-fb-format.gst-file-badge-excel.is-active,
.gst-fb-format.gst-file-badge-other.is-active {
    background: var(--theme-default, #7366ff);
    border-color: var(--theme-default, #7366ff);
    color: #fff;
}

.gst-fb-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 .3rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .08);
    font-size: .68rem;
    font-weight: 700;
}

.is-active .gst-fb-badge { background: rgba(255, 255, 255, .28); }

.gst-fb-list { max-height: 380px; }

/* ---- mobile ----------------------------------------------------------- */

@media (max-width: 768px) {
    /* The rail becomes a scrolling strip above the content: 148px of years beside a
       narrow phone screen leaves nothing for file names. */
    .gst-fb-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: .6rem;
    }

    .gst-fb-years {
        flex-direction: row;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: .3rem;
    }

    .gst-fb-year {
        flex: 0 0 auto;
        width: auto;
        border-color: var(--bs-border-color, #d7dbe0);
        border-radius: 999px;
        min-height: 40px;
    }

    .gst-fb-month,
    .gst-fb-format { min-height: 40px; }

    .gst-fb-list { max-height: 320px; }
}

@media (max-width: 576px) {
    /* Full-width sheet rather than a floating card: a 560px dialog anchored to a
       corner is unusable on a phone. */
    .gst-files-dialog {
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        border-radius: 14px 14px 0 0;
    }

    .gst-files-dialog-actions button {
        /* Touch target, not a 20px icon. */
        min-width: 44px;
        min-height: 44px;
    }

    .gst-file-open { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }

    .gst-files-pill { left: auto; right: 1rem; bottom: 1rem; min-height: 44px; }
}