/******************************************************

 * AMBIOUSE FILEBROWSER THEME

/******************************************************
 * CORE COLORS
 ******************************************************/

:root {
    --amb-green: #30f7bf;
    --amb-green-soft: #38fbcd66;
    --amb-text-dark: #222;
    --amb-text-med: #555;
    --amb-text-light: #777;
    --amb-bg: #f7f7f7;
    --amb-bg-light: #fafafa;
    --amb-bg-mid: #eeeeee;
    --amb-bg-dark: #e4e4e4;

    /* kill Filebrowser default blues */
    --blue: var(--amb-green);
    --primary: var(--amb-green);
    --accent: var(--amb-green);
    --link: var(--amb-green);
}

/******************************************************
 * GLOBAL RESET
 ******************************************************/

html, body {
    background: var(--amb-bg) !important;
    color: var(--amb-text-dark) !important;
}

svg, i.material-icons {
    color: var(--amb-text-light) !important;
    fill: var(--amb-text-light) !important;
}

:focus-visible {
    outline: 3px solid var(--amb-green) !important;
}

/******************************************************
 * HEADER + LOGO
 ******************************************************/

header {
    background: var(--amb-bg-light) !important;
    border-bottom: 1px solid #ddd !important;
}

/* Header logo scale */
header img[src$="logo.svg"] {
    width: 200px !important;
    height: auto !important;
    object-fit: contain !important;
    margin-right: 70px !important;
    margin-top: 0 !important;
}

/******************************************************
 * NAVIGATION
 ******************************************************/

#nav ul li.active {
    border-color: var(--amb-green) !important;
    color: var(--amb-green) !important;
    background: var(--amb-bg-light) !important;
}


/******************************************************
 * RESET GLOBAL BUTTON OVERRIDES (IMPORTANT)
 ******************************************************/
button,
.btn,
.v-btn {
    background: initial !important;
    border: initial !important;
    color: initial !important;
    border-radius: initial !important;
    padding: initial !important;
}

button:hover,
.btn:hover,
.v-btn:hover {
    background: initial !important;
}

/******************************************************
 * FORMS
 ******************************************************/
form.card,
.card,
.card-content,
.card-title,
.card-action {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: none !important;
}

/* Input fields */
input,
textarea,
select {
    background: #fff !important;
    border: 1px solid #ccc !important;
    color: var(--amb-text-dark) !important;
}

input:hover, textarea:hover, select:hover {
    background: #fff !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--amb-green) !important;
}

/******************************************************
 * HOVER STATES (no green hover anywhere)
 ******************************************************/
.list-item:hover,
.row:hover,
.item:hover,
#listing .item:hover,
.card:hover,
.v-card:hover {
    background-color: var(--amb-bg-mid) !important;
    border-color: transparent !important;
}

/******************************************************
 * TRUE SELECTION (Green)
 ******************************************************/
#listing .item[aria-selected="true"] {
    background: var(--amb-green) !important;
    color: #000 !important;
}

#listing .item[aria-selected="true"] i {
    color: #000 !important;
}

/* Share page selection */
.file-list li[aria-selected="true"] {
    background: var(--amb-green) !important;
    color: #000 !important;
}

/******************************************************
 * CHECKBOXES
 ******************************************************/
input[type="checkbox"]:checked {
    accent-color: var(--amb-green) !important;
}

/******************************************************
 * SHARE PAGE ICONS
 ******************************************************/
.share__box__icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.share__box__icon i.material-icons {
    font-size: 52px !important;
    color: var(--amb-text-light) !important;
}

/******************************************************
 * LOGIN PAGE
 ******************************************************/
form h1 {
    display: none !important;
}

form img[alt="File Browser"] {
    width: 300px !important;
    margin: 0 auto 20px auto !important;
}

/* Login button */
form .button,
form .button--block,
form input.button[type="submit"] {
    background: var(--amb-bg-dark) !important;
    border: 1px solid #ccc !important;
    color: var(--amb-text-dark) !important;
    padding: 10px 18px !important;
    border-radius: 6px !important;
}

form .button:hover,
form .button--block:hover,
form input.button[type="submit"]:hover {
    background: var(--amb-bg-mid) !important;
}

/******************************************************
 * SHARE PAGE — DOWNLOAD + QR BLOCK (CENTERED, CLEAN)
 ******************************************************/
.share__box__element.share__box__center {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 24px !important;
    margin: 0 auto !important;
}

/* Large buttons */
.share__box__element.share__box__center a.button {
    background: var(--amb-bg-dark) !important;
    border-radius: 50px !important; /* restore circular look */
    border: 1px solid #ddd !important;
    color: var(--amb-text-dark) !important;
    padding: 12px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.share__box__element.share__box__center a.button:last-child {
    margin-right: 0 !important;
}

/* Icon vertical alignment */
.share__box__element a.button i.material-icons {
    vertical-align: middle !important;
    line-height: 1 !important;
}

/******************************************************
 * SMALL ROUND ACTION BUTTONS (copy, download, select)
 ******************************************************/
button.action {
    background: var(--amb-bg-dark) !important;
    border-radius: 50px !important;
    border: 1px solid #ddd !important;
    color: var(--amb-text-dark) !important;
    margin: 0 6px !important;
    padding: 6px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

button.action i.material-icons {
    font-size: 20px !important;
}

/******************************************************
 * HIDE SHARE-PAGE NAV ELEMENTS (Home + menu)
 ******************************************************/
#app.share a[aria-label="Home"],
#app.share a[title="Home"],
#app.share button.menu-button {
    display: none !important;
}

/******************************************************
 * SIDEBAR BUTTON SPACING (Nav)
 ******************************************************/

/* Apply vertical spacing to sidebar items */
nav > button.action,
nav > div > button.action,
nav > div {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

/* Ensure inner divs don't collapse */
nav > div {
    display: flex;
    flex-direction: column;
    gap: 4px !important;
}

/******************************************************
 * SEARCH FIELD FIX (restore original embedded look)
 ******************************************************/

#search #input {
    display: flex !important;
    align-items: center !important;
    background: var(--amb-bg-mid) !important; /* soft grey */
    border-radius: 8px !important;
    padding: 6px 10px !important;
    gap: 8px !important;
}

#search #input input {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    width: 100% !important;
    color: var(--amb-text-dark) !important;
    padding: 6px 0 !important;
}

#search #input input::placeholder {
    color: var(--amb-text-light) !important;
}

/* Search icon */
#search #input i.material-icons {
    color: var(--amb-text-light) !important;
}

/******************************************************
 * HIDE HEADER MENU BUTTON (desktop)
 ******************************************************/

/* Filebrowser adds the menu button inside <header> with class `menu-button` */
header button.menu-button {
    display: none !important;
}

/* Fallback targeting (if FB renames wrapper) */
header .menu-button,
header > button[aria-label="Toggle sidebar"],
header > button[title="Toggle sidebar"] {
    display: none !important;
}

/******************************************************
 * DIALOG BUTTON SPACING (New file / New folder / Rename)
 ******************************************************/

/* Add space between buttons inside any dialog footer */
.card-action .button {
    margin-right: 10px !important;
}

/* Remove margin from the last button */
.card-action .button:last-child {
    margin-right: 0 !important;
}

/******************************************************
 * STORAGE PROGRESS BAR — FIX BLUE COLOR
 ******************************************************/

nav .vue-simple-progress-bar {
    background: var(--amb-green) !important;      /* fill color */
}

nav .vue-simple-progress {
    background: var(--amb-bg-mid) !important;     /* track color */
}