/* SKYuwana Mail Custom Theme - Dark Mode */
:root {
  /* SKYuwana Brand Colors */
  --sky-primary: #0EA5E9;
  --sky-secondary: #38BDF8;
  --sky-accent: #7DD3FC;
  --sky-dark: #075985;
  --sky-light: #E0F2FE;
  
  /* Dark Mode Colors */
  --dark-bg: #0F172A;
  --dark-bg-secondary: #1E293B;
  --dark-bg-tertiary: #334155;
  --dark-text: #F1F5F9;
  --dark-text-secondary: #CBD5E1;
  
  /* Override Elastic Variables */
  --color-main: #0EA5E9;
  --color-main-dark: #075985;
  --color-brand: #0EA5E9;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
}

body {
  background: var(--dark-bg);
  color: var(--dark-text);
}

/* Header with Gradient */
#layout > .header,
#layout-content > .header {
  background: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 100%) !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

.header .brand {
  color: white !important;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Buttons */
.btn-primary,
button.btn-primary,
a.btn-primary {
  background: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 100%) !important;
  border: none !important;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0284C7 0%, #0EA5E9 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(14, 165, 233, 0.4);
}

/* Login Page Styling - Dark Mode */
.task-login #layout-content {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #334155 100%);
  position: relative;
  overflow: hidden;
}

/* Animated Sky Effects */
.task-login #layout-content::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  top: -150px;
  left: -150px;
  animation: float-cloud1 12s ease-in-out infinite;
}

.task-login #layout-content::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  bottom: -100px;
  right: -100px;
  animation: float-cloud2 10s ease-in-out infinite;
}

@keyframes float-cloud1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -40px) scale(1.1); }
}

@keyframes float-cloud2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 30px) scale(1.15); }
}

/* Login Box Dark Theme */
.task-login .boxed-content {
  background: rgba(30, 41, 59, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(14, 165, 233, 0.1);
  padding: 3rem;
  position: relative;
  z-index: 10;
}

/* Logo SKYuwana di Login Page */
.task-login .boxed-content::before {
  content: '';
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto 2rem;
  background: url('/skins/elastic/images/logoskyuwana.png') center/contain no-repeat;
  animation: logo-fade-in 1s ease-out;
}

@keyframes logo-fade-in {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Login Title Styling */
.task-login h1,
.task-login .voice {
  color: var(--dark-text) !important;
  text-align: center;
  font-weight: 700;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 10px rgba(14, 165, 233, 0.3);
}

/* Input Fields - Dark Mode */
.task-login input[type="text"],
.task-login input[type="password"],
.task-login input[type="email"] {
  background: rgba(15, 23, 42, 0.8) !important;
  border: 2px solid rgba(14, 165, 233, 0.3) !important;
  color: var(--dark-text) !important;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.task-login input[type="text"]::placeholder,
.task-login input[type="password"]::placeholder {
  color: rgba(203, 213, 225, 0.5);
}

.task-login input[type="text"]:focus,
.task-login input[type="password"]:focus,
.task-login input[type="email"]:focus {
  border-color: #0EA5E9 !important;
  background: rgba(15, 23, 42, 0.95) !important;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.2) !important;
  outline: none;
}

/* All Other Inputs */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus,
select.form-control:focus {
  border-color: #0EA5E9 !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1) !important;
}

/* Sidebar Active Item */
.sidebar .selected,
.sidebar .active {
  background: #E0F2FE !important;
  border-left: 4px solid #0EA5E9 !important;
}

/* Mail List Selection */
.messagelist tr.selected > td {
  background: #E0F2FE !important;
}

.messagelist tr:hover > td {
  background: rgba(14, 165, 233, 0.05) !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #E0F2FE;
}

::-webkit-scrollbar-thumb {
  background: #0EA5E9;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #075985;
}

/* Login Button - Enhanced */
.task-login button[type="submit"],
.task-login .button.btn-primary {
  background: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 100%) !important;
  border: none !important;
  border-radius: 12px;
  padding: 14px 32px;
  font-size: 1.1rem;
  font-weight: 700;
  color: white !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(14, 165, 233, 0.4);
  width: 100%;
  margin-top: 1rem;
}

.task-login button[type="submit"]:hover {
  background: linear-gradient(135deg, #0284C7 0%, #0EA5E9 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(14, 165, 233, 0.6);
}

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

/* Labels - Dark Mode */
.task-login label {
  color: var(--dark-text-secondary) !important;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

/* Links - Dark Mode */
.task-login a {
  color: #38BDF8 !important;
  text-decoration: none;
  transition: color 0.3s ease;
}

.task-login a:hover {
  color: #7DD3FC !important;
  text-decoration: underline;
}

/* Badges */
.badge,
.badge-primary {
  background: #0EA5E9 !important;
  color: white !important;
}

/* Override Logo Roundcube dengan Logo SKYuwana - Force Override */
.task-login #layout-content .brand,
.task-login #layout-content .brand a,
.task-login .brand,
.task-login .brand a,
body.task-login .brand {
  display: block !important;
  width: 280px !important;
  height: 105px !important;
  max-width: 280px !important;
  max-height: 105px !important;
  margin: 0 auto 2rem !important;
  padding: 0 !important;
  background-image: url(/skins/elastic/images/logoskyuwana.png) !important;
  background-position: center center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.task-login .brand img,
.task-login .brand svg,
.task-login .brand::after,
.task-login .brand::before,
body.task-login .brand img,
body.task-login .brand svg {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Logo di header setelah login */
#layout .brand,
#layout .brand a,
.header .brand,
.header .brand a,
#layout > .header .brand {
  background-image: url(/skins/elastic/images/logoskyuwana.png) !important;
  background-position: left center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  width: 180px !important;
  height: 50px !important;
  max-width: 180px !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
}

#layout .brand img,
#layout .brand svg,
.header .brand img,
.header .brand svg {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Override Favicon - inject custom favicon link */