/* =========================================
   WAFFLE MEDIA — FILEBROWSER THEME
   ========================================= */

:root{
    --waffle-orange: #f19e1c;
    --waffle-orange-hover: #ffb84d;

    --waffle-bg: #111111;
    --waffle-card: #171717;
    --waffle-hover: #222222;

    --waffle-selected: #2a2a2a;

    --waffle-text: #ffffff;
    --waffle-muted: #cfcfcf;

    --waffle-border: rgba(255,255,255,.08);
}

/* =========================================
   BODY
   ========================================= */

body{
    background:
      linear-gradient(
        135deg,
        #111111 0%,
        #171717 100%
      ) !important;

    color: var(--waffle-text) !important;

    font-family:
      Inter,
      SF Pro Display,
      system-ui,
      sans-serif !important;
}

/* =========================================
   HEADER
   ========================================= */

header,
.navbar,
.toolbar{
    background: rgba(17,17,17,.92) !important;

    backdrop-filter: blur(12px);

    border-bottom:
      1px solid var(--waffle-border) !important;
}

/* =========================================
   SIDEBAR
   ========================================= */

.sidebar{
    background: #151515 !important;

    border-right:
      1px solid var(--waffle-border) !important;
}

/* =========================================
   FILES / CARDS
   ========================================= */

.item,
.card,
.listing,
.file{
    background: var(--waffle-card) !important;

    border:
      1px solid var(--waffle-border) !important;

    border-radius: 16px !important;

    transition: all .2s ease;
}

/* Hover */

.item:hover,
.card:hover,
.file:hover{
    background: var(--waffle-hover) !important;

    border-color:
      rgba(241,158,28,.25) !important;

    transform: translateY(-1px);
}

/* =========================================
   SELECTED ITEMS
   ========================================= */

.selected,
.active,
tr.selected,
tr.active,
.item.selected,
.item.active,
[aria-selected="true"]{

    background: #2a2a2a !important;

    border-color:
      rgba(255,255,255,.08) !important;

    color: white !important;
}

/* Hover selected */

.selected:hover,
.active:hover{
    background: #333333 !important;
}

/* =========================================
   REMOVE BLUE STATES
   ========================================= */

*:focus{
    outline: none !important;
    box-shadow: none !important;
}

::selection{
    background: #3a3a3a !important;
    color: white !important;
}

*{
    -webkit-tap-highlight-color:
      transparent !important;
}

/* =========================================
   BUTTONS
   ========================================= */

button,
.button{
    background:
      linear-gradient(
        135deg,
        #f19e1c,
        #ffb84d
      ) !important;

    color: #111111 !important;

    border: none !important;

    border-radius: 14px !important;

    font-weight: 700 !important;
}

/* Hover */

button:hover,
.button:hover{
    filter: brightness(1.05);

    transform: scale(1.02);
}

/* =========================================
   INPUTS
   ========================================= */

input,
textarea,
select{
    background: #1b1b1b !important;

    border:
      1px solid rgba(255,255,255,.08) !important;

    color: white !important;

    border-radius: 12px !important;
}

/* =========================================
   ICONS / FOLDERS
   ========================================= */

svg,
svg *,
.icon,
.file-icon,
.item__icon,
i{

    color: #000000!important;

    fill: #ffffff !important;

    stroke: #ffffff !important;
}

/* Glow premium */

svg{
    filter:
      drop-shadow(
        0 0 4px rgba(255,255,255,.08)
      );
}

/* =========================================
   SCROLLBAR
   ========================================= */

::-webkit-scrollbar{
    width: 10px;
}

::-webkit-scrollbar-track{
    background: #111111;
}

::-webkit-scrollbar-thumb{
    background:
      linear-gradient(
        180deg,
        #f19e1c,
        #ffb84d
      );

    border-radius: 20px;
}

/* =========================================
   MODALS
   ========================================= */

.modal,
.dialog{
    background: #171717 !important;

    border-radius: 20px !important;

    border:
      1px solid rgba(255,255,255,.08) !important;
}

/* =========================================
   REMOVE EXTERNAL BRANDING
   ========================================= */

.github-link,
.powered-by{
    display:none !important;
}

/* =========================================
   SMOOTH UI
   ========================================= */

*{
    transition:
      background .2s ease,
      border .2s ease,
      color .2s ease,
      transform .2s ease;
}
/* =========================================
   REMOVE FINAL BLUE ACTIVE STATE
   ========================================= */

/* Vuetify active states */

.v-list-item--active,
.router-link-active,
.router-link-exact-active,
.active,
.selected,
[aria-selected="true"]{

    background: #2a2a2a !important;

    color: #ffffff !important;

    border-color:
      rgba(255,255,255,.08) !important;
}

/* Hover selected */

.v-list-item--active:hover,
.router-link-active:hover,
.selected:hover{
    background: #333333 !important;
}

/* Remove Vuetify blue */

.v-list-item--active::before,
.v-list-item--active::after{
    opacity: 0 !important;
    background: transparent !important;
}

/* Remove focus ring */

*:focus{
    outline: none !important;
    box-shadow: none !important;
}

/* Nuclear override */

.v-list-item--active *{
    color: #ffffff !important;
}

/* =========================================
   WHITE ICONS + BLACK BACKGROUND
   ========================================= */

/* Fondo negro de iconos */

.item__icon,
.file-icon,
.icon,
svg{
    background: #000000 !important;

    border-radius: 10px;

    padding: 4px;
}

/* Iconos blancos */

svg,
svg *,
.icon,
.file-icon,
.item__icon,
i{

    color: #ffffff !important;

    fill: #ffffff !important;

    stroke: #ffffff !important;
}

/* Hover elegante */

.item:hover svg,
.item:hover .icon{
    background: #111111 !important;
}