/* ==============================================================
   GGHOST Brand Theme Override for Roundcube Webmail (Elastic Skin)
   Matching GGHOST Gaming Hosting UI / UX
   ============================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --gghost-primary: #6366f1;
    --gghost-primary-hover: #4f46e5;
    --gghost-primary-rgb: 99, 102, 241;
    --gghost-secondary: #8b5cf6;
    --gghost-bg-darkest: #080b14;
    --gghost-bg-main: #0b0e1a;
    --gghost-bg-card: #13192b;
    --gghost-bg-surface: #1a2238;
    --gghost-border: rgba(99, 102, 241, 0.2);
    --gghost-border-glow: rgba(99, 102, 241, 0.4);
    --gghost-text-main: #f1f5f9;
    --gghost-text-muted: #94a3b8;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* ==========================================
   DARK MODE (DEFAULT & NATIVE GGHOST PALETTE)
   ========================================== */
html.dark-mode body {
    background-color: var(--gghost-bg-main) !important;
    color: var(--gghost-text-main) !important;
}

/* Sidebar Task Menu (Left Icon Bar) */
html.dark-mode #layout-menu {
    background: var(--gghost-bg-darkest) !important;
    border-right: 1px solid var(--gghost-border) !important;
}

#layout-menu .popover-header #logo {
    max-height: 42px !important;
    filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.35));
}

#layout-menu #taskmenu a {
    transition: all 0.2s ease-in-out;
}

#layout-menu #taskmenu a:hover {
    color: #a5b4fc !important;
    background: rgba(99, 102, 241, 0.12) !important;
}

#layout-menu #taskmenu a.selected {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.4) 0%, rgba(139, 92, 246, 0.2) 100%) !important;
    border-left: 3px solid var(--gghost-primary);
}

/* Compose Button */
#layout-menu #taskmenu a.compose {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45) !important;
    margin: 8px auto !important;
}

#layout-menu #taskmenu a.compose:hover {
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.6) !important;
    transform: translateY(-1px);
}

/* Mailbox Folders Sidebar */
html.dark-mode #layout-sidebar {
    background: var(--gghost-bg-main) !important;
    border-right: 1px solid var(--gghost-border) !important;
}

html.dark-mode #layout-sidebar .header {
    background: var(--gghost-bg-darkest) !important;
    border-bottom: 1px solid var(--gghost-border) !important;
    color: var(--gghost-text-main) !important;
}

/* Selected folder */
html.dark-mode .treelist li.selected > a,
html.dark-mode .listing tbody tr.selected td {
    background: rgba(99, 102, 241, 0.18) !important;
    color: #c7d2fe !important;
    font-weight: 600 !important;
}

html.dark-mode .treelist li > a:hover,
html.dark-mode .listing tbody tr:hover td {
    background: rgba(99, 102, 241, 0.08) !important;
}

/* Message List */
html.dark-mode #layout-list {
    background: var(--gghost-bg-card) !important;
    border-right: 1px solid var(--gghost-border) !important;
}

html.dark-mode #layout-list .header {
    background: var(--gghost-bg-main) !important;
    border-bottom: 1px solid var(--gghost-border) !important;
}

html.dark-mode #layout-content {
    background: var(--gghost-bg-main) !important;
}

/* Primary Buttons */
.btn-primary,
button.mainaction,
a.button.mainaction,
.btn-primary:not(:disabled):not(.disabled) {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35) !important;
    transition: all 0.2s ease !important;
}

.btn-primary:hover,
button.mainaction:hover,
a.button.mainaction:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.5) !important;
    transform: translateY(-1px);
}

/* Links */
a {
    color: #818cf8;
}
a:hover {
    color: #a5b4fc;
}

/* ==========================================
   LOGIN SCREEN BRANDING (GGHOST GAMING HOSTING)
   ========================================== */
.task-login {
    background: radial-gradient(circle at 50% 15%, #1e1b4b 0%, #0b0e1a 65%, #06080e 100%) !important;
    min-height: 100vh;
}

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

.task-login #logo {
    display: block !important;
    position: static !important;
    max-height: 75px !important;
    margin: 0 auto 30px auto !important;
    filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.45));
    transition: transform 0.3s ease;
}

.task-login #logo:hover {
    transform: scale(1.03);
}

.task-login #login-form {
    background: rgba(19, 25, 43, 0.75) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(99, 102, 241, 0.25) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65), 0 0 35px rgba(99, 102, 241, 0.15) !important;
    padding: 36px 32px 28px 32px !important;
    width: 100% !important;
    max-width: 420px !important;
}

.task-login #login-form table {
    width: 100% !important;
}

.task-login #login-form td.title {
    color: #cbd5e1 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding-bottom: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.task-login #login-form input.form-control {
    background: rgba(11, 14, 26, 0.85) !important;
    border: 1px solid rgba(99, 102, 241, 0.3) !important;
    color: #f8fafc !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

.task-login #login-form input.form-control:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3), 0 0 15px rgba(99, 102, 241, 0.2) !important;
    outline: none !important;
}

.task-login #login-form .formbuttons {
    margin-top: 24px !important;
    text-align: center !important;
}

.task-login #login-form .formbuttons button {
    width: 100% !important;
    padding: 12px 18px !important;
    font-size: 15px !important;
    letter-spacing: 0.3px !important;
    cursor: pointer !important;
}

.task-login #login-footer {
    margin-top: 25px !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(99, 102, 241, 0.15) !important;
    color: var(--gghost-text-muted) !important;
    font-size: 13px !important;
    text-align: center !important;
}

.task-login #login-footer a {
    color: #818cf8 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

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

/* Quick Back Link in Login Footer */
.gghost-back-bar {
    margin-top: 15px;
    text-align: center;
}
.gghost-back-bar a {
    color: #94a3b8;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.gghost-back-bar a:hover {
    color: #6366f1;
}

/* Custom Watermark (Empty Inbox View) */
iframe[name="messagecontframe"] {
    background: var(--gghost-bg-main) !important;
}

/* GGHOST Navigation Portal Button in Taskbar */
#taskmenu a.gghost-portal:before {
    content: "\f233" !important;
    font-family: 'Icons' !important;
    color: #818cf8 !important;
    display: block !important;
    margin: 0 auto 4px auto !important;
    font-size: 1.25rem !important;
    transition: all 0.2s ease !important;
}

#taskmenu a.gghost-portal:hover:before {
    color: #ffffff !important;
    text-shadow: 0 0 12px rgba(99, 102, 241, 0.8) !important;
    transform: scale(1.1) !important;
}

#taskmenu a.gghost-portal .inner {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    color: #a5b4fc !important;
}