/*
 * FFB Brasil Gestão de E-mail — Admin UI Modern Stylesheet
 * Adds a modern layer on top of legacy Interspire CSS without touching templates.
 * Loaded after stylesheet.css via Apache directive or auto-prepend.
 * Version: 1.0.0 - 2026-04-23
 */

/* ============================================================
   Design Tokens
   ============================================================ */
:root {
    --ffb-primary: #2351E5;
    --ffb-primary-dark: #1E46C2;
    --ffb-primary-soft: #EDF1FF;
    --ffb-navy: #060F2E;
    --ffb-accent: #00C4A1;
    --ffb-accent-dark: #00A286;

    --ffb-surface: #FFFFFF;
    --ffb-bg: #F6F7FB;
    --ffb-bg-muted: #EFF1F6;
    --ffb-border: #E5E7EB;
    --ffb-border-strong: #D1D5DB;

    --ffb-text: #1F2937;
    --ffb-text-muted: #6B7280;
    --ffb-text-subtle: #9CA3AF;
    --ffb-text-inverted: #FFFFFF;

    --ffb-danger: #EF4444;
    --ffb-warning: #F59E0B;
    --ffb-success: #10B981;
    --ffb-info: #3B82F6;

    --ffb-radius: 8px;
    --ffb-radius-lg: 12px;
    --ffb-shadow-sm: 0 1px 2px rgba(6, 15, 46, 0.05);
    --ffb-shadow: 0 4px 12px rgba(6, 15, 46, 0.08);
    --ffb-shadow-lg: 0 12px 32px rgba(35, 81, 229, 0.12);

    --ffb-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --ffb-font-mono: ui-monospace, "SF Mono", "Consolas", "Monaco", monospace;

    --ffb-transition: all .15s ease;
}

/* ============================================================
   Base reset (aditivo, sem quebrar layout legado)
   ============================================================ */
html, body {
    background: var(--ffb-bg) !important;
    font-family: var(--ffb-font-sans) !important;
    color: var(--ffb-text) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body, td, th, div, span, p, a, label, input, select, textarea, button {
    font-family: var(--ffb-font-sans) !important;
}

a {
    color: var(--ffb-primary);
    text-decoration: none;
    transition: var(--ffb-transition);
}
a:hover { color: var(--ffb-primary-dark); text-decoration: underline; }

/* ============================================================
   Header / Top bar
   ============================================================ */
.Header {
    background: linear-gradient(135deg, var(--ffb-navy) 0%, #0E1B4A 100%) !important;
    background-image: none !important;
    padding: 12px 24px !important;
    box-shadow: var(--ffb-shadow);
    color: var(--ffb-text-inverted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
}
.Header_Top, .Header_Bottom { display: none !important; }
.Header .logo {
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}
.Header .logo img,
#logo,
img#logo {
    max-height: 40px !important;
    max-width: 220px !important;
    width: auto !important;
    height: auto !important;
    background: #fff;
    padding: 6px 10px;
    border-radius: var(--ffb-radius);
    display: block;
}
.Header .textlinks {
    text-align: right !important;
    float: none !important;
    padding: 0 !important;
}
.Header .MenuText,
.Header .MenuText a {
    color: rgba(255,255,255,0.9) !important;
    font-size: 13px !important;
}
.Header .MenuText a { color: rgba(255,255,255,0.75) !important; }
.Header .MenuText a:hover { color: #fff !important; text-decoration: none; }
.loggedinas {
    color: rgba(255,255,255,0.7) !important;
    font-size: 12px !important;
    margin-top: 4px;
    display: block;
}
.emailcredits {
    background: rgba(255,255,255,0.1);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    margin-left: 8px;
    display: inline-block;
    color: rgba(255,255,255,0.85) !important;
}

/* ============================================================
   Menu / Navigation
   ============================================================ */
.menuBar {
    background: var(--ffb-surface) !important;
    border-bottom: 1px solid var(--ffb-border) !important;
    box-shadow: var(--ffb-shadow-sm);
    padding: 0 24px !important;
}
.menuBar a {
    padding: 14px 16px !important;
    color: var(--ffb-text) !important;
    font-size: 13px !important;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: var(--ffb-transition);
    display: inline-block;
}
.menuBar a:hover,
.menuBar a.active,
.menuBar a.selected {
    color: var(--ffb-primary) !important;
    border-bottom-color: var(--ffb-primary) !important;
    background: transparent !important;
    text-decoration: none !important;
}

/* ============================================================
   Content container
   ============================================================ */
.ContentContainer {
    max-width: 1280px;
    margin: 24px auto !important;
    padding: 0 24px;
}
.BodyContainer {
    background: var(--ffb-surface) !important;
    border: 1px solid var(--ffb-border) !important;
    border-radius: var(--ffb-radius-lg) !important;
    padding: 24px !important;
    box-shadow: var(--ffb-shadow-sm);
}

/* ============================================================
   Headings
   ============================================================ */
.Heading1, h1.Heading1, .PageHeading, h1 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--ffb-navy) !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.Heading2, h2 {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--ffb-navy) !important;
    margin: 24px 0 12px 0 !important;
}
.SubHeading, h3 {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--ffb-text) !important;
}

/* ============================================================
   Buttons
   ============================================================ */
.FormButton,
input[type="submit"],
input[type="button"],
button,
.button {
    background: var(--ffb-primary) !important;
    color: var(--ffb-text-inverted) !important;
    border: 0 !important;
    padding: 9px 18px !important;
    border-radius: var(--ffb-radius) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: var(--ffb-transition);
    box-shadow: var(--ffb-shadow-sm);
    font-family: var(--ffb-font-sans) !important;
    line-height: 1.2;
}
.FormButton:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
    background: var(--ffb-primary-dark) !important;
    box-shadow: var(--ffb-shadow);
    transform: translateY(-1px);
}
.FormButton:active,
input[type="submit"]:active,
input[type="button"]:active {
    transform: translateY(0);
}
/* Secondary / cancel buttons */
input[type="button"][value*="Cancel" i],
input[type="button"][value*="Cancelar" i],
.button-secondary {
    background: var(--ffb-bg-muted) !important;
    color: var(--ffb-text) !important;
    border: 1px solid var(--ffb-border-strong) !important;
}
input[type="button"][value*="Cancel" i]:hover,
input[type="button"][value*="Cancelar" i]:hover,
.button-secondary:hover {
    background: var(--ffb-border) !important;
}

/* ============================================================
   Inputs
   ============================================================ */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="date"],
textarea,
select,
.Field150, .Field250, .Field350 {
    background: #FFF !important;
    border: 1px solid var(--ffb-border-strong) !important;
    border-radius: var(--ffb-radius) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    color: var(--ffb-text) !important;
    font-family: var(--ffb-font-sans) !important;
    transition: var(--ffb-transition);
    box-shadow: none !important;
    outline: none !important;
}
input:focus,
textarea:focus,
select:focus {
    border-color: var(--ffb-primary) !important;
    box-shadow: 0 0 0 3px rgba(35, 81, 229, 0.15) !important;
}
input[disabled],
select[disabled],
textarea[disabled] {
    background: var(--ffb-bg-muted) !important;
    color: var(--ffb-text-subtle) !important;
    cursor: not-allowed;
}
.Field150 { width: 180px; }
.Field250 { width: 260px; }
.Field350 { width: 360px; }

/* Checkboxes and radios */
input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--ffb-primary);
    cursor: pointer;
    vertical-align: middle;
}

/* ============================================================
   Tables (Interspire usa tabelas para tudo — stats, listas, etc.)
   ============================================================ */
.DataTable,
.tableBorder,
table.Normal,
table.BasicTable {
    width: 100% !important;
    border-collapse: collapse !important;
    border: 1px solid var(--ffb-border) !important;
    border-radius: var(--ffb-radius) !important;
    overflow: hidden;
    background: var(--ffb-surface);
    margin: 12px 0;
}
.DataTable th,
.tableBorder th,
table.Normal th,
.HeadingRow td,
.GridHeader td {
    background: var(--ffb-bg-muted) !important;
    color: var(--ffb-text) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: 0.04em;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--ffb-border) !important;
    text-align: left !important;
}
.DataTable td,
.tableBorder td,
table.Normal td,
.row0 td, .row1 td,
tr.Row td {
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--ffb-bg-muted) !important;
    font-size: 13px !important;
    color: var(--ffb-text) !important;
    background: var(--ffb-surface) !important;
}
.DataTable tr:hover td,
.tableBorder tr:hover td,
tr.Row:hover td {
    background: var(--ffb-primary-soft) !important;
}
.DataTable tr:last-child td,
table.Normal tr:last-child td {
    border-bottom: 0 !important;
}
/* Zebra (if theme applies row0/row1) */
tr.row0 td { background: var(--ffb-surface) !important; }
tr.row1 td { background: #FAFBFD !important; }

/* ============================================================
   Messages / Alerts
   ============================================================ */
.Success, .success, .successMessage,
.Notice, .notice, .noticeMessage {
    background: #ECFDF5 !important;
    color: #065F46 !important;
    border-left: 4px solid var(--ffb-success) !important;
    padding: 12px 16px !important;
    border-radius: var(--ffb-radius);
    margin: 12px 0;
    font-size: 13px;
}
.Warning, .warning {
    background: #FFFBEB !important;
    color: #92400E !important;
    border-left: 4px solid var(--ffb-warning) !important;
    padding: 12px 16px !important;
    border-radius: var(--ffb-radius);
    margin: 12px 0;
    font-size: 13px;
}
.Error, .error, .errorMessage,
.TestModeEnabled {
    background: #FEF2F2 !important;
    color: #991B1B !important;
    border-left: 4px solid var(--ffb-danger) !important;
    padding: 12px 16px !important;
    border-radius: var(--ffb-radius);
    margin: 12px 0;
    font-size: 13px;
}
.Info, .info {
    background: #EFF6FF !important;
    color: #1E40AF !important;
    border-left: 4px solid var(--ffb-info) !important;
    padding: 12px 16px !important;
    border-radius: var(--ffb-radius);
    margin: 12px 0;
    font-size: 13px;
}

/* ============================================================
   Login screen (overrides anteriores de fix_logo_css.sh)
   ============================================================ */
body > div#box,
#box.loginBox {
    background: transparent !important;
    position: static !important;
    margin: 80px auto !important;
    padding: 0 !important;
    max-width: 440px !important;
    width: auto !important;
    top: auto !important;
    left: auto !important;
}
#box > table,
#box.loginBox > table {
    background: var(--ffb-surface) !important;
    border-radius: var(--ffb-radius-lg) !important;
    box-shadow: var(--ffb-shadow-lg) !important;
    padding: 32px 40px !important;
    border-collapse: separate !important;
    border-spacing: 0;
    margin: 0 auto !important;
    width: 100% !important;
}
#box > table > tbody > tr > td,
#box.loginBox td[style*="border"] {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    width: auto !important;
}
#box .Heading1 {
    text-align: center !important;
    padding: 0 0 24px 0 !important;
    border-bottom: 1px solid var(--ffb-border);
    margin-bottom: 20px !important;
}
#box .Heading1 img {
    max-width: 200px !important;
    max-height: 60px !important;
    width: auto !important;
    height: auto !important;
    display: inline-block;
}
#box table table { width: 100% !important; }
#box table table td {
    padding: 6px 0 !important;
    border: 0 !important;
    vertical-align: middle;
}
#box .Field150 {
    width: 100% !important;
    box-sizing: border-box !important;
}
#box .FormButton {
    width: 100%;
    padding: 11px !important;
    font-size: 14px !important;
    margin-top: 8px;
}
#box .PageFooter {
    text-align: center !important;
    color: var(--ffb-text-subtle) !important;
    font-size: 11px !important;
    padding: 16px 0 0 0 !important;
    margin-top: 16px !important;
    border-top: 1px solid var(--ffb-border);
}

/* ============================================================
   Misc legacy UI cleanups
   ============================================================ */
.Gap { height: 8px !important; }
.PageFooter {
    color: var(--ffb-text-muted) !important;
    font-size: 12px !important;
    padding: 16px 0 !important;
}
hr {
    border: 0 !important;
    border-top: 1px solid var(--ffb-border) !important;
    margin: 16px 0 !important;
}
/* Hide Interspire trial/licensing banners if any */
#IEM_Header_TrialNotificationBar { display: none !important; }

/* Scrollbar polish (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ffb-bg-muted); }
::-webkit-scrollbar-thumb {
    background: var(--ffb-border-strong);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: var(--ffb-text-subtle); }

/* ============================================================
   Tooltips / modals basics
   ============================================================ */
.toolTipBox, .infoBox {
    background: #FFF !important;
    border: 1px solid var(--ffb-border) !important;
    border-radius: var(--ffb-radius) !important;
    box-shadow: var(--ffb-shadow);
    padding: 10px 14px !important;
    font-size: 12px !important;
    color: var(--ffb-text-muted) !important;
}

/* ============================================================
   Responsive (básico — header e content viram coluna em mobile)
   ============================================================ */
@media (max-width: 900px) {
    .Header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .Header .textlinks { text-align: left !important; width: 100%; }
    .ContentContainer { padding: 0 12px; margin: 12px auto !important; }
    .BodyContainer { padding: 16px !important; }
    .menuBar { overflow-x: auto; white-space: nowrap; }
}