/**
 * Kymus Theme for Roundcube Webmail
 * Pre-compiled CSS (from LESS sources)
 *
 * This file contains the compiled styles from _variables.less and _styles.less
 * To customize, modify the LESS files and recompile, or edit this CSS directly.
 */

/* =============================================================================
   CSS Custom Properties (for easy customization)
   ============================================================================= */

:root {
  --kymus-primary: #111418;          /* tinta: ACAO. nunca amarelo */
  --kymus-accent: #FFC107;           /* marca: selecionado/foco. escasso */
  --kymus-accent-contrast: #111418;  /* nunca branco sobre amarelo */
  --kymus-primary-dark: #2A3038;
  --kymus-success: #19B771;
  --kymus-warning: #FF7E00;
  --kymus-error: #EF4444;
  --kymus-radius: 8px;
  --kymus-radius-lg: 12px;
  --kymus-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --kymus-shadow-hover: 0 4px 12px rgba(17, 20, 24, 0.15);
  --kymus-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Dark mode variables */
html.dark-mode {
  --kymus-dark-bg: #0F1318;
  --kymus-dark-bg-quiet: #191E25;
  --kymus-dark-text: #E7EAEF;
  --kymus-dark-text-secondary: #8A93A0;
  --kymus-dark-border: #282F38;
}

/* =============================================================================
   Typography
   ============================================================================= */

body {
  font-family: var(--kymus-font);
}

/* =============================================================================
   Login Page
   ============================================================================= */

#login-form .box-inner {
  background: linear-gradient(135deg, rgba(17, 20, 24, 0.05), rgba(17, 20, 24, 0.02));
  border: 1px solid rgba(17, 20, 24, 0.1);
  border-radius: var(--kymus-radius-lg);
}

#login-form .logo {
  margin-bottom: 2rem;
}

#login-form .input-group {
  margin-bottom: 1rem;
}

#login-form button[type="submit"] {
  background: linear-gradient(135deg, var(--kymus-primary), var(--kymus-primary-dark));
  border: none;
  border-radius: var(--kymus-radius);
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

#login-form button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(17, 20, 24, 0.3);
}

#login-form button[type="submit"]:active {
  transform: translateY(0);
}

/* =============================================================================
   Header / Menu
   ============================================================================= */

#layout-menu {
  background: linear-gradient(180deg, var(--kymus-primary), #2A3038);
}

#layout-menu .menu a {
  border-radius: var(--kymus-radius);
  transition: all 0.2s ease;
}

#layout-menu .menu a:hover,
#layout-menu .menu a.selected {
  background: rgba(255, 255, 255, 0.15);
}

/* =============================================================================
   Sidebar
   ============================================================================= */

#layout-sidebar .header {
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

#layout-sidebar .listing li a {
  border-radius: var(--kymus-radius);
  margin: 2px 8px;
  transition: all 0.15s ease;
}

#layout-sidebar .listing li a:hover {
  background: rgba(17, 20, 24, 0.08);
}

#layout-sidebar .listing li a.selected {
  background: rgba(255, 193, 7, 0.12);
  color: var(--kymus-primary);
}

/* =============================================================================
   Message List
   ============================================================================= */

#messagelist tr {
  transition: background-color 0.15s ease;
}

#messagelist tr.selected td {
  background-color: rgba(17, 20, 24, 0.12) !important;
}

#messagelist tr:hover td {
  background-color: rgba(17, 20, 24, 0.06);
}

#messagelist td.subject a {
  font-weight: 500;
}

/* =============================================================================
   Buttons
   ============================================================================= */

.button,
button.btn-primary,
a.button.mainaction {
  background: var(--kymus-primary);
  border: none;
  border-radius: var(--kymus-radius);
  transition: all 0.2s ease;
}

.button:hover,
button.btn-primary:hover,
a.button.mainaction:hover {
  background: var(--kymus-primary-dark);
  box-shadow: var(--kymus-shadow-hover);
}

.toolbar a.button {
  border-radius: var(--kymus-radius);
  transition: all 0.15s ease;
}

.toolbar a.button:hover {
  background: rgba(17, 20, 24, 0.1);
}

.toolbar a.button.selected {
  background: rgba(255, 193, 7, 0.15);
  color: var(--kymus-primary);
}

/* =============================================================================
   Dialogs
   ============================================================================= */

.ui-dialog {
  border-radius: var(--kymus-radius-lg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.ui-dialog .ui-dialog-titlebar {
  background: var(--kymus-primary);
  border-radius: var(--kymus-radius-lg) var(--kymus-radius-lg) 0 0;
}

.ui-dialog .ui-dialog-content {
  padding: 1.5rem;
}

/* =============================================================================
   Form Elements
   ============================================================================= */

input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  border-radius: var(--kymus-radius);
  border: 1px solid rgba(0, 0, 0, 0.12);
  transition: all 0.2s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  border-color: var(--kymus-primary);
  box-shadow: 0 0 0 3px rgba(17, 20, 24, 0.15);
  outline: none;
}

/* =============================================================================
   Dark Mode
   ============================================================================= */

html.dark-mode #layout-menu {
  background: linear-gradient(180deg, var(--kymus-dark-bg-quiet), #15202e);
}

html.dark-mode #layout-sidebar {
  background: var(--kymus-dark-bg);
}

html.dark-mode #layout-sidebar .listing li a:hover {
  background: rgba(17, 20, 24, 0.15);
}

html.dark-mode #layout-sidebar .listing li a.selected {
  background: rgba(255, 193, 7, 0.2);
}

html.dark-mode #messagelist tr.selected td {
  background-color: rgba(17, 20, 24, 0.2) !important;
}

html.dark-mode #messagelist tr:hover td {
  background-color: rgba(17, 20, 24, 0.1);
}

html.dark-mode input[type="text"],
html.dark-mode input[type="password"],
html.dark-mode input[type="email"],
html.dark-mode textarea,
html.dark-mode select {
  background: var(--kymus-dark-bg-quiet);
  border-color: var(--kymus-dark-border);
  color: var(--kymus-dark-text);
}

html.dark-mode input[type="text"]:focus,
html.dark-mode input[type="password"]:focus,
html.dark-mode input[type="email"]:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
  border-color: var(--kymus-primary);
}

/* =============================================================================
   Responsive - Phone Layout
   ============================================================================= */

html.layout-phone #login-form .box-inner {
  margin: 1rem;
  padding: 1.5rem;
}

html.layout-phone .toolbar a.button {
  padding: 0.5rem;
}

/* =============================================================================
   Scrollbar Styling
   ============================================================================= */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(17, 20, 24, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(17, 20, 24, 0.5);
}

html.dark-mode ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

html.dark-mode ::-webkit-scrollbar-thumb {
  background: rgba(17, 20, 24, 0.4);
}