/*
 * GO TIS Mail - Adminto-inspired UX
 * Visual styling - supports both LIGHT and DARK mode
 */

/* ============================================
   LIGHT MODE TOKENS (default)
============================================ */
html:not(.dark-mode) body:not(.task-login) {
  --gotis-primary: #4a8dae;
  --gotis-primary-dark: #1e3d52;
  --gotis-primary-light: #5b9fc4;
  --gotis-bg: #fafbfd;
  --gotis-card-bg: #ffffff;
  --gotis-border: #e7eaef;
  --gotis-border-soft: #f0f2f5;
  --gotis-text: #313a46;
  --gotis-text-muted: #6c757d;
  --gotis-text-soft: #98a6ad;
  --gotis-hover: rgba(74, 141, 174, 0.06);
  --gotis-selected: rgba(74, 141, 174, 0.1);
  --gotis-shadow: 0 1px 2px rgba(38, 51, 77, 0.06);
}

/* ============================================
   DARK MODE TOKENS
============================================ */
html.dark-mode body:not(.task-login) {
  --gotis-primary: #5b9fc4;
  --gotis-primary-dark: #4a8dae;
  --gotis-primary-light: #7bb6d6;
  --gotis-bg: #1a2530;
  --gotis-card-bg: #232f3c;
  --gotis-border: #2d3a47;
  --gotis-border-soft: #283441;
  --gotis-text: #e1e7ed;
  --gotis-text-muted: #a0adb8;
  --gotis-text-soft: #6c7a86;
  --gotis-hover: rgba(91, 159, 196, 0.08);
  --gotis-selected: rgba(91, 159, 196, 0.18);
  --gotis-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ============================================
   COMMON BASE
============================================ */
body:not(.task-login) {
  --gotis-radius: 8px;
  --gotis-radius-sm: 4px;
  --gotis-radius-lg: 12px;

  --color-link: var(--gotis-primary);
  --color-link-hover: var(--gotis-primary-dark);
  --color-primary: var(--gotis-primary);
  --color-toolbar-button-icon-selected: var(--gotis-primary);
  --color-list-selected-background: var(--gotis-selected);
  --color-list-selected-text: var(--gotis-text);
  --color-list-hover-background: var(--gotis-hover);

  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif !important;
  font-size: 13px !important;
  -webkit-font-smoothing: antialiased;
  background: var(--gotis-bg) !important;
  color: var(--gotis-text) !important;
}

body:not(.task-login) #layout {
  background: var(--gotis-bg) !important;
}

/* ============================================
   TYPOGRAPHY
============================================ */
body:not(.task-login) h1,
body:not(.task-login) h2,
body:not(.task-login) h3,
body:not(.task-login) h4,
body:not(.task-login) h5 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  color: var(--gotis-text) !important;
}

body:not(.task-login) a {
  color: var(--gotis-primary);
  text-decoration: none;
}

body:not(.task-login) a:hover {
  color: var(--gotis-primary-dark);
}

/* ============================================
   PANELS - card-style
============================================ */
body:not(.task-login) #layout-sidebar,
body:not(.task-login) #layout-list,
body:not(.task-login) #layout-content {
  background: var(--gotis-card-bg) !important;
  border-color: var(--gotis-border) !important;
  color: var(--gotis-text) !important;
}

body:not(.task-login) #layout-sidebar,
body:not(.task-login) #layout-list {
  border-right: 1px solid var(--gotis-border) !important;
}

/* Compose page - main background */
body.task-mail.action-compose,
body.task-settings,
body.task-addressbook {
  background: var(--gotis-bg) !important;
}

body.task-mail.action-compose #composeview-container,
body.task-mail.action-compose .compose-form,
body.task-settings #settings-content,
body.task-settings #preferences-frame,
body.task-addressbook #contact-frame {
  background: var(--gotis-card-bg) !important;
  color: var(--gotis-text) !important;
}

/* ============================================
   HEADERS
============================================ */
body:not(.task-login) .header,
body:not(.task-login) .boxtitle {
  background: var(--gotis-card-bg) !important;
  border-bottom: 1px solid var(--gotis-border-soft) !important;
  color: var(--gotis-text) !important;
}

body:not(.task-login) .header .header-title,
body:not(.task-login) .header .username,
body:not(.task-login) .boxtitle {
  color: var(--gotis-text) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* ============================================
   FOLDER LIST (sidebar)
============================================ */
body:not(.task-login) .listing.folderlist,
body:not(.task-login) .treelist {
  padding: 8px 0 !important;
  background: var(--gotis-card-bg) !important;
}

body:not(.task-login) .listing.folderlist li > a,
body:not(.task-login) .treelist li > a {
  color: var(--gotis-text-muted) !important;
  padding: 9px 14px !important;
  margin: 2px 8px !important;
  border-radius: var(--gotis-radius-sm) !important;
  border: none !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  transition: all 0.2s ease-in-out !important;
}

body:not(.task-login) .listing.folderlist li > a:hover,
body:not(.task-login) .treelist li > a:hover {
  background: var(--gotis-hover) !important;
  color: var(--gotis-primary) !important;
}

body:not(.task-login) .listing.folderlist li.selected > a,
body:not(.task-login) .treelist li.selected > a {
  background: var(--gotis-selected) !important;
  color: var(--gotis-primary) !important;
  font-weight: 600 !important;
}

body:not(.task-login) .listing.folderlist li > a::before,
body:not(.task-login) .treelist li > a::before {
  color: var(--gotis-text-soft) !important;
  opacity: 0.9 !important;
}

body:not(.task-login) .listing.folderlist li.selected > a::before,
body:not(.task-login) .treelist li.selected > a::before,
body:not(.task-login) .listing.folderlist li:hover > a::before,
body:not(.task-login) .treelist li:hover > a::before {
  color: var(--gotis-primary) !important;
}

/* Unread badge */
body:not(.task-login) .unreadcount {
  background: var(--gotis-selected) !important;
  color: var(--gotis-primary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 50px !important;
  border: none !important;
  min-width: 22px !important;
  text-align: center !important;
}

body:not(.task-login) .listing.folderlist li.selected > a .unreadcount {
  background: var(--gotis-primary) !important;
  color: #fff !important;
}

/* ============================================
   TOOLBAR
============================================ */
body:not(.task-login) .toolbar a.button,
body:not(.task-login) .toolbar button.button {
  color: var(--gotis-text-muted) !important;
  border-radius: 50% !important;
  transition: all 0.2s ease !important;
}

body:not(.task-login) .toolbar a.button:hover,
body:not(.task-login) .toolbar button.button:hover {
  background: var(--gotis-hover) !important;
  color: var(--gotis-primary) !important;
}

body:not(.task-login) .toolbar a.button.selected,
body:not(.task-login) .toolbar a.button.active {
  background: var(--gotis-selected) !important;
  color: var(--gotis-primary) !important;
}

body:not(.task-login) .toolbar a.button.disabled {
  opacity: 0.35 !important;
}

/* Compose / primary action */
body:not(.task-login) a.button.compose,
body:not(.task-login) a.button.create,
body:not(.task-login) button.btn-primary,
body:not(.task-login) button.button.mainaction,
body:not(.task-login) input.button.mainaction {
  background: var(--gotis-primary) !important;
  border-color: var(--gotis-primary) !important;
  color: #fff !important;
  font-weight: 500 !important;
}

body:not(.task-login) a.button.compose:hover,
body:not(.task-login) a.button.create:hover,
body:not(.task-login) button.btn-primary:hover,
body:not(.task-login) button.button.mainaction:hover {
  background: var(--gotis-primary-dark) !important;
  border-color: var(--gotis-primary-dark) !important;
  color: #fff !important;
}

/* ============================================
   MESSAGE LIST
============================================ */
body:not(.task-login) .messagelist {
  background: var(--gotis-card-bg) !important;
  color: var(--gotis-text) !important;
}

body:not(.task-login) .messagelist tr {
  border-bottom: 1px solid var(--gotis-border-soft) !important;
  transition: background 0.15s ease !important;
}

body:not(.task-login) .messagelist tr:hover {
  background: var(--gotis-hover) !important;
}

body:not(.task-login) .messagelist tr.selected,
body:not(.task-login) .messagelist tr.selected td {
  background: var(--gotis-selected) !important;
  color: var(--gotis-text) !important;
}

body:not(.task-login) .messagelist tr.unread td {
  font-weight: 600 !important;
  color: var(--gotis-text) !important;
}

body:not(.task-login) .messagelist tr td {
  border: none !important;
  font-size: 13px !important;
  vertical-align: middle !important;
  color: var(--gotis-text) !important;
}

body:not(.task-login) .messagelist td.date,
body:not(.task-login) .messagelist td.size {
  color: var(--gotis-text-soft) !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
}

body:not(.task-login) .messagelist thead th,
body:not(.task-login) .listing thead th {
  background: var(--gotis-bg) !important;
  color: var(--gotis-text-soft) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  border-bottom: 1px solid var(--gotis-border) !important;
  padding: 10px 12px !important;
}

body:not(.task-login) .messagelist td.flagged span.flagged,
body:not(.task-login) .messagelist td.flag span.flagged,
body:not(.task-login) .flagged .flag {
  color: #f59e0b !important;
}

body:not(.task-login) .messagelist td.attachment,
body:not(.task-login) .messagelist td.threads {
  color: var(--gotis-text-soft) !important;
}

/* ============================================
   CONTACTS / GENERIC TABLES
============================================ */
body:not(.task-login) .contactslist,
body:not(.task-login) .records-table {
  background: var(--gotis-card-bg) !important;
  color: var(--gotis-text) !important;
}

body:not(.task-login) .contactslist tr,
body:not(.task-login) .records-table tr {
  border-bottom: 1px solid var(--gotis-border-soft) !important;
  transition: background 0.15s ease !important;
}

body:not(.task-login) .contactslist tr:hover,
body:not(.task-login) .records-table tr:hover {
  background: var(--gotis-hover) !important;
}

body:not(.task-login) .contactslist tr.selected,
body:not(.task-login) .records-table tr.selected {
  background: var(--gotis-selected) !important;
}

/* ============================================
   MESSAGE READING
============================================ */
body:not(.task-login) #message-header {
  background: var(--gotis-card-bg) !important;
  border-bottom: 1px solid var(--gotis-border-soft) !important;
  color: var(--gotis-text) !important;
}

body:not(.task-login) #message-header .subject {
  color: var(--gotis-text) !important;
  font-weight: 600 !important;
}

body:not(.task-login) .header-headers .header-title {
  color: var(--gotis-text-soft) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
}

body:not(.task-login) #messagebody,
body:not(.task-login) .message-part {
  background: var(--gotis-card-bg) !important;
  color: var(--gotis-text) !important;
  font-family: 'Poppins', sans-serif !important;
  line-height: 1.6 !important;
}

body:not(.task-login) .contactphoto {
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--gotis-primary-dark), var(--gotis-primary-light)) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* ============================================
   FORMS / INPUTS
============================================ */
body:not(.task-login) input.form-control,
body:not(.task-login) textarea.form-control,
body:not(.task-login) select.form-control,
body:not(.task-login) input[type="text"]:not([role="combobox"]),
body:not(.task-login) input[type="email"],
body:not(.task-login) input[type="password"] {
  border: 1px solid var(--gotis-border) !important;
  border-radius: var(--gotis-radius-sm) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  color: var(--gotis-text) !important;
  background: var(--gotis-card-bg) !important;
  transition: all 0.2s ease !important;
}

body:not(.task-login) input.form-control:focus,
body:not(.task-login) textarea.form-control:focus,
body:not(.task-login) select.form-control:focus {
  border-color: var(--gotis-primary) !important;
  box-shadow: 0 0 0 2px rgba(74, 141, 174, 0.15) !important;
  outline: none !important;
}

body:not(.task-login) label {
  color: var(--gotis-text-muted) !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
}

/* ============================================
   SEARCH
============================================ */
body:not(.task-login) .searchbar,
body:not(.task-login) .searchfield {
  border-radius: 50px !important;
  background: var(--gotis-bg) !important;
  border: 1px solid var(--gotis-border) !important;
  transition: all 0.2s ease !important;
}

body:not(.task-login) .searchbar:focus-within,
body:not(.task-login) .searchfield:focus-within {
  background: var(--gotis-card-bg) !important;
  border-color: var(--gotis-primary) !important;
  box-shadow: 0 0 0 3px rgba(74, 141, 174, 0.12) !important;
}

body:not(.task-login) .searchbar input,
body:not(.task-login) .searchfield input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--gotis-text) !important;
}

/* ============================================
   POPUPS / DROPDOWNS
============================================ */
body:not(.task-login) .popupmenu,
body:not(.task-login) .menu.popup,
body:not(.task-login) .dropdown-menu {
  background: var(--gotis-card-bg) !important;
  border: 1px solid var(--gotis-border) !important;
  border-radius: var(--gotis-radius) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  padding: 4px !important;
}

body:not(.task-login) .popupmenu li > a,
body:not(.task-login) .menu.popup li > a,
body:not(.task-login) .dropdown-menu a {
  color: var(--gotis-text) !important;
  border-radius: var(--gotis-radius-sm) !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  transition: background 0.15s ease !important;
}

body:not(.task-login) .popupmenu li > a:hover,
body:not(.task-login) .menu.popup li > a:hover,
body:not(.task-login) .dropdown-menu a:hover {
  background: var(--gotis-hover) !important;
  color: var(--gotis-primary) !important;
}

/* ============================================
   DIALOGS
============================================ */
body:not(.task-login) .ui-dialog {
  background: var(--gotis-card-bg) !important;
  border: 1px solid var(--gotis-border) !important;
  border-radius: var(--gotis-radius-lg) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
}

body:not(.task-login) .ui-dialog-titlebar {
  background: var(--gotis-card-bg) !important;
  border-bottom: 1px solid var(--gotis-border-soft) !important;
  color: var(--gotis-text) !important;
}

body:not(.task-login) .ui-dialog-title {
  color: var(--gotis-text) !important;
  font-weight: 600 !important;
}

body:not(.task-login) .ui-dialog-content {
  color: var(--gotis-text) !important;
  background: var(--gotis-card-bg) !important;
}

/* ============================================
   QUOTA WIDGET
============================================ */
body:not(.task-login) .quota-widget {
  background: var(--gotis-bg) !important;
  border-top: 1px solid var(--gotis-border-soft) !important;
  padding: 12px 16px !important;
  color: var(--gotis-text-muted) !important;
}

body:not(.task-login) .quota-widget .progress {
  background: var(--gotis-border-soft) !important;
  height: 5px !important;
  border-radius: 3px !important;
}

body:not(.task-login) .quota-widget .progress-bar {
  background: var(--gotis-primary) !important;
  border-radius: 3px !important;
}

/* ============================================
   STATUS MESSAGES
============================================ */
body:not(.task-login) #message,
body:not(.task-login) .toolbar-status {
  border-radius: var(--gotis-radius) !important;
  border: none !important;
  font-weight: 500 !important;
  font-family: 'Poppins', sans-serif !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

html:not(.dark-mode) body:not(.task-login) #message.confirmation { background: #d1fae5 !important; color: #065f46 !important; }
html:not(.dark-mode) body:not(.task-login) #message.error { background: #fee2e2 !important; color: #991b1b !important; }
html:not(.dark-mode) body:not(.task-login) #message.warning { background: #fef3c7 !important; color: #92400e !important; }
html:not(.dark-mode) body:not(.task-login) #message.notice { background: #e0f2fe !important; color: #075985 !important; }

html.dark-mode body:not(.task-login) #message.confirmation { background: #064e3b !important; color: #d1fae5 !important; }
html.dark-mode body:not(.task-login) #message.error { background: #7f1d1d !important; color: #fee2e2 !important; }
html.dark-mode body:not(.task-login) #message.warning { background: #78350f !important; color: #fef3c7 !important; }
html.dark-mode body:not(.task-login) #message.notice { background: #075985 !important; color: #e0f2fe !important; }

/* ============================================
   SCROLLBARS
============================================ */
body:not(.task-login) ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

body:not(.task-login) ::-webkit-scrollbar-track {
  background: transparent;
}

body:not(.task-login) ::-webkit-scrollbar-thumb {
  background: rgba(74, 141, 174, 0.3);
  border-radius: 3px;
}

body:not(.task-login) ::-webkit-scrollbar-thumb:hover {
  background: rgba(74, 141, 174, 0.55);
}

/* ============================================
   FIELDSETS
============================================ */
body:not(.task-login) hr {
  border-color: var(--gotis-border-soft) !important;
}

body:not(.task-login) fieldset {
  border: 1px solid var(--gotis-border) !important;
  border-radius: var(--gotis-radius) !important;
  background: var(--gotis-card-bg) !important;
}

body:not(.task-login) fieldset legend {
  color: var(--gotis-text) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
}

/* ============================================
   COMPOSE - dark mode support for the editor area
============================================ */
body.task-mail.action-compose .compose-form,
body.task-mail.action-compose .compose-form table {
  background: var(--gotis-card-bg) !important;
  color: var(--gotis-text) !important;
}

body.task-mail.action-compose .compose-headers {
  border-bottom: 1px solid var(--gotis-border-soft) !important;
}

/* Attachment area */
body:not(.task-login) #attachment-list,
body:not(.task-login) .attachments-list {
  background: var(--gotis-bg) !important;
  border: 2px dashed var(--gotis-border) !important;
  color: var(--gotis-text-muted) !important;
}

/* Toggle switches in compose options */
body:not(.task-login) .form-check-input:checked,
body:not(.task-login) input[type="checkbox"]:checked {
  background-color: var(--gotis-primary) !important;
  border-color: var(--gotis-primary) !important;
}

/* ============================================
   RESPONSIVE - TABLET (≤ 1024px)
============================================ */
@media screen and (max-width: 1024px) {
  body:not(.task-login) {
    font-size: 14px !important;
  }

  /* Touch-friendly buttons */
  body:not(.task-login) .toolbar a.button,
  body:not(.task-login) .toolbar button.button {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px !important;
  }

  /* Mobile navbar/topbar */
  body:not(.task-login) #taskmenu a,
  body:not(.task-login) #topline a {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Folder list items - bigger tap targets */
  body:not(.task-login) .listing.folderlist li > a,
  body:not(.task-login) .treelist li > a {
    padding: 12px 14px !important;
    font-size: 14px !important;
    min-height: 44px !important;
  }

  /* Message list rows - taller for touch */
  body:not(.task-login) .messagelist tr td {
    padding: 14px 10px !important;
    font-size: 14px !important;
  }

  /* Larger checkboxes for touch */
  body:not(.task-login) .messagelist input[type="checkbox"],
  body:not(.task-login) .listing input[type="checkbox"] {
    min-width: 18px !important;
    min-height: 18px !important;
  }
}

/* ============================================
   RESPONSIVE - MOBILE (≤ 768px)
============================================ */
@media screen and (max-width: 768px) {
  body:not(.task-login) {
    font-size: 14px !important;
  }

  /* Hide secondary columns in message list on small screens */
  body:not(.task-login) .messagelist td.size,
  body:not(.task-login) .messagelist th.size {
    display: none !important;
  }

  /* Compact toolbar */
  body:not(.task-login) .toolbar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
  }

  body:not(.task-login) .toolbar a.button,
  body:not(.task-login) .toolbar button.button {
    flex-shrink: 0 !important;
  }

  /* Hide labels in toolbar buttons - icons only on mobile */
  body:not(.task-login) .toolbar a.button .button-label,
  body:not(.task-login) .toolbar button.button .button-label {
    display: none !important;
  }

  /* Compose - vertical stacking */
  body.task-mail.action-compose .compose-form .compose-headers {
    flex-direction: column !important;
  }

  body.task-mail.action-compose .compose-form input.form-control,
  body.task-mail.action-compose .compose-form select.form-control {
    font-size: 16px !important; /* Prevent iOS zoom on focus */
  }

  /* Reading panel - tighter padding */
  body:not(.task-login) #message-header,
  body:not(.task-login) #messagebody,
  body:not(.task-login) .message-part {
    padding: 12px !important;
  }

  body:not(.task-login) #message-header .subject {
    font-size: 17px !important;
    line-height: 1.3 !important;
  }

  /* Header title smaller */
  body:not(.task-login) .header .header-title,
  body:not(.task-login) .header .username {
    font-size: 13px !important;
  }

  /* Mobile nav menu (offcanvas-like) */
  body:not(.task-login) #taskmenu {
    padding: 8px 0 !important;
  }

  /* Settings sections - stack on mobile */
  body.task-settings .formcontent,
  body.task-settings #settings-content {
    padding: 12px !important;
  }

  body:not(.task-login) fieldset {
    padding: 12px !important;
  }

  /* Forms - prevent iOS zoom */
  body:not(.task-login) input[type="text"],
  body:not(.task-login) input[type="email"],
  body:not(.task-login) input[type="password"],
  body:not(.task-login) textarea,
  body:not(.task-login) select {
    font-size: 16px !important;
  }

  /* Popup menus - full width on small screens */
  body:not(.task-login) .popupmenu {
    max-width: 90vw !important;
  }

  body:not(.task-login) .popupmenu li > a,
  body:not(.task-login) .menu.popup li > a {
    padding: 12px 16px !important;
    font-size: 14px !important;
  }

  /* Dialog modals - full width on mobile */
  body:not(.task-login) .ui-dialog {
    max-width: 96vw !important;
    margin: 0 !important;
  }

  /* From/to columns smaller */
  body:not(.task-login) .messagelist td.fromto,
  body:not(.task-login) .messagelist td.subject {
    font-size: 13.5px !important;
  }

  body:not(.task-login) .messagelist td.date {
    font-size: 11px !important;
  }
}

/* ============================================
   RESPONSIVE - SMALL PHONES (≤ 480px)
============================================ */
@media screen and (max-width: 480px) {
  body:not(.task-login) {
    font-size: 13.5px !important;
  }

  /* Hide attachment & threads columns - very small phones */
  body:not(.task-login) .messagelist td.attachment,
  body:not(.task-login) .messagelist th.attachment,
  body:not(.task-login) .messagelist td.threads,
  body:not(.task-login) .messagelist th.threads,
  body:not(.task-login) .messagelist td.flag,
  body:not(.task-login) .messagelist th.flag {
    display: none !important;
  }

  /* Compose form padding tighter */
  body.task-mail.action-compose .compose-form {
    padding: 10px !important;
  }

  /* Reduce header padding */
  body:not(.task-login) .header {
    padding: 8px 10px !important;
    min-height: 48px !important;
  }

  /* Folder list compact */
  body:not(.task-login) .listing.folderlist li > a,
  body:not(.task-login) .treelist li > a {
    margin: 1px 6px !important;
    padding: 10px 12px !important;
  }

  /* Smaller subject in reading */
  body:not(.task-login) #message-header .subject {
    font-size: 15px !important;
  }

  /* Avatar smaller */
  body:not(.task-login) .contactphoto {
    width: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
  }

  /* Quota widget compact */
  body:not(.task-login) .quota-widget {
    padding: 8px 12px !important;
    font-size: 11px !important;
  }
}

/* ============================================
   ACCESSIBILITY: Reduce motion if user prefers
============================================ */
@media (prefers-reduced-motion: reduce) {
  body:not(.task-login),
  body:not(.task-login) * {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================
   MOBILE NAVIGATION DRAWER
   Roundcube uses #taskmenu as the bottom mobile nav
============================================ */
@media screen and (max-width: 1024px) {
  body:not(.task-login) #taskmenu {
    background: var(--gotis-card-bg) !important;
    border-top: 1px solid var(--gotis-border) !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06) !important;
  }

  body:not(.task-login) #taskmenu a {
    color: var(--gotis-text-muted) !important;
    transition: all 0.2s ease !important;
  }

  body:not(.task-login) #taskmenu a:hover,
  body:not(.task-login) #taskmenu a.selected {
    color: var(--gotis-primary) !important;
    background: var(--gotis-hover) !important;
  }

  /* Back/menu buttons in mobile header */
  body:not(.task-login) .back-list-button,
  body:not(.task-login) .back-sidebar-button,
  body:not(.task-login) .task-menu-button {
    color: var(--gotis-text-muted) !important;
  }

  body:not(.task-login) .back-list-button:hover,
  body:not(.task-login) .back-sidebar-button:hover,
  body:not(.task-login) .task-menu-button:hover {
    color: var(--gotis-primary) !important;
  }
}