/* =====================================================
   Shift Yazılım - Roundcube Elastic Skin Customization
   Brand: #0a0a0a bg | #06b6d4 cyan primary | white text
   ===================================================== */

:root {
  --color-main: #06b6d4;
  --color-main-dark: #0891b2;
  --color-main-darker: #0e7490;
  --color-bg-dark: #0a0a0a;
  --color-bg-panel: #111111;
  --color-bg-sidebar: #141414;
  --color-border: #222222;
  --color-text: #f1f5f9;
  --color-text-muted: #94a3b8;
}

/* === GLOBAL === */
body, html {
  background-color: var(--color-bg-dark) !important;
  color: var(--color-text) !important;
}

/* === TOP HEADER / TOOLBAR === */
#header,
#topnav,
.topnav,
#layout-header {
  background: linear-gradient(135deg, var(--color-bg-dark) 0%, #0d1117 100%) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

/* === HEADER BRANDING === */
.header .logo,
#logo,
a.logo {
  background-image: none !important;
}

.header .logo::before,
#logo::before {
  content: "✉ Shift Yazılım Mail" !important;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-main) !important;
  letter-spacing: -0.02em;
  font-family: 'Inter', system-ui, sans-serif;
}

/* === SIDEBAR / FOLDER LIST === */
#layout-sidebar,
.sidebar,
#mailboxlist,
.folderlist {
  background: var(--color-bg-sidebar) !important;
  border-right: 1px solid var(--color-border) !important;
}

.folderlist li a,
.folderlist .unfocused a,
#mailboxlist .mailbox a {
  color: var(--color-text-muted) !important;
}

.folderlist li.selected > a,
.folderlist li a:hover,
#mailboxlist .mailbox.selected a {
  background: rgba(6, 182, 212, 0.15) !important;
  color: var(--color-main) !important;
  border-radius: 6px;
}

/* === MAIN CONTENT AREA === */
#layout-content,
.main-content,
#messagelist-wrapper,
#message-content {
  background: var(--color-bg-dark) !important;
  color: var(--color-text) !important;
}

/* === MESSAGE LIST === */
#messagelist,
table.messagelist {
  background: var(--color-bg-dark) !important;
}

#messagelist tr,
table.messagelist tr {
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
}

#messagelist tr:hover,
table.messagelist tr:hover {
  background: rgba(6, 182, 212, 0.08) !important;
}

#messagelist tr.selected,
table.messagelist tr.selected {
  background: rgba(6, 182, 212, 0.15) !important;
  border-left: 3px solid var(--color-main) !important;
}

#messagelist tr.unread td.subject,
table.messagelist tr.unread td.subject {
  color: #ffffff !important;
  font-weight: 600;
}

/* === TOOLBAR BUTTONS === */
.toolbar a,
.toolbar button,
.toolbar .button,
#toolbar a,
#toolbar button {
  color: var(--color-text-muted) !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.toolbar a:hover,
.toolbar button:hover,
#toolbar a:hover {
  background: rgba(6, 182, 212, 0.15) !important;
  color: var(--color-main) !important;
}

/* === COMPOSE / NEW MAIL BUTTON === */
a.compose,
button.compose,
.button-compose,
#compose-btn {
  background: linear-gradient(135deg, var(--color-main) 0%, var(--color-main-dark) 100%) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  border: none !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

a.compose:hover,
button.compose:hover {
  background: linear-gradient(135deg, var(--color-main-dark) 0%, var(--color-main-darker) 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3) !important;
}

/* === LOGIN PAGE === */
#login-form,
.login-form,
body.task-login #main,
body.task-login .formcontainer {
  background: var(--color-bg-panel) !important;
  border-radius: 16px !important;
  border: 1px solid var(--color-border) !important;
  padding: 2rem !important;
}

body.task-login {
  background: var(--color-bg-dark) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Login logo */
#login-form .product-name,
.login-form .product-name,
.login-logo,
.loginlogo {
  color: var(--color-main) !important;
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 1.5rem;
  display: block;
}

/* Login inputs */
#login-form input,
.login-form input {
  background: var(--color-bg-dark) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  border-radius: 8px !important;
}

#login-form input:focus,
.login-form input:focus {
  border-color: var(--color-main) !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15) !important;
  outline: none !important;
}

/* Login button */
#login-form button[type=submit],
.login-form button[type=submit],
input#login-btn,
button.mainaction {
  background: linear-gradient(135deg, var(--color-main) 0%, var(--color-main-dark) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  padding: 0.75rem !important;
}

button.mainaction:hover {
  background: linear-gradient(135deg, var(--color-main-dark) 0%, var(--color-main-darker) 100%) !important;
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3) !important;
}

/* === FORMS & INPUTS === */
input[type=text],
input[type=email],
input[type=password],
input[type=search],
textarea,
select {
  background: var(--color-bg-panel) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  border-radius: 6px !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-main) !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15) !important;
  outline: none !important;
}

/* === COMPOSE WINDOW === */
#compose-content,
.compose-content,
#compose #message-content {
  background: var(--color-bg-panel) !important;
}

/* === MODAL / POPUP === */
.ui-dialog,
.modal,
.popup {
  background: var(--color-bg-panel) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 12px !important;
  color: var(--color-text) !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6) !important;
}

.ui-dialog-titlebar,
.modal-header {
  background: var(--color-bg-dark) !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: 12px 12px 0 0 !important;
  color: var(--color-text) !important;
}

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

::-webkit-scrollbar-track {
  background: var(--color-bg-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-main);
}

/* === MESSAGE READ PANE === */
#messagecontent,
.messagepart,
#mail-message {
  background: var(--color-bg-dark) !important;
  color: var(--color-text) !important;
}

/* === LINKS === */
a {
  color: var(--color-main) !important;
}

a:hover {
  color: var(--color-main-dark) !important;
}

/* === STATUS/ALERT MESSAGES === */
div#messagestack .notice,
div.notice {
  background: rgba(6, 182, 212, 0.1) !important;
  border-left: 4px solid var(--color-main) !important;
  color: var(--color-text) !important;
  border-radius: 0 8px 8px 0 !important;
}

div.error,
div#messagestack .error {
  background: rgba(239, 68, 68, 0.1) !important;
  border-left: 4px solid #ef4444 !important;
  border-radius: 0 8px 8px 0 !important;
}

div.confirmation,
div#messagestack .confirmation {
  background: rgba(34, 197, 94, 0.1) !important;
  border-left: 4px solid #22c55e !important;
  border-radius: 0 8px 8px 0 !important;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  #layout-sidebar {
    background: var(--color-bg-sidebar) !important;
  }
}