/* Alghafat brand + responsive skin for Modoboa webmail (Vuetify SPA) — matches alghafat.com */
@font-face{ font-family:'Vazirmatn'; src:url('/sitestatic/css/vazirmatn.woff2') format('woff2'); font-weight:100 900; font-display:swap; }

.v-theme--light{
  --v-theme-primary:37,99,235!important;       /* royal blue accent */
  --v-theme-on-primary:255,255,255!important;
  --v-theme-secondary:2,43,89!important;        /* navy */
  --v-theme-background:243,246,251!important;
  --v-theme-on-background:11,30,59!important;
}
.v-application{ font-family:'Vazirmatn',system-ui,-apple-system,'Segoe UI',sans-serif!important; background:#f3f6fb!important; }
html,body,.v-application{ overflow-x:hidden!important; max-width:100vw; }

/* Brand logo in the app bar (Vuetify v-img.logo) */
.logo{
  background-image:url('/sitestatic/css/alghafat-logo.png')!important;
  background-size:contain!important; background-repeat:no-repeat!important; background-position:center!important;
  min-height:38px!important;
}
.logo img, .logo .v-img__img{ opacity:0!important; }

/* Softer, alghafat.com-like surfaces */
.v-card{ border-radius:16px!important; }
.v-btn{ border-radius:10px!important; text-transform:none!important; letter-spacing:0!important; font-weight:600!important; }
.v-text-field .v-field, .v-field{ border-radius:12px!important; }
.v-list{ --v-theme-surface:255,255,255; }

/* Mobile: stop toolbar items clipping, tighten density */
@media (max-width:600px){
  .v-toolbar__content{ padding-inline:6px!important; }
  .v-toolbar .v-btn--icon{ width:38px!important; height:38px!important; }
  .top-menu{ gap:0!important; }
  .v-list-item{ padding-inline:12px!important; }
}

/* Dense action toolbars: scroll horizontally on small screens instead of clipping */
@media (max-width:820px){
  .v-toolbar__content{ overflow-x:auto!important; overflow-y:hidden!important; flex-wrap:nowrap!important; }
  .v-toolbar__content::-webkit-scrollbar{ height:0; display:none; }
  .v-toolbar__content{ scrollbar-width:none; }
}

/* ---- v3: navy sidebar (brand band) + kill stray btn-group scrollbar ---- */
.v-navigation-drawer{
  background:linear-gradient(180deg,#022b59 0%,#011a36 100%)!important;
  border-inline-end:1px solid rgba(255,255,255,.06)!important;
}
/* nav items readable on navy; active = royal-blue pill */
.v-navigation-drawer .v-list-item{ color:rgba(255,255,255,.86)!important; border-radius:10px!important; }
.v-navigation-drawer .v-list-item--active{ background:rgba(37,99,235,.32)!important; color:#fff!important; }
.v-navigation-drawer .v-list-item--active .v-icon{ color:#fff!important; }
.v-navigation-drawer .v-icon{ color:rgba(255,255,255,.72)!important; }
/* Compose button pops on navy */
.v-navigation-drawer .v-btn{ background:#2563eb!important; color:#fff!important; }
/* remove the 2px overflow scrollbar on split-button groups */
.v-btn-group{ overflow:visible!important; }

/* ---- v4: clean folder nav on navy (inactive transparent, active = blue pill) ---- */
.v-navigation-drawer .mailbox{ color:#fff!important; border-radius:10px!important; transition:background .15s ease!important; }
.v-navigation-drawer .mailbox.bg-primary{ background:transparent!important; }           /* inactive */
.v-navigation-drawer .mailbox.bg-primary:hover{ background:rgba(255,255,255,.10)!important; }
.v-navigation-drawer .mailbox.bg-primary-lighten-1{ background:#2563eb!important; box-shadow:0 4px 14px rgba(37,99,235,.35)!important; } /* active */
.v-navigation-drawer .mailbox .v-icon{ color:#fff!important; }

/* ---- v5: mobile/tablet — collapse the overlay nav drawer to a slim icon rail
   so it never covers the inbox (labels hidden, icons kept, content offset) ---- */
@media (max-width:600px){
  .v-navigation-drawer--mobile{ width:68px!important; }
  .v-navigation-drawer--mobile .v-navigation-drawer__content{ overflow:hidden!important; }
  .v-navigation-drawer--mobile .mailbox{ justify-content:center!important; padding-inline:0!important; }
  .v-navigation-drawer--mobile .mailbox > span,
  .v-navigation-drawer--mobile .mailbox span:not(.v-icon):not([class*=mdi]){ display:none!important; }
  .v-navigation-drawer--mobile .logo{ max-width:46px!important; margin-inline:auto!important; }
  .v-navigation-drawer--mobile .v-btn__content span{ display:none!important; }
  .v-application:has(.v-navigation-drawer--mobile) .v-main{ padding-left:68px!important; }
}

/* v6: make Compose a compact icon button inside the mobile rail (was spilling 12px) */
@media (max-width:600px){
  .v-navigation-drawer--mobile .v-btn{ min-width:0!important; width:48px!important; padding:0!important; margin-inline:auto!important; }
}

/* v7: tablet — keep the full labeled navy sidebar but offset content beside it */
@media (min-width:601px) and (max-width:1024px){
  .v-navigation-drawer--mobile{ width:236px!important; }
  .v-application:has(.v-navigation-drawer--mobile) .v-main{ padding-left:236px!important; }
}

/* ---- v8: email list — flush, dense, continuous rows (standard mail layout) ---- */
.emails .v-card{
  border-radius:0!important;
  margin:0!important;
  border:0!important;
  border-bottom:1px solid #e8eef7!important;
  box-shadow:none!important;
  padding:9px 18px!important;
  transition:background .12s ease!important;
}
.emails .v-card:hover{ background:#f3f7fe!important; }
/* wrap the whole list in one rounded, hairline-bordered container */
.emails{ background:#fff!important; }
/* toolbar (search + actions) card: tighten, align with list */
.position-relative > .v-card:first-child{ box-shadow:none!important; border:1px solid #e8eef7!important; border-radius:14px!important; }

/* ---- v9: standardize toolbar action icons + tighten header gap ---- */
.position-relative > .v-card .v-btn.v-btn--icon{ background:#f1f5fd!important; box-shadow:none!important; }
.position-relative > .v-card .v-btn.v-btn--icon .v-btn__overlay{ opacity:0!important; }
.position-relative > .v-card .v-btn.v-btn--icon:hover{ background:#e2ebfb!important; }
.position-relative > .v-card:first-child{ margin-top:16px!important; }
/* slightly tighter list rows */
.emails .v-card{ padding-top:8px!important; padding-bottom:8px!important; }

/* v10: kill the tonal underlay tint on action icons (source of the mismatched red/orange squares) */
.position-relative > .v-card .v-btn.v-btn--icon .v-btn__underlay{ opacity:0!important; }

/* v11: mobile rail — Compose label ("Compose" text) was spilling out of the 48px button.
   The text sits directly in .v-btn__content (not a span) and the pencil is a separate
   prepend icon, so hide the content text and keep the icon → clean icon-only button. */
@media (max-width:600px){
  .v-navigation-drawer--mobile .v-btn.bg-secondary{ width:48px!important; min-width:48px!important; padding:0!important; overflow:hidden!important; }
  .v-navigation-drawer--mobile .v-btn.bg-secondary .v-btn__content{ display:none!important; }
  .v-navigation-drawer--mobile .v-btn.bg-secondary .v-btn__prepend{ margin:0!important; }
}

/* ================= v12: sidebar header + folder spacing (desktop full drawer) ================= */
.v-navigation-drawer:not(.v-navigation-drawer--mobile) .d-flex.align-center:has(.logo){
  padding:16px 10px 8px 16px!important;
}
.v-navigation-drawer:not(.v-navigation-drawer--mobile) .logo{
  max-width:132px!important; margin:2px auto 0 2px!important;
}
/* collapse chevron: subtle, aligned top-right */
.v-navigation-drawer:not(.v-navigation-drawer--mobile) .d-flex.align-center:has(.logo) .v-btn{
  margin-left:auto!important;
}
/* Compose: prominent full-width button with breathing room */
.v-navigation-drawer:not(.v-navigation-drawer--mobile) .d-flex.justify-center:has(.bg-secondary){
  padding:0 14px!important; margin:6px 0 22px!important;
}
.v-navigation-drawer:not(.v-navigation-drawer--mobile) .v-btn.bg-secondary{
  width:100%!important; height:42px!important; border-radius:12px!important;
}
/* folder nav items: even spacing + rounded rows */
.v-navigation-drawer:not(.v-navigation-drawer--mobile) .pl-3.text-body-medium{ padding:1px 10px!important; }
.v-navigation-drawer:not(.v-navigation-drawer--mobile) .mailbox{ border-radius:10px!important; padding:9px 12px!important; }

/* ================= v13: reading-view toolbar — spacing + cleaner Reply split button ================= */
.v-toolbar__content:has(.mdi-reply){ gap:10px!important; padding-inline:12px!important; align-items:center!important; }
.v-toolbar__content:has(.mdi-reply) > .v-btn,
.v-toolbar__content:has(.mdi-reply) > .v-btn-group{ margin:0!important; }
/* the Reply split button: rounded with a subtle divider between Reply and its dropdown chevron */
.v-btn-group:has(.mdi-reply){ border-radius:12px!important; overflow:hidden!important; box-shadow:0 4px 12px rgba(37,99,235,.22)!important; }
.v-btn-group:has(.mdi-reply) > .v-btn:first-child{ padding-inline:18px!important; }
.v-btn-group:has(.mdi-reply) > .v-btn + .v-btn{ border-left:1px solid rgba(255,255,255,.30)!important; }
/* action icons (back/trash/junk/gear) — uniform subtle squares, consistent with the list toolbar */
.v-toolbar__content:has(.mdi-reply) .v-btn.v-btn--icon{ background:#f1f5fd!important; box-shadow:none!important; }
.v-toolbar__content:has(.mdi-reply) .v-btn.v-btn--icon .v-btn__underlay,
.v-toolbar__content:has(.mdi-reply) .v-btn.v-btn--icon .v-btn__overlay{ opacity:0!important; }
.v-toolbar__content:has(.mdi-reply) .v-btn.v-btn--icon:hover{ background:#e2ebfb!important; }

/* ================= v14: remove the Alghafat logo from the sidebar entirely + tidy the header ================= */
.v-navigation-drawer .logo{ display:none!important; }
/* desktop: collapse-chevron sits alone at the top-right, with breathing room */
.v-navigation-drawer:not(.v-navigation-drawer--mobile) .d-flex.align-center:has(.logo){
  padding:12px 10px 6px 12px!important; justify-content:flex-end!important; min-height:0!important;
}
/* mobile rail: center the collapse chevron; folders sit right under compose */
@media (max-width:600px){
  .v-navigation-drawer--mobile .d-flex.align-center:has(.logo){ justify-content:center!important; padding:8px 0 2px!important; }
}