/* ============================================================================
   SHAM1 branding / layout fixes for the Modoboa SPA (Vue 3 + Vuetify 3)
   v4 — 2026-07-20

   Actual markup (from frontend_dist/assets/WebmailLayout-*.js & NavBar):

     <v-navigation-drawer color="primary">
       __prepend
         <div class="d-flex align-center">          <- header row, NO padding
           <div class="v-img v-responsive logo">     <- VImg wrapper
             <div class="v-responsive__sizer"></div> <- aspect-ratio spacer
             <img class="v-img__img">                <- position:absolute!
           </div>
           <button class="v-btn">chevron</button>
         </div>
         <div class="d-flex justify-center mb-4">    <- "Compose" button
       ...

   Vuetify sets  .v-img__img { position:absolute; top:0; left:0;
                               width:100%; height:100%; z-index:-1 }
   so padding/margin/background applied to the <img> itself are meaningless.
   The supported escape hatch is the `.v-img--fit-content` behaviour, which we
   replicate below on our logo only.
   ========================================================================= */

/* ---------------------------------------------------------------- header row
   Give the logo real breathing room and push the collapse chevron to the far
   right instead of letting it sit against the logo.                          */
.v-navigation-drawer__prepend > .d-flex.align-center,
.v-navigation-drawer__content > .d-flex.align-center:first-child {
    padding: 14px 10px 12px 14px !important;
    box-sizing: border-box !important;
    column-gap: 8px !important;
}

.v-navigation-drawer__prepend > .d-flex.align-center > .v-btn,
.v-navigation-drawer__content > .d-flex.align-center:first-child > .v-btn {
    margin-inline-start: auto !important;
    flex: 0 0 auto !important;
}

/* ---------------------------------------------------------------- the logo */
.v-navigation-drawer .v-img.logo {
    flex: 0 0 auto !important;
    max-width: 168px !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    padding: 7px 11px !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .22) !important;
    overflow: visible !important;
}

/* replicate .v-img--fit-content: drop the aspect-ratio spacer and take the
   image out of absolute positioning so the wrapper's padding actually works */
.v-navigation-drawer .v-img.logo > .v-responsive__sizer {
    display: none !important;
}

.v-navigation-drawer .v-img.logo > .v-img__img {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

/* ------------------------------------------------- "Compose" button spacing */
.v-navigation-drawer:not(.v-navigation-drawer--rail)
    .v-navigation-drawer__prepend > .d-flex.justify-center {
    padding-inline: 14px !important;
    box-sizing: border-box !important;
}

.v-navigation-drawer:not(.v-navigation-drawer--rail)
    .v-navigation-drawer__prepend > .d-flex.justify-center > .v-btn {
    width: 100% !important;
}

/* --------------------------------------------------------------- rail mode */
.v-navigation-drawer--rail .v-img.logo {
    display: none !important;
}

.v-navigation-drawer--rail .v-navigation-drawer__prepend > .d-flex.align-center {
    padding: 10px 4px !important;
    justify-content: center !important;
}

.v-navigation-drawer--rail .v-navigation-drawer__prepend > .d-flex.align-center > .v-btn {
    margin-inline-start: 0 !important;
}

/* ============================================================================
   Webmail sidebar FOOTER — folder menu (gear) + mailbox quota bar.

   Markup:  <div class="border-t-sm d-flex align-center bg-grey">
              <button class="v-btn ml-2"><i class="mdi-cog"></i></button>
              <div class="v-progress-linear" aria-valuenow="…">   <- quota
            </div>
   inside .v-navigation-drawer__append.

   `bg-grey` is a Vuetify utility that paints a light grey slab across the
   bottom of the navy sidebar — it reads as a broken loader. Repaint it to
   match the drawer.
   ========================================================================= */
.v-navigation-drawer__append > .bg-grey {
    background: rgba(255, 255, 255, .06) !important;
    border-top: 1px solid rgba(255, 255, 255, .14) !important;
    color: #ffffff !important;
    padding: 6px 12px !important;
    min-height: 46px !important;
    column-gap: 12px !important;
    box-sizing: border-box !important;
}

.v-navigation-drawer__append > .bg-grey > .v-btn {
    margin-inline-start: 0 !important;
    color: #ffffff !important;
    opacity: .85;
}

.v-navigation-drawer__append > .bg-grey > .v-btn:hover,
.v-navigation-drawer__append > .bg-grey > .v-btn:focus-visible {
    opacity: 1;
}

/* The quota endpoint returns usage = -1 when no quota is set, so the bar is
   permanently empty. Show it only once it actually carries information. */
.v-navigation-drawer__append .v-progress-linear[aria-valuenow="-1"],
.v-navigation-drawer__append .v-progress-linear[aria-valuenow="0"] {
    display: none !important;
}

.v-navigation-drawer__append .v-progress-linear {
    height: 6px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
}

.v-navigation-drawer__append .v-progress-linear__background {
    background-color: rgba(255, 255, 255, .18) !important;
    opacity: 1 !important;
}

.v-navigation-drawer--rail .v-navigation-drawer__append > .bg-grey {
    padding: 6px 4px !important;
    justify-content: center !important;
}

/* ============================================================================
   Compose toolbar — stray horizontal scrollbar under the SEND button.

   Vuetify:  .v-btn-group { overflow-x: auto }
   Modoboa:  <v-btn-group><v-btn class="ml-2" text="Send"> … </v-btn-group>

   The ml-2 (8px) lives INSIDE the group, so the content is 8px wider than the
   group and Vuetify renders a scrollbar. Move the margin onto the group.
   ========================================================================= */
.v-toolbar .v-btn-group {
    overflow: hidden !important;
    margin-inline-start: 8px !important;
}

.v-toolbar .v-btn-group > .v-btn.ml-2 {
    margin-inline-start: 0 !important;
}