/* ============================================================================
 * OrdenO Mail — Outlook / Microsoft 365 inspired skin for Roundcube
 *
 * Construido sobre el skin Elastic (extends en meta.json). Solo override de
 * estilos visuales: paleta, tipografía, layout. Todo el JS, templates y
 * comportamiento sigue siendo de Elastic.
 *
 * Paleta: azul Outlook moderno (Fluent UI tokens).
 * Layout: top bar horizontal + sidebar izquierdo + lista + preview.
 * ============================================================================ */

:root {
  /* Fluent UI palette */
  --o-primary: #0F6CBD;
  --o-primary-hover: #115EA3;
  --o-primary-pressed: #0C3B5E;
  --o-primary-light: #2886DE;
  --o-primary-bg: #EFF6FC;
  --o-primary-bg-hover: #DEECF9;
  --o-primary-bg-selected: #C7E0F4;

  --o-bg: #FAF9F8;
  --o-bg-card: #FFFFFF;
  --o-bg-hover: #F3F2F1;
  --o-bg-pressed: #EDEBE9;
  --o-border: #EDEBE9;
  --o-border-hover: #C8C6C4;
  --o-divider: #F3F2F1;

  --o-text: #201F1E;
  --o-text-secondary: #605E5C;
  --o-text-tertiary: #8A8886;
  --o-text-on-primary: #FFFFFF;

  --o-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --o-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --o-shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);

  --o-radius-sm: 2px;
  --o-radius-md: 4px;
  --o-radius-lg: 8px;

  --o-topbar-h: 48px;
}

/* ----------------------------------------------------------------------------
 * Typography (Segoe UI / system stack — Microsoft 365 lo usa)
 * ---------------------------------------------------------------------------- */
html,
body {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    Arial, sans-serif;
  font-size: 14px;
  color: var(--o-text);
  background: var(--o-bg);
}

/* ----------------------------------------------------------------------------
 * TOP BAR — Outlook header azul con logo a la izquierda
 * En Elastic widescreen, #layout-menu es el sidebar de tasks. Lo movemos
 * a una barra horizontal arriba con flex-direction.
 * ---------------------------------------------------------------------------- */
/* Mantenemos el sidebar lateral de Elastic (vertical) — solo cambiamos
 * colores a la paleta OrdenO. Esto evita pelear con la estructura interna
 * de los íconos Font Awesome de Elastic, que asumen layout vertical. */

#layout {
  background: var(--o-bg);
}

/* Sidebar de tareas (Mail, Compose, Contacts, Settings) — lateral azul */
#layout-menu,
#taskmenu {
  background: var(--o-primary) !important;
}

/* Logo de Roundcube en la cabecera del sidebar — lo ocultamos */
#layout-menu .menu-logo,
#layout-menu a.menu-logo,
.menu-bar .menu-logo,
#layout-menu > .header {
  display: none !important;
}

/* Items selected/hover del taskmenu en azul más claro (no el #45555c gris) */
#taskmenu a.selected,
#taskmenu a.selected:hover,
#taskmenu a:hover,
#taskmenu a.button.selected,
#taskmenu a.button:hover {
  background: var(--o-primary-hover) !important;
  color: #fff !important;
}

/* Botones especiales abajo (dark-mode/about/logout) — fondo más oscuro */
#taskmenu .special-buttons,
#layout-menu .special-buttons {
  background: var(--o-primary-pressed) !important;
}

#taskmenu .action-buttons a {
  color: rgba(255, 255, 255, 0.85) !important;
}
#taskmenu .action-buttons a:hover {
  color: #fff !important;
  background: var(--o-primary-hover) !important;
}

/* Logo OrdenO en el footer del sidebar (arriba del disk usage) */
#layout-sidebar .footer {
  border-top: 1px solid var(--o-border) !important;
  padding: 12px 16px !important;
}

#layout-sidebar .footer::before {
  content: "";
  display: block;
  width: 100%;
  height: 28px;
  background: url("/skins/ordeno/images/logo-color.png") no-repeat center center;
  background-size: contain;
  margin: 0 auto 8px;
  opacity: 0.85;
}

/* ----------------------------------------------------------------------------
 * LEFT SIDEBAR — lista de carpetas (Inbox, Sent, etc.)
 * ---------------------------------------------------------------------------- */
#layout-sidebar {
  background: var(--o-bg-card) !important;
  border-right: 1px solid var(--o-border);
  width: 260px !important;
  min-width: 240px;
}

#layout-sidebar .header {
  background: transparent;
  border-bottom: 1px solid var(--o-border);
  padding: 12px 16px;
  height: 52px;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--o-text-secondary);
}

#layout-sidebar .header .header-title.username {
  font-weight: 600;
  color: var(--o-text);
  font-size: 13px;
}

/* Lista de mailboxes — Outlook style */
#mailboxlist,
.folderlist,
ul.treelist {
  list-style: none;
  padding: 8px 0;
  margin: 0;
}

#mailboxlist li,
.folderlist li {
  position: relative;
  margin: 0 8px;
}

#mailboxlist li a,
.folderlist li a {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--o-radius-md);
  color: var(--o-text);
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  line-height: 20px;
  transition: background 0.1s ease;
}

#mailboxlist li a:hover,
.folderlist li a:hover {
  background: var(--o-bg-hover);
  color: var(--o-text);
}

#mailboxlist li.selected > a,
#mailboxlist li.selected > a:hover,
.folderlist li.selected > a {
  background: var(--o-primary-bg-selected) !important;
  color: var(--o-text) !important;
  font-weight: 600;
}

#mailboxlist li.unread > a {
  font-weight: 600;
}

#mailboxlist li.unread > a .unreadcount,
.folderlist li.unread > a .unreadcount {
  background: var(--o-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 10px;
  margin-left: auto;
}

/* ----------------------------------------------------------------------------
 * MESSAGE LIST — columna central
 * ---------------------------------------------------------------------------- */
#layout-list {
  background: var(--o-bg-card) !important;
  border-right: 1px solid var(--o-border);
  width: 380px !important;
  min-width: 320px;
}

#layout-list .header,
#messagelist-header {
  background: transparent;
  border-bottom: 1px solid var(--o-border);
  padding: 8px 12px;
  height: 52px;
}

.messagelist {
  background: transparent;
}

.messagelist tr,
.messagelist li {
  border-bottom: 1px solid var(--o-divider);
  background: transparent;
}

.messagelist tr:hover,
.messagelist li:hover {
  background: var(--o-bg-hover);
}

.messagelist tr.selected,
.messagelist li.selected {
  background: var(--o-primary-bg) !important;
  color: var(--o-text) !important;
  border-left: 3px solid var(--o-primary);
}

.messagelist tr.focused,
.messagelist li.focused {
  background: var(--o-primary-bg-selected) !important;
  color: var(--o-text) !important;
  outline: none;
}

.messagelist tr.unread,
.messagelist li.unread {
  font-weight: 600;
}

.messagelist .subject {
  color: var(--o-text);
}

.messagelist .from,
.messagelist .fromto {
  color: var(--o-text);
  font-weight: 600;
}

.messagelist .date {
  color: var(--o-text-secondary);
  font-size: 12px;
}

/* ----------------------------------------------------------------------------
 * CONTENT / PREVIEW — panel derecho
 * ---------------------------------------------------------------------------- */
#layout-content {
  background: var(--o-bg) !important;
}

#layout-content .header {
  background: var(--o-bg-card);
  border-bottom: 1px solid var(--o-border);
  padding: 8px 16px;
  height: 52px;
}

/* ----------------------------------------------------------------------------
 * BUTTONS — Fluent UI style
 * ---------------------------------------------------------------------------- */
.btn,
button.btn {
  border-radius: var(--o-radius-md);
  font-weight: 600;
  font-size: 13px;
  padding: 6px 16px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  transition: background 0.1s ease, border-color 0.1s ease;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.btn-primary,
button.btn-primary {
  background: var(--o-primary) !important;
  border-color: var(--o-primary) !important;
  color: #fff !important;
}

.btn-primary:hover,
button.btn-primary:hover {
  background: var(--o-primary-hover) !important;
  border-color: var(--o-primary-hover) !important;
  color: #fff !important;
}

.btn-secondary,
.btn-default,
button.btn-secondary {
  background: var(--o-bg-card) !important;
  border-color: var(--o-border-hover) !important;
  color: var(--o-text) !important;
}

.btn-secondary:hover,
.btn-default:hover {
  background: var(--o-bg-hover) !important;
  border-color: var(--o-border-hover) !important;
}

/* Toolbar (acciones encima de mensajes) */
.toolbar a,
.toolbar button {
  border-radius: var(--o-radius-md) !important;
  color: var(--o-text) !important;
  transition: background 0.1s ease;
}

.toolbar a:hover,
.toolbar button:hover {
  background: var(--o-bg-hover) !important;
  color: var(--o-primary) !important;
}

/* ----------------------------------------------------------------------------
 * FORMS / INPUTS
 * ---------------------------------------------------------------------------- */
.form-control,
input.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  border-radius: var(--o-radius-md);
  border: 1px solid var(--o-border-hover);
  font-size: 14px;
  padding: 6px 12px;
  height: 32px;
  background: var(--o-bg-card);
  color: var(--o-text);
  transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--o-primary) !important;
  box-shadow: 0 0 0 1px var(--o-primary) !important;
  outline: none !important;
}

textarea.form-control {
  height: auto;
  min-height: 80px;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  accent-color: var(--o-primary);
}

::selection {
  background: rgba(15, 108, 189, 0.25);
}

/* ----------------------------------------------------------------------------
 * LOGIN PAGE — card centrada con todo dentro (logo + inputs + botón + footer)
 * ---------------------------------------------------------------------------- */
body {
  background: red !important;  /* TEST: si NO se ve rojo, mi CSS no carga en absoluto */
}

body.task-login #layout {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh;
  padding: 16px;
  flex-direction: column !important;
}

/* La card que contiene logo + inputs + botón + footer. Elastic envuelve
 * todo en #layout-content; lo formateamos como bloque vertical compacto. */
body.task-login #layout-content {
  background: var(--o-bg-card) !important;
  margin: 0 !important;
  padding: 36px 36px 28px !important;
  width: 100%;
  max-width: 380px !important;
  border-radius: var(--o-radius-lg);
  box-shadow: var(--o-shadow-lg);
  height: auto !important;
  min-height: auto !important;
  flex: none !important;
  display: block !important;
  position: static !important;
  border: none !important;
}

body.task-login img#logo {
  display: block;
  margin: 0 auto 28px !important;
  height: auto !important;
  width: auto !important;
  max-width: 160px !important;
  max-height: 44px !important;
  background: transparent !important;
  padding: 0 !important;
  filter: none !important;
}

body.task-login form,
body.task-login #login-form {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
}

body.task-login .form-group,
body.task-login form > p,
body.task-login form > div:not(#login-footer) {
  margin-bottom: 14px !important;
  display: block !important;
}

body.task-login label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--o-text) !important;
  margin-bottom: 6px !important;
}

/* Inputs limpios, blancos (sin azul pálido), border-radius 4px */
body.task-login input[type="text"],
body.task-login input[type="email"],
body.task-login input[type="password"],
body.task-login .form-control {
  width: 100% !important;
  height: 38px !important;
  font-size: 14px !important;
  background: #fff !important;
  border: 1px solid var(--o-border-hover) !important;
  border-radius: var(--o-radius-md) !important;
  padding: 6px 12px !important;
  color: var(--o-text) !important;
  box-shadow: none !important;
}

body.task-login input:focus,
body.task-login .form-control:focus {
  border-color: var(--o-primary) !important;
  box-shadow: 0 0 0 1px var(--o-primary) !important;
}

/* Quita el ícono prepend (el iconito azul a la izquierda del input) */
body.task-login .input-group-prepend,
body.task-login .input-group-text,
body.task-login .input-group .input-group-prepend {
  display: none !important;
}

body.task-login .input-group {
  display: block !important;
  width: 100% !important;
}

/* Botón Login dentro de la card, ancho completo */
body.task-login button[type="submit"],
body.task-login .btn-primary,
body.task-login input[type="submit"] {
  width: 100% !important;
  height: 40px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-top: 8px !important;
  background: var(--o-primary) !important;
  border-color: var(--o-primary) !important;
  color: #fff !important;
  border-radius: var(--o-radius-md) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

body.task-login button[type="submit"]:hover,
body.task-login .btn-primary:hover {
  background: var(--o-primary-hover) !important;
  border-color: var(--o-primary-hover) !important;
}

body.task-login #login-footer {
  border-top: 1px solid var(--o-divider) !important;
  margin: 20px 0 0 !important;
  padding: 14px 0 0 !important;
  text-align: center !important;
  font-size: 12px !important;
  color: var(--o-text-tertiary) !important;
  background: transparent !important;
  display: block !important;
}

body.task-login #login-footer a {
  color: var(--o-primary) !important;
}

/* ----------------------------------------------------------------------------
 * SCROLLBAR
 * ---------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--o-border-hover);
  border-radius: 5px;
  border: 2px solid var(--o-bg-card);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--o-text-tertiary);
}

/* ----------------------------------------------------------------------------
 * LINKS
 * ---------------------------------------------------------------------------- */
a {
  color: var(--o-primary);
  text-decoration: none;
}

a:hover {
  color: var(--o-primary-hover);
  text-decoration: underline;
}

/* ----------------------------------------------------------------------------
 * NOTIFICATIONS / DIALOGS
 * ---------------------------------------------------------------------------- */
.popupmenu,
.popover,
ul.menu {
  border-radius: var(--o-radius-md);
  box-shadow: var(--o-shadow-md);
  border: 1px solid var(--o-border);
}

.popupmenu li a,
ul.menu li a {
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 0;
}

.popupmenu li a:hover,
ul.menu li a:hover {
  background: var(--o-bg-hover);
}

/* Tablas */
table.records-table,
table.listing {
  border-collapse: collapse;
}

table.records-table thead th,
table.listing thead th {
  background: var(--o-bg);
  font-weight: 600;
  font-size: 12px;
  color: var(--o-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--o-border);
  padding: 10px 12px;
}