/*
 * Firmeoo - core visual layer.
 *
 * Colours and container behaviour are CSS custom properties on purpose -
 * exactly the same reasoning as the earlier --container-width
 * discussion: change it once here, everything downstream follows,
 * instead of hunting values through a dozen template files.
 */

:root {
    --firmeoo-bg:            #0a0e1a;
    --firmeoo-bg-topbar:     #000000;
    --firmeoo-red:           #e8123c;
    --firmeoo-purple:        #7b2ff7;
    --firmeoo-accent:        #e91e8c;
    --firmeoo-blue:          #2f6bff;
    --firmeoo-text:          #f2f2f5;
    --firmeoo-text-dim:      rgba(242, 242, 245, 0.6);
    --firmeoo-border:        rgba(255, 255, 255, 0.12);

    /* Every module/section can independently choose "site width" (this
       variable) or "100%" (the --firmeoo-container--full modifier below)
       - nothing here is a fixed global decision. */
    --firmeoo-container-width: 1200px;
    --firmeoo-gutter: 24px;
}

* { box-sizing: border-box; }

body.firmeoo-hub {
    background: var(--firmeoo-bg);
    color: var(--firmeoo-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
}

a { color: inherit; }

/* ---- Container system: every section picks one of these two. ---- */
.firmeoo-container {
    width: 100%;
    max-width: var(--firmeoo-container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--firmeoo-gutter);
    padding-right: var(--firmeoo-gutter);
}
.firmeoo-container--full {
    max-width: none;
}

/* ---- Top bar: black strip, logo left, primary nav, session info right. ---- */
.firmeoo-topbar {
    background: var(--firmeoo-bg-topbar);
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--firmeoo-red), var(--firmeoo-purple)) 1;
    position: relative;
    z-index: 2;
}
.firmeoo-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 14px;
    padding-bottom: 14px;
}
.firmeoo-logo {
    font-family: Georgia, serif;
    font-size: 22px;
    letter-spacing: 0.04em;
    color: var(--firmeoo-text);
    text-decoration: none;
    white-space: nowrap;
}
.firmeoo-logo img { max-height: 34px; display: block; }

/* Logged-in state: the logo becomes a click-toggle button instead of a
   plain link, opening a small Home / Log out menu - permanent, simple
   interaction that isn't expected to change. */
.firmeoo-logo-menu { position: relative; }
button.firmeoo-logo-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.firmeoo-logo-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 10px;
    min-width: 160px;
    background: #12172a;
    border: 1px solid var(--firmeoo-border);
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
    z-index: 20;
}
.firmeoo-logo-menu.is-open .firmeoo-logo-dropdown { display: block; }
.firmeoo-logo-dropdown a {
    display: block;
    padding: 8px 12px;
    border-radius: 5px;
    color: var(--firmeoo-text);
    text-decoration: none;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.firmeoo-logo-dropdown a:hover { background: rgba(255, 255, 255, 0.08); color: var(--firmeoo-accent); }

.firmeoo-primary-nav {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    flex-wrap: wrap;
}
.firmeoo-primary-nav a {
    color: var(--firmeoo-text);
    text-decoration: none;
    font-size: 15px;
    padding: 6px 14px;
    white-space: nowrap;
}
.firmeoo-primary-nav a:hover { color: var(--firmeoo-accent); }
.firmeoo-primary-nav a.is-active { color: var(--firmeoo-accent); font-weight: 600; }
.firmeoo-primary-nav .firmeoo-nav-sep {
    color: var(--firmeoo-border);
    user-select: none;
}

.firmeoo-session-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.firmeoo-session-info img { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; }

/* Small, non-interactive by design (never a link/button - a glance-only
   indicator, not something to click) - kept deliberately quiet: muted
   icon, small type, a soft border rather than a filled background, so
   it sits comfortably next to the flag without competing with it. */
.firmeoo-wallet-balance {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--firmeoo-text-dim);
    padding: 3px 10px;
    border: 1px solid var(--firmeoo-border);
    border-radius: 999px;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color 0.15s ease;
}
.firmeoo-wallet-balance:hover { border-color: var(--firmeoo-accent); }
.firmeoo-wallet-icon { font-size: 12px; opacity: 0.7; }
.firmeoo-wallet-amount {
    font-weight: 600;
    background: linear-gradient(90deg, var(--firmeoo-accent), var(--firmeoo-purple));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---- Sub-nav rows: the red-to-purple gradient bars per section. ----
   Pulled up with a small negative margin so it visually rises into the
   black topbar's bottom edge (the "belka nachodzi na belkę górną" from
   the design) - the topbar's own higher z-index means the overlap reads
   as the gradient bar tucking slightly behind/under it. Kept
   deliberately smaller than the bar's own vertical padding below, so
   only the bar's background tucks under the topbar - never its actual
   link text, which would otherwise get visually clipped/hidden. */
.firmeoo-subnav-row {
    display: flex;
    align-items: stretch;
    margin-top: -12px;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}
.firmeoo-subnav-bar {
    flex: 1;
    background: linear-gradient(100deg, var(--firmeoo-red) 0%, var(--firmeoo-purple) 100%);
    border-radius: 6px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 30px var(--firmeoo-gutter);
    flex-wrap: wrap;
}
.firmeoo-subnav-bar a {
    color: var(--firmeoo-text);
    text-decoration: none;
    font-size: 15px;
    padding: 6px 12px;
}
.firmeoo-subnav-bar a:hover { text-decoration: underline; }
.firmeoo-subnav-bar .firmeoo-nav-sep { color: rgba(255, 255, 255, 0.5); }

/* The little rotated module label riding the right edge of each bar,
   matching the vertical "messaging / office / things to do..." labels
   in the design. */
.firmeoo-subnav-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(0, 0, 0, 0.35);
    padding: 8px 4px;
    border-radius: 0 4px 4px 0;
    flex-shrink: 0;
}

/* ---- Footer: mirrors the top nav on the same gradient. ---- */
.firmeoo-footer {
    margin-top: 80px;
    background: linear-gradient(100deg, var(--firmeoo-red) 0%, var(--firmeoo-purple) 100%);
    padding: 40px 0;
}
.firmeoo-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.firmeoo-footer-tagline { font-size: 15px; color: var(--firmeoo-text); }
.firmeoo-footer-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.firmeoo-footer-nav a { color: var(--firmeoo-text); text-decoration: none; font-size: 14px; padding: 4px 8px; }
.firmeoo-footer-nav a.is-active { font-weight: 700; text-decoration: underline; }
.firmeoo-footer-logo { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.firmeoo-footer-logo img { max-height: 24px; }

/* ---- Shared heading style, used on the hub home and every module stub. ---- */
.firmeoo-heading { font-family: Georgia, serif; font-weight: normal; margin-top: 0; }
.firmeoo-welcome-row { display: flex; align-items: center; gap: 16px; }
.firmeoo-welcome-row img { border-radius: 10px; display: block; }

/* ---- Module stub panel - placeholder content for modules not built yet. ---- */
.firmeoo-stub-panel {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--firmeoo-border);
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--firmeoo-red), var(--firmeoo-purple)) 1;
    border-radius: 8px;
    padding: 30px;
}
.firmeoo-stub-panel-crumb {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--firmeoo-text-dim);
    margin-bottom: 8px;
}
.firmeoo-stub-panel--denied { border-image: none; border-top-color: var(--firmeoo-red); }

/* ---- Auth card: registration / login-adjacent screens. ---- */
.firmeoo-auth-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--firmeoo-border);
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--firmeoo-red), var(--firmeoo-purple)) 1;
    border-radius: 10px;
    padding: 36px 34px;
}

.firmeoo-mini-stepper { display: flex; justify-content: center; gap: 40px; margin: 24px 0 30px; }
.firmeoo-mini-step { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.firmeoo-mini-step-dot {
    width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.08); border: 1px solid var(--firmeoo-border); color: var(--firmeoo-text-dim);
    font-size: 12px; font-weight: 700;
}
.firmeoo-mini-step.is-active .firmeoo-mini-step-dot { background: var(--firmeoo-accent); border-color: var(--firmeoo-accent); color: #fff; }
.firmeoo-mini-step.is-done .firmeoo-mini-step-dot { background: rgba(233, 30, 140, 0.25); border-color: var(--firmeoo-accent); color: var(--firmeoo-accent); }
.firmeoo-mini-step-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--firmeoo-text-dim); }
.firmeoo-mini-step.is-active .firmeoo-mini-step-label { color: var(--firmeoo-text); }

.firmeoo-form-field { margin-bottom: 16px; }
.firmeoo-form-field label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--firmeoo-text-dim); margin-bottom: 6px; }
.firmeoo-form-field input {
    width: 100%; box-sizing: border-box; padding: 10px 12px; background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--firmeoo-border); border-radius: 6px; color: var(--firmeoo-text); font-size: 14px;
}
.firmeoo-form-field input:focus { outline: none; border-color: var(--firmeoo-accent); }
.firmeoo-form-hint { font-size: 12px; color: var(--firmeoo-text-dim); margin-top: 6px; }
.firmeoo-form-error {
    background: rgba(232, 18, 60, 0.12); border: 1px solid rgba(232, 18, 60, 0.4); color: #ff9db0;
    border-radius: 6px; padding: 10px 14px; font-size: 13px; margin-bottom: 18px;
}
.firmeoo-form-success {
    background: rgba(77, 189, 130, 0.12); border: 1px solid rgba(77, 189, 130, 0.4); color: #7ee0a0;
    border-radius: 6px; padding: 10px 14px; font-size: 13px; margin-bottom: 18px;
}
.firmeoo-form-success a { color: inherit; text-decoration: underline; margin-left: 6px; }
.firmeoo-form-actions { display: flex; justify-content: space-between; gap: 10px; }

.firmeoo-btn {
    display: inline-block; padding: 10px 22px; border-radius: 6px; border: 1px solid var(--firmeoo-border);
    background: rgba(255, 255, 255, 0.06); color: var(--firmeoo-text); font-size: 14px; cursor: pointer;
}
.firmeoo-btn:hover { border-color: var(--firmeoo-accent); }
.firmeoo-btn-primary { background: linear-gradient(90deg, var(--firmeoo-red), var(--firmeoo-purple)); border: none; color: #fff; font-weight: 600; }
.firmeoo-btn-primary:hover { opacity: 0.9; }

.firmeoo-auth-alt-link { text-align: center; font-size: 13px; color: var(--firmeoo-text-dim); margin-top: 20px; }
.firmeoo-auth-alt-link a { color: var(--firmeoo-accent); text-decoration: none; }

/* ---- Language switcher: full row (registration) and compact dropdown (header). ---- */
.firmeoo-lang-switcher {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--firmeoo-border);
}
.firmeoo-lang-flag {
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    opacity: 0.55;
    filter: grayscale(40%);
    transition: opacity 0.15s ease, filter 0.15s ease;
}
.firmeoo-lang-flag:hover,
.firmeoo-lang-flag.is-active {
    opacity: 1;
    filter: none;
}

.firmeoo-lang-switcher-compact { position: relative; display: flex; align-items: center; }
.firmeoo-lang-flag-current { font-size: 18px; line-height: 1; cursor: pointer; }
.firmeoo-lang-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #12172a;
    border: 1px solid var(--firmeoo-border);
    border-radius: 8px;
    padding: 8px;
    gap: 6px;
    grid-template-columns: repeat(4, 1fr);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
    z-index: 20;
}
.firmeoo-lang-switcher-compact.is-open .firmeoo-lang-dropdown { display: grid; }
.firmeoo-lang-dropdown .firmeoo-lang-flag { font-size: 18px; text-align: center; padding: 4px; }

/* ---- Messaging > Chat module. ---- */
.firmeoo-chat-shell {
    display: flex;
    gap: 20px;
    height: calc(100vh - 220px);
    min-height: 480px;
    max-width: var(--firmeoo-container-width);
    margin: 0 auto var(--firmeoo-gutter);
    padding: 0 var(--firmeoo-gutter);
}

.firmeoo-chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--firmeoo-border);
    border-radius: 10px;
    overflow: hidden;
    min-width: 0;
}
.firmeoo-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.firmeoo-chat-empty { color: var(--firmeoo-text-dim); font-size: 14px; }

.firmeoo-chat-bubble-row { display: flex; margin: 4px 0; }
.firmeoo-chat-bubble-row.is-mine { justify-content: flex-end; }
.firmeoo-chat-bubble-row.is-theirs { justify-content: flex-start; }
.firmeoo-chat-bubble {
    max-width: 62%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.4;
}
.firmeoo-chat-bubble-row.is-mine .firmeoo-chat-bubble {
    background: linear-gradient(100deg, var(--firmeoo-red), var(--firmeoo-purple));
    color: #fff;
    border-bottom-right-radius: 4px;
}
.firmeoo-chat-bubble-row.is-theirs .firmeoo-chat-bubble {
    background: rgba(255, 255, 255, 0.08);
    color: var(--firmeoo-text);
    border-bottom-left-radius: 4px;
}
.firmeoo-chat-bubble-text a { color: inherit; text-decoration: underline; }
.firmeoo-chat-bubble-image { max-width: 100%; border-radius: 8px; display: block; margin-bottom: 6px; }
.firmeoo-chat-bubble-meta { font-size: 11px; opacity: 0.7; margin-top: 4px; text-align: right; }

.firmeoo-chat-composer { border-top: 1px solid var(--firmeoo-border); padding: 14px 20px; position: relative; }
.firmeoo-chat-composer-toolbar { display: flex; gap: 10px; margin-bottom: 8px; position: relative; }
.firmeoo-chat-tool {
    background: none; border: none; font-size: 18px; cursor: pointer; padding: 4px;
    line-height: 1; color: var(--firmeoo-text-dim); display: inline-flex; align-items: center;
}
.firmeoo-chat-tool:hover { color: var(--firmeoo-text); }
.firmeoo-chat-emoji-picker {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 8px;
    background: #12172a;
    border: 1px solid var(--firmeoo-border);
    border-radius: 8px;
    padding: 8px;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
    z-index: 15;
}
.firmeoo-chat-emoji-picker.is-open { display: grid; }
.firmeoo-emoji-option { background: none; border: none; font-size: 18px; cursor: pointer; padding: 4px; border-radius: 6px; }
.firmeoo-emoji-option:hover { background: rgba(255, 255, 255, 0.08); }

.firmeoo-chat-composer-row { display: flex; gap: 10px; align-items: flex-end; }
.firmeoo-chat-composer-row .firmeoo-field { flex: 1; resize: none; max-height: 120px; }
.firmeoo-chat-image-preview { margin-top: 10px; max-width: 140px; }
.firmeoo-chat-image-preview img { max-width: 100%; border-radius: 8px; display: block; }

.firmeoo-chat-sidebar {
    width: 300px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--firmeoo-border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.firmeoo-chat-sidebar-header {
    background: var(--firmeoo-bg-topbar);
    padding: 16px 20px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--firmeoo-text-dim);
    border-bottom: 1px solid var(--firmeoo-border);
}
.firmeoo-chat-filter-tabs {
    display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--firmeoo-border);
}
.firmeoo-chat-filter-tab {
    flex: 1; padding: 6px 4px; border-radius: 6px; border: none; background: transparent;
    color: var(--firmeoo-text-dim); font-size: 12px; cursor: pointer;
}
.firmeoo-chat-filter-tab:hover { background: rgba(255,255,255,0.05); }
.firmeoo-chat-filter-tab.is-active { background: var(--firmeoo-accent); color: #fff; }
.firmeoo-chat-contacts { flex: 1; overflow-y: auto; padding: 8px; }
.firmeoo-chat-contact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--firmeoo-text);
    margin-bottom: 2px;
}
.firmeoo-chat-contact:hover { background: rgba(255, 255, 255, 0.05); }
.firmeoo-chat-contact.is-active { background: rgba(233, 30, 140, 0.14); }
.firmeoo-chat-avatar-ring {
    display: inline-flex;
    border-radius: 50%;
    padding: 2px;
    border: 2px solid var(--ring-color, #555);
    flex-shrink: 0;
}
.firmeoo-chat-avatar-ring img { display: block; border-radius: 50%; }
.firmeoo-chat-contact-name { font-size: 14px; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.firmeoo-chat-contact-top-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.firmeoo-chat-email-badge { font-size: 11px; opacity: 0.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.firmeoo-chat-unread-badge {
    background: var(--firmeoo-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    flex-shrink: 0;
}

.firmeoo-chat-new-conversation { padding: 14px; border-top: 1px solid var(--firmeoo-border); }
.firmeoo-chat-new-conversation label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--firmeoo-text-dim); margin-bottom: 6px; }
.firmeoo-chat-new-conversation select {
    width: 100%; padding: 8px 10px; background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--firmeoo-border); border-radius: 6px; color: var(--firmeoo-text); font-size: 13px;
}

.firmeoo-chat-legend { padding: 14px; border-top: 1px solid var(--firmeoo-border); font-size: 12px; color: var(--firmeoo-text-dim); display: flex; flex-direction: column; gap: 6px; }
.firmeoo-chat-legend div { display: flex; align-items: center; gap: 8px; }
.firmeoo-legend-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dot-color); flex-shrink: 0; }

@media (max-width: 900px) {
    .firmeoo-primary-nav { order: 3; width: 100%; }
    .firmeoo-subnav-bar { flex-direction: column; align-items: flex-start; }
    .firmeoo-subnav-row { margin-top: -6px; }
    .firmeoo-chat-shell { flex-direction: column; height: auto; }
    .firmeoo-chat-sidebar { width: 100%; max-height: 300px; }
    .firmeoo-chat-main { height: 60vh; }
}

/* ---- Universal progress bar component. ----
   The single, permanent visual for anything loading - file uploads,
   background jobs, whatever comes next. One rule of thumb: if a person
   has to wait for something client- or server-side, this is what they
   see, never a browser-default spinner or a bare "Uploading..." text.
   Built with two independently animated layers: a conic-gradient ring
   clipped to just the border (rotating - "światło przechodzące dookoła")
   and a striped, colour-shifting fill inside the track. */
.firmeoo-progress-wrap { display: flex; align-items: center; gap: 10px; }
.firmeoo-progress {
    position: relative;
    flex: 1;
    height: 20px;
    border-radius: 999px;
    overflow: hidden;
    padding: 3px;
    background: rgba(255, 255, 255, 0.04);
}
.firmeoo-progress::before {
    content: '';
    position: absolute;
    inset: -150%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        var(--firmeoo-accent) 30deg,
        var(--firmeoo-purple) 80deg,
        var(--firmeoo-blue) 130deg,
        transparent 170deg,
        transparent 360deg
    );
    animation: firmeoo-progress-ring-spin 2.4s linear infinite;
}
.firmeoo-progress-track {
    position: relative;
    z-index: 1;
    height: 100%;
    border-radius: 999px;
    background: var(--firmeoo-bg);
    overflow: hidden;
}
.firmeoo-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.32) 0px,
            rgba(0, 0, 0, 0.32) 2px,
            transparent 2px,
            transparent 7px
        ),
        linear-gradient(90deg, var(--firmeoo-red), var(--firmeoo-accent), var(--firmeoo-purple), var(--firmeoo-blue));
    background-size: 26px 100%, 220% 100%;
    background-position: 0 0, 0% 0;
    transition: width 0.3s ease;
    animation: firmeoo-progress-fill-shift 3.5s linear infinite;
    position: relative;
}
/* A soft highlight sweeping through the fill, matching the bright streak
   visible in the reference image - purely decorative, sits on its own
   layer so it never distorts the underlying colour/stripe pattern. */
.firmeoo-progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
    background-size: 60% 100%;
    animation: firmeoo-progress-shine 2s ease-in-out infinite;
}
.firmeoo-progress-percent {
    font-size: 12px;
    color: var(--firmeoo-text-dim);
    min-width: 34px;
    text-align: right;
    flex-shrink: 0;
}

@keyframes firmeoo-progress-ring-spin { to { transform: rotate(360deg); } }
@keyframes firmeoo-progress-fill-shift { to { background-position: 26px 0, -220% 0; } }
@keyframes firmeoo-progress-shine {
    0%   { background-position: -60% 0; }
    100% { background-position: 160% 0; }
}

/* ---- Office > Wallet module. ---- */
.firmeoo-wallet-hero {
    background: linear-gradient(100deg, var(--firmeoo-red), var(--firmeoo-purple), var(--firmeoo-blue));
    border-radius: 12px;
    padding: 28px 32px;
    margin: 20px 0 24px;
}
.firmeoo-wallet-hero-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.8); }
.firmeoo-wallet-hero-amount { font-family: Georgia, serif; font-size: 38px; color: #fff; margin-top: 4px; }

.firmeoo-wallet-topup-form label { display:block; font-size:12px; text-transform:uppercase; letter-spacing:0.03em; color:var(--firmeoo-text-dim); margin-bottom:10px; }
.firmeoo-quick-amounts { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.firmeoo-quick-amount {
    background: rgba(255,255,255,0.06); border: 1px solid var(--firmeoo-border); color: var(--firmeoo-text);
    border-radius: 999px; padding: 6px 16px; font-size: 13px; cursor: pointer;
}
.firmeoo-quick-amount:hover { border-color: var(--firmeoo-accent); color: var(--firmeoo-accent); }
.firmeoo-wallet-topup-row { display: flex; gap: 10px; }
.firmeoo-wallet-topup-row .firmeoo-field { flex: 1; }

.firmeoo-wallet-history { width: 100%; border-collapse: collapse; margin-top: 12px; }
.firmeoo-wallet-history tr { border-bottom: 1px solid var(--firmeoo-border); }
.firmeoo-wallet-history td { padding: 10px 6px; font-size: 13px; }
.firmeoo-wallet-history-date { color: var(--firmeoo-text-dim); white-space: nowrap; width: 120px; }
.firmeoo-wallet-history-amount { text-align: right; font-weight: 600; white-space: nowrap; }
.firmeoo-wallet-history-amount.is-credit { color: #7ee0a0; }
.firmeoo-wallet-history-amount.is-debit { color: #ff9db0; }

/* ---- Reusable two-column layout + card panel. ----
   Used by Support (info box left / form right) and Wallet (balance +
   top-up left / history right) - any future module needing the same
   "explain it here, do it there" shape reuses these two classes rather
   than each page inventing its own grid and card styling. */
.firmeoo-split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    margin-top: 20px;
}
.firmeoo-panel {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--firmeoo-border);
    border-radius: 10px;
    padding: 26px;
}
.firmeoo-panel-title { font-family: Georgia, serif; font-weight: normal; font-size: 17px; color: #fff; margin: 0 0 14px; }

.firmeoo-info-box h2 { font-family: Georgia, serif; font-weight: normal; font-size: 17px; color: #fff; margin-top: 0; }
.firmeoo-info-box p { color: var(--firmeoo-text-dim); font-size: 14px; line-height: 1.6; }
.firmeoo-info-box ul { margin: 14px 0 0; padding-left: 20px; color: var(--firmeoo-text-dim); font-size: 14px; line-height: 1.85; }

.firmeoo-form-box .firmeoo-form-field:last-of-type { margin-bottom: 20px; }

/* ---- Messaging > SMS module. ---- */
.firmeoo-sms-mode-tabs { display: flex; gap: 16px; flex-wrap: wrap; }
.firmeoo-sms-mode-option { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--firmeoo-text); font-weight: normal; text-transform: none; letter-spacing: normal; }
.firmeoo-sms-mode-option input { accent-color: var(--firmeoo-accent); }

.firmeoo-sms-cost-preview {
    font-size: 13px; color: var(--firmeoo-text-dim); background: rgba(255,255,255,0.04);
    border: 1px solid var(--firmeoo-border); border-radius: 6px; padding: 10px 14px; margin-top: 6px;
}
.firmeoo-sms-cost-preview strong { color: var(--firmeoo-accent); }

.firmeoo-sms-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.firmeoo-sms-stat {
    background: rgba(255,255,255,0.04); border: 1px solid var(--firmeoo-border); border-radius: 8px;
    padding: 14px; display: flex; flex-direction: column; gap: 4px;
}
.firmeoo-sms-stat-value { font-family: Georgia, serif; font-size: 20px; color: #fff; }
.firmeoo-sms-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--firmeoo-text-dim); }

.firmeoo-sms-history { width: 100%; border-collapse: collapse; margin-top: 10px; }
.firmeoo-sms-history tr { border-bottom: 1px solid var(--firmeoo-border); }
.firmeoo-sms-history td { padding: 10px 6px; font-size: 13px; vertical-align: top; }
.firmeoo-sms-history-phone { color: var(--firmeoo-text); }
.firmeoo-sms-history-name { color: var(--firmeoo-text); font-weight: 600; font-size: 13px; }
.firmeoo-sms-history-body { color: var(--firmeoo-text-dim); font-size: 12px; margin-top: 3px; max-width: 420px; white-space: pre-wrap; }
.firmeoo-sms-history-row--check .firmeoo-sms-history-phone { color: var(--firmeoo-text-dim); }
.firmeoo-sms-history-meta { color: var(--firmeoo-text-dim); font-size: 12px; margin-top: 2px; }
.firmeoo-sms-history-status { text-align: right; white-space: nowrap; }
.firmeoo-sms-status-badge {
    display: inline-block; font-size: 11px; padding: 3px 10px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.firmeoo-sms-status-delivered { background: rgba(77,189,130,0.18); color: #7ee0a0; }
.firmeoo-sms-status-sent { background: rgba(233,30,140,0.18); color: var(--firmeoo-accent); }
.firmeoo-sms-status-queued, .firmeoo-sms-status-scheduled { background: rgba(255,255,255,0.08); color: var(--firmeoo-text-dim); }
.firmeoo-sms-status-failed { background: rgba(232,18,60,0.18); color: #ff9db0; }

.firmeoo-sender-name-requests-list { list-style: none; margin: 14px 0 0; padding: 0; font-size: 13px; color: var(--firmeoo-text-dim); }
.firmeoo-sender-name-requests-list li { padding: 4px 0; }

/* ---- QR sticker orders list: status pulled live from WooCommerce. ---- */
.firmeoo-qr-sticker-orders-table { width: 100%; border-collapse: collapse; }
.firmeoo-qr-sticker-orders-table tr { border-bottom: 1px solid var(--firmeoo-border); }
.firmeoo-qr-sticker-orders-table td { padding: 10px 6px; font-size: 13px; vertical-align: top; }
.firmeoo-qr-sticker-order-title { color: var(--firmeoo-text); font-weight: 600; }
.firmeoo-qr-sticker-order-status { text-align: right; white-space: nowrap; }
.firmeoo-qr-sticker-status-badge {
    display: inline-block; font-size: 11px; padding: 3px 10px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.03em;
    background: rgba(255,255,255,0.08); color: var(--firmeoo-text-dim); /* default, for any status not listed below */
}
.firmeoo-qr-sticker-status-completed { background: rgba(77,189,130,0.18); color: #7ee0a0; }
.firmeoo-qr-sticker-status-processing { background: rgba(233,30,140,0.18); color: var(--firmeoo-accent); }
.firmeoo-qr-sticker-status-pending, .firmeoo-qr-sticker-status-on-hold { background: rgba(255,193,7,0.18); color: #ffd166; }
.firmeoo-qr-sticker-status-cancelled, .firmeoo-qr-sticker-status-failed, .firmeoo-qr-sticker-status-refunded { background: rgba(232,18,60,0.18); color: #ff9db0; }

@media (max-width: 900px) {
    .firmeoo-split-layout { grid-template-columns: 1fr; }
    .firmeoo-sms-stats-row { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   FIRMEOO STANDARD FORM FIELD - established version 0.11.0.
   The gradient look below is now the theme's default appearance for every
   text input, select, and textarea - not something specific to SMS. Add
   class="firmeoo-field" to any <input>, <select>, or <textarea> that needs
   this look, in any module, any size window. When building new forms,
   reach for this class first rather than inventing another input style.
   ========================================================================= */
.firmeoo-field {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    color: var(--firmeoo-text);
    background:
        linear-gradient(155deg,
            rgba(123, 47, 247, 0.30) 0%,
            rgba(233, 30, 140, 0.20) 45%,
            rgba(47, 107, 255, 0.22) 100%
        ),
        var(--firmeoo-bg);
    background-blend-mode: screen;
    border: 1px solid rgba(233, 30, 140, 0.35);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.25);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.firmeoo-field:focus {
    outline: none;
    border-color: var(--firmeoo-accent);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(233, 30, 140, 0.18);
}
.firmeoo-field::placeholder { color: rgba(255, 255, 255, 0.4); }
/* Textareas get extra breathing room and a slightly larger radius since
   they're visually bigger - same field, same gradient, just more of it. */
textarea.firmeoo-field { padding: 18px 20px; border-radius: 14px; resize: vertical; }

/* ---- SMS composer: wider column. ---- */
.firmeoo-split-layout--sms { grid-template-columns: 3fr 2fr; }
@media (max-width: 900px) {
    .firmeoo-split-layout--sms { grid-template-columns: 1fr; }
}

/* ---- Office > Contacts module. ---- */
.firmeoo-btn-small { padding: 5px 12px; font-size: 12px; }

.firmeoo-contacts-count { font-size: 13px; color: var(--firmeoo-text-dim); }

.firmeoo-contact-group-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.firmeoo-group-pill {
    background: transparent; border: 1px solid var(--firmeoo-border); color: var(--firmeoo-text-dim);
    border-radius: 999px; padding: 5px 14px; font-size: 12px; cursor: pointer; transition: all 0.15s ease;
}
.firmeoo-group-pill.is-active { background: rgba(255,255,255,0.08); color: var(--firmeoo-text); font-weight: 600; }
.firmeoo-group-pill-new { border-style: dashed; }

#firmeoo-new-group-form input[type="color"] {
    width: 40px; height: 38px; padding: 2px; border: 1px solid var(--firmeoo-border);
    border-radius: 6px; background: transparent; cursor: pointer;
}

.firmeoo-contacts-list { list-style: none; margin: 0; padding: 0; }
.firmeoo-contact-row {
    display: flex; align-items: center; gap: 12px; padding: 12px 0;
    border-bottom: 1px solid var(--firmeoo-border);
}
.firmeoo-contact-row:last-child { border-bottom: none; }
.firmeoo-contact-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 600; color: var(--firmeoo-text-dim);
}
.firmeoo-contact-avatar img { width: 100%; height: 100%; object-fit: cover; }
.firmeoo-contact-info { flex: 1; min-width: 0; }
.firmeoo-contact-name { font-size: 14px; color: var(--firmeoo-text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.firmeoo-contact-self-badge {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; background: rgba(233,30,140,0.18);
    color: var(--firmeoo-accent); padding: 2px 8px; border-radius: 999px;
}
.firmeoo-contact-group-badge {
    font-size: 10px; color: #fff; padding: 2px 9px; border-radius: 999px; font-weight: 600;
}
.firmeoo-contact-meta { font-size: 12px; color: var(--firmeoo-text-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Messaging > Tickets module. ---- */
.firmeoo-split-layout--tickets { grid-template-columns: 2fr 1fr; }
@media (max-width: 900px) {
    .firmeoo-split-layout--tickets { grid-template-columns: 1fr; }
}

.firmeoo-ticket-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.firmeoo-ticket-stat {
    background: rgba(255,255,255,0.04); border: 1px solid var(--firmeoo-border); border-radius: 8px;
    padding: 16px; text-align: center;
}
.firmeoo-ticket-stat-value { display: block; font-family: Georgia, serif; font-size: 22px; color: #fff; }
.firmeoo-ticket-stat-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--firmeoo-text-dim); margin-top: 4px; }
@media (max-width: 900px) {
    .firmeoo-ticket-stats-row { grid-template-columns: 1fr 1fr; }
}

/* Status colours - new=green, in progress=purple, closed=red, exactly
   as specified. Shared between the small dot in list rows and the
   bigger box on a ticket's own detail page. */
.firmeoo-ticket-status-new { background: rgba(77,189,130,0.18); color: #4dbd82; }
.firmeoo-ticket-status-in_progress { background: rgba(123,47,247,0.20); color: #b98bff; }
.firmeoo-ticket-status-closed { background: rgba(232,18,60,0.18); color: #ff6b85; }

.firmeoo-ticket-status-box {
    text-align: center; padding: 12px; border-radius: 10px; font-weight: 600;
    font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em;
}

.firmeoo-tickets-list { list-style: none; margin: 0; padding: 0; }
.firmeoo-ticket-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--firmeoo-border); }
.firmeoo-ticket-row:last-child { border-bottom: none; }
.firmeoo-ticket-status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.firmeoo-ticket-status-dot.firmeoo-ticket-status-new { background: #4dbd82; }
.firmeoo-ticket-status-dot.firmeoo-ticket-status-in_progress { background: #b98bff; }
.firmeoo-ticket-status-dot.firmeoo-ticket-status-closed { background: #ff6b85; }
.firmeoo-ticket-row-info { flex: 1; min-width: 0; }
.firmeoo-ticket-row-subject { color: var(--firmeoo-text); font-size: 14px; text-decoration: none; }
.firmeoo-ticket-row-subject:hover { color: var(--firmeoo-accent); }

/* Correspondence thread - customer and tenant replies deliberately
   differentiated by colour, as asked, same idea as chat bubbles. */
.firmeoo-ticket-thread { display: flex; flex-direction: column; gap: 12px; max-height: 480px; overflow-y: auto; padding-right: 4px; }
.firmeoo-ticket-message { max-width: 80%; padding: 10px 14px; border-radius: 12px; font-size: 13px; }
.firmeoo-ticket-message.is-customer { align-self: flex-start; background: rgba(255,255,255,0.06); border: 1px solid var(--firmeoo-border); }
.firmeoo-ticket-message.is-tenant { align-self: flex-end; background: linear-gradient(120deg, var(--firmeoo-red), var(--firmeoo-purple)); color: #fff; }
.firmeoo-ticket-message-author { font-size: 11px; opacity: 0.75; margin-bottom: 3px; font-weight: 600; }
.firmeoo-ticket-message-body { line-height: 1.5; white-space: pre-wrap; }
.firmeoo-ticket-message-time { font-size: 10px; opacity: 0.6; margin-top: 4px; }

.firmeoo-ticket-rating-display { margin-top: 14px; font-size: 13px; color: var(--firmeoo-text-dim); }
.firmeoo-ticket-rating-stars { font-size: 22px; letter-spacing: 2px; cursor: pointer; }
.firmeoo-star { color: rgba(255,255,255,0.25); transition: color 0.1s ease; }
.firmeoo-star.is-filled { color: #ffc93c; }

/* ---- Contacts: employee checkbox, ID card, social links grid. ---- */
.firmeoo-checkbox-field {
    display: block; font-size: 13px; color: var(--firmeoo-text); margin: 4px 0 18px;
    padding: 10px 14px; background: rgba(255,255,255,0.03); border: 1px solid var(--firmeoo-border); border-radius: 8px;
}
.firmeoo-checkbox-field input { accent-color: var(--firmeoo-accent); margin-right: 6px; }

.firmeoo-contact-id-card {
    display: flex; gap: 16px; align-items: center;
    background: linear-gradient(135deg, rgba(123,47,247,0.12), rgba(233,30,140,0.08));
    border: 1px solid rgba(233,30,140,0.3); border-radius: 12px; padding: 18px; margin-bottom: 6px;
}
.firmeoo-contact-id-card-photo {
    width: 90px; height: 90px; border-radius: 8px; flex-shrink: 0; overflow: hidden;
    background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center;
    font-size: 32px; font-weight: 600; color: var(--firmeoo-text-dim); border: 1px solid rgba(255,255,255,0.15);
}
.firmeoo-contact-id-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.firmeoo-contact-id-card-details { flex: 1; min-width: 0; }
.firmeoo-contact-id-card-name { font-family: Georgia, serif; font-size: 17px; color: #fff; margin-bottom: 8px; letter-spacing: 0.02em; }
.firmeoo-contact-id-card-row {
    display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.1);
}
.firmeoo-contact-id-card-row:last-child { border-bottom: none; }
.firmeoo-contact-id-card-row span { color: var(--firmeoo-text-dim); text-transform: uppercase; letter-spacing: 0.03em; font-size: 10px; }
.firmeoo-contact-id-card-row strong { color: var(--firmeoo-text); font-weight: 500; }

.firmeoo-social-links-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 6px; }
.firmeoo-social-links-grid .firmeoo-form-field { margin-bottom: 0; }
@media (max-width: 900px) {
    .firmeoo-social-links-grid { grid-template-columns: 1fr; }
}

/* ---- Chat: Team badge for flagged employees. ---- */
.firmeoo-chat-team-badge {
    display: inline-block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em;
    background: rgba(123,47,247,0.25); color: #cbb1ff; padding: 1px 7px; border-radius: 999px; margin-left: 4px;
    vertical-align: middle;
}

/* ---- Contacts: Companies House import box. ---- */
.firmeoo-ch-import-box {
    background: rgba(255,255,255,0.03); border: 1px solid var(--firmeoo-border);
    border-radius: 10px; padding: 16px; margin-bottom: 18px;
}
.firmeoo-ch-import-box label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--firmeoo-text-dim); margin-bottom: 10px; }
.firmeoo-ch-results { margin-top: 10px; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.firmeoo-ch-result-row {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
    width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--firmeoo-border);
    border-radius: 6px; padding: 8px 12px; cursor: pointer; transition: border-color 0.15s ease;
}
.firmeoo-ch-result-row:hover { border-color: var(--firmeoo-accent); }
.firmeoo-ch-result-row strong { font-size: 13px; color: var(--firmeoo-text); font-weight: 500; }
.firmeoo-ch-result-row span { font-size: 11px; color: var(--firmeoo-text-dim); }

/* =========================================================================
   FIRMEOO PHOTO DROPZONE - reusable widget, established here. Wide,
   on-brand gradient, drag-drop-or-click, uploads instantly. Use this
   markup pattern (template-parts/photo-dropzone.php) anywhere a photo
   upload is needed - not something to rebuild per-feature.
   ========================================================================= */
.firmeoo-photo-dropzone {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 24px;
    border-radius: 14px;
    border: 1.5px dashed rgba(233, 30, 140, 0.4);
    background:
        linear-gradient(155deg,
            rgba(123, 47, 247, 0.30) 0%,
            rgba(233, 30, 140, 0.20) 45%,
            rgba(47, 107, 255, 0.22) 100%
        ),
        var(--firmeoo-bg);
    background-blend-mode: screen;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.firmeoo-photo-dropzone:hover { border-color: var(--firmeoo-accent); }
.firmeoo-photo-dropzone.is-dragover { border-color: var(--firmeoo-accent); box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.18); }
.firmeoo-photo-dropzone.is-uploading { cursor: progress; }

.firmeoo-photo-dropzone-preview {
    width: 64px; height: 64px; border-radius: 10px; flex-shrink: 0; overflow: hidden;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.firmeoo-photo-dropzone-preview img { width: 100%; height: 100%; object-fit: cover; }

.firmeoo-photo-dropzone-copy { display: flex; flex-direction: column; gap: 3px; }
.firmeoo-photo-dropzone-copy strong { font-size: 14px; color: #fff; font-weight: 500; }
.firmeoo-photo-dropzone-copy span { font-size: 12px; color: rgba(255,255,255,0.65); }

/* ---- Web > Domains module. ---- */
.firmeoo-domain-results { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.firmeoo-domain-result-row {
    display: flex; align-items: center; gap: 14px; padding: 12px 16px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--firmeoo-border); border-radius: 8px;
}
.firmeoo-domain-result-row strong { flex: 1; font-size: 14px; color: var(--firmeoo-text); font-weight: 500; }
.firmeoo-domain-result-status { font-size: 12px; white-space: nowrap; }
.firmeoo-domain-result-status.is-available { color: #7ee0a0; }
.firmeoo-domain-result-status.is-taken { color: var(--firmeoo-text-dim); }
.firmeoo-domain-result-status.is-error { color: #ff9db0; }

.firmeoo-domain-status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.firmeoo-domain-status-active { background: #4dbd82; }
.firmeoo-domain-status-pending { background: #b98bff; }
.firmeoo-domain-status-failed { background: #ff6b85; }

/* ---- Domains: nameserver choice, ID Protect/Lock toggles. ---- */
.firmeoo-nameserver-choice {
    margin: 8px 0 14px; padding: 16px; background: rgba(255,255,255,0.03);
    border: 1px solid var(--firmeoo-border); border-radius: 8px;
}
.firmeoo-radio-field { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--firmeoo-text); margin-right: 20px; }
.firmeoo-radio-field input { accent-color: var(--firmeoo-accent); }
.firmeoo-custom-ns-fields { display: flex; gap: 10px; margin-top: 10px; }
.firmeoo-ns-warning { color: #ffc93c; margin-top: 10px; }

.firmeoo-domain-toggles { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.firmeoo-toggle-field { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--firmeoo-text-dim); cursor: pointer; }
.firmeoo-toggle-field input { accent-color: var(--firmeoo-accent); }

/* ---- Reusable gradient panel - the same brand gradient established
   for .firmeoo-field and .firmeoo-photo-dropzone, applied to a whole
   panel rather than a single field. Add alongside .firmeoo-panel when
   a section should stand out with the established look, not just its
   inputs. ---- */
.firmeoo-panel--gradient {
    background:
        linear-gradient(155deg,
            rgba(123, 47, 247, 0.16) 0%,
            rgba(233, 30, 140, 0.10) 45%,
            rgba(47, 107, 255, 0.12) 100%
        ),
        rgba(255,255,255,0.03);
    background-blend-mode: screen;
    border-color: rgba(233, 30, 140, 0.25);
}

/* ---- Web > SSL Certificates. ---- */
.firmeoo-ssl-status-complete { background: #4dbd82; }
.firmeoo-ssl-status-pending { background: #b98bff; }
.firmeoo-ssl-status-cancelled { background: #ff6b85; }
.firmeoo-ssl-status-no_info { background: var(--firmeoo-text-dim); }

/* =========================================================================
   FIRMEOO INFO CARD GRID - reusable, established here. A responsive
   grid of small status cards (several per row), used for "your
   domains" and "your certificates" so far - reach for this pattern
   again anywhere else a list of owned things (with a status colour)
   would look better as cards than as rows.
   ========================================================================= */
.firmeoo-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.firmeoo-info-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--firmeoo-border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.firmeoo-info-card:hover { border-color: rgba(233, 30, 140, 0.4); transform: translateY(-2px); }

.firmeoo-info-card-status-bar { height: 4px; width: 100%; }

.firmeoo-info-card-body { padding: 16px; }
.firmeoo-info-card-icon { font-size: 22px; margin-bottom: 8px; }
.firmeoo-info-card-name {
    font-family: Georgia, serif; font-size: 15px; color: #fff;
    margin-bottom: 6px; word-break: break-all;
}
.firmeoo-info-card-meta { font-size: 12px; color: var(--firmeoo-text-dim); margin-bottom: 2px; }
.firmeoo-info-card-body .firmeoo-domain-toggles { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--firmeoo-border); }

@media (max-width: 640px) {
    .firmeoo-card-grid { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   FIRMEOO ICONS - the standard look for decorative header/UI icons
   (see inc/icons.php for the firmeoo_icon() helper that generates the
   inline SVGs this wraps). Small, single-colour, brand-accent - not a
   colourful emoji. Reach for firmeoo_icon() + this wrapper any time a
   new header or UI element wants an icon, rather than typing an emoji.
   ========================================================================= */
.firmeoo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--firmeoo-accent);
    vertical-align: -3px;
}
.firmeoo-icon-svg { display: block; }

/* Heading icons specifically: slightly larger, consistent gap before the text. */
.firmeoo-heading .firmeoo-icon { margin-right: 8px; vertical-align: -4px; }

/* =========================================================================
   FIRMEOO SWITCH - reusable on/off toggle ("suwak"), established here.
   A styled pill switch, not a plain checkbox - reach for this anywhere
   else a clear, nice-looking enable/disable control is needed.
   ========================================================================= */
.firmeoo-switch { position: relative; display: inline-block; cursor: pointer; flex-shrink: 0; }
.firmeoo-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.firmeoo-switch-track {
    display: block; width: 46px; height: 26px; border-radius: 999px;
    background: rgba(255,255,255,0.12); border: 1px solid var(--firmeoo-border);
    transition: background 0.2s ease; position: relative;
}
.firmeoo-switch-thumb {
    position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; transition: transform 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.firmeoo-switch input:checked + .firmeoo-switch-track {
    background: linear-gradient(120deg, var(--firmeoo-red), var(--firmeoo-purple));
    border-color: transparent;
}
.firmeoo-switch input:checked + .firmeoo-switch-track .firmeoo-switch-thumb { transform: translateX(20px); }
.firmeoo-switch input:disabled + .firmeoo-switch-track { opacity: 0.5; cursor: default; }

/* ---- Web > Widgets tabs and code blocks. ---- */
.firmeoo-widget-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--firmeoo-border); margin-bottom: 16px; }
.firmeoo-widget-tab {
    background: none; border: none; padding: 10px 16px; font-size: 13px; color: var(--firmeoo-text-dim);
    cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.firmeoo-widget-tab.is-active { color: var(--firmeoo-text); border-bottom-color: var(--firmeoo-accent); }
.firmeoo-widget-code {
    font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 12.5px; line-height: 1.6;
    resize: vertical; margin-bottom: 10px;
}

/* =========================================================================
   MAIL MODULE - tabs, split list/reading layout, and a "liquid glass"
   style compose window built entirely from Firmeoo's own established
   colours (the brand gradient, .firmeoo-field) rather than the
   blue/grey of the reference mockup this was inspired by.
   ========================================================================= */
.firmeoo-mail-tabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 18px 0 14px; }
.firmeoo-mail-tab {
    background: rgba(255,255,255,0.04); border: 1px solid var(--firmeoo-border); color: var(--firmeoo-text-dim);
    font-size: 13px; padding: 7px 14px; border-radius: 999px; cursor: pointer;
}
.firmeoo-mail-tab.is-active { background: linear-gradient(120deg, var(--firmeoo-red), var(--firmeoo-purple)); color: #fff; border-color: transparent; }
.firmeoo-mail-tabs-divider { width: 1px; height: 20px; background: var(--firmeoo-border); margin: 0 4px; }
.firmeoo-mail-new-group-btn { background: none; border: 1px dashed var(--firmeoo-border); }

.firmeoo-mail-label-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.firmeoo-mail-label-pill {
    background: transparent; border: 1px solid var(--label-color, var(--firmeoo-accent)); color: var(--label-color, var(--firmeoo-accent));
    font-size: 12px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
}
.firmeoo-mail-label-pill.is-active { background: var(--label-color, var(--firmeoo-accent)); color: #fff; }

.firmeoo-mail-split { display: grid; grid-template-columns: 1fr 2fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .firmeoo-mail-split { grid-template-columns: 1fr; } }

.firmeoo-mail-list-pane, .firmeoo-mail-reading-pane {
    background: rgba(255,255,255,0.03); border: 1px solid var(--firmeoo-border); border-radius: 12px;
    min-height: 420px; max-height: 640px; overflow-y: auto; overflow-x: hidden;
    /* A grid item won't shrink below the width of its widest
       unbreakable content (a long URL, a fixed-width HTML table in a
       received message) unless explicitly told it can - without this,
       one wide message pushes the whole two-column layout wider than
       the page. */
    min-width: 0;
}
.firmeoo-mail-list { display: flex; flex-direction: column; }
.firmeoo-mail-row {
    padding: 14px 16px; border-bottom: 1px solid var(--firmeoo-border); cursor: pointer;
    transition: background 0.15s ease;
}
.firmeoo-mail-row.has-label-tint { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.firmeoo-mail-row:hover { background: rgba(255,255,255,0.04); }
.firmeoo-mail-row.is-active { background: rgba(233,30,140,0.08); border-left: 3px solid var(--firmeoo-accent); }
.firmeoo-mail-row.is-unread .firmeoo-mail-row-from,
.firmeoo-mail-row.is-unread .firmeoo-mail-row-subject { font-weight: 600; color: #fff; }
.firmeoo-mail-row-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.firmeoo-mail-row-from { font-size: 13px; color: var(--firmeoo-text); }
.firmeoo-mail-row-count {
    display: inline-block; margin-left: 6px; font-size: 10px; background: var(--firmeoo-accent); color: #fff;
    padding: 1px 6px; border-radius: 999px; vertical-align: middle;
}
.firmeoo-mail-row-date { font-size: 11px; color: var(--firmeoo-text-dim); white-space: nowrap; }
.firmeoo-mail-row-star { background: none; border: none; color: #ffc93c; font-size: 15px; cursor: pointer; opacity: 0.5; margin-left: 6px; vertical-align: middle; }
.firmeoo-mail-row-star.is-active { opacity: 1; }
.firmeoo-mail-row-subject { font-size: 13px; color: var(--firmeoo-text-dim); margin-bottom: 3px; }
.firmeoo-mail-row-preview { font-size: 12px; color: var(--firmeoo-text-dim); opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.firmeoo-mail-row-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; opacity: 0; transition: opacity 0.15s ease; }
.firmeoo-mail-row:hover .firmeoo-mail-row-actions { opacity: 1; }
.firmeoo-mail-row-labels { display: flex; gap: 5px; }
.firmeoo-mail-label-dot {
    width: 14px; height: 14px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0;
}
.firmeoo-mail-label-dot.is-active { border-color: #fff; }
.firmeoo-mail-row-trash { background: none; border: none; cursor: pointer; font-size: 13px; opacity: 0.7; }
.firmeoo-mail-row-trash:hover { opacity: 1; }

/* Conversation thread bubbles - same colour-coded visual language as
   the Tickets thread view (customer vs tenant), inbox vs outbox here. */
.firmeoo-mail-thread { display: flex; flex-direction: column; gap: 12px; }
.firmeoo-mail-thread-item { max-width: 88%; padding: 12px 16px; border-radius: 12px; font-size: 13px; overflow-wrap: anywhere; }
.firmeoo-mail-thread-item.is-inbox { align-self: flex-start; background: rgba(255,255,255,0.06); border: 1px solid var(--firmeoo-border); }
.firmeoo-mail-thread-item.is-outbox { align-self: flex-end; background: linear-gradient(120deg, var(--firmeoo-red), var(--firmeoo-purple)); color: #fff; }
.firmeoo-mail-thread-item-header {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.12);
}
.firmeoo-mail-thread-item.is-outbox .firmeoo-mail-thread-item-header { border-bottom-color: rgba(255,255,255,0.25); }
.firmeoo-mail-thread-item-avatar {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; background: rgba(255,255,255,0.12);
}
.firmeoo-mail-thread-item.is-outbox .firmeoo-mail-thread-item-avatar { background: rgba(255,255,255,0.25); }
.firmeoo-mail-thread-item-header-text { min-width: 0; flex: 1; }
.firmeoo-mail-thread-item-top-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.firmeoo-mail-thread-item-from { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.firmeoo-mail-thread-item-date { flex-shrink: 0; font-size: 11px; opacity: 0.65; }
.firmeoo-mail-thread-item-body { line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.firmeoo-mail-thread-item-body.is-html-body { white-space: normal; }
.firmeoo-mail-thread-item-body.is-html-body img { max-width: 100%; height: auto; }

/* ---- Attachments - shared chip style for the compose picker and the
   read-only list shown under a received/sent message. ---- */
.firmeoo-mail-compose-attachments, .firmeoo-mail-thread-item-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.firmeoo-mail-attachment-chip {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 5px 10px; border-radius: 999px;
    background: rgba(255,255,255,0.08); border: 1px solid var(--firmeoo-border); color: var(--firmeoo-text); text-decoration: none;
}
.firmeoo-mail-thread-item.is-outbox .firmeoo-mail-attachment-chip { background: rgba(255,255,255,0.18); border-color: transparent; color: #fff; }
.firmeoo-mail-attachment-chip span { opacity: 0.7; }
.firmeoo-mail-attachment-remove { background: none; border: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.firmeoo-mail-attach-btn { display: inline-block; cursor: pointer; font-size: 12px; }
.firmeoo-mail-compose-send-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    /* .firmeoo-mail-compose-body (the direct parent) has 18px side
       padding and none on the bottom (see that rule above) - cancel
       the sides here so this reaches the compose card's own edges.
       Going further out to the reading pane's edges isn't needed (or
       even possible without extra hacks) since .firmeoo-mail-compose
       clips overflow to its own rounded corners - which conveniently
       also means this rectangular bar gets those rounded bottom
       corners for free from that clipping, without needing its own
       border-radius. */
    position: sticky; bottom: 0; left: -18px; right: -18px; z-index: 5;
    margin: 10px -18px 0;
    padding: 12px 18px; background: rgba(20,14,32,0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid var(--firmeoo-border);
}
.firmeoo-mail-schedule-toggle-btn { background: none; border: none; color: var(--firmeoo-text-dim); font-size: 12px; cursor: pointer; text-decoration: underline; }
.firmeoo-mail-compose-send-row .firmeoo-mail-compose-schedule { margin: 0; width: auto; }

/* ---- Full-width stats bar at the bottom of the mailbox. ---- */
.firmeoo-mail-stats {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; margin-top: 20px;
    background: var(--firmeoo-border); border: 1px solid var(--firmeoo-border); border-radius: 12px; overflow: hidden;
}
.firmeoo-mail-stat { background: rgba(255,255,255,0.03); padding: 16px 10px; text-align: center; }
.firmeoo-mail-stat-value { font-size: 22px; font-weight: 700; color: #fff; }
.firmeoo-mail-stat-label { font-size: 11px; color: var(--firmeoo-text-dim); margin-top: 4px; }
@media (max-width: 900px) { .firmeoo-mail-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 550px) { .firmeoo-mail-stats { grid-template-columns: repeat(2, 1fr); } }

.firmeoo-mail-reading { padding: 20px 20px 0 20px; }
.firmeoo-mail-body { font-size: 14px; line-height: 1.7; color: var(--firmeoo-text); white-space: pre-wrap; }

/* Compose window - subtle gradient title bar + tinted body, no border
   of its own since this always sits inside the already-framed reading
   pane (.firmeoo-mail-reading-pane) - a second border here would draw
   a box within a box. */
.firmeoo-mail-compose { border-radius: 10px; overflow: hidden; }
.firmeoo-mail-compose-titlebar {
    background: linear-gradient(120deg, var(--firmeoo-red), var(--firmeoo-purple));
    color: #fff; font-size: 13px; font-weight: 600; padding: 10px 16px;
}
.firmeoo-mail-compose-body {
    padding: 18px 18px 0 18px;
}
.firmeoo-mail-compose-body > .firmeoo-field { margin-bottom: 10px; }

.firmeoo-mail-editor-toolbar { display: flex; gap: 4px; margin-bottom: 8px; }
.firmeoo-mail-editor-toolbar button {
    background: rgba(255,255,255,0.06); border: 1px solid var(--firmeoo-border); color: var(--firmeoo-text);
    font-size: 12px; padding: 5px 10px; border-radius: 6px; cursor: pointer;
}
.firmeoo-mail-editor-toolbar button:hover { border-color: var(--firmeoo-accent); }
.firmeoo-mail-editor {
    min-height: 220px; max-height: 420px; overflow-y: auto; line-height: 1.6;
}
.firmeoo-mail-editor:focus { outline: none; }

.firmeoo-mail-reply-btn {
    background: rgba(30,20,45,0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    /* .firmeoo-mail-reading (the parent this renders inside) has its
       own side padding - cancelled here with a negative side margin so
       this reaches the pane's actual edges, not just the padded area.
       bottom:0 with the parent's own bottom padding removed (see
       .firmeoo-mail-reading above) means this now really does sit
       flush against the pane's bottom edge, with the 20px the parent
       used to reserve there moved into this element's own bottom
       padding instead - visually identical spacing, just measured
       from the right element. */
    position: sticky; bottom: 0; left: -20px; right: -20px; z-index: 5;
    margin: 16px -20px 0;
    padding: 12px 20px 20px; border-top: 1px solid var(--firmeoo-border); border-radius: 0;
}
.firmeoo-mail-reply-slot:not(:empty) { margin-top: 16px; }

.firmeoo-mail-signature-preview {
    margin-top: 14px; padding: 14px; background: #fff; border-radius: 10px; color: #333;
}

/* ---- Web > Widgets: card grid, one-third page width each. ---- */
.firmeoo-widgets-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
@media (max-width: 1100px) { .firmeoo-widgets-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .firmeoo-widgets-grid { grid-template-columns: 1fr; } }

.firmeoo-widget-card {
    background: rgba(255,255,255,0.03); border: 1px solid var(--firmeoo-border); border-radius: 12px;
    padding: 20px;
}
.firmeoo-widget-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.firmeoo-widget-card .firmeoo-widget-tabs { margin-top: 16px; }
.firmeoo-widget-card .firmeoo-widget-code { font-size: 11.5px; }

/* ---- Settings > Notifications: per-event channel checkboxes. ---- */
.firmeoo-notification-channels { display: flex; flex-direction: column; gap: 10px; }

/* ---- Social Media > Calendar. ---- */
.firmeoo-social-platform-status-row { display: flex; gap: 14px; flex-wrap: wrap; }
.firmeoo-social-platform-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--firmeoo-text-dim); }
.firmeoo-social-platform-status-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 6px currentColor; }
.firmeoo-social-platform-status.is-connected { color: var(--firmeoo-text); }
.firmeoo-social-platform-status.is-connected .firmeoo-social-platform-status-dot { background: #2ecc71; color: #2ecc71; }
.firmeoo-social-platform-status.is-disconnected .firmeoo-social-platform-status-dot { background: #e8123c; color: #e8123c; }

.firmeoo-social-cal-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; margin-top: 20px; }
@media (max-width: 900px) { .firmeoo-social-cal-split { grid-template-columns: 1fr; } }

.firmeoo-social-cal-month-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
    font-weight: 700; font-size: 15px;
    background: linear-gradient(90deg, var(--firmeoo-red), var(--firmeoo-purple), var(--firmeoo-blue));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.firmeoo-social-cal-month-header button { -webkit-text-fill-color: initial; }
.firmeoo-social-cal-weekdays {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: 11px; font-weight: 600;
    color: var(--firmeoo-accent); text-align: center; margin-bottom: 6px; letter-spacing: 0.03em;
}
.firmeoo-social-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.firmeoo-cal-day-cell {
    min-height: 64px; border-radius: 8px; padding: 6px; background: rgba(255,255,255,0.03);
    border: 1px solid transparent; cursor: pointer; display: flex; flex-direction: column; gap: 4px;
    transition: background 0.15s ease, border-color 0.15s ease; position: relative;
}
.firmeoo-cal-day-cell:hover { background: linear-gradient(155deg, rgba(123,47,247,0.14) 0%, rgba(233,30,140,0.10) 100%); }
.firmeoo-cal-day-cell.is-selected {
    border-color: var(--firmeoo-accent);
    background: linear-gradient(155deg, rgba(123,47,247,0.22) 0%, rgba(233,30,140,0.16) 45%, rgba(47,107,255,0.14) 100%);
}
.firmeoo-cal-day-cell.is-today { background: rgba(233,30,140,0.08); }
.firmeoo-cal-day-cell.is-today .firmeoo-cal-day-number {
    display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
    background: linear-gradient(120deg, var(--firmeoo-red), var(--firmeoo-purple)); color: #fff; font-weight: 700;
}
.firmeoo-cal-day-cell.is-other-month { opacity: 0.3; }
.firmeoo-cal-day-number { font-size: 12px; }
.firmeoo-cal-day-dots { display: flex; flex-wrap: wrap; gap: 3px; }

.firmeoo-platform-badge {
    display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
    color: #fff; font-weight: 700; flex-shrink: 0;
}
.firmeoo-platform-badge--dot { width: 9px; height: 9px; font-size: 0; }
.firmeoo-platform-badge--sm { width: 24px; height: 24px; font-size: 11px; }

.firmeoo-social-cal-day-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.firmeoo-social-cal-day-header span { font-weight: 600; }
.firmeoo-social-cal-day-list { display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow-y: auto; }
.firmeoo-cal-post-item {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 8px;
    background: rgba(255,255,255,0.04); cursor: pointer; border-left: 3px solid transparent;
}
.firmeoo-cal-post-item:hover { background: rgba(255,255,255,0.07); border-left-color: var(--firmeoo-accent); }
.firmeoo-cal-post-item-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.firmeoo-cal-post-item-body { flex: 1; min-width: 0; }
.firmeoo-cal-post-item-time { font-size: 11px; opacity: 0.6; }
.firmeoo-cal-post-item-content { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.firmeoo-cal-post-item-link { display: inline-block; margin-top: 4px; font-size: 11px; color: var(--firmeoo-blue); text-decoration: none; }
.firmeoo-cal-post-item-link:hover { text-decoration: underline; }
.firmeoo-cal-post-item-status { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; }
.firmeoo-cal-post-item-status.status-scheduled { background: rgba(47,107,255,0.18); color: #7fa8ff; }
.firmeoo-cal-post-item-status.status-published { background: rgba(30,180,110,0.18); color: #4fd694; }
.firmeoo-cal-post-item-status.status-error { background: rgba(232,18,60,0.18); color: #ff6b86; }

.firmeoo-cal-media-preview { display: none; margin-bottom: 8px; }
.firmeoo-cal-media-preview img { max-width: 100%; max-height: 160px; border-radius: 8px; display: block; }

/* ---- Generic modal (first use: the calendar's post editor). ---- */
.firmeoo-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 999998;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.firmeoo-modal-box {
    background: #171224; border: 1px solid var(--firmeoo-border); border-radius: 14px;
    padding: 22px; width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto;
}
.firmeoo-cal-modal-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }

/* ---- Social Media > Summary. ---- */
.firmeoo-social-stats-row { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .firmeoo-social-stats-row { grid-template-columns: repeat(2, 1fr); } }
.firmeoo-social-links-bar { display: flex; flex-wrap: wrap; gap: 10px; }
.firmeoo-social-link-icon {
    display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border-radius: 50%; color: #fff; font-weight: 700; font-size: 15px; text-decoration: none;
}

/* ---- Calendar post modal: two-column layout, character count, live
   preview card, validator messages. ---- */
.firmeoo-modal-box--wide { max-width: 760px; }
.firmeoo-cal-modal-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 640px) { .firmeoo-cal-modal-columns { grid-template-columns: 1fr; } }

.firmeoo-cal-char-count { font-size: 11px; opacity: 0.6; }
.firmeoo-cal-char-count.is-over-limit { opacity: 1; color: #ff6b86; font-weight: 600; }

.firmeoo-cal-preview-card {
    border-radius: 12px; overflow: hidden; background: #fff; color: #1c1c1c; margin-top: 6px;
}
.firmeoo-cal-preview-header {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    border-bottom: 3px solid var(--preview-color, var(--firmeoo-accent));
}
.firmeoo-cal-preview-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: var(--preview-color, var(--firmeoo-accent)); color: #fff; font-weight: 700;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.firmeoo-cal-preview-avatar img { width: 100%; height: 100%; object-fit: cover; }
.firmeoo-cal-preview-name { font-size: 13px; font-weight: 700; }
.firmeoo-cal-preview-platform { font-size: 11px; color: var(--preview-color, #888); font-weight: 600; }
.firmeoo-cal-preview-content { padding: 10px 12px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.firmeoo-cal-preview-content em { opacity: 0.5; }
.firmeoo-cal-preview-media img { width: 100%; max-height: 200px; object-fit: cover; display: block; }
.firmeoo-cal-preview-link {
    margin: 0 12px 12px; padding: 8px 10px; border-radius: 6px; background: #f2f2f2;
    font-size: 11px; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.firmeoo-cal-validation-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.firmeoo-cal-validation-item { font-size: 12px; padding: 6px 10px; border-radius: 6px; }
.firmeoo-cal-validation-item.is-error { background: rgba(232,18,60,0.14); color: #ff8fa3; }
.firmeoo-cal-validation-item.is-warning { background: rgba(255,193,7,0.14); color: #ffd166; }

/* ---- Office > Calendar: reminder markers (a plain warm dot/icon,
   distinct from the platform-coloured social media dots on the same
   day cell). ---- */
.firmeoo-reminder-dot { background: #ffc107 !important; }
.firmeoo-platform-badge--sm.firmeoo-reminder-dot { background: rgba(255,193,7,0.18) !important; font-size: 13px; }
.firmeoo-booking-dot { background: var(--firmeoo-blue) !important; }
.firmeoo-platform-badge--sm.firmeoo-booking-dot { background: rgba(47,107,255,0.18) !important; font-size: 13px; }

/* ---- Office > Calendar reminders (shown alongside social media
   dots on the same grid - a distinct look so the two are never
   confused at a glance). ---- */
.firmeoo-reminder-dot { background: #ffc93c !important; box-shadow: 0 0 6px rgba(255,201,60,0.6); }
.firmeoo-cal-post-item .firmeoo-reminder-dot.firmeoo-platform-badge--sm { background: rgba(255,201,60,0.18) !important; box-shadow: none; font-size: 13px; }

/* ---- Bookings (Things To Do > Bookings) configuration screen. ---- */
.firmeoo-booking-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.firmeoo-booking-list-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px; border-radius: 8px; background: rgba(255,255,255,0.04);
}
.firmeoo-booking-list-row > div { display: flex; flex-direction: column; gap: 2px; }
.firmeoo-booking-weekday-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.firmeoo-booking-weekday-row { display: flex; align-items: center; gap: 10px; }
.firmeoo-booking-weekday-row .firmeoo-field { width: auto; }

/* ---- Design > QR. ---- */
.firmeoo-qr-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; margin-top: 20px; }
@media (max-width: 900px) { .firmeoo-qr-split { grid-template-columns: 1fr; } }

.firmeoo-qr-preset-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

/* Colours stacked one under another, not side by side - each its own
   full-width row, easy to scan top to bottom. */
.firmeoo-qr-color-stack { display: flex; flex-direction: column; gap: 12px; }
.firmeoo-qr-color-field input[type="color"] { width: 100%; height: 40px; padding: 4px; cursor: pointer; }

.firmeoo-qr-preview-col { position: sticky; top: 20px; }
.firmeoo-qr-preview-sticky { text-align: center; }
.firmeoo-qr-preview-box {
    display: flex; align-items: center; justify-content: center; min-height: 260px;
    padding: 20px; border-radius: 10px; background: rgba(255,255,255,0.03); margin-top: 10px;
}
.firmeoo-qr-preview-box img { max-width: 100%; border-radius: 6px; }

.firmeoo-qr-stats-row { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .firmeoo-qr-stats-row { grid-template-columns: repeat(2, 1fr); } }

.firmeoo-qr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 10px; }
@media (max-width: 900px) { .firmeoo-qr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .firmeoo-qr-grid { grid-template-columns: 1fr; } }
.firmeoo-qr-grid-card {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
    padding: 16px; border-radius: 10px; background: rgba(255,255,255,0.04);
}
.firmeoo-qr-grid-thumb { width: 100px; height: 100px; border-radius: 8px; background: #fff; padding: 6px; margin-bottom: 6px; }
.firmeoo-qr-grid-label { font-size: 14px; }
.firmeoo-qr-grid-scans { font-size: 13px; margin-top: 4px; }
.firmeoo-qr-grid-identifier {
    font-size: 11px; color: var(--firmeoo-text-dim); max-width: 100%; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; margin-top: 2px;
}
.firmeoo-qr-grid-actions { display: flex; gap: 6px; margin-top: 10px; }


/* ---- QR sticker ordering panel. ---- */
.firmeoo-qr-sticker-topup-bubble {
    padding: 10px 12px; border-radius: 8px; background: rgba(255,193,7,0.14);
    color: #ffd166; font-size: 13px; margin-top: 6px;
}
.firmeoo-qr-sticker-topup-bubble a { color: #ffd166; text-decoration: underline; }

/* ---- QR sticker ordering panel: which code is being ordered. ---- */
.firmeoo-qr-sticker-selected-code {
    display: none; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
    background: rgba(255,255,255,0.04); margin-bottom: 14px;
}
.firmeoo-qr-sticker-selected-code img { width: 40px; height: 40px; border-radius: 6px; background: #fff; padding: 3px; flex-shrink: 0; }
.firmeoo-qr-sticker-selected-code span { font-size: 14px; font-weight: 600; }

/* ---- Office > Expenses. ---- */
.firmeoo-exp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; margin-top: 16px; }
@media (max-width: 900px) { .firmeoo-exp-split { grid-template-columns: 1fr; } }

.firmeoo-exp-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px;
    background: rgba(255,255,255,0.04); cursor: pointer; margin-bottom: 6px;
}
.firmeoo-exp-row:hover { background: rgba(255,255,255,0.07); }
.firmeoo-exp-row-thumb { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.firmeoo-exp-row-thumb--empty {
    display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); font-size: 18px;
}
.firmeoo-exp-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.firmeoo-exp-row-amount { font-weight: 700; font-size: 15px; flex-shrink: 0; }

.firmeoo-exp-stats-row { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .firmeoo-exp-stats-row { grid-template-columns: repeat(2, 1fr); } }
.firmeoo-exp-stat-projected .firmeoo-sms-stat-value { color: var(--firmeoo-accent); }

/* ---- Office Calendar: subtle expense marker (a small $ in the day
   cell's corner, distinct from the platform/reminder/booking dots
   row - deliberately understated, not another colourful dot). ---- */
.firmeoo-cal-expense-marker {
    position: absolute; top: 4px; right: 6px; font-size: 10px; font-weight: 700;
    color: #4fd694; opacity: 0.55;
}