/* =============================================================================
   Spinnaker Support - Filestash Theme
   v0.3 - 2026-05-04 - Phase 2 final: stripped admin, icon tint, wordmark accent
   v0.2 - 2026-05-04 - Phase 2: Admin console + file browser (admin removed in v0.3)
   v0.1 - 2026-05-01 - Phase 1: Login page (ported from custom.css)
   =============================================================================
   Brand palette:
     #005473  Spinnaker Navy   (primary)
     #9ACA3C  Spinnaker Green  (accent)
     #879398  Spinnaker Grey   (neutral)
   ============================================================================= */

:root {
    --spn-navy: #005473;
    --spn-navy-dark: #003d57;
    --spn-navy-light: #1a6f8e;
    --spn-green: #9ACA3C;
    --spn-green-dim: rgba(154, 202, 60, 0.6);
    --spn-grey: #879398;
    --spn-grey-light: #a8b1b5;
    --spn-bg: #1c1e22;
    --spn-bg-soft: #2a2d33;
    --spn-bg-softer: #34373d;
    --spn-text: #e8eaed;
    --spn-text-dim: #aaadb2;
    --spn-border: rgba(255, 255, 255, 0.08);
    --spn-border-soft: rgba(255, 255, 255, 0.04);
}

/* =============================================================================
   PHASE 1: Login page (SAML connection form)
   ============================================================================= */

/* -------- Page background ------------------------------------------------ */
html,
body {
    background: var(--spn-bg) !important;
}

/* -------- Wordmark on login page (first form only) ----------------------- */
.component_page_connection_form:first-of-type::before {
    content: "SPINNAKER SUPPORT \00B7 FileShare";
    display: block;
    text-align: center;
    color: var(--spn-text);
    font-size: 1.4rem;
    font-weight: 300;
    letter-spacing: 0.3em;
    padding: 30px 0 12px 0;
    border-bottom: 2px solid var(--spn-green);
    margin: 0 auto 25px auto;
    max-width: 460px;
}

.component_page_connection_form:not(:first-of-type)::before {
    content: none !important;
}

/* -------- Customer selector grid ---------------------------------------- */
.component_page_connection_form div.buttons.scroll-x.box {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
    overflow-x: visible !important;
    overflow-y: visible !important;
    background: var(--spn-bg-soft) !important;
    padding: 14px !important;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid var(--spn-border-soft);
}

.component_page_connection_form .scroll-x::-webkit-scrollbar {
    display: none;
}

.component_page_connection_form div.buttons button {
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px 10px !important;
    background: var(--spn-bg) !important;
    color: var(--spn-text) !important;
    border: 1px solid var(--spn-border) !important;
    border-radius: 4px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em;
    transition: all 0.15s ease !important;
    cursor: pointer;
}

.component_page_connection_form div.buttons button:not(.active):hover {
    background: var(--spn-navy) !important;
    border-color: var(--spn-navy-light) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.component_page_connection_form div.buttons button.active {
    background: var(--spn-navy) !important;
    color: #ffffff !important;
    border-color: var(--spn-green) !important;
    border-left: 3px solid var(--spn-green) !important;
    box-shadow: 0 2px 12px rgba(0, 84, 115, 0.4) !important;
}

/* -------- Connect form box --------------------------------------------- */
.component_page_connection_form .box[data-bind="form"] {
    background: var(--spn-bg-soft) !important;
    border: 1px solid var(--spn-border-soft);
    border-radius: 6px;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.component_page_connection_form form input[type="text"],
.component_page_connection_form form input[type="password"],
.component_page_connection_form form input[type="email"],
.component_page_connection_form form .component_input {
    background: var(--spn-bg) !important;
    color: var(--spn-text) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
}

.component_page_connection_form form input:focus,
.component_page_connection_form form .component_input:focus {
    border-color: var(--spn-green) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(154, 202, 60, 0.15) !important;
}

.component_page_connection_form form label {
    color: var(--spn-grey-light) !important;
    font-style: normal !important;
    font-size: 0.85em !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em;
}

/* -------- CONNECT button ------------------------------------------------ */
.component_page_connection_form form button.emphasis,
.component_page_connection_form form button.emphasis.full-width {
    background: var(--spn-navy) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    transition: background 0.15s ease !important;
    cursor: pointer;
}

.component_page_connection_form form button.emphasis:hover {
    background: var(--spn-navy-light) !important;
}

.component_page_connection_form form button.emphasis:active {
    background: var(--spn-navy-dark) !important;
}

/* -------- Loader/spinner ------------------------------------------------ */
.component_page_connection_form .component_loader circle {
    fill: var(--spn-green) !important;
    stroke: var(--spn-green) !important;
}

/* -------- Footer (last form only) -------------------------------------- */
.component_page_connection_form:last-of-type::after {
    content: "Secure file transfer | itsupport@spinnakersupport.com";
    display: block;
    text-align: center;
    color: var(--spn-grey);
    font-size: 0.75rem;
    margin-top: 25px;
    padding-bottom: 20px;
    letter-spacing: 0.05em;
}

.component_page_connection_form:not(:last-of-type)::after {
    content: none !important;
}

/* =============================================================================
   PHASE 2: File browser (sidebar, breadcrumb, file grid)
   ============================================================================= */

/* -------- Filemanager sidebar (Your Files / Tags) ----------------------- */
.component_filemanager_shell .component_sidebar {
    background: var(--spn-bg) !important;
    color: var(--spn-text) !important;
    border-right: 1px solid var(--spn-border) !important;
}

.component_filemanager_shell .component_sidebar h3 {
    color: var(--spn-text) !important;
    border-bottom: 1px solid var(--spn-border-soft);
    padding-bottom: 8px;
}

.component_filemanager_shell .component_sidebar input[type="text"] {
    background: var(--spn-bg-soft) !important;
    color: var(--spn-text) !important;
    border: 1px solid var(--spn-border) !important;
    border-radius: 3px;
}

.component_filemanager_shell .component_sidebar input[type="text"]:focus {
    border-color: var(--spn-green) !important;
    outline: none;
}

.component_filemanager_shell .component_sidebar ul li a {
    color: var(--spn-text-dim) !important;
    transition: color 0.15s ease, background 0.15s ease;
    border-radius: 3px;
}

.component_filemanager_shell .component_sidebar ul li a:hover {
    color: var(--spn-text) !important;
    background: var(--spn-bg-soft) !important;
}

.component_filemanager_shell .component_sidebar ul li a[aria-selected="true"] {
    color: var(--spn-green) !important;
    background: var(--spn-bg-soft) !important;
    border-left: 2px solid var(--spn-green);
}

/* -------- Breadcrumb / top bar ------------------------------------------ */
.component_breadcrumb {
    background: var(--spn-bg) !important;
    color: var(--spn-text) !important;
    border-bottom: 1px solid var(--spn-border-soft) !important;
}

.component_breadcrumb .component_path-element .label {
    color: var(--spn-text) !important;
}

.component_breadcrumb [aria-current="location"] {
    color: var(--spn-text) !important;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.component_breadcrumb .component_logout a:hover {
    background: var(--spn-bg-soft);
    border-radius: 3px;
}

/* "Spinnaker Support FileShare" wordmark accent (root crumb only) */
.component_breadcrumb .component_path-element.n0 .label {
    border-bottom: 2px solid var(--spn-green);
    padding-bottom: 2px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* -------- Submenu (New File / New Folder / Search / Sort) --------------- */
.component_submenu {
    background: var(--spn-bg) !important;
    border-bottom: 1px solid var(--spn-border-soft);
}

.component_submenu button {
    background: transparent !important;
    color: var(--spn-text-dim) !important;
    border: 1px solid transparent !important;
    border-radius: 3px;
    padding: 6px 12px !important;
    transition: all 0.15s ease;
    cursor: pointer;
}

.component_submenu button:hover {
    color: var(--spn-text) !important;
    background: var(--spn-bg-soft) !important;
    border-color: var(--spn-border) !important;
}

.component_submenu .action.left button {
    color: var(--spn-green) !important;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.component_submenu .action.left button:hover {
    background: rgba(154, 202, 60, 0.1) !important;
    border-color: var(--spn-green-dim) !important;
}

.component_submenu input#searchInput {
    background: var(--spn-bg-soft) !important;
    color: var(--spn-text) !important;
    border: 1px solid var(--spn-border) !important;
    border-radius: 3px;
    padding: 6px 10px !important;
}

.component_submenu input#searchInput:focus {
    border-color: var(--spn-green) !important;
    outline: none;
}

/* Sort dropdown */
.component_dropdown.view.sort {
    background: var(--spn-bg-soft) !important;
    border: 1px solid var(--spn-border) !important;
    color: var(--spn-text) !important;
}

.component_dropdown.view.sort li {
    color: var(--spn-text-dim) !important;
}

.component_dropdown.view.sort li:hover {
    background: var(--spn-bg-softer) !important;
    color: var(--spn-text) !important;
}

/* -------- File/folder grid items (.component_thing) -------------------- */
.component_filesystem .component_thing {
    background: var(--spn-bg-soft) !important;
    border: 1px solid var(--spn-border-soft) !important;
    border-radius: 6px;
    color: var(--spn-text) !important;
    transition: all 0.15s ease;
}

.component_filesystem .component_thing:hover {
    background: var(--spn-bg-softer) !important;
    border-color: var(--spn-green-dim) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.component_filesystem .component_thing.selected,
.component_filesystem .component_thing[aria-selected="true"] {
    background: var(--spn-bg-softer) !important;
    border-color: var(--spn-green) !important;
    box-shadow: 0 0 0 1px var(--spn-green);
}

.component_filesystem .component_thing .component_filename {
    color: var(--spn-text) !important;
}

.component_filesystem .component_thing .component_datetime,
.component_filesystem .component_thing .component_filesize {
    color: var(--spn-text-dim) !important;
    font-size: 0.85em;
}

.component_filesystem .component_thing .info_extension {
    color: var(--spn-grey) !important;
}

/* -------- Folder icon recolor (default sky-blue → Spinnaker grey) ------- */
/* The folder SVGs are inlined as base64 with hardcoded #9AD1ED fill, so we
   use a CSS filter to shift the hue toward our brand grey/navy palette.
   Filter chain: grayscale removes the blue, brightness/contrast keep
   visibility, sepia + hue-rotate tints toward navy.                       */
.component_filesystem .component_thing img.component_icon[alt="directory"],
.component_filemanager_shell .component_sidebar ul li a img.component_icon[alt="directory"] {
    filter: grayscale(40%) brightness(0.85) sepia(20%) hue-rotate(170deg) saturate(50%);
}

/* On hover, brighten slightly */
.component_filesystem .component_thing:hover img.component_icon[alt="directory"] {
    filter: grayscale(30%) brightness(1.0) sepia(20%) hue-rotate(170deg) saturate(60%);
}

/* -------- Empty state / placeholder ------------------------------------- */
.component_filemanager_shell .placeholder {
    color: var(--spn-text-dim) !important;
    opacity: 0.5;
}

/* -------- Resizer handle between sidebar and main content ---------------- */
.component_filemanager_shell .resizer {
    background: var(--spn-border-soft) !important;
}

.component_filemanager_shell .resizer:hover {
    background: var(--spn-green-dim) !important;
}

/* -------- Mobile upload FAB --------------------------------------------- */
.component_mobilefileupload label {
    background: var(--spn-navy) !important;
    border: 2px solid var(--spn-green) !important;
    transition: background 0.15s ease;
}

.component_mobilefileupload label:hover {
    background: var(--spn-navy-light) !important;
}

/* =============================================================================
   Cross-cutting (scrollbars, focus states)
   ============================================================================= */

/* Scrollbar styling for dark theme */
.scroll-y::-webkit-scrollbar {
    width: 10px;
}

.scroll-y::-webkit-scrollbar-track {
    background: var(--spn-bg);
}

.scroll-y::-webkit-scrollbar-thumb {
    background: var(--spn-bg-softer);
    border-radius: 5px;
}

.scroll-y::-webkit-scrollbar-thumb:hover {
    background: var(--spn-grey);
}

/* "Skip to content" link - keep visible if focused */
a[aria-role="navigation"]:focus {
    background: var(--spn-navy) !important;
    color: #ffffff !important;
    padding: 8px 12px;
    border-radius: 3px;
}