/* =============================================================
   NetExperts Design Guide Overrides for RoundCube Elastic Skin
   Version: 2.1 — 2026-04-02
   Reference: netexperts-design-guide.html v1.0
   Applied via: skins/elastic/templates/includes/layout.html

   Conservative approach: colour corrections only, no layout
   changes that break the elastic skin's structure.
   ============================================================= */

/* ----- Font Faces ----- */

@font-face {
  font-family: 'Bastardus Sans';
  src: url('../fonts/BastardusSans.ttf') format('truetype');
  font-display: swap;
}

/* =============================================================
   LOGIN PAGE
   ============================================================= */

/* 5. Login: 8px additional margin between fields */
body.task-login #login-form .form-group,
body.task-login #login-form .row { margin-bottom: 8px; }

/* 6+8. Login button — design guide red, bold, sentence case */
body.task-login .btn-primary {
  background-color: #d51928;
  border-color: #d51928;
  font-weight: 500;
  text-transform: none;
}

body.task-login .btn-primary:focus,
body.task-login .btn-primary:active {
  background-color: #be1523;
  border-color: #be1523;
  box-shadow: none;
  outline: none;
}

body.task-login .btn-primary:hover {
  background-color: #be1523;
  border-color: #be1523;
}

/* 9. netexperts webmail branding on login in Bastardus Sans */
#netexperts-branding {
  text-align: center;
  margin: 0 0 30px 0;
}

#netexperts-branding span {
  font-family: 'Bastardus Sans', sans-serif;
  font-size: 28pt;
  letter-spacing: 0.05em;
  color: #302e2c;
}

/* 3. Login SVG enlarge 50% — login page only */
#netexperts-door {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 15px;
}

.task-login #logo {
  position: static !important;
  top: auto !important;
  max-height: none !important;
  width: 180px;
  height: 180px;
}

/* 12. Additional spacing between fields + sentence case */
body.task-login #login-form .form-group { margin-bottom: 13px; }
body.task-login .btn-primary,
body.task-login .btn,
body.task-login button { text-transform: none !important; }

/* 13. Light mode login inputs — warm borders, warm text */
html:not(.dark-mode) body.task-login .form-control,
html:not(.dark-mode) body.task-login input[type='text'],
html:not(.dark-mode) body.task-login input[type='password'] {
  border-color: #b0aca8;
  color: #000;
  background-color: #fff;
}

html:not(.dark-mode) body.task-login .form-control:focus,
html:not(.dark-mode) body.task-login input[type='text']:focus,
html:not(.dark-mode) body.task-login input[type='password']:focus {
  border-color: #d51928;
  box-shadow: 0 0 0 .2rem rgba(213, 25, 40, 0.25);
  outline: none;
}

html:not(.dark-mode) body.task-login .form-control::placeholder,
html:not(.dark-mode) body.task-login input::placeholder {
  color: #b0aca8;
}

/* 13b. Light mode login input group addon border matches */
html:not(.dark-mode) body.task-login .input-group-text,
html:not(.dark-mode) body.task-login .input-group-prepend .input-group-text,
html:not(.dark-mode) body.task-login .input-group .icon {
  border-color: #b0aca8;
}

/* =============================================================
   HEADER & NAVIGATION
   ============================================================= */

/* Header title in Bastardus Sans (brand presence) */
#layout > div > .header .header-title {
  font-family: 'Bastardus Sans', sans-serif;
  font-weight: 700;
  color: #302e2c;
}

/* Task menu — warm dark */
#layout-menu {
  background: #302e2c !important;
}

/* =============================================================
   COLOUR CORRECTIONS — Light Mode
   Swap cool greys/blues to design guide warm palette
   ============================================================= */

/* Text selection */
::selection {
  background: #f2d1d4;
  color: #d51928;
}

/* Unread status dot — brand red, not yellow */
.messagelist span.unread-status {
  color: #d51928 !important;
}

/* Unread badge — brand red */
.listing .unreadcount,
span.unreadcount {
  background-color: #d51928 !important;
  color: #fff !important;
}

/* Selected row focus indicator — red */
.listing li.focused > a,
.listing tr.focused > td {
  box-shadow: inset 2px 0 0 #d51928 !important;
}

/* Drag target: pink in light, red in dark */
.listing li.droptarget > a,
.listing tr.droptarget > td,
.droptarget {
  background-color: rgba(213, 25, 40, 0.10) !important;
}

/* Checkbox accent — red when checked */
.custom-control-input:checked ~ .custom-control-label::before,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #d51928 !important;
  border-color: #d51928 !important;
}

/* Compose attachments — warm bg */
#compose-attachments {
  background-color: #f4f3f1 !important;
}

/* =============================================================
   MESSAGE VIEW
   ============================================================= */

/* 14. message-htmlpart 15px padding, messagebody 8px rounded */
.message-htmlpart, .message-part { padding: 15px; }
#messagebody {
  border-radius: 8px !important;
  overflow: hidden !important;
}
#messagebody .message-htmlpart,
#messagebody .message-part,
#messagebody iframe {
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* 16. message-htmlpart extra margin */
.message-htmlpart, .message-part { margin-left: 15px; margin-right: 15px; }

/* =============================================================
   DARK MODE
   ============================================================= */

/* Branding */
html.dark-mode #netexperts-branding span { color: #918d89; }
html.dark-mode #logo { opacity: 1 !important; }

/* Header title */
html.dark-mode #layout > div > .header .header-title {
  color: #e8e6e3;
}

/* Unread status — red, not yellow */
html.dark-mode .messagelist span.unread-status { color: #d51928 !important; }

/* Drag target — warm red */
html.dark-mode .listing li.droptarget > a,
html.dark-mode .listing tr.droptarget > td,
html.dark-mode .droptarget {
  background-color: rgba(213, 25, 40, 0.25) !important;
}

/* --- Dark: Warm backgrounds (subtle shift, not aggressive) --- */

html.dark-mode body {
  background-color: #1e1d1b !important;
}

html.dark-mode #layout-menu {
  background: #252321 !important;
  border-color: #4d4a47 !important;
}

html.dark-mode #layout-menu a.button {
  color: #b0aca8 !important;
}

html.dark-mode #layout-menu a.button:hover,
html.dark-mode #layout-menu a.button.selected {
  color: #e8e6e3 !important;
  background-color: #3e3b39 !important;
}

html.dark-mode #layout-menu .special-buttons {
  background: transparent !important;
}

/* Dark: Header/footer — warm borders */
html.dark-mode #layout > div > .header {
  border-color: #4d4a47 !important;
}

html.dark-mode #layout > div > .footer {
  border-color: #4d4a47 !important;
}

/* Dark: Layout panels — warm borders */
html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode #layout-sidebar {
  border-color: #4d4a47 !important;
}

/* Dark: List borders */
html.dark-mode .listing li,
html.dark-mode .listing tr td {
  border-color: #302e2c !important;
}

/* Dark: Selected row — warm */
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > div,
html.dark-mode .listing tr.selected > td {
  background-color: #3e3b39 !important;
}

/* Dark: Unread badge — darker red */
html.dark-mode .listing .unreadcount,
html.dark-mode span.unreadcount {
  background-color: #a0131f !important;
  color: #fff !important;
}

/* Dark: Buttons — red */
html.dark-mode .btn-primary,
html.dark-mode button.btn-primary {
  background-color: #a0131f !important;
  border-color: #a0131f !important;
}

html.dark-mode .btn-primary:hover,
html.dark-mode button.btn-primary:hover {
  background-color: #be1523 !important;
  border-color: #be1523 !important;
}

/* Dark: Login inputs — warm */
html.dark-mode body.task-login .form-control,
html.dark-mode body.task-login input[type='text'],
html.dark-mode body.task-login input[type='password'] {
  border-color: #686461 !important;
}

html.dark-mode body.task-login .form-control:focus,
html.dark-mode body.task-login input:focus {
  border-color: #d51928 !important;
  box-shadow: 0 0 0 .2rem rgba(213, 25, 40, 0.25) !important;
}

html.dark-mode body.task-login .input-group-text,
html.dark-mode body.task-login .input-group-prepend .input-group-text {
  border-color: #686461 !important;
}

/* Dark: Login button */
html.dark-mode body.task-login .btn-primary {
  background-color: #a0131f !important;
  border-color: #a0131f !important;
}

html.dark-mode body.task-login .btn-primary:hover {
  background-color: #be1523 !important;
  border-color: #be1523 !important;
}

/* Dark: Checkbox accent */
html.dark-mode .custom-control-input:checked ~ .custom-control-label::before,
html.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #a0131f !important;
  border-color: #a0131f !important;
}

/* Dark: Scrollbars — warm */
html.dark-mode {
  scrollbar-color: #686461 #302e2c;
}

html.dark-mode:not(.touch) ::-webkit-scrollbar-track {
  background-color: #302e2c !important;
}

html.dark-mode:not(.touch) ::-webkit-scrollbar-thumb {
  background-color: #686461 !important;
}

/* Dark: Text selection */
html.dark-mode ::selection {
  background: rgba(213, 25, 40, 0.35);
  color: #f2d1d4;
}

/* Dark: Popover/menus — warm bg */
html.dark-mode .popover {
  border-color: #4d4a47 !important;
}

html.dark-mode .popover .menu li a:hover,
html.dark-mode .popover .menu li a:focus {
  background-color: #3e3b39 !important;
}

/* Dark: Dialogs — warm borders */
html.dark-mode .ui-dialog {
  border-color: #4d4a47 !important;
}

html.dark-mode .ui-dialog .ui-dialog-titlebar {
  border-color: #4d4a47 !important;
}

html.dark-mode .ui-dialog .ui-dialog-buttonpane {
  border-color: #4d4a47 !important;
}

/* Dark: Table borders */
html.dark-mode table.table th,
html.dark-mode table.table td,
html.dark-mode .propform td,
html.dark-mode .propform th {
  border-color: #4d4a47 !important;
}