/* =========================================================
   MACGLASS MIDNIGHT
   Custom theme for File Browser 2.63.23
   ========================================================= */

:root {
    --mg-background: #080d19;
    --mg-surface: #111a2b;
    --mg-surface-light: #19253a;
    --mg-border: rgba(148, 163, 184, 0.13);
    --mg-blue: #3998ff;
    --mg-violet: #9365ff;
    --mg-text: #e6edf8;
    --mg-muted: #8999b2;
}

/* Global */

html,
body,
.v-application {
    background: var(--mg-background) !important;
    color: var(--mg-text) !important;
}

.v-application {
    background-image:
        radial-gradient(ellipse at 10% 0%, rgba(57, 152, 255, .12), transparent 35%),
        radial-gradient(ellipse at 90% 100%, rgba(147, 101, 255, .10), transparent 35%) !important;
}

/* Main surfaces */

.v-card,
.v-sheet,
.v-menu__content {
    background: rgba(17, 26, 43, .88) !important;
    border: 1px solid var(--mg-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .22) !important;
}

/* Sidebar */

.v-navigation-drawer {
    background: rgba(10, 16, 29, .94) !important;
    border-right: 1px solid var(--mg-border) !important;
    backdrop-filter: blur(18px);
}

.v-navigation-drawer .v-list-item {
    margin: 4px 10px;
    border-radius: 9px !important;
    transition: background .2s ease, color .2s ease;
}

.v-navigation-drawer .v-list-item:hover {
    background: rgba(57, 152, 255, .12) !important;
}

.v-navigation-drawer .v-list-item--active {
    background: linear-gradient(
        100deg,
        rgba(57, 152, 255, .22),
        rgba(147, 101, 255, .12)
    ) !important;
    border-left: 3px solid var(--mg-blue);
}

/* Toolbar */

.v-toolbar {
    background: rgba(10, 16, 29, .82) !important;
    border-bottom: 1px solid var(--mg-border) !important;
    backdrop-filter: blur(20px);
}

/* Text */

.v-application,
.v-application .text--primary {
    color: var(--mg-text) !important;
}

.v-application .text--secondary,
.v-label,
.v-messages {
    color: var(--mg-muted) !important;
}

/* File list / table */

.v-data-table {
    background: transparent !important;
    color: var(--mg-text) !important;
}

.v-data-table > .v-data-table__wrapper > table > thead > tr > th {
    color: var(--mg-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .8px;
    border-bottom: 1px solid var(--mg-border) !important;
}

.v-data-table > .v-data-table__wrapper > table > tbody > tr {
    background: transparent !important;
    transition: background .18s ease;
}

.v-data-table > .v-data-table__wrapper > table > tbody > tr:hover {
    background: rgba(57, 152, 255, .09) !important;
}

.v-data-table > .v-data-table__wrapper > table > tbody > tr > td {
    color: var(--mg-text) !important;
    border-bottom: 1px solid rgba(148, 163, 184, .07) !important;
    height: 43px !important;
    font-size: 13px !important;
}

/* Buttons */

.v-btn {
    border-radius: 9px !important;
    text-transform: none !important;
    letter-spacing: .2px !important;
    transition: all .2s ease !important;
}

.v-btn--contained,
.v-btn.primary {
    background: linear-gradient(110deg, var(--mg-blue), var(--mg-violet)) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(57, 152, 255, .2) !important;
}

.v-btn:hover {
    filter: brightness(1.12);
}

/* Inputs */

.v-text-field .v-input__slot,
.v-select .v-input__slot {
    background: rgba(8, 13, 25, .55) !important;
    border-radius: 9px !important;
}

.v-input input,
.v-input textarea {
    color: var(--mg-text) !important;
}

/* Dialogs */

.v-dialog > .v-card {
    background: #111a2b !important;
    border: 1px solid rgba(57, 152, 255, .2) !important;
}

/* Scrollbars */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--mg-blue), var(--mg-violet));
    border-radius: 10px;
}

/* Subtle animations */

.v-card,
.v-list-item,
.v-btn {
    transition-duration: .2s;
}
/* =========================================================
   MACGLASS MIDNIGHT - REFINEMENT 01
   Compact list and selection
   ========================================================= */

/* Compact file rows */

.v-data-table tbody tr {
    height: 52px !important;
}

.v-data-table tbody tr td {
    height: 52px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 13px !important;
}

/* Softer selected row */

.v-data-table tbody tr.v-data-table__selected {
    background: linear-gradient(
        100deg,
        rgba(57, 152, 255, .24),
        rgba(147, 101, 255, .16)
    ) !important;
}

.v-data-table tbody tr.v-data-table__selected td {
    color: #eaf3ff !important;
}

/* Glass toolbar */

.v-toolbar {
    background: rgba(13, 21, 36, .78) !important;
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
}

/* Refined surfaces */

.v-card,
.v-sheet {
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
}
/* =========================================================
   MACGLASS MIDNIGHT - REFINEMENT 02
   Native File Browser 2.63.23 listing
   ========================================================= */

/* Compact file listing */

#listing.file-icons.list .item {
    min-height: 54px !important;
    height: 54px !important;
    padding: 7px 14px !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid rgba(148, 163, 184, .07) !important;
    transition: background .2s ease, border-color .2s ease !important;
}

/* File information */

#listing.file-icons.list .item .name {
    color: #dce7f5 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

#listing.file-icons.list .item .size,
#listing.file-icons.list .item .modified {
    color: #91a3bc !important;
    font-size: 12px !important;
}

/* Folder and file icons */

#listing.file-icons.list .item .material-icons {
    font-size: 23px !important;
}

/* Hover effect */

#listing.file-icons.list .item:hover {
    background: linear-gradient(
        100deg,
        rgba(57, 152, 255, .13),
        rgba(147, 101, 255, .07)
    ) !important;
}

/* Selected item */

#listing.file-icons.list .item[aria-selected="true"] {
    background: linear-gradient(
        100deg,
        rgba(57, 152, 255, .24),
        rgba(147, 101, 255, .17)
    ) !important;
    border-left: 3px solid #3998ff !important;
}

#listing.file-icons.list .item[aria-selected="true"] .name,
#listing.file-icons.list .item[aria-selected="true"] .size,
#listing.file-icons.list .item[aria-selected="true"] .modified {
    color: #ffffff !important;
}
/* =========================================================
   MACGLASS MIDNIGHT - REFINEMENT 03
   Typography and visual depth
   ========================================================= */

/* Softer file names */

#listing.file-icons.list .item .name {
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: .15px;
}

/* More elegant metadata */

#listing.file-icons.list .item .size,
#listing.file-icons.list .item .modified {
    font-weight: 400 !important;
    opacity: .85;
}

/* Listing background */

#listing {
    background: linear-gradient(
        145deg,
        rgba(17, 26, 43, .92),
        rgba(10, 16, 29, .96)
    ) !important;
}

/* Subtle hover glow */

#listing.file-icons.list .item:hover {
    box-shadow: inset 3px 0 0 rgba(57, 152, 255, .65);
}

/* Refined header */

#listing h2 {
    color: #e6edf8 !important;
    font-weight: 600 !important;
    letter-spacing: .3px;
}
/* =========================================================
   MACGLASS MIDNIGHT - REFINEMENT 05
   Sidebar navigation
   ========================================================= */

/* Sidebar navigation */

nav {
    background: rgba(8, 13, 25, .96) !important;
}

/* Navigation buttons */

nav button.action {
    position: relative;
    margin: 3px 8px !important;
    width: calc(100% - 16px) !important;
    border-radius: 10px !important;
    background: transparent !important;
    transition: background .22s ease, color .22s ease !important;
}

/* Hover */

nav button.action:hover {
    background: linear-gradient(
        100deg,
        rgba(57, 152, 255, .13),
        rgba(147, 101, 255, .07)
    ) !important;
}

/* Navigation icons */

nav button.action .material-icons {
    color: #91a8c5 !important;
    transition: color .2s ease;
}

nav button.action:hover .material-icons {
    color: #65b2ff !important;
}

/* Navigation labels */

nav button.action span {
    color: #cbd7e7 !important;
    font-weight: 400 !important;
    transition: color .2s ease;
}

nav button.action:hover span {
    color: #ffffff !important;
}

/* Current My files section */

nav button.action[aria-label="My files"] {
    background: linear-gradient(
        100deg,
        rgba(57, 152, 255, .17),
        rgba(147, 101, 255, .09)
    ) !important;
    box-shadow: inset 3px 0 0 #3998ff;
}

nav button.action[aria-label="My files"] .material-icons {
    color: #65b2ff !important;
}

/* Subtle navigation separators */

nav button.action[aria-label="My files"],
nav button.action[aria-label="Settings"] {
    border-bottom: 1px solid rgba(148, 163, 184, .07) !important;
}

/* =========================================================
   MACGLASS MIDNIGHT - REFINEMENT 06
   Premium surfaces and visual depth
   ========================================================= */

/* Main content depth */

#listing.file-icons.list {
    background:
        linear-gradient(
            145deg,
            rgba(22, 35, 54, .94),
            rgba(10, 17, 30, .97)
        ) !important;
    border: 1px solid rgba(100, 160, 255, .14);
    border-radius: 16px;
    box-shadow:
        0 18px 45px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .035);
}

/* Listing header */

#listing h2 {
    background: linear-gradient(
        100deg,
        rgba(32, 49, 73, .96),
        rgba(22, 32, 52, .96)
    ) !important;
    border-bottom: 1px solid rgba(100, 160, 255, .16);
    padding: 14px 16px;
    text-shadow: 0 1px 8px rgba(38, 156, 245, .12);
}

/* File rows */

#listing.file-icons.list .item {
    background: rgba(255, 255, 255, .012);
}

#listing.file-icons.list .item:nth-child(even) {
    background: rgba(255, 255, 255, .022);
}

/* Improved hover illumination */

#listing.file-icons.list .item:hover {
    background: linear-gradient(
        100deg,
        rgba(38, 156, 245, .15),
        rgba(139, 92, 246, .08)
    ) !important;
    box-shadow:
        inset 3px 0 0 rgba(57, 152, 255, .85),
        inset 0 0 20px rgba(38, 156, 245, .035);
}

/* Refined selection */

#listing.file-icons.list .item[aria-selected="true"] {
    background: linear-gradient(
        100deg,
        rgba(38, 156, 245, .25),
        rgba(139, 92, 246, .18)
    ) !important;
    box-shadow:
        inset 3px 0 0 #3998ff,
        inset 0 0 25px rgba(38, 156, 245, .07);
}

/* Sidebar depth */

nav {
    box-shadow: 8px 0 30px rgba(0, 0, 0, .12);
}

/* Navigation hover */

nav button.action:hover {
    box-shadow: inset 0 0 18px rgba(38, 156, 245, .045);
}

/* Smooth visual transitions */

#listing .item,
nav button.action {
    transition: all .22s ease !important;
}

/* =========================================================
   MACGLASS MIDNIGHT - REFINEMENT 07
   Premium toolbar
   ========================================================= */

/* Top toolbar surface - preserve original layout */

header {
    background: linear-gradient(
        110deg,
        rgba(20, 31, 45, .98),
        rgba(14, 24, 38, .98)
    ) !important;

    border-bottom: 1px solid rgba(100, 160, 255, .13);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
}

/* Search field */

#search {
    background: rgba(255, 255, 255, .075) !important;
    border: 1px solid rgba(148, 163, 184, .12) !important;
    border-radius: 12px !important;

    color: #e6edf8 !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035),
        0 4px 14px rgba(0, 0, 0, .10);

    transition: all .22s ease !important;
}

/* Search focus */

#search:focus {
    background: rgba(255, 255, 255, .10) !important;
    border-color: rgba(57, 152, 255, .55) !important;

    box-shadow:
        0 0 0 3px rgba(57, 152, 255, .10),
        0 4px 18px rgba(0, 0, 0, .15);
}

/* Toolbar action buttons */

header button.action {
    border-radius: 11px !important;
    transition: all .2s ease !important;
}

/* Toolbar button hover */

header button.action:hover {
    background: linear-gradient(
        135deg,
        rgba(57, 152, 255, .18),
        rgba(147, 101, 255, .12)
    ) !important;

    box-shadow:
        inset 0 0 14px rgba(57, 152, 255, .06),
        0 3px 12px rgba(0, 0, 0, .12);

    transform: translateY(-1px);
}

/* Toolbar icons */

header button.action .material-icons {
    color: #dce9fa;
    transition: color .2s ease, text-shadow .2s ease;
}

header button.action:hover .material-icons {
    color: #65b5ff;
    text-shadow: 0 0 10px rgba(57, 152, 255, .35);
}

/* =========================================================
   MACGLASS MIDNIGHT - REFINEMENT 08
   Premium breadcrumb
   ========================================================= */

/* Breadcrumb surface */

#listing > .breadcrumb,
#listing .breadcrumb {
    background: linear-gradient(
        110deg,
        rgba(21, 34, 51, .96),
        rgba(14, 24, 38, .96)
    ) !important;

    border-bottom: 1px solid rgba(100, 160, 255, .12);
}

/* Breadcrumb links and icons */

#listing .breadcrumb a,
#listing .breadcrumb .material-icons {
    color: #9eb5d2 !important;
    transition: color .2s ease, text-shadow .2s ease;
}

/* Breadcrumb hover */

#listing .breadcrumb a:hover {
    color: #3998ff !important;
    text-shadow: 0 0 10px rgba(57, 152, 255, .25);
}

/* Home icon */

#listing .breadcrumb .material-icons {
    color: #65b5ff !important;
    text-shadow: 0 0 9px rgba(57, 152, 255, .16);
}

/* =========================================================
   MACGLASS MIDNIGHT - REFINEMENT 08.1
   Actual File Browser breadcrumb
   ========================================================= */

/* Breadcrumb container */

#listing .breadcrumbs {
    background: linear-gradient(
        110deg,
        rgba(21, 34, 51, .96),
        rgba(14, 24, 38, .96)
    ) !important;

    border-bottom: 1px solid rgba(100, 160, 255, .13);
}

/* Breadcrumb links */

#listing .breadcrumbs a {
    color: #9eb5d2 !important;
    border-radius: 8px;
    transition: all .2s ease;
}

/* Active breadcrumb */

#listing .breadcrumbs a.router-link-active {
    color: #65b5ff !important;
    text-shadow: 0 0 10px rgba(57, 152, 255, .25);
}

/* Home icon hover */

#listing .breadcrumbs a:hover {
    color: #3998ff !important;
    background: rgba(57, 152, 255, .10);
    box-shadow: 0 0 12px rgba(57, 152, 255, .08);
}

/* MACGLASS MIDNIGHT - REFINEMENT 08.2 */

/* Actual breadcrumb inside main */

main .breadcrumbs {
    background: linear-gradient(
        110deg,
        rgba(21, 34, 51, .96),
        rgba(14, 24, 38, .96)
    ) !important;

    border-bottom: 1px solid rgba(100, 160, 255, .13);
}

/* Home navigation link */

main .breadcrumbs a[aria-label="Home"] {
    color: #65b5ff !important;
    border-radius: 9px;
    transition: all .2s ease;
}

/* Home hover */

main .breadcrumbs a[aria-label="Home"]:hover {
    color: #ffffff !important;
    background: rgba(57, 152, 255, .14) !important;
    box-shadow: 0 0 14px rgba(57, 152, 255, .15);
}

/* =========================================================
   MACGLASS MIDNIGHT - REFINEMENT 09
   Premium storage indicator
   ========================================================= */

/* Storage progress track */

nav .progress,
nav .v-progress-linear {
    background: rgba(148, 163, 184, .13) !important;
    border-radius: 999px !important;
    overflow: hidden;
}

/* Storage progress fill */

nav .progress-bar,
nav .v-progress-linear__determinate {
    background: linear-gradient(
        90deg,
        #3998ff 0%,
        #647bff 55%,
        #9365ff 100%
    ) !important;

    border-radius: 999px !important;

    box-shadow:
        0 0 8px rgba(57, 152, 255, .35),
        0 0 14px rgba(147, 101, 255, .20);
}

/* Storage information text */

nav .storage,
nav .storage-info {
    color: #9baac0 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: .15px;
}

/* =========================================================
   MACGLASS MIDNIGHT - REFINEMENT 09.1
   Actual storage indicator selectors
   ========================================================= */

/* Storage progress track */

nav .credits .vue-simple-progress {
    background: rgba(148, 163, 184, .16) !important;
    border-radius: 999px !important;
    overflow: hidden;
    height: 5px !important;
}

/* Storage progress fill */

nav .credits .vue-simple-progress-bar {
    background: linear-gradient(
        90deg,
        #3998ff 0%,
        #647bff 55%,
        #9365ff 100%
    ) !important;

    border-radius: 999px !important;

    box-shadow:
        0 0 8px rgba(57, 152, 255, .45),
        0 0 14px rgba(147, 101, 255, .25);
}

/* Storage information */

nav .credits {
    color: #9baac0 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: .2px;
}

/* =========================================================
   MACGLASS MIDNIGHT - REFINEMENT 10
   Premium sidebar details
   ========================================================= */

/* User identity - subtle appearance */

nav button.action:first-of-type {
    background: transparent !important;
    box-shadow: none !important;
}

nav button.action:first-of-type span {
    color: #aabbd1 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: .2px;
}

nav button.action:first-of-type .material-icons {
    color: #829bb9 !important;
}

/* Navigation separators */

nav > div {
    border-color: rgba(148, 163, 184, .10) !important;
}

/* New folder, New file and Settings */

nav button.action[aria-label="New folder"],
nav button.action[aria-label="New file"],
nav button.action[aria-label="Settings"] {
    transition:
        background .22s ease,
        box-shadow .22s ease,
        color .22s ease !important;
}

/* Navigation hover */

nav button.action[aria-label="New folder"]:hover,
nav button.action[aria-label="New file"]:hover,
nav button.action[aria-label="Settings"]:hover {
    background: linear-gradient(
        100deg,
        rgba(57, 152, 255, .13),
        rgba(147, 101, 255, .07)
    ) !important;

    box-shadow:
        inset 3px 0 0 rgba(57, 152, 255, .75),
        inset 0 0 16px rgba(57, 152, 255, .035);
}

/* Navigation hover icons */

nav button.action[aria-label="New folder"]:hover .material-icons,
nav button.action[aria-label="New file"]:hover .material-icons,
nav button.action[aria-label="Settings"]:hover .material-icons {
    color: #65b5ff !important;
    transition: color .2s ease;
}

/* MACGLASS MIDNIGHT - REFINEMENT 10.1 */

/* Consistent secondary navigation typography */

nav button.action[aria-label="New folder"] span,
nav button.action[aria-label="New file"] span,
nav button.action[aria-label="Settings"] span {
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: .2px;
}

/* =========================================================
   MACGLASS MIDNIGHT - REFINEMENT 11.1
   Futuristic folder glow
   ========================================================= */

/* Folder icons */

#listing.file-icons.list .item .material-icons {
    color: #35aaff !important;
    text-shadow:
        0 0 5px rgba(53, 170, 255, .22),
        0 0 12px rgba(53, 170, 255, .10);

    transition:
        color .25s ease,
        text-shadow .25s ease,
        transform .25s ease;
}

/* Folder hover illumination */

#listing.file-icons.list .item:hover .material-icons {
    color: #65c1ff !important;
    text-shadow:
        0 0 7px rgba(53, 170, 255, .45),
        0 0 18px rgba(53, 170, 255, .25);

    transform: scale(1.06);
}
/* =========================================================
   MACGLASS MIDNIGHT - REFINEMENT 07
   Futuristic Glass Toolbar
   ========================================================= */

/* Top toolbar - visual styling only */

header {
    background: linear-gradient(
        110deg,
        rgba(13, 25, 43, .97),
        rgba(18, 30, 49, .94),
        rgba(12, 22, 39, .97)
    ) !important;

    border-bottom: 1px solid rgba(90, 160, 255, .18);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, .22),
        inset 0 -1px 0 rgba(255, 255, 255, .025);
}

/* Search field */

header #search {
    background: linear-gradient(
        135deg,
        rgba(45, 61, 81, .88),
        rgba(30, 44, 63, .94)
    ) !important;

    border: 1px solid rgba(125, 170, 230, .16);
    border-radius: 13px !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .055),
        0 5px 18px rgba(0, 0, 0, .16);

    transition: all .25s ease;
}

/* Search focus */

header #search:focus-within {
    border-color: rgba(57, 152, 255, .55);

    box-shadow:
        0 0 0 3px rgba(57, 152, 255, .09),
        0 0 22px rgba(57, 152, 255, .10),
        inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* Toolbar buttons */

header button.action {
    border-radius: 11px;
    transition:
        background .22s ease,
        color .22s ease,
        box-shadow .22s ease;
}

/* Button hover */

header button.action:hover {
    background: rgba(57, 152, 255, .13) !important;

    box-shadow:
        inset 0 0 14px rgba(57, 152, 255, .07),
        0 0 12px rgba(57, 152, 255, .06);
}

/* Toolbar icons */

header button.action .material-icons {
    color: #c8dcf5;
    transition: color .22s ease, text-shadow .22s ease;
}

header button.action:hover .material-icons {
    color: #62b5ff;
    text-shadow: 0 0 10px rgba(57, 152, 255, .4);
}
/* =========================================================
   MACGLASS MIDNIGHT - REFINEMENT 08
   Neon Glass Search
   ========================================================= */

header #search {
    background: transparent !important;
    border: 1px solid rgba(90, 160, 255, .22) !important;
    border-radius: 13px !important;
    overflow: hidden;
    box-shadow:
        0 5px 20px rgba(0, 0, 0, .20),
        inset 0 1px 0 rgba(255, 255, 255, .04);
}

header #search #input {
    background: linear-gradient(
        135deg,
        rgba(22, 37, 58, .96),
        rgba(15, 27, 45, .98)
    ) !important;

    color: #e6edf8 !important;
    border: none !important;
    box-shadow: none !important;
}

header #search #input:focus {
    outline: none !important;
}

header #search:focus-within {
    border-color: rgba(57, 152, 255, .7) !important;
    box-shadow:
        0 0 0 3px rgba(57, 152, 255, .10),
        0 0 22px rgba(57, 152, 255, .14);
}

header #search input {
    color: #e6edf8 !important;
    caret-color: #3998ff;
}

header #search input::placeholder {
    color: #9aabc2 !important;
    opacity: .9;
}
/* =========================================================
   MACGLASS MIDNIGHT - REFINEMENT 09
   Compact UI and MCFenix Identity
   ========================================================= */

/* 1. Compact top toolbar */

header {
    height: 72px !important;
    min-height: 72px !important;
    box-sizing: border-box;
}

/* 2. Replace the default floppy disk logo */

header > img[src*="logo.svg"] {
    display: none !important;
}

header::before {
    content: "MF";
    display: flex;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    color: #eaf4ff;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -1px;

    background: linear-gradient(
        135deg,
        #3998ff,
        #7657ed
    );

    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 14px;

    box-shadow:
        0 0 18px rgba(57, 152, 255, .25),
        inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* 3. Compact search field */

header #search {
    height: 54px !important;
    box-sizing: border-box;
}

/* 4. Sidebar - consistent typography */

nav > button.action:first-child span {
    font-size: 18px !important;
    font-weight: 500 !important;
}

/* 5. Slightly more compact file rows */

#listing.file-icons.list .item {
    height: 56px !important;
    min-height: 56px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    box-sizing: border-box;
}
/* =========================================================
   MACGLASS MIDNIGHT - REFINEMENT 07
   Typography, compact rows and toolbar
   ========================================================= */

/* Consistent sidebar typography */

nav button.action span {
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: -.2px;
}

/* Compact file rows */

#listing.file-icons.list .item {
    height: 48px !important;
    min-height: 48px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

#listing.file-icons.list .item .material-icons {
    font-size: 21px !important;
}

/* Slimmer top toolbar - without changing its layout */

header {
    min-height: 64px !important;
    height: 64px !important;
}

/* Search field */

#search {
    height: 46px !important;
    border-radius: 12px !important;
}
/* =========================================================
   MACGLASS MIDNIGHT - REFINEMENT 07
   Search bar spacing and proportions
   ========================================================= */

header #search {
    margin-left: 12px !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    box-sizing: border-box;
}
/* =========================================================
   MACGLASS MIDNIGHT - REFINEMENT 08
   Compact top toolbar icons
   ========================================================= */

header button.action .material-icons {
    font-size: 25px !important;
    transition: transform .2s ease, color .2s ease;
}

header button.action:hover .material-icons {
    transform: scale(1.08);
}

/* =========================================================
   MACGLASS MIDNIGHT - REFINEMENT 09
   Final visual polish
   ========================================================= */

/* 1. File icons */

#listing.file-icons.list .item .material-icons {
    font-size: 21px !important;
    color: #39a9ff !important;
    filter: drop-shadow(0 0 4px rgba(57, 169, 255, .22));
    transition: color .2s ease, filter .2s ease, transform .2s ease;
}

#listing.file-icons.list .item:hover .material-icons {
    color: #70c4ff !important;
    filter: drop-shadow(0 0 7px rgba(57, 169, 255, .4));
    transform: scale(1.06);
}

/* 2. Refined row hover */

#listing.file-icons.list .item {
    transition:
        background .22s ease,
        box-shadow .22s ease !important;
}

#listing.file-icons.list .item:hover {
    background: linear-gradient(
        100deg,
        rgba(43, 157, 255, .13),
        rgba(130, 91, 255, .09)
    ) !important;
    box-shadow:
        inset 3px 0 0 rgba(57, 169, 255, .8),
        inset 0 0 22px rgba(57, 169, 255, .035);
}

/* 3. Breadcrumb refinement */

.breadcrumb,
.breadcrumb a,
.breadcrumb span {
    color: #a9bad1 !important;
    transition: color .2s ease, text-shadow .2s ease;
}

.breadcrumb a:hover {
    color: #55b5ff !important;
    text-shadow: 0 0 8px rgba(57, 169, 255, .3);
}

/* 4. Storage indicator */

.credits .vue-simple-progress {
    background: rgba(100, 116, 139, .22) !important;
    border-radius: 20px !important;
    overflow: hidden;
}

.credits .vue-simple-progress-bar {
    background: linear-gradient(
        90deg,
        #299fff,
        #5865f2,
        #a16bff
    ) !important;
    border-radius: 20px !important;
    box-shadow: 0 0 9px rgba(89, 112, 255, .4);
    transition: width .6s ease !important;
}
/* =========================================================
   MACGLASS MIDNIGHT - FINAL POLISH
   ========================================================= */

/* 1. Sidebar - consistent typography */

nav {
    font-size: 14px !important;
}

nav button.action {
    font-size: 14px !important;
}

nav button.action span {
    font-size: 14px !important;
}

/* Admin username */

nav > div,
nav .user,
nav .username {
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* 2. Compact file rows */

#listing.file-icons.list .item {
    min-height: 50px !important;
    height: 50px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Keep file names and metadata balanced */

#listing .name,
#listing .size,
#listing .modified {
    line-height: 1.3 !important;
}

/* 3. Breadcrumb - remove rectangular background */

#listing > div:first-child,
#listing .breadcrumbs,
#listing .breadcrumb {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Breadcrumb text and icons */

#listing .breadcrumbs *,
#listing .breadcrumb * {
    background: transparent !important;
}

/* 4. Preserve the clean main content background */

#listing {
    background-color: transparent !important;
}
/* =========================================================
   MACGLASS MIDNIGHT - BREADCRUMB CLEANUP
   Remove the rectangular background behind navigation
   ========================================================= */

#breadcrumbs,
.breadcrumbs,
.breadcrumb,
nav.breadcrumbs {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
/* =========================================================
   MACGLASS MIDNIGHT - BREADCRUMB TRANSPARENT
   ========================================================= */

div.breadcrumbs {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
}

/* Preserve breadcrumb text and icons */

div.breadcrumbs a,
div.breadcrumbs span,
div.breadcrumbs i {
    background: transparent !important;
    box-shadow: none !important;
}
/* =========================================================
   MACGLASS MIDNIGHT - ACTIVE BREADCRUMB
   Highlight current folder
   ========================================================= */

/* Current folder */
div.breadcrumbs a[aria-current="page"] {
    color: #65baff !important;
    font-weight: 600 !important;
    text-shadow: 0 0 12px rgba(57, 152, 255, .28);
    transition: color .2s ease, text-shadow .2s ease;
}

/* Subtle hover */
div.breadcrumbs a[aria-current="page"]:hover {
    color: #91ccff !important;
    text-shadow: 0 0 16px rgba(57, 152, 255, .45);
}

/* Previous folders */
div.breadcrumbs a:not([aria-current="page"]) {
    color: #9aabc2 !important;
    transition: color .2s ease;
}

div.breadcrumbs a:not([aria-current="page"]):hover {
    color: #65baff !important;
}

/* Breadcrumb separators */
div.breadcrumbs .chevron {
    color: #536982 !important;
    opacity: .8;
}
/* =========================================================
   MACGLASS MIDNIGHT - CONTEXT MENU
   ========================================================= */

/* Context menu surface */
.context-menu {
    background: rgba(15, 25, 42, .97) !important;
    border: 1px solid rgba(100, 160, 255, .20);
    border-radius: 13px !important;
    padding: 5px !important;
    box-shadow:
        0 16px 40px rgba(0, 0, 0, .48),
        inset 0 1px 0 rgba(255, 255, 255, .045);
    backdrop-filter: blur(18px);
    overflow: hidden;
}

/* Context menu items */
.context-menu button.action {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 12px !important;
    margin: 2px 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #cbd8eb !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: background .18s ease, color .18s ease !important;
}

/* Context menu icons */
.context-menu button.action .material-icons {
    font-size: 19px !important;
    margin-right: 10px !important;
    color: #70baff !important;
}

/* Hover */
.context-menu button.action:hover {
    background: linear-gradient(
        100deg,
        rgba(38, 156, 245, .20),
        rgba(139, 92, 246, .12)
    ) !important;
    color: #ffffff !important;
}

/* Hover icon */
.context-menu button.action:hover .material-icons {
    color: #9acfff !important;
}

/* Remove unnecessary separators */
.context-menu button.action:not(:last-child) {
    border-bottom: 1px solid rgba(148, 163, 184, .055);
}

/* =========================================================
   MACGLASS MIDNIGHT - REFINEMENT 07
   Top toolbar blue icons + modern breadcrumb Home
   ========================================================= */

/* Top toolbar icons - consistent electric blue */

header button.action .material-icons {
    color: #3998ff !important;
    transition:
        color .2s ease,
        text-shadow .2s ease,
        transform .2s ease;
}

/* Subtle hover illumination */

header button.action:hover .material-icons {
    color: #63b3ff !important;
    text-shadow: 0 0 10px rgba(57, 152, 255, .45);
}

/* Breadcrumb Home - modern outline icon */

.breadcrumbs a[aria-label="Home"] .material-icons {
    display: inline-block;
    width: 27px;
    height: 27px;
    font-size: 0 !important;
    line-height: 0;
    background-color: #3998ff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10.5 12 3l9 7.5M5.5 9.5V21h13V9.5M9.5 21v-7h5v7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10.5 12 3l9 7.5M5.5 9.5V21h13V9.5M9.5 21v-7h5v7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: background-color .2s ease, filter .2s ease;
}

/* Home hover */

.breadcrumbs a[aria-label="Home"]:hover .material-icons {
    background-color: #63b3ff;
    filter: drop-shadow(0 0 5px rgba(57, 152, 255, .65));
}
/* =========================================================
   MACGLASS MIDNIGHT - HOME BREADCRUMB
   ========================================================= */

.breadcrumbs a[aria-label="Home"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center;
    color: #3998ff !important;
}

.breadcrumbs a[aria-label="Home"] .material-icons {
    color: #3998ff !important;
    font-size: 26px !important;
    text-shadow: 0 0 12px rgba(57, 152, 255, .25);
}
/* =========================================================
   MACGLASS MIDNIGHT - ICONS FINAL REFINEMENT
   ========================================================= */

/* TOP TOOLBAR - consistent blue icons */

header button.action .material-icons {
    color: #3998ff !important;
    font-size: 22px !important;
    transition: color .2s ease, transform .2s ease;
}

header button.action:hover .material-icons {
    color: #70bdff !important;
    transform: translateY(-1px);
}

/* SIDEBAR - blue navigation icons */

nav button.action .material-icons {
    color: #3998ff !important;
    font-size: 23px !important;
    transition: color .2s ease, transform .2s ease;
}

nav button.action:hover .material-icons {
    color: #70bdff !important;
    transform: translateX(2px);
}

/* BREADCRUMBS - restore and align Home icon */

.breadcrumbs a[aria-label="Home"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 40px !important;
    padding: 0 !important;
    overflow: visible !important;
    color: #3998ff !important;
}

.breadcrumbs a[aria-label="Home"] .material-icons {
    display: inline-block !important;
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    font-size: 28px !important;
    font-family: "Material Icons" !important;
    color: #3998ff !important;
    overflow: visible !important;
    text-shadow: 0 0 12px rgba(57, 152, 255, .3);
}

.breadcrumbs {
    overflow: visible !important;
}
/* =========================================================
   MACGLASS MIDNIGHT - SIDEBAR & HOME FINAL FIX
   ========================================================= */

/* All sidebar icons */

nav .material-icons {
    color: #3998ff !important;
    opacity: 1 !important;
}

/* Sidebar icon hover */

nav button.action:hover .material-icons {
    color: #70bdff !important;
}

/* Home - solid Material Icon */

.breadcrumbs a[aria-label="Home"] .material-icons {
    font-family: "Material Icons" !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-feature-settings: "liga" !important;
    -webkit-font-feature-settings: "liga" !important;
    color: #3998ff !important;
    font-size: 30px !important;
    text-shadow: 0 0 12px rgba(57, 152, 255, .3);
}
/* MACGLASS - FINAL SIDEBAR ICON COLOUR */

nav .material-icons,
nav i.material-icons,
nav button .material-icons,
nav a .material-icons {
    color: #3998ff !important;
}

/* HOME - solid house icon */

.breadcrumbs a[aria-label="Home"] .material-icons {
    font-size: 30px !important;
    color: #3998ff !important;
    font-family: "Material Icons" !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-feature-settings: "liga" !important;
    -webkit-font-feature-settings: "liga" !important;
    text-shadow: 0 0 12px rgba(57, 152, 255, .3);
}

/* =========================================================
   MACGLASS MIDNIGHT - REFINEMENT 07
   Sidebar icons + filled Home breadcrumb
   ========================================================= */

:root {
    --mg-icon-blue: #3998ff;
}

/* Sidebar: consistent blue icons */
nav button.action .material-icons {
    color: var(--mg-icon-blue) !important;
    transition: color .2s ease, filter .2s ease;
}

/* Subtle blue glow on sidebar icons */
nav button.action:hover .material-icons {
    color: #59b2ff !important;
    filter: drop-shadow(0 0 5px rgba(57, 152, 255, .35));
}

/* Home breadcrumb: blue filled Material Icon */
.breadcrumbs a[aria-label="Home"] .material-icons {
    font-family: "Material Icons" !important;
    font-weight: normal !important;
    font-style: normal !important;
    color: var(--mg-icon-blue) !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: 0 0 10px rgba(57, 152, 255, .35);
    font-size: 27px !important;
}

/* =========================================================
   MACGLASS MIDNIGHT - REFINEMENT 08
   Uniform sidebar icons + filled Home icon
   ========================================================= */

/* All sidebar icons */
nav .material-icons {
    color: #3998ff !important;
    -webkit-text-fill-color: #3998ff !important;
    opacity: 1 !important;
}

/* Sidebar hover */
nav button.action:hover .material-icons {
    color: #59b2ff !important;
    -webkit-text-fill-color: #59b2ff !important;
    filter: drop-shadow(0 0 5px rgba(57, 152, 255, .4));
}

/* Home: replace outline with filled Material Icon */
.breadcrumbs a[aria-label="Home"] .material-icons {
    font-size: 0 !important;
    color: #3998ff !important;
    text-shadow: none !important;
}

.breadcrumbs a[aria-label="Home"] .material-icons::before {
    content: "\e88a";
    font-family: "Material Icons";
    font-size: 28px;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    color: #3998ff;
    -webkit-text-fill-color: #3998ff;
    text-shadow: 0 0 10px rgba(57, 152, 255, .35);
}

/* MACGLASS MIDNIGHT - USER ACCENT */

nav > button.action:first-child .material-icons,
nav > button.action:first-child span {
    color: #A78BFA !important;
    -webkit-text-fill-color: #A78BFA !important;
}

nav > button.action:first-child .material-icons {
    filter: drop-shadow(0 0 6px rgba(167, 139, 250, .35));
}

nav > button.action:first-child span {
    font-weight: 600 !important;
}