/*
 * NusaByte skin overrides for Roundcube Elastic
 * -----------------------------------------------
 * Loaded after the inherited Elastic stylesheet, so any rule we declare here
 * wins by cascade order. Tightens spacing, swaps the accent to #0047ab,
 * and gives the toolbar a darker, more Outlook OWA-like feel.
 */

:root {
  --nb-brand: #0047ab;
  --nb-brand-hover: #003a8c;
  --nb-brand-light: #e6efff;
  --nb-bg: #f5f5f7;
  --nb-surface: #ffffff;
  --nb-surface-2: #f8fafc;
  --nb-text: #111111;
  --nb-text-mute: #6b7280;
  --nb-border: #e5e7eb;
  --nb-toolbar-bg: #1a1a1a;
  --nb-toolbar-fg: #f5f5f7;
}

/* Accent overrides — Roundcube uses --color-main for branding */
.skin-elastic, body, html {
    --color-main: var(--nb-brand);
    --color-main-text: #ffffff;
    --color-main-light: var(--nb-brand-light);
    --color-main-light-text: var(--nb-brand);
}

/* Top toolbar — darker, brand bar */
.taskmenu, .menu-bar, body.task-mail .toolbar {
    background: var(--nb-toolbar-bg);
    color: var(--nb-toolbar-fg);
    border-bottom: 2px solid var(--nb-brand);
}
.taskmenu a, .taskmenu a:visited {
    color: var(--nb-toolbar-fg) !important;
}
.taskmenu a.button.selected, .taskmenu a:hover {
    background: var(--nb-brand) !important;
    color: #ffffff !important;
}

/* Brand logo replaces the default "Roundcube Webmail" wordmark */
#logo, .logo a, .login-form .header img {
    background-image: url("../images/nb-logo.svg") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 160px;
    height: 36px;
    text-indent: -9999px;
    overflow: hidden;
}

/* Tighter list rows for an Outlook-style density */
.messagelist tbody tr td,
.contactlist tbody tr td {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    line-height: 1.35;
}
.messagelist tbody tr.unread td.subject .subject {
    color: var(--nb-brand);
    font-weight: 600;
}

/* Reading pane — more whitespace + cleaner typography */
.message-content, .message-htmlpart {
    background: var(--nb-surface);
    color: var(--nb-text);
    line-height: 1.6;
}

/* Buttons */
.btn-primary, button.btn-primary, a.btn-primary {
    background-color: var(--nb-brand) !important;
    border-color: var(--nb-brand) !important;
}
.btn-primary:hover {
    background-color: var(--nb-brand-hover) !important;
    border-color: var(--nb-brand-hover) !important;
}

/* Login screen — restyled */
body.task-login {
    background: linear-gradient(135deg, #0a0a0a 0%, #0047ab 100%) !important;
}
body.task-login #content {
    background: var(--nb-surface);
    border: 1px solid var(--nb-border);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}
body.task-login .formbuttons .btn {
    background: var(--nb-brand) !important;
    color: #fff !important;
    border: none !important;
}

/* Folders sidebar — Outlook-like */
.folderlist li a {
    color: var(--nb-text);
}
.folderlist li.selected > a {
    background: var(--nb-brand-light);
    color: var(--nb-brand);
    border-left: 3px solid var(--nb-brand);
}

/* Compose / message form */
input.form-control:focus, select.form-control:focus, textarea.form-control:focus {
    border-color: var(--nb-brand) !important;
    box-shadow: 0 0 0 0.15rem rgba(0, 71, 171, 0.18) !important;
}

/* Tag/label pills */
.label-default {
    background: var(--nb-brand-light);
    color: var(--nb-brand);
}

/* Slim scrollbar */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.32); }

/* AI sidebar slot — added by the nusabyte_ai plugin */
#nb-ai-pane {
    background: var(--nb-surface);
    border-left: 1px solid var(--nb-border);
    width: 320px;
    min-width: 280px;
    max-width: 420px;
}
#nb-ai-pane .nb-ai-header {
    background: var(--nb-toolbar-bg);
    color: var(--nb-toolbar-fg);
    padding: 10px 14px;
    border-bottom: 2px solid var(--nb-brand);
    font-weight: 600;
}