/* styles.css
Combined light and dark themes for the Nginx FancyIndex page.
Optimized for modern browsers: Chrome, Firefox, Safari, Edge
 * © 2015-17, Lilian Besson (Naereen) and contributors,
 * open-sourced under the MIT License, https://lbesson.mit-license.org/
 * hosted on GitHub, https://GitHub.com/Naereen/Nginx-Fancyindex-Theme
*/

/*

*/

/* =========================
   Base: box sizing + smooth scroll
   ========================= */
*,
*::before,
*::after {
        box-sizing: border-box; /* predictable sizing model */
}

html {
        scroll-behavior: smooth; /* smooth anchor jumps */
}

/* =========================
   Accessibility: honor reduced motion
   Generally not applicable to a nginx static file server, but doesn't hurt to include
   https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion
   ========================= */
@media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
                animation-duration: 0.01ms !important;     /* effectively disables animations */
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;     /* disables transitions */
                scroll-behavior: auto !important;           /* avoids smooth scrolling */
        }
}

/* =========================
   Design Tokens — Radxa primitive palette
   Exact color values from the Radxa design system.
   All semantic variables below reference these tokens.
   ========================= */
:root {
        /* Brand — green scale */
        --brand-1-1: #74bc1f;       /* primary brand green    RGB(116,188,31)  */
        --brand-1-2: #e3f2d2;       /* lightest tint          RGB(227,242,210) */
        --brand-1-6: #acd779;       /* medium-light tint      RGB(172,215,121) */
        --brand-1-9: #5bc335;       /* vivid shade            RGB(91,195,53)   */

        /* Neutral — Line (borders / dividers) */
        --line-1-1: #eeeeee;        /* hairline               RGB(238,238,238) */
        --line-1-2: #e5e6e6;        /* light divider          RGB(229,230,230) */
        --line-1-3: #d8e3d8;        /* subtle border          RGB(216,227,216) */
        --line-1-4: #bfbfbf;        /* standard border        RGB(191,191,191) */

        /* Neutral — Fill */
        --fill-1-1: #fafafa;        /* page background        RGB(250,250,250) */
        --fill-1-2: #f4f4f4;        /* surface / row hover    RGB(244,244,244) */
        --fill-1-3: #e6e6e6;        /* pressed / muted bg     RGB(230,230,230) */
        --fill-1-4: #d9d9d9;        /* strong fill            RGB(217,217,217) */

        /* Neutral — Text */
        --text-1-1: #cccccc;        /* disabled / placeholder RGB(204,204,204) */
        --text-1-2: #999999;        /* secondary text         RGB(153,153,153) */
        --text-1-3: #666666;        /* body / muted text      RGB(102,102,102) */
        --text-1-4: #333333;        /* primary / heading      RGB(51,51,51)    */
}

/* =========================
   Theme tokens (Light)
   Semantic aliases that reference the design tokens above.
   https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:root
   ========================= */
:root {
        --bg: var(--fill-1-1);              /* page background */
        --bg-elev: #ffffff;                 /* elevated surfaces (cards, inputs) */
        --fg: var(--text-1-4);              /* primary text */
        --muted: var(--text-1-3);           /* secondary text */
        --row-hover: var(--fill-1-2);       /* table row hover */
        --rule: var(--line-1-4);            /* borders / rules */
        --accent: var(--brand-1-1);         /* accent + links */
        --focus: 0 0 0 3px rgba(116, 188, 31, 0.25); /* focus ring shadow */
        --link: var(--accent);              /* primary link color */
        --clear-link: var(--muted);         /* subtle action links */
        --input-border: var(--rule);        /* input border */
        --focus-border: var(--accent);      /* input focus border */
        --table-shadow: 0 18px 38px rgba(51, 51, 51, 0.08); /* table elevation */
        --td-border: rgba(191, 191, 191, 0.45); /* table row separators */
        --parent-hover: var(--brand-1-9);   /* parent dir hover */
        --footer-link: var(--accent);       /* footer link color */
        --toggle-bg: var(--fill-1-2);       /* theme toggle background */
        --toggle-fg: var(--text-1-4);       /* theme toggle text */
        --toggle-border: rgba(191, 191, 191, 0.7);
        --toggle-hover-bg: var(--fill-1-3); /* theme toggle hover */
}

/* =========================
   Theme tokens (Dark)
   Override variables when .theme-dark is on <body>
   ========================= */
body.theme-dark {
        --bg: var(--text-1-4);
        --bg-elev: #3a3a3a;
        --fg: var(--fill-1-1);
        --muted: var(--text-1-2);
        --row-hover: #4a4a4a;
        --rule: var(--text-1-3);
        --accent: var(--brand-1-6);
        --focus: 0 0 0 3px rgba(172, 215, 121, 0.35);
        --link: var(--brand-1-2);
        --clear-link: var(--text-1-2);
        --input-border: var(--text-1-3);
        --focus-border: var(--brand-1-6);
        --table-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
        --td-border: rgba(230, 230, 230, 0.12);
        --parent-hover: var(--brand-1-2);
        --footer-link: var(--brand-1-6);
        --toggle-bg: #4a4a4a;
        --toggle-fg: var(--fill-1-1);
        --toggle-border: rgba(230, 230, 230, 0.22);
        --toggle-hover-bg: var(--text-1-3);
}

/* =========================
   Global typography + colors
   prioritize the default user interface font of the operating system for native look and feel
   https://css-tricks.com/snippets/css/system-font-stack/
   ========================= */
html {
        font-family: system-ui, -apple-system, 'Segoe UI', Ubuntu, Cantarell, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
        color: var(--muted);                                /* default text color (secondary) */
        font-weight: 300;
        font-size: clamp(14px, 1.2vw, 16px);                /* fluid base size */
        line-height: 1.6;                                   /* TO DO: 1.6x font height is "confortable", add toggle for condensed ~1.2*/
        text-size-adjust: 100%;
        background-color: var(--bg);
}

body {
        margin: 0;
        justify-content: center;
        align-items: flex-start;
        min-height: 100vh;
        padding: clamp(12px, 2.5vw, 24px);
        color: var(--fg);
        background-color: var(--bg);
        transition: background-color 150ms ease-in, color 150ms ease-in;
}

body.has-topbar {
        padding-top: calc(68px + clamp(10px, 2vw, 20px));
}

/* =========================
   Radxa Topbar
   ========================= */
.radxa-topbar {
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 68px;
        z-index: 1000;
        background: #ffffff;
        border-bottom: 1px solid var(--line-1-2);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

body.theme-dark .radxa-topbar {
        background: #1e1e1e;
        border-bottom-color: #3a3a3a;
        box-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

.radxa-topbar-inner {
        max-width: 2048px;
        height: 100%;
        margin: 0 auto;
        padding: 0 clamp(18px, 2vw, 28px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
}

.radxa-topbar-logo {
        flex-shrink: 0;
        display: flex;
        align-items: center;
}

.radxa-topbar-logo img {
        height: 42px;
        width: auto;
        display: block;
}

.radxa-topbar-nav {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: clamp(1.2rem, 2vw, 2.8rem);
        margin-left: auto;
        min-width: 0;
}

.radxa-topbar-nav a {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 0.98rem;
        font-weight: 500;
        line-height: 1;
        color: #111111 !important;
        text-decoration: none !important;
        padding: 0.15rem 0;
        border-bottom: 1px solid transparent;
        transition: color 150ms ease-in, border-color 150ms ease-in, opacity 150ms ease-in;
        white-space: nowrap;
}

body.theme-dark .radxa-topbar-nav a {
        color: var(--fill-1-1) !important;
}

.radxa-topbar-nav a.has-caret::after {
        content: "";
        width: 0.42rem;
        height: 0.42rem;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: translateY(-0.08rem) rotate(45deg);
        transform-origin: center;
        opacity: 0.9;
}

.radxa-topbar-nav a:hover {
        color: var(--brand-1-1) !important;
        border-bottom-color: var(--brand-1-1);
        text-decoration: none !important;
}

@media (max-width: 900px) {
        body.has-topbar {
                padding-top: calc(60px + 0.75rem);
        }

        .radxa-topbar {
                height: 60px;
        }

        .radxa-topbar-inner {
                gap: 1rem;
                padding: 0 0.9rem;
        }

        .radxa-topbar-logo img {
                height: 34px;
        }

        .radxa-topbar-nav {
                gap: 1rem;
                overflow-x: auto;
                overflow-y: hidden;
                scrollbar-width: none;
                padding-bottom: 2px;
        }

        .radxa-topbar-nav::-webkit-scrollbar {
                display: none;
        }

        .radxa-topbar-nav a {
                font-size: 0.92rem;
        }
}

/* =========================
   Headings and table headers
   ========================= */
thead {
        font-weight: 200;
        font-size: 1.2em;
}

h1 {
        display: none;
}

/* =========================
   Directory header: search + theme toggle container
   ========================= */
.directory-controls {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: 1.5rem;
}

/* Arrange controls horizontally on wider screens */
@media (min-width: 720px) {
        .directory-controls {
                justify-content: flex-end;
        }
}

/* =========================
   Links
   ========================= */
a {
        color: var(--fg);
        text-decoration: none;
}
a:hover {
        color: var(--accent);
        text-decoration: underline;
}
/* "Clear" link style (e.g., reset search) */
a.clear,
a.clear:link,
a.clear:visited {
        color: var(--clear-link);
        padding: 2px 0;
        font-weight: 400;
        font-size: 1rem;
        margin-left: 1rem;
        line-height: 1;
        display: inline-block;
        border-bottom: 1px solid transparent;
        transition: border-color 200ms ease-in;
}
a.clear:hover {
        border-bottom-color: currentColor;
}

/* =========================
   Theme toggle button
   ========================= */
.theme-toggle {
        appearance: none;
        width: 2.875rem;
        height: 2.875rem;
        border-radius: 50%;
        border: 1px solid var(--toggle-border);
        background: var(--toggle-bg);
        color: var(--toggle-fg);
        padding: 0;
        font: 500 1.15rem/1 'Roboto', system-ui, sans-serif;
        cursor: pointer;
        transition: background-color 150ms ease-in, transform 150ms ease-in, border-color 150ms ease-in;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.theme-toggle:hover {
        background: var(--toggle-hover-bg);
        transform: translateY(-1px);
}

.theme-toggle:focus-visible {
        outline: none;
        box-shadow: var(--focus);                           /* tokenized focus ring */
}

.theme-toggle[aria-pressed="true"] {
        border-color: var(--accent);
}

.theme-toggle-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.25rem;
        height: 1.25rem;
        line-height: 1;
}

/* =========================
   Table: container + rows/cols
   ========================= */
table {
        border-collapse: collapse;
        font-size: 0.95em;
        width: 100%;
        margin: 24px 0 0;
        background: var(--bg-elev);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: var(--table-shadow);
}

tr {
        outline: 0;
        border: 0;
}
tr:hover td {
        color: var(--fg);
        background: var(--row-hover);
}
tr:hover td a {
        color: var(--accent);          /* highlight link on row hover */
}
tr td:first-of-type {
        padding-left: 10px;
        padding-right: 10px;
}
tr.parent a {
        color: var(--muted);                                /* subtle parent directory row */
}

th {
        text-align: left;
        font-size: 0.75em;
        padding: 12px 20px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-1-3);
        background: var(--fill-1-2);
}

body.theme-dark th {
        color: var(--text-1-1);
        background: var(--row-hover);
}

th + th {
        width: 25%;                                         /* constrain mid columns */
}
th + th + th + th {
        width: 5%;                                          /* final column (e.g., size) narrow */
}

td {
        padding: 14px 20px;
        outline: 0;
        border: 0;
        border-bottom: 1px solid var(--td-border);          /* row separators */
        vertical-align: middle;
        text-align: left;
        transition: background 300ms ease-in;
}

td:last-child,
th:last-child {
        text-align: right;                                  /* align trailing numeric data */
        padding-right: 10px;
}

td a {
        display: block;                                     /* make entire cell clickable */
}

/* =========================
   File type "icons" via ::before content
   Applied to first column links
   https://stackoverflow.com/a/60198998
   https://www.smashingmagazine.com/2009/08/taming-advanced-css-selectors/#before-and-after
   ========================= */
#list tbody tr td:first-child a::before {
        content: '📄';
        margin-right: 0.5rem;
        display: inline-block;
        font-style: normal;
}

/* Directory/Folder */
#list tbody tr td:first-child a[href$="/"]::before {
        content: '📁';
}

/* Parent directory */
#list tbody tr.parent td:first-child a::before {
        content: '⬆️';
}

/* Images */
#list tbody tr td:first-child a[href$=".jpg"]::before,
#list tbody tr td:first-child a[href$=".jpeg"]::before,
#list tbody tr td:first-child a[href$=".png"]::before,
#list tbody tr td:first-child a[href$=".gif"]::before,
#list tbody tr td:first-child a[href$=".svg"]::before,
#list tbody tr td:first-child a[href$=".webp"]::before,
#list tbody tr td:first-child a[href$=".ico"]::before,
#list tbody tr td:first-child a[href$=".bmp"]::before {
        content: '🖼️';
}

/* Videos */
#list tbody tr td:first-child a[href$=".mp4"]::before,
#list tbody tr td:first-child a[href$=".avi"]::before,
#list tbody tr td:first-child a[href$=".mov"]::before,
#list tbody tr td:first-child a[href$=".wmv"]::before,
#list tbody tr td:first-child a[href$=".flv"]::before,
#list tbody tr td:first-child a[href$=".webm"]::before,
#list tbody tr td:first-child a[href$=".mkv"]::before {
        content: '🎬';
}

/* Audio */
#list tbody tr td:first-child a[href$=".mp3"]::before,
#list tbody tr td:first-child a[href$=".wav"]::before,
#list tbody tr td:first-child a[href$=".flac"]::before,
#list tbody tr td:first-child a[href$=".aac"]::before,
#list tbody tr td:first-child a[href$=".ogg"]::before,
#list tbody tr td:first-child a[href$=".m4a"]::before {
        content: '🎵';
}

/* Archives */
#list tbody tr td:first-child a[href$=".zip"]::before,
#list tbody tr td:first-child a[href$=".rar"]::before,
#list tbody tr td:first-child a[href$=".tar"]::before,
#list tbody tr td:first-child a[href$=".gz"]::before,
#list tbody tr td:first-child a[href$=".7z"]::before,
#list tbody tr td:first-child a[href$=".bz2"]::before,
#list tbody tr td:first-child a[href$=".xz"]::before {
        content: '📦';
}

/* Documents */
#list tbody tr td:first-child a[href$=".pdf"]::before {
        content: '📕';
}

#list tbody tr td:first-child a[href$=".doc"]::before,
#list tbody tr td:first-child a[href$=".docx"]::before {
        content: '📘';
}

#list tbody tr td:first-child a[href$=".xls"]::before,
#list tbody tr td:first-child a[href$=".xlsx"]::before,
#list tbody tr td:first-child a[href$=".csv"]::before {
        content: '📊';
}

#list tbody tr td:first-child a[href$=".ppt"]::before,
#list tbody tr td:first-child a[href$=".pptx"]::before {
        content: '📙';
}

#list tbody tr td:first-child a[href$=".txt"]::before,
#list tbody tr td:first-child a[href$=".md"]::before,
#list tbody tr td:first-child a[href$=".markdown"]::before {
        content: '📝';
}

/* Code files */
#list tbody tr td:first-child a[href$=".html"]::before,
#list tbody tr td:first-child a[href$=".htm"]::before,
#list tbody tr td:first-child a[href$=".css"]::before,
#list tbody tr td:first-child a[href$=".js"]::before,
#list tbody tr td:first-child a[href$=".json"]::before,
#list tbody tr td:first-child a[href$=".xml"]::before,
#list tbody tr td:first-child a[href$=".php"]::before,
#list tbody tr td:first-child a[href$=".py"]::before,
#list tbody tr td:first-child a[href$=".java"]::before,
#list tbody tr td:first-child a[href$=".c"]::before,
#list tbody tr td:first-child a[href$=".cpp"]::before,
#list tbody tr td:first-child a[href$=".h"]::before,
#list tbody tr td:first-child a[href$=".sh"]::before,
#list tbody tr td:first-child a[href$=".rb"]::before,
#list tbody tr td:first-child a[href$=".go"]::before,
#list tbody tr td:first-child a[href$=".rs"]::before,
#list tbody tr td:first-child a[href$=".ts"]::before,
#list tbody tr td:first-child a[href$=".tsx"]::before,
#list tbody tr td:first-child a[href$=".jsx"]::before {
        content: '💻';
}

/* Executables */
#list tbody tr td:first-child a[href$=".exe"]::before,
#list tbody tr td:first-child a[href$=".app"]::before,
#list tbody tr td:first-child a[href$=".dmg"]::before,
#list tbody tr td:first-child a[href$=".iso"]::before {
        content: '⚙️';
}

/* Configuration */
#list tbody tr td:first-child a[href$=".ini"]::before,
#list tbody tr td:first-child a[href$=".cfg"]::before,
#list tbody tr td:first-child a[href$=".conf"]::before,
#list tbody tr td:first-child a[href$=".yaml"]::before,
#list tbody tr td:first-child a[href$=".yml"]::before,
#list tbody tr td:first-child a[href$=".toml"]::before {
        content: '🔧';
}

/* =========================
   Parent directory hover
   ========================= */
.parent a:hover {
        color: var(--parent-hover);
}

/* =========================
   Footer
   ========================= */
footer {
        font-size: 12px;
        text-align: center;
}

footer a {
        text-decoration: underline;
        color: var(--footer-link);
}

/* =========================
   Breadcrumb navigation
   ========================= */
.breadcrumb-nav {
        margin: 1rem 0 1.5rem;
        padding: 0.75rem 1rem;
        background: var(--bg-elev);
        border-radius: 8px;
        border: 1px solid var(--rule);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
}

.breadcrumb {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
        margin: 0;
        padding: 0;
        font-size: 0.95rem;
}

.breadcrumb li {
        display: flex;
        align-items: center;
}

.breadcrumb li:not(:last-child)::after {
        content: '/';
        margin-left: 0.5rem;
        color: var(--muted);
}

.breadcrumb a {
        color: var(--muted);
        text-decoration: none;
        transition: color 150ms ease-in;
}

.breadcrumb a:hover {
        text-decoration: underline;
        color: var(--accent);
}

.breadcrumb-current {
        color: var(--fg);
        font-weight: 500;
}

/* =========================
   Copy page URL button
   ========================= */
.copy-page-url-btn {
        appearance: none;
        border: 1px solid var(--rule);
        background: var(--bg);
        color: var(--fg);
        padding: 0.5rem 1rem;
        margin-left: 1rem;
        border-radius: 6px;
        font: 400 0.85rem system-ui, sans-serif;
        cursor: pointer;
        transition: all 150ms ease-in;
}

.copy-page-url-btn:hover {
        background: var(--row-hover);
        border-color: var(--accent);
}

.copy-page-url-btn:focus-visible {
        outline: none;
        box-shadow: var(--focus);
}

/* =========================
   Pagination controls
   ========================= */
.pagination {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin: 2rem 0;
        padding: 1rem;
}

.pagination-info {
        color: var(--muted);
        font-size: 0.9rem;
}

.pagination-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
        justify-content: center;
}

.pagination-btn {
        appearance: none;
        border: 1px solid var(--rule);
        background: var(--bg-elev);
        color: var(--fg);
        padding: 0.5rem 0.75rem;
        border-radius: 6px;
        font: 400 0.9rem system-ui, sans-serif;
        cursor: pointer;
        transition: all 150ms ease-in;
        min-width: 2.5rem;
}

.pagination-btn:hover:not(:disabled) {
        background: var(--row-hover);
        border-color: var(--accent);
}

.pagination-btn:focus-visible {
        outline: none;
        box-shadow: var(--focus);
}

.pagination-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
}

.pagination-btn.active {
        background: var(--accent);
        color: white;
        border-color: var(--accent);
        font-weight: 600;
}

.pagination-ellipsis {
        color: var(--muted);
        padding: 0 0.25rem;
}

/* =========================
   Responsive: mobile layout
   Converts the table into stacked cards and adjusts controls
   ========================= */
@media (max-width: 720px) {
        body {
                padding: clamp(16px, 4vw, 32px);
                box-shadow: none;
        }

        /* Stack table elements as blocks for small screens */
        table,
        thead,
        tbody,
        th,
        td,
        tr {
                display: block;
                width: 100%;
        }

        table {
                background: transparent;
                box-shadow: none;
                border-radius: 0;
                overflow: visible;
        }

        thead {
                display: none;                               /* hide header row on mobile */
        }

        tr {
                margin-bottom: 16px;
                border: 1px solid var(--td-border);
                border-radius: 12px;
                box-shadow: var(--table-shadow);
                overflow: hidden;
                background: var(--bg-elev);
        }

        body.theme-dark tr {
                box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
        }

        td {
                padding: 12px 16px;
                border-bottom: 1px solid var(--td-border);
                display: flex;
                justify-content: space-between;
                gap: 12px;
        }

        td:last-child {
                border-bottom: none;
                text-align: left;
        }

        td::before {
                content: attr(data-label);                   /* adds pseudo header */
                font-weight: 600;
                color: rgba(27, 31, 42, 0.7);
                text-transform: uppercase;
                letter-spacing: 0.04em;
        }

        body.theme-dark td::before {
                color: rgba(255, 255, 255, 0.65);
        }

        /* Fallback labels if data-label not provided */
        td:nth-of-type(1):not([data-label])::before {
                content: 'Name';
        }

        td:nth-of-type(2):not([data-label])::before {
                content: 'Size';
        }

        td:nth-of-type(3):not([data-label])::before {
                content: 'Last modified';
        }

        td:nth-of-type(4):not([data-label])::before {
                content: 'Description';
        }

        /* Mobile breadcrumb styles */
        .breadcrumb {
                font-size: 0.85rem;
        }

        .breadcrumb-nav {
                padding: 0.5rem 0.75rem;
        }

        /* Mobile pagination styles */
        .pagination-btn {
                padding: 0.4rem 0.6rem;
                font-size: 0.85rem;
                min-width: 2.25rem;
        }

        .pagination-info {
                font-size: 0.85rem;
        }

        /* Mobile copy button styles */
        .copy-page-url-btn {
                font-size: 0.8rem;
                padding: 0.4rem 0.75rem;
                margin-left: 0;
                margin-top: 0.5rem;
        }
}