/* PassageMail — SOGo Login & UI Branding
 * Stored in /opt/iredmail/custom/sogo/branding/ — survives iRedMail EE upgrades
 * Injected via nginx sub_filter (see /opt/iredmail/custom/nginx/webapps/sogo.conf)
 * Brand source-of-truth: PCN-LLC/passagemail-brand-assets BRAND-GUIDE.md
 * Primary: #E27600 (PassageMail Orange) · Font: Montserrat ExtraLight
 * Last updated 2026-06-01 (ccms) — refreshed to canonical brand assets
 */

/* ── Google Font: Montserrat (ExtraLight 200 default; heavier weights for hierarchy) ── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap');

:root { --pm-orange: #E27600; --pm-orange-dark: #C96800; }

/* ── Login page background ────────────────────────────────────────────────── */

/* The .sg-login panel is the right half — override its accent bg to white */
[ui-view=login] md-content {
    background-color: #FFFFFF !important;
}

/* ── Replace SOGo logo with canonical PassageMail wordmark ────────────────── */

/* Hide the default sogo-full.svg */
.sg-logo img {
    display: none !important;
}

/* Show PassageMail wordmark instead (canonical 1524×721, 2.11:1 aspect) */
.sg-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sg-logo::after {
    content: '' !important;
    display: block !important;
    width: 300px !important;
    height: 142px !important;
    background: url('/passagemail-branding/passagemail-logo.png') no-repeat center center !important;
    background-size: contain !important;
}

/* ── Compact / mobile header logo → standalone PassageMail icon ───────────── */
/* SOGo shows a compact logo in the top toolbar on narrow viewports */
.sg-logo-compact img,
md-toolbar .sg-logo img {
    display: none !important;
}
.sg-logo-compact::after {
    content: '' !important;
    display: inline-block !important;
    width: 36px !important;
    height: 36px !important;
    background: url('/passagemail-branding/passagemail-icon.png') no-repeat center center !important;
    background-size: contain !important;
}

/* ── Login form card ──────────────────────────────────────────────────────── */

/* Card container — orange top border */
#loginContent {
    border-top: 4px solid var(--pm-orange) !important;
    border-radius: 8px !important;
}

/* ── Login panel accent override (teal → white with dark text) ────────────── */

/* The login panel uses .md-accent.md-bg — override to white so form text is readable */
.sg-login.md-default-theme.md-bg.md-accent,
.sg-login.md-bg.md-accent {
    background-color: #FFFFFF !important;
    color: #1A1A1A !important;
}

/* ── Login form text — ensure all text is dark and readable ───────────────── */

.sg-login-content,
.sg-login-content label,
.sg-login-content .md-label,
.sg-login-content span,
.sg-login-content p,
.sg-login-content .input-login-label,
.sg-login-content md-checkbox .md-label,
.sg-login-content md-checkbox span {
    color: #1A1A1A !important;
}

/* Input text */
.sg-login-content input,
.sg-login-content .md-input,
.sg-login-content .input-login-input {
    color: #1A1A1A !important;
}

/* Unfocused input labels */
.sg-login-content md-input-container label {
    color: #555555 !important;
}

/* Checkbox border (unchecked) */
.sg-login-content md-checkbox .md-icon {
    border-color: #555555 !important;
}

/* ── Accent color overrides ───────────────────────────────────────────────── */

/* Primary accent - backgrounds */
.md-default-theme.md-accent.md-bg,
.md-accent.md-bg,
md-toolbar.md-default-theme.md-accent,
md-toolbar.md-accent {
    background-color: var(--pm-orange) !important;
}

/* FAB button on login (arrow) */
.md-fab.md-accent.md-hue-2,
.md-default-theme .md-fab.md-accent.md-hue-2 {
    background-color: var(--pm-orange) !important;
    color: #FFFFFF !important;
}

.md-fab.md-accent.md-hue-2:hover {
    background-color: var(--pm-orange-dark) !important;
}

/* Raised/flat accent buttons */
.md-button.md-accent.md-raised,
.md-button.md-accent.md-fab,
.md-default-theme .md-button.md-accent.md-raised,
.md-default-theme .md-button.md-accent.md-fab {
    background-color: var(--pm-orange) !important;
    color: #FFFFFF !important;
}

.md-button.md-accent.md-raised:hover,
.md-button.md-accent.md-fab:hover {
    background-color: var(--pm-orange-dark) !important;
}

/* Accent text color (links, labels) */
.md-default-theme.md-accent.md-hue-1.md-fg,
.md-accent.md-hue-1.md-fg,
.md-default-theme .md-accent,
.md-default-theme.md-accent {
    color: var(--pm-orange) !important;
}

/* Accent hue-2 bg */
.md-default-theme.md-accent.md-hue-2,
.md-accent.md-hue-2 {
    background-color: var(--pm-orange) !important;
}

/* ── Input focus ──────────────────────────────────────────────────────────── */

md-input-container.md-default-theme.md-input-focused .md-input,
md-input-container.md-input-focused .md-input {
    border-color: var(--pm-orange) !important;
}

md-input-container.md-default-theme.md-input-focused label,
md-input-container.md-input-focused label {
    color: var(--pm-orange) !important;
}

/* ── Checkbox accent ──────────────────────────────────────────────────────── */

md-checkbox.md-default-theme.md-checked .md-icon,
md-checkbox.md-checked .md-icon {
    background-color: var(--pm-orange) !important;
}

/* ── Typography — Montserrat across login + chrome ────────────────────────── */

.sg-login-content,
.sg-login-content label,
.sg-login-content input,
.sg-login-content .md-button,
#loginContent,
md-toolbar .md-toolbar-tools {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ExtraLight for large brand/display text; keep inputs legible at 300 */
#loginContent h1, #loginContent .sg-title { font-weight: 200 !important; }
.sg-login-content input { font-weight: 300 !important; }

/* ── Password recovery link ───────────────────────────────────────────────── */

.password-lost-link,
.password-lost-link a {
    color: var(--pm-orange) !important;
}

.password-lost-link a:hover {
    color: var(--pm-orange-dark) !important;
}

/* ── Hide SOGo hint text on login ─────────────────────────────────────────── */

.sg-login-content .sg-hint {
    display: none !important;
}

/* ── Page title bar ───────────────────────────────────────────────────────── */

/* Override the teal accent bar above the login card */
.md-default-theme.md-accent.md-hue-1.md-fg.md-padding {
    color: var(--pm-orange) !important;
}

/* ── App toolbar (post-login) ─────────────────────────────────────────────── */

md-toolbar.md-accent.md-bg md-icon,
md-toolbar.md-accent md-icon {
    color: #FFFFFF !important;
}