/* ==========================================================================
   OneCloud Business — Premium SaaS UI
   Design system: navy sidebar, blue/teal accents, light workspace.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* OneCloud Business — Premium design system */
    --ocb-navy-900: #060E1C;
    --ocb-navy-800: #0A1628;
    --ocb-navy-700: #132337;
    --ocb-blue: #00758F;
    --ocb-blue-bright: #159AB8;
    --ocb-blue-deep: #00596D;
    --ocb-teal: #0B7185;
    --ocb-accent: #00758F;

    /* Surfaces — cool, quiet, premium */
    --ocb-bg: #F4F6F9;
    --ocb-card: #FFFFFF;
    --ocb-border: #E2E8F0;
    --ocb-surface-2: #EEF2F6;

    /* Text — high contrast, not heavy */
    --ocb-text: #0F172A;
    --ocb-muted: #64748B;

    /* Status — restrained */
    --ocb-danger: #B91C1C;
    --ocb-danger-soft: rgba(185, 28, 28, 0.08);
    --ocb-success: #047857;
    --ocb-success-soft: rgba(4, 120, 87, 0.09);
    --ocb-warning: #A16207;
    --ocb-warning-soft: rgba(161, 98, 7, 0.09);

    /* Derived */
    --ocb-blue-soft: rgba(0, 117, 143, 0.10);
    --ocb-blue-glow: rgba(0, 117, 143, 0.24);
    --ocb-teal-soft: rgba(11, 113, 133, 0.10);

    /* Metrics */
    --ocb-radius: 10px;
    --ocb-radius-sm: 7px;
    --ocb-radius-lg: 14px;
    --ocb-sidebar-w: 248px;
    --ocb-topbar-h: 64px;

    --ocb-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 4px 12px -4px rgba(15, 23, 42, 0.06);
    --ocb-shadow-lg: 0 16px 40px -12px rgba(15, 23, 42, 0.14);
    --ocb-shadow-primary: 0 6px 16px -4px var(--ocb-blue-glow);
}

* { box-sizing: border-box; }

.ocb-app, .ocb-app * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.ocb-app {
    font-weight: 400;
    letter-spacing: -0.011em;
    color: var(--ocb-text);
    font-size: 13px;
    line-height: 1.45;
}

html:has(body.ocb-app-page),
body.ocb-app-page {
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
    background: var(--ocb-bg);
}
body.ocb-no-admin-bar #wpadminbar { display: none; }
body.ocb-no-admin-bar html { margin-top: 0 !important; }

.ocb-app {
    display: flex;
    min-height: 100vh;
    background: var(--ocb-bg);
    color: var(--ocb-text);
}

a { text-decoration: none; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
.ocb-muted { color: var(--ocb-muted); }
.ocb-danger { color: var(--ocb-danger) !important; }
.ocb-success-text { color: var(--ocb-success) !important; }

/* ---------------------------------- Sidebar ---------------------------------- */
.ocb-sidebar {
    width: var(--ocb-sidebar-w);
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--ocb-navy-900) 0%, var(--ocb-navy-800) 100%);
    color: #EAF0FB;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 40;
    transition: transform 0.25s ease;
}

.ocb-sidebar-header {
    display: flex;
    align-items: center;
    padding: 24px 22px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 4px;
}

.ocb-logo { width: 100%; max-width: 208px; height: auto; object-fit: contain; border-radius: 10px; display: block; }

.ocb-brand {
    font-weight: 800;
    font-size: 16px;
    line-height: 1.2;
    color: #FFFFFF;
    letter-spacing: -0.01em;
}

.ocb-nav {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ocb-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--ocb-radius-sm);
    color: #9FB4BB;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.ocb-nav-item .ocb-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.9;
}

.ocb-nav-item .ocb-icon svg { width: 18px; height: 18px; stroke: currentColor; }

.ocb-nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #FFFFFF;
}

.ocb-sidebar-footer {
    padding: 8px 14px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---------------------------------- Main / Topbar ---------------------------------- */
.ocb-main {
    flex: 1;
    margin-left: var(--ocb-sidebar-w);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ocb-topbar {
    height: var(--ocb-topbar-h);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 28px;
    background: transparent;
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: none;
}

.ocb-menu-toggle {
    display: none;
    width: 38px; height: 38px;
    border-radius: var(--ocb-radius-sm);
    border: 1px solid var(--ocb-border);
    background: var(--ocb-card);
    color: var(--ocb-text);
    font-size: 16px;
    cursor: pointer;
}

.ocb-company-switcher select {
    height: 42px;
    border-radius: var(--ocb-radius-sm);
    border: 1px solid var(--ocb-border);
    background: var(--ocb-card);
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ocb-text);
    max-width: 220px;
    box-shadow: var(--ocb-shadow);
}

.ocb-search {
    flex: 1;
    max-width: 440px;
}

.ocb-search input {
    width: 100%;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--ocb-border);
    background: var(--ocb-card);
    padding: 0 18px 0 42px;
    font-size: 14px;
    color: var(--ocb-text);
    box-shadow: var(--ocb-shadow);
}

.ocb-search input:focus { outline: none; border-color: var(--ocb-blue); box-shadow: 0 0 0 4px var(--ocb-blue-soft); }

.ocb-search { position: relative; }
.ocb-search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    background: var(--ocb-card);
    border: 1px solid var(--ocb-border);
    border-radius: var(--ocb-radius-sm);
    box-shadow: var(--ocb-shadow-lg);
    padding: 6px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 50;
}
.ocb-search-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--ocb-text);
}
.ocb-search-item strong { font-weight: 600; }
.ocb-search-item .ocb-muted { font-size: 12px; text-transform: capitalize; }
.ocb-search-item:hover { background: var(--ocb-bg); }

.ocb-topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 18px;
}

.ocb-user-menu {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ocb-user-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--ocb-blue-soft);
    color: var(--ocb-blue);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.ocb-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ocb-text);
}

/* ---------------------------------- Content ---------------------------------- */
.ocb-content {
    padding: 8px 32px 40px;
}

.ocb-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 18px 0 22px;
    flex-wrap: wrap;
}

.ocb-page-header h1 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ocb-text);
    margin: 0;
}

.ocb-page-eyebrow {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.07em;
    font-weight: 500;
    color: var(--ocb-muted);
    margin: 0 0 4px;
    display: block;
}

/* ---------------------------------- Stat / KPI cards ---------------------------------- */
.ocb-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}

.ocb-stat-card {
    background: var(--ocb-card);
    border: 1px solid var(--ocb-border);
    border-radius: var(--ocb-radius);
    padding: 18px 20px;
    box-shadow: var(--ocb-shadow);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ocb-stat-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ocb-stat-icon {
    width: 38px; height: 38px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ocb-stat-icon svg { width: 18px; height: 18px; }

.ocb-stat-icon.is-blue { background: var(--ocb-blue-soft); color: var(--ocb-blue); }
.ocb-stat-icon.is-teal { background: var(--ocb-teal-soft); color: var(--ocb-teal); }
.ocb-stat-icon.is-danger { background: var(--ocb-danger-soft); color: var(--ocb-danger); }
.ocb-stat-icon.is-success { background: var(--ocb-success-soft); color: var(--ocb-success); }
.ocb-stat-icon.is-warning { background: var(--ocb-warning-soft); color: var(--ocb-warning); }

.ocb-stat-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ocb-muted);
}

.ocb-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--ocb-text);
    letter-spacing: -0.01em;
}

.ocb-stat-trend {
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ocb-stat-trend.up { color: var(--ocb-success); }
.ocb-stat-trend.down { color: var(--ocb-danger); }

/* ---------------------------------- Cards / layout ---------------------------------- */
.ocb-card {
    background: var(--ocb-card);
    border: 1px solid var(--ocb-border);
    border-radius: var(--ocb-radius);
    padding: 22px;
    box-shadow: var(--ocb-shadow);
    margin-bottom: 20px;
}

.ocb-card > h3 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--ocb-text);
}

.ocb-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.ocb-card-header h3 { margin-bottom: 0; }
.ocb-card-link { font-size: 13px; font-weight: 600; color: var(--ocb-blue); }
.ocb-card-link:hover { text-decoration: underline; }

.ocb-chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.ocb-chart-grid .ocb-card-wide { grid-column: 1 / -1; }

.ocb-two-col {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 20px;
    align-items: start;
}

.ocb-chart-wrap { position: relative; height: 280px; }
.ocb-chart-sm { height: 220px; }

/* ---------------------------------- Buttons ---------------------------------- */
.ocb-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border-radius: var(--ocb-radius-sm);
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.ocb-btn-primary {
    background: var(--ocb-blue);
    color: #fff;
    box-shadow: var(--ocb-shadow-primary);
}
.ocb-btn-primary:hover { background: var(--ocb-blue-bright); }

.ocb-btn-secondary {
    background: var(--ocb-card);
    color: var(--ocb-text);
    border-color: var(--ocb-border);
}
.ocb-btn-secondary:hover { border-color: var(--ocb-blue); color: var(--ocb-blue); }

.ocb-btn-danger {
    background: #fff;
    color: var(--ocb-danger);
    border-color: rgba(220, 38, 38, 0.25);
}
.ocb-btn-danger:hover { background: var(--ocb-danger-soft); }

.ocb-btn-sm { height: 34px; padding: 0 13px; font-size: 13px; }
.ocb-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------------------------------- Forms ---------------------------------- */
.ocb-input, .ocb-select, textarea.ocb-input, select.ocb-input {
    width: 100%;
    height: 42px;
    border-radius: var(--ocb-radius-sm);
    border: 1px solid var(--ocb-border);
    background: var(--ocb-card);
    padding: 0 14px;
    font-size: 14px;
    color: var(--ocb-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea.ocb-input { height: auto; padding: 10px 14px; min-height: 90px; resize: vertical; }

.ocb-input:focus, .ocb-select:focus {
    outline: none;
    border-color: var(--ocb-blue);
    box-shadow: 0 0 0 4px var(--ocb-blue-soft);
}

.ocb-input.ocb-invalid { border-color: var(--ocb-danger); box-shadow: 0 0 0 4px var(--ocb-danger-soft); }

.ocb-field { margin-bottom: 16px; }
.ocb-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ocb-text);
    margin-bottom: 6px;
}
.ocb-field-error { color: var(--ocb-danger); font-size: 12px; margin-top: 5px; }
.ocb-field-hint { color: var(--ocb-muted); font-size: 12px; margin-top: 5px; }

.ocb-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}
.ocb-form-grid .ocb-full { grid-column: 1 / -1; }

.ocb-checkbox, .ocb-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--ocb-text);
}
.ocb-checkbox input, .ocb-radio input { width: 16px; height: 16px; accent-color: var(--ocb-blue); }

/* ---------------------------------- Tables ---------------------------------- */
.ocb-table-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.ocb-table-toolbar .ocb-input { max-width: 280px; }

.ocb-table-wrap { overflow-x: auto; }

.ocb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.ocb-table thead th {
    text-align: left;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ocb-muted);
    font-weight: 700;
    padding: 0 14px 12px;
    border-bottom: 1px solid var(--ocb-border);
    white-space: nowrap;
}

.ocb-table tbody td {
    padding: 14px;
    border-bottom: 1px solid var(--ocb-border);
    color: var(--ocb-text);
    vertical-align: middle;
}

.ocb-table tbody tr:last-child td { border-bottom: none; }
.ocb-table tbody tr:hover { background: var(--ocb-bg); }

.ocb-table .ocb-cell-muted { color: var(--ocb-muted); }
.ocb-table .ocb-cell-actions { text-align: right; white-space: nowrap; }

/* Badges */
.ocb-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.ocb-badge-success { background: var(--ocb-success-soft); color: var(--ocb-success); }
.ocb-badge-info { background: var(--ocb-blue-soft); color: var(--ocb-blue); }
.ocb-badge-warning { background: var(--ocb-warning-soft); color: var(--ocb-warning); }
.ocb-badge-danger { background: var(--ocb-danger-soft); color: var(--ocb-danger); }
.ocb-badge-muted { background: var(--ocb-bg); color: var(--ocb-muted); border: 1px solid var(--ocb-border); }

/* Row entity (avatar + name) */
.ocb-entity { display: flex; align-items: center; gap: 10px; }
.ocb-entity-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--ocb-blue-soft); color: var(--ocb-blue);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px; flex-shrink: 0;
}
.ocb-entity-name { font-weight: 600; }

/* ---------------------------------- Tabs ---------------------------------- */
.ocb-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--ocb-border);
}
.ocb-tab {
    background: none;
    border: none;
    padding: 10px 4px;
    margin-right: 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ocb-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.ocb-tab:hover { color: var(--ocb-text); }
.ocb-tab.active { color: var(--ocb-blue); border-bottom-color: var(--ocb-blue); }

/* Pill tabs (segmented) */
.ocb-seg-tabs { display: inline-flex; background: var(--ocb-bg); border: 1px solid var(--ocb-border); border-radius: 999px; padding: 3px; gap: 2px; }
.ocb-seg-tab { border: none; background: none; padding: 7px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ocb-muted); cursor: pointer; }
.ocb-seg-tab.active { background: var(--ocb-blue); color: #fff; }

/* ---------------------------------- Modals ----------------------------------
   Markup: #ocb-modal (fixed, hidden until .open) > .ocb-modal-backdrop
   + .ocb-modal-dialog > .ocb-modal-header / .ocb-modal-body / .ocb-modal-footer
   JS toggles the "open" class on #ocb-modal — structure preserved as-is. */
#ocb-modal {
    display: none;
    position: fixed; inset: 0;
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
#ocb-modal.open { display: flex; }

.ocb-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(7, 21, 43, 0.55);
    backdrop-filter: blur(2px);
}

.ocb-modal-dialog {
    position: relative;
    background: var(--ocb-card);
    border-radius: var(--ocb-radius-lg);
    box-shadow: var(--ocb-shadow-lg);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ocb-modal-dialog.ocb-modal-lg { max-width: 820px; }

.ocb-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--ocb-border);
}
.ocb-modal-header h2, .ocb-modal-header h3 { font-size: 16px; }

.ocb-modal-close {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--ocb-bg);
    color: var(--ocb-muted);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
}
.ocb-modal-close:hover { background: var(--ocb-border); color: var(--ocb-text); }

.ocb-modal-body { padding: 22px 24px; overflow-y: auto; }
.ocb-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--ocb-border);
}

/* ---------------------------------- Alerts / toasts ---------------------------------- */
#ocb-toast-container {
    position: fixed;
    top: 20px; right: 20px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ocb-toast {
    background: var(--ocb-navy-900);
    color: #fff;
    padding: 13px 18px;
    border-radius: var(--ocb-radius-sm);
    box-shadow: var(--ocb-shadow-lg);
    font-size: 13.5px;
    font-weight: 500;
    max-width: 340px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.ocb-toast.show { opacity: 1; transform: translateY(0); }
.ocb-toast-error { background: var(--ocb-danger); }
.ocb-toast-success { background: var(--ocb-success); }

.ocb-alert {
    padding: 13px 16px;
    border-radius: var(--ocb-radius-sm);
    font-size: 13.5px;
    margin-bottom: 16px;
    border: 1px solid transparent;
}
.ocb-alert-info { background: var(--ocb-blue-soft); color: var(--ocb-navy-800); border-color: rgba(0,117,143,0.18); }
.ocb-alert-danger { background: var(--ocb-danger-soft); color: #7f1d1d; border-color: rgba(220,38,38,0.2); }
.ocb-alert-success { background: var(--ocb-success-soft); color: #065f46; border-color: rgba(15,157,107,0.2); }

/* ---------------------------------- Empty / loading states ---------------------------------- */
.ocb-empty-state {
    text-align: center;
    padding: 70px 24px;
    max-width: 420px;
    margin: 40px auto;
}
.ocb-empty-state h2 { font-size: 20px; margin-bottom: 8px; }
.ocb-empty-state p { color: var(--ocb-muted); margin-bottom: 20px; }

.ocb-table-empty { text-align: center; padding: 32px !important; color: var(--ocb-muted); }

.ocb-loading {
    display: flex; align-items: center; gap: 10px;
    color: var(--ocb-muted);
    font-size: 13.5px;
    padding: 20px 0;
}
.ocb-spinner {
    width: 16px; height: 16px;
    border: 2px solid var(--ocb-border);
    border-top-color: var(--ocb-blue);
    border-radius: 50%;
    display: inline-block;
    animation: ocb-spin 0.7s linear infinite;
}
@keyframes ocb-spin { to { transform: rotate(360deg); } }

/* ---------------------------------- Scrollbars ---------------------------------- */
.ocb-nav::-webkit-scrollbar, .ocb-modal-body::-webkit-scrollbar { width: 6px; }
.ocb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.ocb-modal-body::-webkit-scrollbar-thumb { background: var(--ocb-border); border-radius: 4px; }

/* ---------------------------------- Responsive ---------------------------------- */
.ocb-sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(7,21,43,0.5);
    z-index: 39;
}

@media (max-width: 1100px) {
    .ocb-chart-grid, .ocb-two-col { grid-template-columns: 1fr; }
    .ocb-form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .ocb-sidebar { transform: translateX(-100%); box-shadow: var(--ocb-shadow-lg); }
    .ocb-sidebar.open { transform: translateX(0); }
    .ocb-sidebar.open ~ .ocb-sidebar-overlay,
    body.ocb-sidebar-open .ocb-sidebar-overlay { display: block; }
    .ocb-main { margin-left: 0; }
    .ocb-menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .ocb-content { padding: 8px 16px 32px; }
    .ocb-topbar { padding: 0 16px; gap: 10px; }
    .ocb-company-switcher select { max-width: 140px; }
    .ocb-search { max-width: none; }
}

@media (max-width: 560px) {
    .ocb-stats-grid { grid-template-columns: 1fr 1fr; }
    .ocb-user-name { display: none; }
    .ocb-page-header { align-items: flex-start; }
}

/* ==========================================================================
   Premium Dashboard — matching high-end pro UI
   ========================================================================== */

/* ---- Sidebar upgrade card ---- */
.ocb-upgrade-card {
    margin: 12px 16px 8px;
    padding: 16px;
    background: linear-gradient(145deg, rgba(0,163,196,0.20), rgba(0,117,143,0.08));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    text-align: left;
}
.ocb-upgrade-icon {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,163,196,0.25);
    border-radius: 10px;
    color: #7DE3F5;
    margin-bottom: 10px;
}
.ocb-upgrade-icon svg { width: 18px; height: 18px; stroke: currentColor; }
.ocb-upgrade-title { font-weight: 700; font-size: 14px; color: #fff; margin-bottom: 4px; }
.ocb-upgrade-desc { font-size: 12px; color: rgba(234,240,251,0.7); line-height: 1.4; margin-bottom: 12px; }
.ocb-upgrade-card .ocb-btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 8px; width: 100%; }

/* ---- Topbar refinements ---- */
.ocb-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 28px;
    background: transparent;
    border-bottom: none;
}
.ocb-search {
    flex: 1;
    max-width: 420px;
    position: relative;
    display: flex;
    align-items: center;
}
.ocb-search-icon {
    position: absolute;
    left: 14px;
    width: 18px; height: 18px;
    color: var(--ocb-muted);
    pointer-events: none;
}
.ocb-search-icon svg { width: 18px; height: 18px; stroke: currentColor; }
.ocb-search input {
    width: 100%;
    height: 44px;
    padding: 0 16px 0 42px;
    border: 1px solid var(--ocb-border);
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    color: var(--ocb-text);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.ocb-search input:focus {
    border-color: var(--ocb-blue);
    box-shadow: 0 0 0 3px var(--ocb-blue-soft);
}
.ocb-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.ocb-icon-btn {
    position: relative;
    width: 42px; height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #fff;
    border-radius: 12px;
    color: var(--ocb-muted);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.ocb-icon-btn:hover { background: var(--ocb-blue-soft); color: var(--ocb-blue); }
.ocb-icon-btn svg { width: 20px; height: 20px; stroke: currentColor; }
.ocb-icon-btn.sm { width: 32px; height: 32px; border-radius: 8px; background: transparent; }
.ocb-icon-btn.sm svg { width: 16px; height: 16px; }
.ocb-badge-dot {
    position: absolute;
    top: 6px; right: 6px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    background: #EF4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
}
.ocb-user-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 6px;
    background: #fff;
    border-radius: 999px;
    border: 1px solid var(--ocb-border);
    cursor: pointer;
}
.ocb-user-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00758F, #0B7185);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
}
.ocb-user-meta { display: flex; flex-direction: column; line-height: 1.2; }
.ocb-user-name { font-weight: 600; font-size: 13.5px; color: var(--ocb-text); }
.ocb-user-role { font-size: 11.5px; color: var(--ocb-muted); }
.ocb-user-chevron { color: var(--ocb-muted); width: 16px; height: 16px; }
.ocb-user-chevron svg { width: 16px; height: 16px; stroke: currentColor; }

/* ---- Dashboard header ---- */
.ocb-dash-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.ocb-page-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ocb-muted);
    margin-bottom: 6px;
}
.ocb-dash-welcome h1 {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ocb-text);
    margin-bottom: 6px;
}
.ocb-wave { font-size: 24px; }
.ocb-dash-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ocb-date-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--ocb-border);
    border-radius: 14px;
    box-shadow: var(--ocb-shadow);
}
.ocb-date-icon {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ocb-blue-soft);
    color: var(--ocb-blue);
    border-radius: 10px;
}
.ocb-date-icon svg { width: 20px; height: 20px; stroke: currentColor; }
.ocb-date-main { font-weight: 600; font-size: 13.5px; color: var(--ocb-text); }
.ocb-date-sub { font-size: 12px; color: var(--ocb-muted); }
.ocb-period-select select {
    height: 42px;
    padding: 0 36px 0 14px;
    border: 1px solid var(--ocb-border);
    border-radius: 12px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7A90' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
    appearance: none;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ocb-text);
    cursor: pointer;
}

/* ---- KPI cards ---- */
.ocb-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.ocb-kpi-card {
    background: #fff;
    border: 1px solid var(--ocb-border);
    border-radius: 16px;
    padding: 18px 18px 14px;
    box-shadow: var(--ocb-shadow);
    transition: box-shadow .2s, transform .2s;
}
.ocb-kpi-card:hover {
    box-shadow: var(--ocb-shadow-lg);
    transform: translateY(-2px);
}
.ocb-kpi-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.ocb-kpi-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
}
.ocb-kpi-icon svg { width: 18px; height: 18px; stroke: currentColor; }
.ocb-kpi-icon.is-blue { background: rgba(0,117,143,0.1); color: #00758F; }
.ocb-kpi-icon.is-teal { background: rgba(15,163,163,0.12); color: #0B7185; }
.ocb-kpi-icon.is-rose { background: rgba(225,29,72,0.1); color: #E11D48; }
.ocb-kpi-icon.is-indigo { background: rgba(99,102,241,0.12); color: #6366F1; }
.ocb-kpi-icon.is-amber { background: rgba(217,119,6,0.12); color: #D97706; }
.ocb-kpi-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ocb-muted);
}
.ocb-kpi-value {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ocb-text);
    margin-bottom: 10px;
    line-height: 1.2;
}
.ocb-kpi-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ocb-kpi-trend {
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.ocb-kpi-trend.up { color: #0F9D6B; }
.ocb-kpi-trend.down { color: #E11D48; }
.ocb-kpi-spark {
    width: 64px;
    height: 24px;
    flex-shrink: 0;
    opacity: 0.9;
}

/* ---- Revenue card ---- */
.ocb-revenue-card {
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}
.ocb-revenue-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 8px;
}
.ocb-revenue-header h3 { margin-bottom: 8px; }
.ocb-legend {
    display: flex;
    gap: 16px;
}
.ocb-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ocb-muted);
}
.ocb-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.ocb-dot.is-2026 { background: #00758F; }
.ocb-dot.is-2025 { background: #0B7185; }
.ocb-revenue-chart { height: 300px; }

/* ---- Bottom grid: transactions + breakdown ---- */
.ocb-dash-bottom {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 20px;
    align-items: start;
}
.ocb-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.ocb-card-header h3 { font-size: 16px; font-weight: 700; }
.ocb-link-view {
    font-size: 13px;
    font-weight: 600;
    color: var(--ocb-blue);
}
.ocb-link-view:hover { text-decoration: underline; }

/* Transactions table */
.ocb-tx-table { width: 100%; border-collapse: collapse; }
.ocb-tx-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--ocb-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 12px 12px;
    border-bottom: 1px solid var(--ocb-border);
}
.ocb-tx-table td {
    padding: 14px 12px;
    font-size: 13.5px;
    border-bottom: 1px solid var(--ocb-border);
    vertical-align: middle;
}
.ocb-tx-table tr:last-child td { border-bottom: none; }
.ocb-tx-type {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--ocb-text);
}
.ocb-tx-type svg { width: 16px; height: 16px; stroke: currentColor; flex-shrink: 0; }
.ocb-tx-type.is-salary { color: #0F9D6B; }
.ocb-tx-type.is-client { color: #00758F; }
.ocb-tx-type.is-invest { color: #6366F1; }
.ocb-tx-type.is-marketing { color: #E11D48; }
.ocb-person {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ocb-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #6B7A90;
}
.ocb-amount-negative { color: #E11D48; }
.ocb-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.ocb-status.is-completed {
    background: rgba(15,157,107,0.12);
    color: #0F9D6B;
}
.ocb-status.is-progress {
    background: rgba(0,117,143,0.12);
    color: #00758F;
}
.ocb-cell-muted { color: var(--ocb-muted); font-size: 13px; }

/* Financial breakdown */
.ocb-breakdown-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    background: var(--ocb-bg);
    padding: 4px;
    border-radius: 10px;
}
.ocb-tab {
    flex: 1;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ocb-muted);
    cursor: pointer;
    transition: all .15s;
}
.ocb-tab.active {
    background: var(--ocb-blue);
    color: #fff;
    box-shadow: var(--ocb-shadow-primary);
}
.ocb-breakdown-list { display: flex; flex-direction: column; gap: 18px; }
.ocb-breakdown-row {
    display: grid;
    grid-template-columns: 110px 1fr 40px 90px;
    align-items: center;
    gap: 12px;
}
.ocb-bd-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ocb-bd-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}
.ocb-bd-icon svg { width: 14px; height: 14px; stroke: currentColor; }
.ocb-bd-icon.is-products { background: rgba(0,117,143,0.12); color: #00758F; }
.ocb-bd-icon.is-services { background: rgba(99,102,241,0.12); color: #6366F1; }
.ocb-bd-icon.is-stocks { background: rgba(245,158,11,0.12); color: #F59E0B; }
.ocb-bd-icon.is-subs { background: rgba(236,72,153,0.12); color: #EC4899; }
.ocb-bd-label { font-size: 13px; font-weight: 500; color: var(--ocb-text); }
.ocb-bd-bar-wrap {
    height: 8px;
    background: var(--ocb-bg);
    border-radius: 999px;
    overflow: hidden;
}
.ocb-bd-bar {
    height: 100%;
    border-radius: 999px;
    background: #00758F;
}
.ocb-bd-bar.is-services { background: #6366F1; }
.ocb-bd-bar.is-stocks { background: #F59E0B; }
.ocb-bd-bar.is-subs { background: #EC4899; }
.ocb-bd-pct { font-size: 13px; font-weight: 600; color: var(--ocb-muted); text-align: right; }
.ocb-bd-total { font-size: 13px; font-weight: 600; color: var(--ocb-text); text-align: right; }

/* Content area soft background illustration feel */
.ocb-content {
    background:
        radial-gradient(ellipse 80% 50% at 70% -10%, rgba(0,117,143,0.07), transparent 60%),
        radial-gradient(ellipse 60% 40% at 90% 20%, rgba(15,163,163,0.05), transparent 50%),
        var(--ocb-bg);
    padding: 12px 28px 40px;
}

/* Nav active state polish */
.ocb-nav-item.active {
    background: linear-gradient(90deg, rgba(0,117,143,0.95), rgba(0,163,196,0.85));
    color: #fff;
    box-shadow: 0 8px 20px -6px rgba(0,117,143,0.5);
}
.ocb-nav-item.active .ocb-icon { color: #fff; }

/* Responsive for KPI & bottom */
@media (max-width: 1400px) {
    .ocb-kpi-grid { grid-template-columns: repeat(3, 1fr); }
    .ocb-dash-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .ocb-kpi-grid { grid-template-columns: 1fr 1fr; }
    .ocb-dash-header { flex-direction: column; }
    .ocb-breakdown-row { grid-template-columns: 100px 1fr 36px 80px; gap: 8px; }
}
@media (max-width: 560px) {
    .ocb-kpi-grid { grid-template-columns: 1fr; }
    .ocb-user-meta { display: none; }
}

/* ==========================================================================
   Invoice Module — Premium workspace
   ========================================================================== */

/* Page toolbar */
.ocb-inv-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}
.ocb-inv-toolbar .ocb-search {
    flex: 1 1 240px;
    max-width: 320px;
    position: relative;
}
.ocb-inv-toolbar .ocb-search input {
    width: 100%;
    padding-left: 36px;
}
.ocb-inv-toolbar .ocb-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ocb-muted);
    pointer-events: none;
    display: flex;
    width: 16px;
    height: 16px;
}
.ocb-inv-toolbar select.ocb-input {
    max-width: 160px;
}

/* Financial table refinements */
.ocb-table .ocb-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    white-space: nowrap;
}
.ocb-table tbody tr.ocb-row-clickable { cursor: pointer; }
.ocb-table tbody tr.ocb-row-clickable:hover { background: var(--ocb-blue-soft); }
.ocb-table .ocb-inv-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}
.ocb-table tbody tr:hover .ocb-inv-actions { opacity: 1; }
.ocb-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--ocb-radius-sm);
    color: var(--ocb-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.ocb-icon-btn:hover {
    background: var(--ocb-surface-2);
    color: var(--ocb-text);
}
.ocb-icon-btn:focus-visible {
    outline: 2px solid var(--ocb-blue);
    outline-offset: 1px;
}
.ocb-icon-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* Status badges — refined */
.ocb-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: capitalize;
    line-height: 1.4;
}
.ocb-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}

/* Invoice detail view */
.ocb-inv-detail {
    display: none;
}
.ocb-inv-detail.is-open { display: block; }
.ocb-inv-list.is-hidden { display: none; }

.ocb-inv-detail-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.ocb-inv-detail-header .ocb-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ocb-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    margin-bottom: 8px;
    transition: color 0.15s ease;
}
.ocb-inv-detail-header .ocb-back:hover { color: var(--ocb-blue); }
.ocb-inv-detail-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.ocb-inv-detail-title h1 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ocb-text);
}
.ocb-inv-actions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Document card — the invoice itself */
.ocb-inv-document {
    background: var(--ocb-card);
    border: 1px solid var(--ocb-border);
    border-radius: var(--ocb-radius);
    box-shadow: var(--ocb-shadow);
    padding: 32px 36px;
    max-width: 860px;
}
.ocb-inv-doc-top {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ocb-border);
}
.ocb-inv-doc-brand .name {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ocb-text);
}
.ocb-inv-doc-brand .meta {
    font-size: 12px;
    color: var(--ocb-muted);
    line-height: 1.5;
    margin-top: 6px;
}
.ocb-inv-doc-meta {
    text-align: right;
}
.ocb-inv-doc-meta .label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ocb-muted);
    font-weight: 500;
}
.ocb-inv-doc-meta .value {
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ocb-text);
    margin-bottom: 8px;
}
.ocb-inv-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 28px;
}
.ocb-inv-party .label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ocb-muted);
    font-weight: 600;
    margin-bottom: 4px;
}
.ocb-inv-party .name { font-weight: 500; font-size: 14px; letter-spacing: -0.01em; }
.ocb-inv-party .detail { font-size: 12px; color: var(--ocb-muted); line-height: 1.45; }

.ocb-inv-lines {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    font-size: 13px;
}
.ocb-inv-lines th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ocb-muted);
    font-weight: 500;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ocb-border);
    background: var(--ocb-surface-2);
}
.ocb-inv-lines th.num, .ocb-inv-lines td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.ocb-inv-lines td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--ocb-border);
    vertical-align: top;
}
.ocb-inv-lines tbody tr:last-child td { border-bottom: none; }

.ocb-inv-totals {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 24px;
}
.ocb-inv-totals-box {
    width: 280px;
}
.ocb-inv-total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    color: var(--ocb-muted);
}
.ocb-inv-total-row span:last-child {
    font-variant-numeric: tabular-nums;
    color: var(--ocb-text);
    font-weight: 500;
}
.ocb-inv-total-row.is-grand {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1.5px solid var(--ocb-text);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ocb-text);
}
.ocb-inv-total-row.is-grand span { color: var(--ocb-text); font-weight: 600; }
.ocb-inv-total-row.is-outstanding span:last-child { color: var(--ocb-danger); }
.ocb-inv-total-row.is-paid span:last-child { color: var(--ocb-success); }

.ocb-inv-notes {
    font-size: 12px;
    color: var(--ocb-muted);
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ocb-border);
}
.ocb-inv-notes .label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--ocb-muted);
}

/* Line editor in create/edit modal */
.ocb-line-editor {
    border: 1px solid var(--ocb-border);
    border-radius: var(--ocb-radius-sm);
    overflow: hidden;
}
.ocb-line-editor-head {
    display: grid;
    grid-template-columns: 1fr 80px 100px 36px;
    gap: 8px;
    padding: 8px 12px;
    background: var(--ocb-surface-2);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ocb-muted);
}
.ocb-line-row {
    display: grid;
    grid-template-columns: 1fr 80px 100px 36px;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid var(--ocb-border);
    align-items: center;
}
.ocb-line-row .ocb-input { margin: 0; }
.ocb-line-total-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 12px 0 0;
    font-size: 14px;
    font-weight: 600;
}

/* Dropdown menu for overflow actions */
.ocb-dropdown {
    position: relative;
    display: inline-flex;
}
.ocb-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 160px;
    background: var(--ocb-card);
    border: 1px solid var(--ocb-border);
    border-radius: var(--ocb-radius-sm);
    box-shadow: var(--ocb-shadow-lg);
    z-index: 50;
    padding: 6px;
}
.ocb-dropdown.is-open .ocb-dropdown-menu { display: block; }
.ocb-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: 6px;
    font-size: 13px;
    color: var(--ocb-text);
    cursor: pointer;
    text-align: left;
}
.ocb-dropdown-item:hover { background: var(--ocb-surface-2); }
.ocb-dropdown-item.is-danger { color: var(--ocb-danger); }

/* Print — hide chrome, show document */
@media print {
    body.ocb-app-page .ocb-sidebar,
    body.ocb-app-page .ocb-topbar,
    body.ocb-app-page .ocb-inv-toolbar,
    body.ocb-app-page .ocb-inv-detail-header,
    body.ocb-app-page .ocb-inv-actions-bar,
    body.ocb-app-page .ocb-nav,
    body.ocb-app-page #ocb-modal,
    body.ocb-app-page #ocb-toast-container {
        display: none !important;
    }
    body.ocb-app-page .ocb-main,
    body.ocb-app-page .ocb-content {
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
    }
    body.ocb-app-page .ocb-inv-document {
        box-shadow: none;
        border: none;
        max-width: none;
        padding: 0;
    }
    body.ocb-app-page .ocb-inv-list { display: none !important; }
    body.ocb-app-page .ocb-inv-detail { display: block !important; }
}

/* Responsive invoice */
@media (max-width: 768px) {
    .ocb-inv-parties { grid-template-columns: 1fr; }
    .ocb-inv-doc-top { flex-direction: column; }
    .ocb-inv-doc-meta { text-align: left; }
    .ocb-inv-document { padding: 20px; }
    .ocb-inv-toolbar { flex-direction: column; align-items: stretch; }
    .ocb-inv-toolbar .ocb-search { max-width: none; }
    .ocb-line-editor-head, .ocb-line-row {
        grid-template-columns: 1fr 64px 80px 32px;
    }
}


/* ---- Shared module row actions (standard SaaS pattern) ---- */
.ocb-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  position: relative;
  z-index: 2;
}
.ocb-row-actions .ocb-icon-btn,
.ocb-row-action-btn {
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--ocb-border, #e5e9f0);
  background: #fff;
  color: var(--ocb-muted, #6B7A90);
  cursor: pointer;
  pointer-events: auto !important;
  position: relative;
  z-index: 3;
  overflow: hidden;
}
.ocb-row-actions .ocb-icon-btn:hover,
.ocb-row-action-btn:hover {
  color: var(--ocb-primary, #00758F);
  border-color: var(--ocb-primary, #00758F);
  background: rgba(0, 117, 143, 0.06);
}
.ocb-row-actions .ocb-icon-btn svg,
.ocb-row-action-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
/* Never show text labels on row actions */
.ocb-row-action-label {
  display: none !important;
}
.ocb-table .ocb-cell-actions,
.ocb-table td.ocb-cell-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}
.ocb-empty-state {
  text-align: center;
  padding: 48px 24px;
}
.ocb-page-header h1 {
  margin: 0;
}
.ocb-page-header .ocb-muted {
  margin-top: 4px;
}

/* Invoice detail action bar — icon only, not crowded */
.ocb-inv-actions-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.ocb-inv-actions-bar .ocb-icon-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--ocb-border, #e5e9f0);
  border-radius: 8px;
  background: #fff;
  color: var(--ocb-muted, #6B7A90);
  cursor: pointer;
  pointer-events: auto !important;
}
.ocb-inv-actions-bar .ocb-icon-btn:hover {
  color: var(--ocb-primary, #00758F);
  border-color: var(--ocb-primary, #00758F);
  background: rgba(0, 117, 143, 0.06);
}
.ocb-inv-actions-bar .ocb-icon-btn-primary {
  color: #fff;
  background: var(--ocb-primary, #00758F);
  border-color: var(--ocb-primary, #00758F);
}
.ocb-inv-actions-bar .ocb-icon-btn-primary:hover {
  filter: brightness(1.05);
  color: #fff;
}
.ocb-inv-actions-bar .ocb-icon-btn svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}
.ocb-inv-actions-bar .ocb-dropdown-menu {
  right: 0;
  left: auto;
}
.ocb-table .ocb-inv-actions {
  opacity: 1;
  gap: 4px;
}

/* ========== CRM advanced UI ========== */
.ocb-crm-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  .ocb-crm-kpis { grid-template-columns: repeat(2, 1fr); }
}
.ocb-crm-kpi {
  background: #fff;
  border: 1px solid var(--ocb-border, #e5e9f0);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.ocb-crm-kpi-label {
  display: block;
  font-size: 12px;
  color: var(--ocb-muted, #6B7A90);
  margin-bottom: 4px;
}
.ocb-crm-kpi-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--ocb-text, #0f172a);
  letter-spacing: -0.02em;
}
.ocb-crm-tabs .ocb-tab {
  font-weight: 500;
}
.ocb-crm-content { min-height: 320px; }

/* Kanban pipeline */
.ocb-kanban {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 12px;
  align-items: flex-start;
}
.ocb-kanban-col {
  flex: 0 0 280px;
  max-width: 280px;
  background: #f4f7fb;
  border-radius: 14px;
  border: 1px solid var(--ocb-border, #e5e9f0);
  min-height: 360px;
  display: flex;
  flex-direction: column;
}
.ocb-kanban-col-head {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgba(15,23,42,0.06);
}
.ocb-kanban-col-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}
.ocb-kanban-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ocb-kanban-meta {
  font-size: 11px;
  color: var(--ocb-muted);
  font-weight: 500;
}
.ocb-kanban-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.ocb-deal-card {
  background: #fff;
  border: 1px solid var(--ocb-border, #e5e9f0);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s, transform .15s;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.ocb-deal-card:hover {
  border-color: var(--ocb-primary, #00758F);
  box-shadow: 0 4px 14px rgba(0, 117, 143, 0.12);
  transform: translateY(-1px);
}
.ocb-deal-card-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--ocb-text);
}
.ocb-deal-card-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--ocb-primary, #00758F);
  margin-bottom: 8px;
}
.ocb-deal-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: var(--ocb-muted);
}
.ocb-deal-card-meta span {
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 999px;
}
.ocb-kanban-empty {
  text-align: center;
  padding: 24px 12px;
  font-size: 12px;
  color: var(--ocb-muted);
}

/* Lead/contact table polish */
.ocb-crm-person {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ocb-crm-avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #00758F, #0D8ABF);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.ocb-crm-person-name { font-weight: 600; font-size: 13px; }
.ocb-crm-person-sub { font-size: 12px; color: var(--ocb-muted); }
.ocb-badge-crm-new { background: #e0f2fe; color: #0369a1; }
.ocb-badge-crm-contacted { background: #fef3c7; color: #b45309; }
.ocb-badge-crm-qualified { background: #d1fae5; color: #047857; }
.ocb-badge-crm-converted { background: #dcfce7; color: #15803d; }
.ocb-badge-crm-lost { background: #fee2e2; color: #b91c1c; }
.ocb-crm-stage-select {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--ocb-border);
  background: #fff;
  max-width: 140px;
}

/* ========== Accounting module UI ========== */
.ocb-acct-header-left {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.ocb-acct-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 117, 143, 0.12);
  color: var(--ocb-primary, #00758F);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ocb-acct-icon svg { width: 22px; height: 22px; }
.ocb-acct-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
  padding: 4px;
  background: #f1f5f9;
  border-radius: 12px;
  border: 1px solid var(--ocb-border, #e5e9f0);
}
.ocb-acct-nav-item {
  border: none;
  background: transparent;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ocb-muted, #6B7A90);
  cursor: pointer;
}
.ocb-acct-nav-item:hover { color: var(--ocb-text); background: rgba(255,255,255,0.7); }
.ocb-acct-nav-item.is-active {
  background: #fff;
  color: var(--ocb-primary, #00758F);
  box-shadow: 0 1px 3px rgba(15,23,42,0.08);
}
.ocb-acct-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 1100px) {
  .ocb-acct-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .ocb-acct-kpis { grid-template-columns: repeat(2, 1fr); }
}
.ocb-acct-kpi {
  background: #fff;
  border: 1px solid var(--ocb-border, #e5e9f0);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.ocb-acct-kpi-label {
  display: block;
  font-size: 12px;
  color: var(--ocb-muted);
  margin-bottom: 6px;
}
.ocb-acct-kpi strong {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ocb-acct-kpi.is-asset strong { color: #0284c7; }
.ocb-acct-kpi.is-liability strong { color: #ea580c; }
.ocb-acct-kpi.is-equity strong { color: #7c3aed; }
.ocb-acct-kpi.is-income strong { color: #4f46e5; }
.ocb-acct-kpi.is-expense strong { color: #dc2626; }
.ocb-acct-panel { display: none; }
.ocb-acct-panel.is-active { display: block; }
.ocb-acct-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1000px) {
  .ocb-acct-grid { grid-template-columns: 1fr; }
}
.ocb-acct-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ocb-acct-card-head h3 { margin: 0; font-size: 15px; }
.ocb-acct-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ocb-btn-sm { padding: 6px 12px; font-size: 13px; }
.ocb-acct-type {
  display: inline-flex;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.ocb-acct-type-assets { background: #e0f2fe; color: #0369a1; }
.ocb-acct-type-liabilities { background: #ffedd5; color: #c2410c; }
.ocb-acct-type-equity { background: #ede9fe; color: #6d28d9; }
.ocb-acct-type-income { background: #e0e7ff; color: #4338ca; }
.ocb-acct-type-expenses { background: #fee2e2; color: #b91c1c; }
.ocb-acct-warn {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 12px;
}
.ocb-acct-ok {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 12px;
}
.ocb-acct-total-row td {
  border-top: 2px solid var(--ocb-border, #e5e9f0);
  background: #f8fafc;
}

/* Reports dashboard */
@media (max-width: 960px) {
  .ocb-rpt-grid { grid-template-columns: 1fr !important; }
}
.ocb-kpi-card { box-shadow: 0 1px 3px rgba(15,23,42,.06); border: 1px solid var(--ocb-border, #e5e9f0); border-radius: 12px; }
.ocb-chat-conv:hover { background: #e8eef3 !important; }

/* Settings — Zoho-style tabbed panels */
.ocb-settings-header { margin-bottom: 8px; }
.ocb-settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--ocb-border, #e5e9f0);
  margin: 8px 0 20px;
  padding-bottom: 0;
  background: #fff;
  border-radius: 12px 12px 0 0;
}
.ocb-settings-tab {
  appearance: none;
  border: none;
  background: transparent;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 8px 8px 0 0;
}
.ocb-settings-tab:hover { color: #0f172a; background: #f8fafc; }
.ocb-settings-tab.is-active {
  color: #00758F;
  border-bottom-color: #00758F;
  font-weight: 600;
}
.ocb-settings-card {
  background: #fff;
  border: 1px solid var(--ocb-border, #e5e9f0);
  border-radius: 12px;
  padding: 28px 28px 24px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  max-width: 960px;
}
.ocb-settings-card-head { margin-bottom: 22px; }
.ocb-settings-card-head h2 { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: #0f172a; }
.ocb-settings-card-head p { margin: 0; font-size: 13px; }
.ocb-settings-form { gap: 16px 20px; }
.ocb-settings-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}
.ocb-branding-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .ocb-branding-grid { grid-template-columns: 1fr; }
}
.ocb-logo-block label { display: block; font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 8px; }
.ocb-logo-preview-box {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  margin-bottom: 10px;
  padding: 12px;
}
.ocb-logo-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ocb-btn-danger-outline { color: #be123c !important; border-color: #fecdd3 !important; }
.ocb-settings-template {
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 14px;
  background: #fafbfc;
}
.ocb-settings-template h3 { margin: 0 0 12px; font-size: 14px; }
.ocb-settings-panel[hidden] { display: none !important; }

/* ---- Payroll module ---- */
.ocb-payroll-tabs {
  margin-bottom: 18px;
}
.ocb-payroll-panel {
  display: none;
}
.ocb-payroll-panel.is-active {
  display: block;
}
.ocb-page-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ocb-muted);
  margin: 0 0 4px;
}
.ocb-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--ocb-border);
  background: #fff;
  color: var(--ocb-text);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s, border-color 0.15s;
}
.ocb-icon-btn:hover {
  background: var(--ocb-bg);
  border-color: var(--ocb-blue);
  color: var(--ocb-blue);
}
.ocb-btn-sm {
  padding: 4px 10px !important;
  font-size: 12px !important;
}
.ocb-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}
.ocb-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 768px) {
  .ocb-payroll-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .ocb-payroll-tabs .ocb-tab {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ==========================================================================
   OneCloud Business — Unified Design System (v2)
   Standard page chrome, toolbars, tabs, actions — shared by every module
   ========================================================================== */

.ocb-page-title-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.ocb-page-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--ocb-blue-soft, rgba(0, 120, 212, 0.12));
  color: var(--ocb-blue, #00758F);
}
.ocb-page-icon svg { width: 20px; height: 20px; stroke: currentColor; }
.ocb-page-desc,
.ocb-page-header .ocb-muted {
  font-size: 13px;
  margin-top: 4px;
  line-height: 1.45;
  max-width: 560px;
}
.ocb-page-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Unified toolbar (search + filters + secondary actions) */
.ocb-toolbar,
.ocb-table-toolbar,
.ocb-inv-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.ocb-toolbar .ocb-search,
.ocb-table-toolbar .ocb-search,
.ocb-inv-toolbar .ocb-search {
  position: relative;
  flex: 1;
  min-width: 180px;
  max-width: 320px;
}
.ocb-toolbar .ocb-input,
.ocb-table-toolbar .ocb-input {
  max-width: 280px;
}
.ocb-toolbar select.ocb-input,
.ocb-table-toolbar select.ocb-input {
  max-width: 160px;
}

/* Unified module tabs — same visual language as payroll / settings */
.ocb-tabs,
.ocb-payroll-tabs,
.ocb-crm-tabs,
.ocb-settings-tabs,
.ocb-acct-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--ocb-border);
  padding-bottom: 0;
}
.ocb-tab,
.ocb-settings-tab,
.ocb-acct-nav-item,
.ocb-crm-tabs .ocb-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ocb-muted);
  cursor: pointer;
  border-radius: 0;
  transition: color 0.15s, border-color 0.15s;
}
.ocb-tab:hover,
.ocb-settings-tab:hover,
.ocb-acct-nav-item:hover {
  color: var(--ocb-text);
}
.ocb-tab.active,
.ocb-tab.is-active,
.ocb-settings-tab.is-active,
.ocb-acct-nav-item.is-active {
  color: var(--ocb-blue, #00758F);
  border-bottom-color: var(--ocb-blue, #00758F);
  font-weight: 600;
}

/* Standard card head for section titles inside cards */
.ocb-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ocb-border);
}
.ocb-card-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

/* Consistent empty / loading */
.ocb-table-empty {
  text-align: center;
  padding: 36px 16px !important;
  color: var(--ocb-muted);
  font-size: 13px;
}
.ocb-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 16px;
  color: var(--ocb-muted);
  font-size: 13px;
}

/* Action column consistency */
.ocb-cell-actions {
  white-space: nowrap;
  text-align: right;
}
.ocb-cell-actions .ocb-btn {
  margin-left: 4px;
}

/* Responsive page chrome */
@media (max-width: 768px) {
  .ocb-page-header {
    flex-direction: column;
    align-items: stretch;
  }
  .ocb-page-actions {
    width: 100%;
  }
  .ocb-page-actions .ocb-btn {
    flex: 1;
    justify-content: center;
  }
  .ocb-toolbar,
  .ocb-table-toolbar,
  .ocb-inv-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .ocb-toolbar .ocb-search,
  .ocb-table-toolbar .ocb-search,
  .ocb-inv-toolbar .ocb-search {
    max-width: none;
  }
  .ocb-toolbar select.ocb-input,
  .ocb-table-toolbar select.ocb-input {
    max-width: none;
  }
  .ocb-tabs,
  .ocb-payroll-tabs,
  .ocb-crm-tabs,
  .ocb-settings-tabs,
  .ocb-acct-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ocb-tab,
  .ocb-settings-tab,
  .ocb-acct-nav-item {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ==========================================================================
   Premium typography & invoice polish
   ========================================================================== */

.ocb-page-header h1,
.ocb-dash-welcome h1 {
  font-weight: 600;
  letter-spacing: -0.025em;
}

.ocb-nav-item {
  font-weight: 400;
  letter-spacing: -0.01em;
}

.ocb-btn {
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 13px;
}

.ocb-table th {
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ocb-muted);
}

.ocb-table td {
  font-size: 13.5px;
  font-weight: 400;
}

.ocb-table td strong {
  font-weight: 500;
  letter-spacing: -0.01em;
}

.ocb-badge {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.01em;
  text-transform: capitalize;
}

.ocb-kpi-value,
.ocb-stat-value {
  font-weight: 600;
  letter-spacing: -0.03em;
}

.ocb-kpi-label,
.ocb-stat-label {
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Invoice list — professional document workspace */
.ocb-inv-list .ocb-card {
  border: 1px solid var(--ocb-border);
  box-shadow: var(--ocb-shadow);
}

.ocb-inv-toolbar {
  margin-bottom: 16px;
}

.ocb-row-clickable {
  cursor: pointer;
  transition: background 0.12s ease;
}
.ocb-row-clickable:hover {
  background: var(--ocb-surface-2);
}

.ocb-inv-actions {
  display: inline-flex;
  gap: 4px;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}
.ocb-table tbody tr:hover .ocb-inv-actions {
  opacity: 1;
}

/* Invoice detail document */
.ocb-inv-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ocb-inv-detail-header .ocb-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ocb-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--ocb-radius-sm);
}
.ocb-inv-detail-header .ocb-back:hover {
  color: var(--ocb-text);
  background: var(--ocb-surface-2);
}

.ocb-inv-document {
  background: var(--ocb-card);
  border: 1px solid var(--ocb-border);
  border-radius: var(--ocb-radius);
  box-shadow: var(--ocb-shadow);
  padding: 32px 36px;
  max-width: 860px;
}

.ocb-inv-doc-top {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ocb-border);
}
.ocb-inv-doc-brand .name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ocb-text);
}
.ocb-inv-doc-brand .meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--ocb-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

.ocb-inv-doc-meta {
  text-align: right;
  font-size: 13px;
  color: var(--ocb-muted);
  line-height: 1.6;
}
.ocb-inv-doc-meta strong {
  color: var(--ocb-text);
  font-weight: 500;
}

.ocb-inv-doc-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
}
.ocb-inv-doc-parties .label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ocb-muted);
  margin-bottom: 6px;
}
.ocb-inv-doc-parties .value {
  font-size: 14px;
  font-weight: 500;
  color: var(--ocb-text);
}

.ocb-inv-doc-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  font-size: 13px;
}
.ocb-inv-doc-table th {
  text-align: left;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ocb-muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--ocb-border);
  background: var(--ocb-surface-2);
}
.ocb-inv-doc-table th.num,
.ocb-inv-doc-table td.num {
  text-align: right;
}
.ocb-inv-doc-table td {
  padding: 12px;
  border-bottom: 1px solid var(--ocb-border);
  color: var(--ocb-text);
  vertical-align: top;
}
.ocb-inv-doc-table tbody tr:last-child td {
  border-bottom: none;
}

.ocb-inv-doc-totals {
  margin-left: auto;
  width: 260px;
  font-size: 13px;
}
.ocb-inv-doc-totals .row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  color: var(--ocb-muted);
}
.ocb-inv-doc-totals .row.grand {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--ocb-border);
  font-size: 15px;
  font-weight: 600;
  color: var(--ocb-text);
  letter-spacing: -0.02em;
}

.ocb-inv-doc-notes {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--ocb-border);
  font-size: 12.5px;
  color: var(--ocb-muted);
  line-height: 1.55;
}

@media (max-width: 720px) {
  .ocb-inv-document { padding: 20px 16px; }
  .ocb-inv-doc-top { flex-direction: column; }
  .ocb-inv-doc-meta { text-align: left; }
  .ocb-inv-doc-parties { grid-template-columns: 1fr; }
  .ocb-inv-doc-totals { width: 100%; }
}

/* Remove wave style remnant */
.ocb-wave { display: none !important; }

/* Dashboard welcome — slim professional */
.ocb-dash-welcome h1 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0 0 4px;
}
.ocb-dash-welcome .ocb-muted {
  font-size: 13.5px;
  font-weight: 400;
}

/* ==========================================================================
   Invoice module — reference layout (KPI + status tabs + filters + table)
   ========================================================================== */

.ocb-inv-kpis {
  margin-bottom: 18px;
}

.ocb-status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  padding: 4px;
  background: var(--ocb-card);
  border: 1px solid var(--ocb-border);
  border-radius: var(--ocb-radius);
  box-shadow: var(--ocb-shadow);
}

.ocb-status-tab {
  appearance: none;
  border: none;
  background: transparent;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ocb-muted);
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s, color 0.15s;
  letter-spacing: -0.01em;
}

.ocb-status-tab:hover {
  color: var(--ocb-text);
  background: var(--ocb-surface-2);
}

.ocb-status-tab.is-active {
  background: var(--ocb-blue);
  color: #fff;
  font-weight: 600;
}

.ocb-status-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(15, 23, 42, 0.06);
  color: inherit;
}

.ocb-status-tab.is-active .ocb-status-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.ocb-inv-toolbar {
  margin-bottom: 14px;
  gap: 8px;
}

.ocb-inv-toolbar .ocb-input {
  max-width: 180px;
}

.ocb-inv-toolbar .ocb-search {
  max-width: 240px;
  flex: 1;
}

.ocb-inv-number {
  color: var(--ocb-blue);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ocb-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--ocb-border);
  font-size: 13px;
}

.ocb-inv-actions {
  display: inline-flex;
  gap: 2px;
  opacity: 0.7;
}
.ocb-table tbody tr:hover .ocb-inv-actions {
  opacity: 1;
}

/* Badge refinements for invoice statuses */
.ocb-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
  text-transform: capitalize;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .ocb-status-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .ocb-status-tab {
    flex-shrink: 0;
  }
  .ocb-inv-toolbar .ocb-input,
  .ocb-inv-toolbar .ocb-search {
    max-width: none;
  }
}


/* ==========================================================================
   MASTER VISUAL SYSTEM — White sidebar, #00758F brand, compact type
   ========================================================================== */

:root {
  --ocb-blue: #00758F;
  --ocb-blue-bright: #159AB8;
  --ocb-blue-deep: #00596D;
  --ocb-accent: #00758F;
  --ocb-blue-soft: rgba(0, 117, 143, 0.10);
  --ocb-blue-glow: rgba(0, 117, 143, 0.24);
  --ocb-sidebar-w: 240px;
}

/* WHITE SIDEBAR */
.ocb-sidebar {
  background: #FFFFFF !important;
  border-right: 1px solid var(--ocb-border);
  color: var(--ocb-text);
  box-shadow: 1px 0 0 rgba(15, 23, 42, 0.03);
}
.ocb-sidebar-header {
  border-bottom: 1px solid var(--ocb-border);
  background: #fff;
}
.ocb-brand,
.ocb-sidebar .ocb-brand-text {
  color: var(--ocb-text) !important;
}
.ocb-nav-item {
  color: #475569 !important;
  font-size: 12.5px !important;
  font-weight: 500;
  padding: 8px 12px !important;
  border-radius: 8px;
}
.ocb-nav-item:hover {
  background: rgba(0, 117, 143, 0.06) !important;
  color: var(--ocb-blue) !important;
}
.ocb-nav-item.is-active,
.ocb-nav-item.active,
.ocb-nav-item[aria-current="page"] {
  background: rgba(0, 117, 143, 0.10) !important;
  color: #00758F !important;
  font-weight: 600;
}
.ocb-nav-item .ocb-icon,
.ocb-nav-item svg {
  color: inherit;
  opacity: 0.9;
}
.ocb-sidebar-footer {
  border-top: 1px solid var(--ocb-border);
  background: #fff;
  color: var(--ocb-muted);
}

/* Compact typography scale (~30% tighter) */
.ocb-page-header h1,
.ocb-dash-welcome h1 {
  font-size: 18px !important;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.ocb-page-desc,
.ocb-page-header .ocb-muted {
  font-size: 12px !important;
}
.ocb-page-eyebrow {
  font-size: 10px !important;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #00758F !important;
}
.ocb-table th {
  font-size: 10.5px !important;
  padding: 10px 12px !important;
}
.ocb-table td {
  font-size: 12.5px !important;
  padding: 10px 12px !important;
}
.ocb-btn {
  font-size: 12.5px !important;
  padding: 8px 14px !important;
}
.ocb-btn-primary {
  background: #00758F !important;
  border-color: #00758F !important;
  box-shadow: 0 4px 12px -4px rgba(0, 117, 143, 0.35);
}
.ocb-btn-primary:hover {
  background: #159AB8 !important;
  border-color: #159AB8 !important;
}
.ocb-input,
.ocb-field label {
  font-size: 12.5px !important;
}
.ocb-field label {
  font-weight: 500;
  color: #64748B;
  margin-bottom: 4px;
}
.ocb-kpi-value {
  font-size: 20px !important;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.ocb-kpi-label {
  font-size: 11px !important;
}
.ocb-kpi-card {
  padding: 14px 16px !important;
  border-radius: 12px;
  border: 1px solid var(--ocb-border);
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px -6px rgba(15, 23, 42, 0.06);
}
.ocb-status-tab.is-active {
  background: #00758F !important;
}
.ocb-tab.active,
.ocb-tab.is-active,
.ocb-settings-tab.is-active,
.ocb-acct-nav-item.is-active {
  color: #00758F !important;
  border-bottom-color: #00758F !important;
}
.ocb-content {
  padding: 6px 24px 28px !important;
}
.ocb-topbar {
  background: #fff;
  border-bottom: 1px solid var(--ocb-border);
}
.ocb-badge {
  font-size: 10.5px !important;
}

/* Subtle gloss on primary surfaces */
.ocb-card {
  background: #fff;
  border: 1px solid var(--ocb-border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 8px 24px -12px rgba(15, 23, 42, 0.08);
}

/* Main area offset for sidebar */
.ocb-main {
  margin-left: var(--ocb-sidebar-w);
  background: var(--ocb-bg);
}

/* Bulk bar */
.ocb-bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: rgba(0, 117, 143, 0.08);
  border: 1px solid rgba(0, 117, 143, 0.2);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: #00758F;
}

/* Inline action menu */
.ocb-inline-menu {
  position: absolute;
  z-index: 80;
  min-width: 160px;
  background: #fff;
  border: 1px solid var(--ocb-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  padding: 6px;
}
.ocb-inline-menu .ocb-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  font-size: 12.5px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ocb-text);
}
.ocb-inline-menu .ocb-dropdown-item:hover {
  background: rgba(0, 117, 143, 0.08);
  color: #00758F;
}

/* Global search dropdown polish */
.ocb-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  background: #fff;
  border: 1px solid var(--ocb-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  z-index: 100;
  max-height: 320px;
  overflow: auto;
  padding: 6px;
}
.ocb-search-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}
.ocb-search-item:hover {
  background: rgba(0, 117, 143, 0.08);
}
.ocb-search-item strong {
  font-size: 13px;
  font-weight: 600;
}
.ocb-search-item .ocb-muted {
  font-size: 11.5px;
}

/* Mobile card-like tables */
@media (max-width: 720px) {
  .ocb-table thead { display: none; }
  .ocb-table tr {
    display: block;
    border-bottom: 1px solid var(--ocb-border);
    padding: 12px;
  }
  .ocb-table td {
    display: flex;
    justify-content: space-between;
    padding: 4px 0 !important;
    border: none !important;
  }
  .ocb-table td::before {
    content: attr(data-label);
    font-weight: 500;
    color: var(--ocb-muted);
    font-size: 11px;
  }
}

/* Empty state */
.ocb-empty-state {
  text-align: center;
  padding: 40px 20px;
}
.ocb-empty-state h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 6px;
}
.ocb-empty-state p {
  font-size: 13px;
  color: var(--ocb-muted);
  margin: 0 0 16px;
}

/* ==========================================================================
   FULL-WIDTH WORKSPACE — Sage-style accounting layout
   Every module uses the full main area. No narrow centered columns.
   ========================================================================== */

.ocb-app {
  width: 100%;
  max-width: none;
}

.ocb-main {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none !important;
  margin-left: var(--ocb-sidebar-w);
  background: #F5F7FA;
}

.ocb-content {
  width: 100% !important;
  max-width: none !important;
  padding: 12px 20px 32px !important;
  margin: 0 !important;
}

.ocb-view {
  width: 100%;
  max-width: none !important;
}

/* Page chrome full width */
.ocb-page-header,
.ocb-toolbar,
.ocb-status-tabs,
.ocb-kpi-grid,
.ocb-stats-grid,
.ocb-tabs,
.ocb-payroll-tabs,
.ocb-inv-toolbar,
.ocb-inv-list,
.ocb-inv-detail,
.ocb-table-wrap,
.ocb-card,
.ocb-bulk-bar {
  width: 100%;
  max-width: none !important;
}

/* KPI / stats: stretch across full width */
.ocb-kpi-grid,
.ocb-stats-grid,
.ocb-inv-kpis {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 12px !important;
  width: 100%;
  margin-bottom: 16px;
}

.ocb-kpi-card,
.ocb-stat-card {
  width: 100%;
  min-width: 0;
}

/* Tables always full width */
.ocb-table,
.ocb-table-wrap,
.ocb-card .ocb-table-wrap,
#invoices-table,
#quotes-table,
#payments-table,
#customers-table,
#suppliers-table,
#expenses-table {
  width: 100% !important;
  max-width: none !important;
}

.ocb-card {
  width: 100%;
  max-width: none !important;
  border-radius: 8px;
  border: 1px solid #E5E9EF;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Toolbar spans full row */
.ocb-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 12px;
}

.ocb-toolbar .ocb-search {
  flex: 1 1 220px;
  max-width: none !important;
  min-width: 180px;
}

.ocb-toolbar .ocb-input,
.ocb-toolbar select.ocb-input {
  max-width: none;
  min-width: 140px;
}

/* Settings: full width forms (Sage-like settings pages) */
.ocb-settings-card,
.ocb-settings-layout,
.ocb-settings-main,
.ocb-settings-form {
  max-width: none !important;
  width: 100% !important;
}

.ocb-settings-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  width: 100%;
  align-items: start;
}

/* Accounting / reports panels full width */
.ocb-acct-layout,
.ocb-reports-layout,
.ocb-chart-grid {
  width: 100%;
  max-width: none !important;
}

.ocb-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.ocb-chart-grid .ocb-card-wide {
  grid-column: 1 / -1;
}

/* Invoice detail document: use full content width (still readable) */
.ocb-inv-document {
  max-width: none !important;
  width: 100% !important;
  padding: 28px 32px;
}

.ocb-inv-detail {
  width: 100%;
}

/* Top bar full width of main */
.ocb-topbar {
  width: 100%;
  padding: 0 20px !important;
}

/* Dashboard widgets full width */
.ocb-dash-grid,
.ocb-dash-welcome,
#ocb-view-dashboard {
  width: 100%;
  max-width: none !important;
}

/* Forms in modals stay readable; list pages stay full width */
.ocb-form-grid {
  width: 100%;
}

/* Sage-like denser table rows */
.ocb-table th {
  background: #F8FAFC;
  border-bottom: 1px solid #E5E9EF;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748B;
  font-weight: 600;
  padding: 10px 12px !important;
  white-space: nowrap;
}

.ocb-table td {
  padding: 10px 12px !important;
  border-bottom: 1px solid #EEF2F6;
  font-size: 12.5px !important;
  vertical-align: middle;
}

.ocb-table tbody tr:hover {
  background: #F0F9FB;
}

/* Status tabs full width row */
.ocb-status-tabs {
  width: 100%;
  overflow-x: auto;
}

/* Remove any leftover content max-width from older rules */
body.ocb-app-page .ocb-main,
body.ocb-app-page .ocb-content,
body.ocb-app-page .ocb-view,
#ocb-app .ocb-content,
#ocb-app .ocb-view {
  max-width: none !important;
}

@media (max-width: 900px) {
  .ocb-main {
    margin-left: 0 !important;
  }
  .ocb-content {
    padding: 10px 12px 24px !important;
  }
  .ocb-settings-layout {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1400px) {
  .ocb-content {
    padding: 14px 24px 36px !important;
  }
}


/* ==========================================================================\n   OneCloud Business — Signature Pro UI / Emerald Energy Layer\n   Primary: #00758F — deliberately non-generic, dimensional, alive.\n   ========================================================================== */
:root {
    --ocb-primary: #00758F;
    --ocb-primary-2: #159AB8;
    --ocb-primary-deep: #003C4A;
    --ocb-primary-soft: rgba(0,117,143,.085);
    --ocb-primary-glow: rgba(0,117,143,.30);
    --ocb-primary-glow-strong: rgba(0,117,143,.48);
    --ocb-glow-cyan: #4FD8F0;
    --ocb-ink: #0b1510;
    --ocb-bg: #f3f6f3;
    --ocb-card: rgba(255,255,255,.94);
    --ocb-border: #DCE6E9;
    --ocb-shadow: 0 1px 2px rgba(10,30,14,.035), 0 12px 32px rgba(10,30,14,.055);
    --ocb-shadow-lg: 0 24px 70px rgba(7,34,12,.14);
    --ocb-shadow-primary: 0 10px 28px -8px var(--ocb-primary-glow);
}

.ocb-app {
    position: relative;
    background:
      radial-gradient(circle at 78% 8%, rgba(0,117,143,.065), transparent 28%),
      radial-gradient(circle at 20% 85%, rgba(0,117,143,.035), transparent 30%),
      linear-gradient(135deg,#F7FAFB 0%,#F1F5F7 48%,#F6F9FA 100%);
}
.ocb-app::before {
    content:"";
    position: fixed;
    inset: 0;
    pointer-events:none;
    opacity:.32;
    background-image: radial-gradient(rgba(0,117,143,.10) .65px, transparent .65px);
    background-size: 22px 22px;
    mask-image: linear-gradient(to bottom,rgba(0,0,0,.7),transparent 72%);
}

/* Sidebar becomes a branded control surface rather than a template sidebar. */
.ocb-sidebar {
    background:
      radial-gradient(circle at 100% 0%, rgba(0,117,143,.20), transparent 34%),
      radial-gradient(circle at 0% 80%, rgba(0,117,143,.10), transparent 38%),
      linear-gradient(180deg,#071108 0%,#09160b 52%,#071008 100%);
    border-right: 1px solid rgba(255,255,255,.055);
    box-shadow: 10px 0 40px rgba(0,0,0,.10);
}
.ocb-sidebar-header { border-bottom-color: rgba(255,255,255,.08); }
.ocb-sidebar-header::after {
    content:"";
    position:absolute;
    left:22px; right:22px; bottom:-1px;
    height:1px;
    background: linear-gradient(90deg,transparent,var(--ocb-primary),transparent);
    opacity:.7;
}
.ocb-nav { padding-top:16px; }
.ocb-nav-item {
    position:relative;
    border:1px solid transparent;
    transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.ocb-nav-item:hover { transform:translateX(2px); background:rgba(255,255,255,.055); }
.ocb-nav-item.active {
    color:#fff;
    background: linear-gradient(90deg,rgba(0,117,143,.26),rgba(0,117,143,.07));
    border-color:rgba(0,117,143,.22);
    box-shadow: inset 3px 0 0 var(--ocb-primary), 0 7px 20px rgba(0,0,0,.12);
}
.ocb-nav-item.active .ocb-icon { color:var(--ocb-glow-cyan); filter:drop-shadow(0 0 7px rgba(79,216,240,.65)); }

/* Top bar: floating instrument deck */
.ocb-topbar {
    margin: 12px 20px 0;
    padding: 0 16px;
    height:58px;
    border:1px solid rgba(0,117,143,.10);
    border-radius:18px;
    background:rgba(255,255,255,.76);
    backdrop-filter:blur(18px);
    box-shadow:0 10px 30px rgba(9,35,12,.055);
}
.ocb-company-switcher select,
.ocb-search input {
    border-color:#d9e4da;
    box-shadow:0 4px 16px rgba(9,35,12,.045);
}
.ocb-company-switcher select:focus,
.ocb-search input:focus { border-color:var(--ocb-primary); box-shadow:0 0 0 4px var(--ocb-primary-soft),0 8px 24px rgba(0,117,143,.08); }

.ocb-content { padding:18px 32px 52px; }
.ocb-page-header {
    position:relative;
    padding:8px 0 18px;
    margin:12px 0 20px;
}
.ocb-page-header::after {
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:1px;
    background:linear-gradient(90deg,var(--ocb-primary),rgba(0,117,143,.14),transparent 72%);
}
.ocb-page-eyebrow { color:var(--ocb-primary); letter-spacing:.13em; font-weight:800; }
.ocb-page-header h1 { font-size:27px; font-weight:760; letter-spacing:-.035em; }
.ocb-page-desc { color:#5B6B72; }
.ocb-page-title-row { align-items:center; }
.ocb-page-icon {
    width:48px;height:48px;border-radius:15px;
    color:#fff;
    background:linear-gradient(145deg,var(--ocb-primary-2),var(--ocb-primary-deep));
    box-shadow:0 10px 24px var(--ocb-primary-glow), inset 0 1px 0 rgba(255,255,255,.22);
    position:relative;
}
.ocb-page-icon::after {
    content:""; position:absolute; inset:-4px; border-radius:18px;
    border:1px solid rgba(0,117,143,.14); animation:ocb-breathe 3.2s ease-in-out infinite;
}

/* Cards: layered, editorial surfaces */
.ocb-card,
.ocb-stat-card,
.ocb-kpi-card,
.ocb-settings-card,
.ocb-acct-panel,
.ocb-acct-kpi,
.ocb-upgrade-card {
    border-color:#DCE6E9;
    border-radius:16px;
    background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(248,251,248,.92));
    box-shadow:var(--ocb-shadow);
    position:relative;
    overflow:hidden;
}
.ocb-card::before,
.ocb-stat-card::before,
.ocb-kpi-card::before,
.ocb-settings-card::before {
    content:"";
    position:absolute; left:0; top:0; width:100%; height:2px;
    background:linear-gradient(90deg,var(--ocb-primary),rgba(0,117,143,.08) 65%,transparent);
    opacity:.75;
}
.ocb-card:hover,
.ocb-stat-card:hover,
.ocb-kpi-card:hover { box-shadow:0 18px 42px rgba(8,35,12,.085); transform:translateY(-1px); }
.ocb-card, .ocb-stat-card, .ocb-kpi-card { transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }

/* KPIs feel like a live command centre. */
.ocb-stat-card { padding:20px; }
.ocb-stat-icon,
.ocb-kpi-icon {
    background:var(--ocb-primary-soft) !important;
    color:var(--ocb-primary) !important;
    box-shadow:inset 0 0 0 1px rgba(0,117,143,.08),0 6px 18px rgba(0,117,143,.06);
}
.ocb-stat-value,.ocb-kpi-value { letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.ocb-stat-trend.up { color:var(--ocb-primary); }

/* Buttons: tactile teal with an actual light field around the brand colour. */
.ocb-btn-primary {
    background:linear-gradient(135deg,#159AB8 0%,var(--ocb-primary) 58%,#003C4A 100%);
    border-color:rgba(0,60,74,.35);
    box-shadow:0 9px 22px -7px var(--ocb-primary-glow-strong), inset 0 1px 0 rgba(255,255,255,.18);
}
.ocb-btn-primary:hover {
    background:linear-gradient(135deg,#2FB6D4,#00758F,#00495a);
    transform:translateY(-1px);
    box-shadow:0 14px 30px -8px var(--ocb-primary-glow-strong),0 0 18px rgba(0,117,143,.18);
}
.ocb-btn-secondary:hover { border-color:var(--ocb-primary); color:var(--ocb-primary); box-shadow:0 0 0 3px var(--ocb-primary-soft); }
.ocb-icon-btn:hover { border-color:var(--ocb-primary); color:var(--ocb-primary); box-shadow:0 0 0 3px var(--ocb-primary-soft); }

/* Forms get a premium focus halo, not the default browser feel. */
.ocb-input,.ocb-select,textarea.ocb-input,select.ocb-input { border-color:#D3DEE2; border-radius:11px; background:rgba(255,255,255,.9); }
.ocb-input:focus,.ocb-select:focus { border-color:var(--ocb-primary); box-shadow:0 0 0 4px var(--ocb-primary-soft),0 8px 24px rgba(0,117,143,.06); }
.ocb-checkbox input,.ocb-radio input { accent-color:var(--ocb-primary); }

/* Tables: less spreadsheet, more product cockpit. */
.ocb-table-wrap { border:1px solid #DEE6E9; border-radius:14px; background:rgba(255,255,255,.7); overflow:hidden; }
.ocb-table { border-collapse:separate; border-spacing:0; }
.ocb-table thead th { background:#F3F7F8; padding-top:13px; color:#64757B; border-bottom:1px solid #DCE6E9; }
.ocb-table tbody td { padding:15px 14px; border-bottom-color:#E9EFF1; }
.ocb-table tbody tr { transition:background .16s ease,box-shadow .16s ease; }
.ocb-table tbody tr:hover { background:linear-gradient(90deg,rgba(0,117,143,.045),rgba(0,117,143,.012)); box-shadow:inset 2px 0 0 rgba(0,117,143,.35); }
.ocb-entity-avatar { background:var(--ocb-primary-soft); color:var(--ocb-primary); box-shadow:inset 0 0 0 1px rgba(0,117,143,.08); }

.ocb-badge-info { background:var(--ocb-primary-soft); color:var(--ocb-primary); }
.ocb-badge-success { background:rgba(0,117,143,.10); color:#006b05; }
.ocb-spinner { border-top-color:var(--ocb-primary); }
.ocb-tab.active,.ocb-tab.is-active,.ocb-settings-tab.is-active,.ocb-acct-nav-item.is-active { color:var(--ocb-primary) !important; border-bottom-color:var(--ocb-primary) !important; }
.ocb-seg-tab.active { background:var(--ocb-primary); box-shadow:0 5px 14px rgba(0,117,143,.22); }

/* Module signatures — one brand, one visual rhythm. Every module shares the
   same card radius, same accent rail and same glow language; nothing here
   diverges in shape, only in the specific accent already defined above. */
#ocb-view-dashboard .ocb-card,
#ocb-view-accounting .ocb-acct-panel,
#ocb-view-accounting .ocb-card,
#ocb-view-documents .ocb-card,
#ocb-view-projects .ocb-card { border-radius:16px; }
#ocb-view-customers .ocb-page-header,
#ocb-view-suppliers .ocb-page-header { border-left:4px solid var(--ocb-primary); padding-left:16px; }
#ocb-view-invoices .ocb-table-wrap,
#ocb-view-quotes .ocb-table-wrap,
#ocb-view-payments .ocb-table-wrap { box-shadow:inset 0 3px 0 rgba(0,117,143,.10); }
#ocb-view-accounting .ocb-acct-kpi { background:linear-gradient(145deg,#ffffff,#f2f8fa); }
#ocb-view-crm .ocb-crm-kpi { border-radius:16px; box-shadow:var(--ocb-shadow); }
#ocb-view-crm .ocb-card { background:linear-gradient(145deg,#fff,#f7fbfc); }
#ocb-view-mail .ocb-mail-list,
#ocb-view-mail .ocb-mail-viewer { border-color:#dfe8ec; box-shadow:var(--ocb-shadow); }
#ocb-view-payroll .ocb-payroll-panel { border-radius:16px; }
#ocb-view-settings .ocb-settings-tabs { background:rgba(255,255,255,.62); border-radius:14px 14px 0 0; padding:4px 8px 0; }
#ocb-view-reports .ocb-chart-wrap { border-radius:16px; }

/* Living brand light: restrained enough for a business app. */
@keyframes ocb-breathe { 0%,100%{opacity:.25;transform:scale(.985)} 50%{opacity:.7;transform:scale(1.015)} }
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}


/* ==========================================================================
   v1.5.8 — COMMAND CENTRE DASHBOARD
   The dashboard is intentionally a different visual language from CRUD pages:
   dense, editorial, instrument-like, and unmistakably OneCloud.
   ========================================================================== */
#ocb-view-dashboard .ocb-dash-header {
    position:relative;
    padding:26px 28px 24px;
    margin-bottom:18px;
    border:1px solid rgba(0,117,143,.16);
    border-radius:24px;
    background:
        radial-gradient(circle at 82% 15%, rgba(0,117,143,.16), transparent 31%),
        radial-gradient(circle at 8% 90%, rgba(21,154,184,.08), transparent 28%),
        linear-gradient(135deg,#ffffff 0%,#f8fbfc 62%,#f1f8fa 100%);
    box-shadow:0 18px 55px rgba(9,35,45,.08), inset 0 1px 0 rgba(255,255,255,.9);
    overflow:hidden;
}
#ocb-view-dashboard .ocb-dash-header::after {
    content:""; position:absolute; right:-90px; top:-120px; width:260px; height:260px;
    border:1px solid rgba(0,117,143,.14); border-radius:50%;
    box-shadow:0 0 0 28px rgba(0,117,143,.025),0 0 70px rgba(0,117,143,.11);
    pointer-events:none;
}
#ocb-view-dashboard .ocb-dash-welcome { position:relative; z-index:1; }
#ocb-view-dashboard .ocb-dash-welcome h1 { font-size:32px; margin-bottom:5px; letter-spacing:-.045em; }
#ocb-view-dashboard .ocb-dash-welcome .ocb-page-eyebrow { color:#00758F; }
#ocb-view-dashboard .ocb-dash-header-actions { position:relative; z-index:2; }
#ocb-view-dashboard .ocb-date-card { background:rgba(255,255,255,.78); backdrop-filter:blur(12px); border-color:rgba(0,117,143,.13); }
#ocb-view-dashboard .ocb-date-icon { background:rgba(0,117,143,.10); color:#00758F; }

.ocb-command-strip {
    display:grid; grid-template-columns:minmax(240px,1.2fr) repeat(3,minmax(150px,.7fr));
    gap:10px; margin:0 0 18px;
}
.ocb-command-tile {
    min-height:76px; display:flex; align-items:center; gap:12px; padding:14px 16px;
    border:1px solid #dfeaec; border-radius:16px; background:#fff;
    box-shadow:0 10px 28px rgba(9,35,45,.055); position:relative; overflow:hidden;
}
.ocb-command-tile::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:#00758F; opacity:.7; }
.ocb-command-tile.is-live { background:linear-gradient(135deg,#073a46,#062a33); color:#fff; border-color:#0b5969; box-shadow:0 14px 36px rgba(0,117,143,.18), inset 0 1px rgba(255,255,255,.08); }
.ocb-command-tile.is-live::before { width:100%; height:2px; inset:auto 0 0; opacity:.95; background:linear-gradient(90deg,#00b9d7,#00758F,transparent); }
.ocb-command-mark { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:12px; background:rgba(0,117,143,.10); color:#00758F; }
.ocb-command-tile.is-live .ocb-command-mark { background:rgba(0,185,215,.12); color:#61e2f4; }
.ocb-command-mark svg { width:18px; height:18px; stroke:currentColor; }
.ocb-command-copy { min-width:0; }
.ocb-command-kicker { display:block; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:.62; margin-bottom:3px; }
.ocb-command-value { display:block; font-size:13px; font-weight:750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ocb-live-pulse { width:8px; height:8px; border-radius:50%; background:#4FD8F0; box-shadow:0 0 0 0 rgba(79,216,240,.5); animation:ocb-live-pulse 2s infinite; }
@keyframes ocb-live-pulse { 0%{box-shadow:0 0 0 0 rgba(79,216,240,.45)} 70%{box-shadow:0 0 0 8px rgba(79,216,240,0)} 100%{box-shadow:0 0 0 0 rgba(79,216,240,0)} }

#ocb-view-dashboard .ocb-kpi-grid { grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:12px !important; }
#ocb-view-dashboard .ocb-kpi-card {
    min-height:142px; padding:17px 17px 13px; border-radius:18px;
    background:linear-gradient(150deg,#fff 0%,#fbfdfd 68%,#f4fafb 100%);
    border-color:#dce8eb; box-shadow:0 12px 34px rgba(9,35,45,.055);
}
#ocb-view-dashboard .ocb-kpi-card:first-child { background:linear-gradient(145deg,#073944,#062b34); border-color:#0a5969; color:#fff; box-shadow:0 16px 38px rgba(0,117,143,.20); }
#ocb-view-dashboard .ocb-kpi-card:first-child .ocb-kpi-label,
#ocb-view-dashboard .ocb-kpi-card:first-child .ocb-kpi-value { color:#fff; }
#ocb-view-dashboard .ocb-kpi-card:first-child .ocb-kpi-trend { color:#6ce7d0; }
#ocb-view-dashboard .ocb-kpi-card:first-child .ocb-kpi-icon { background:rgba(0,185,215,.12) !important; color:#67e1f0 !important; }
#ocb-view-dashboard .ocb-kpi-icon { width:38px; height:38px; border-radius:12px; }
#ocb-view-dashboard .ocb-kpi-value { font-size:22px; }
#ocb-view-dashboard .ocb-kpi-spark { opacity:.8; }

#ocb-view-dashboard .ocb-revenue-card { border-radius:22px; border-color:#dce8eb; box-shadow:0 16px 44px rgba(9,35,45,.06); }
#ocb-view-dashboard .ocb-revenue-card::before { height:3px; opacity:1; background:linear-gradient(90deg,#00758F,#22b9d2,transparent 75%); }
#ocb-view-dashboard .ocb-revenue-header { padding:2px 2px 0; }
#ocb-view-dashboard .ocb-revenue-header h3 { font-size:17px; letter-spacing:-.02em; }
#ocb-view-dashboard .ocb-chart-wrap { background:radial-gradient(circle at 12% 80%,rgba(0,117,143,.045),transparent 28%); border-radius:14px; }

#ocb-view-dashboard .ocb-dash-bottom { grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr); gap:14px; }
#ocb-view-dashboard .ocb-transactions-card,
#ocb-view-dashboard .ocb-breakdown-card { border-radius:20px; border-color:#dce8eb; box-shadow:0 14px 38px rgba(9,35,45,.055); }
#ocb-view-dashboard .ocb-card-header { padding:2px 2px 0; }
#ocb-view-dashboard .ocb-card-header h3 { letter-spacing:-.02em; }
#ocb-view-dashboard .ocb-link-view { color:#00758F; }
#ocb-view-dashboard .ocb-table-wrap { border-radius:14px; }
#ocb-view-dashboard .ocb-tx-table tbody tr:hover { background:linear-gradient(90deg,rgba(0,117,143,.055),rgba(0,117,143,.012)); box-shadow:inset 2px 0 #00758F; }

.ocb-dashboard-actions { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 18px; }
.ocb-dashboard-actions .ocb-btn { border-radius:12px; }
.ocb-dashboard-actions .ocb-btn-primary { padding-left:15px; padding-right:15px; }

@media (max-width:1100px) {
    .ocb-command-strip { grid-template-columns:1fr 1fr; }
    #ocb-view-dashboard .ocb-kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
@media (max-width:700px) {
    #ocb-view-dashboard .ocb-dash-header { padding:20px; }
    #ocb-view-dashboard .ocb-dash-welcome h1 { font-size:26px; }
    .ocb-command-strip { grid-template-columns:1fr; }
    #ocb-view-dashboard .ocb-kpi-grid { grid-template-columns:1fr 1fr !important; }
    #ocb-view-dashboard .ocb-dash-bottom { grid-template-columns:1fr; }
}
@media (max-width:460px) { #ocb-view-dashboard .ocb-kpi-grid { grid-template-columns:1fr !important; } }

/* ========================================================================== 
   OneCloud Business — Dashboard Command Centre v2
   Editorial / financial cockpit. This intentionally does not resemble a
   conventional WordPress admin or generic SaaS dashboard.
   ========================================================================== */
#ocb-view-dashboard{--dash-ink:#071d24;--dash-teal:#00758f;--dash-cyan:#18b9d2;--dash-line:#dbe8eb;--dash-muted:#6c7e84;max-width:1540px;margin:0 auto;padding-bottom:42px}
#ocb-view-dashboard .ocb-command-hero{min-height:300px;position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.55fr);border-radius:28px;background:linear-gradient(125deg,#041a20 0%,#07343e 58%,#075064 100%);color:#fff;box-shadow:0 26px 70px rgba(3,31,39,.22);margin-bottom:16px}
#ocb-view-dashboard .ocb-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(116,220,235,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(116,220,235,.055) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 60%,transparent 100%)}
#ocb-view-dashboard .ocb-command-hero:before{content:"";position:absolute;width:460px;height:460px;right:-170px;top:-170px;border:1px solid rgba(72,218,238,.22);border-radius:50%;box-shadow:0 0 0 42px rgba(24,185,210,.035),0 0 100px rgba(24,185,210,.16)}
#ocb-view-dashboard .ocb-command-hero:after{content:"";position:absolute;left:40%;bottom:-120px;width:520px;height:220px;background:radial-gradient(ellipse,rgba(24,185,210,.18),transparent 68%);filter:blur(12px)}
#ocb-view-dashboard .ocb-hero-copy{position:relative;padding:34px 40px 32px;z-index:2}
#ocb-view-dashboard .ocb-hero-topline{display:flex;align-items:center;gap:18px;margin-bottom:32px;color:#9fc0c7;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
#ocb-view-dashboard .ocb-live-status{display:inline-flex;align-items:center;gap:8px;color:#79e5d0}.ocb-live-status i{width:7px;height:7px;border-radius:50%;background:#5be2c8;box-shadow:0 0 0 5px rgba(91,226,200,.1),0 0 18px rgba(91,226,200,.7)}
#ocb-view-dashboard .ocb-hero-date{padding-left:18px;border-left:1px solid rgba(255,255,255,.15)}
#ocb-view-dashboard .ocb-hero-eyebrow{margin:0 0 9px;color:#63d7e8;font-size:10px;font-weight:800;letter-spacing:.18em}
#ocb-view-dashboard .ocb-hero-copy h1{margin:0;font-size:42px;line-height:1.02;letter-spacing:-.055em;font-weight:720;max-width:760px}
#ocb-view-dashboard .ocb-hero-copy>p:last-of-type{margin:12px 0 25px;color:#b7cdd2;font-size:14px}
#ocb-view-dashboard .ocb-hero-actions{display:flex;gap:9px;flex-wrap:wrap}.ocb-hero-actions .ocb-btn-primary{background:#fff!important;color:#075568!important;border:0!important;box-shadow:0 8px 25px rgba(0,0,0,.18)!important}.ocb-hero-actions .ocb-btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.25)!important}
#ocb-view-dashboard .ocb-hero-ghost{height:42px;padding:0 15px;border:1px solid rgba(255,255,255,.17);border-radius:11px;background:rgba(255,255,255,.055);color:#e8f5f7;font-weight:700;cursor:pointer;transition:.18s ease}.ocb-hero-ghost:hover{background:rgba(255,255,255,.11);border-color:rgba(120,220,235,.38);transform:translateY(-2px)}.ocb-hero-ghost span{margin-left:8px;opacity:.55}
#ocb-view-dashboard .ocb-hero-side{position:relative;z-index:3;padding:27px 30px;border-left:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.08));display:flex;flex-direction:column;align-items:flex-end}
#ocb-view-dashboard .ocb-period-control{display:flex;align-items:center;gap:9px;color:#87aeb6;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.ocb-period-control select{appearance:none;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(255,255,255,.07);color:#fff;padding:9px 28px 9px 11px;font-size:12px;font-weight:700}
#ocb-view-dashboard .ocb-hero-orbit{position:relative;width:145px;height:145px;margin-top:31px;border:1px solid rgba(94,221,237,.25);border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 17px rgba(24,185,210,.025),0 0 50px rgba(24,185,210,.11)}.ocb-hero-orbit:before,.ocb-hero-orbit:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(94,221,237,.13)}.ocb-hero-orbit:before{inset:18px}.ocb-hero-orbit:after{inset:42px;border-color:rgba(94,221,237,.2)}.ocb-hero-orbit span{position:absolute;width:6px;height:6px;border-radius:50%;background:#61dfed;top:16px;left:71px;box-shadow:0 0 18px #61dfed}.ocb-hero-orbit b{font-size:30px;letter-spacing:-.08em;color:#c8f4f8;z-index:1}.ocb-hero-note{margin-top:20px;text-align:right}.ocb-hero-note strong,.ocb-hero-note span{display:block}.ocb-hero-note strong{font-size:12px}.ocb-hero-note span{font-size:10px;color:#7599a1;margin-top:3px}
#ocb-view-dashboard .ocb-finance-pulse{min-height:126px;display:grid;grid-template-columns:2.2fr 1px repeat(3,1fr);align-items:center;background:#fff;border:1px solid var(--dash-line);border-radius:20px;margin-bottom:16px;box-shadow:0 12px 36px rgba(8,39,48,.055)}
#ocb-view-dashboard .ocb-pulse-main{padding:20px 25px}.ocb-section-kicker{font-size:9px;font-weight:900;letter-spacing:.15em;color:var(--dash-teal);margin-bottom:8px}.ocb-section-kicker span{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--dash-cyan);margin-right:6px;vertical-align:2px;box-shadow:0 0 10px rgba(24,185,210,.6)}.ocb-pulse-label{font-size:11px;color:var(--dash-muted)}.ocb-pulse-value{font-size:29px;font-weight:760;letter-spacing:-.045em;color:var(--dash-ink);margin:2px 0}.ocb-pulse-foot{display:flex;gap:10px;align-items:center;font-size:10px;color:#8a999d}.ocb-pulse-foot small{font-size:10px}.ocb-pulse-divider{width:1px;height:62px;background:var(--dash-line)}
#ocb-view-dashboard .ocb-pulse-metric{padding:0 24px;border-right:1px solid #edf2f3}.ocb-pulse-metric:last-child{border:0}.ocb-pulse-metric span{display:block;font-size:10px;color:#788a8f;font-weight:700;margin-bottom:7px}.ocb-pulse-metric strong{display:block;font-size:17px;color:var(--dash-ink);letter-spacing:-.025em}.ocb-pulse-metric em{display:block;min-height:14px;font-size:9px;font-style:normal;margin-top:4px}.ocb-pulse-profit strong{color:var(--dash-teal)}
#ocb-view-dashboard .ocb-dashboard-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.62fr);gap:16px}.ocb-dashboard-main{display:grid;gap:16px;min-width:0}.ocb-dashboard-rail{display:grid;gap:16px;align-content:start}
#ocb-view-dashboard .ocb-dash-panel{background:#fff;border:1px solid var(--dash-line);border-radius:20px;box-shadow:0 12px 36px rgba(8,39,48,.052);overflow:hidden}.ocb-performance-panel{min-height:395px}.ocb-panel-heading{display:flex;justify-content:space-between;align-items:center;padding:20px 22px 13px}.ocb-panel-heading>div:first-child{display:flex;align-items:center;gap:11px}.ocb-panel-index{font-size:9px;font-weight:900;letter-spacing:.08em;color:#9aabb0}.ocb-panel-heading p{margin:0 0 2px;font-size:8px;letter-spacing:.16em;font-weight:900;color:#91a1a5}.ocb-panel-heading h2{margin:0;font-size:17px;letter-spacing:-.035em;color:var(--dash-ink)}.ocb-panel-tools{display:flex;align-items:center;gap:15px}.ocb-chart-legend{display:flex;gap:12px;font-size:9px;color:#71848a;font-weight:700}.ocb-chart-legend span{display:flex;gap:5px;align-items:center}.ocb-chart-legend i{width:7px;height:7px;border-radius:50%;background:var(--dash-teal);box-shadow:0 0 8px rgba(0,117,143,.35)}.ocb-chart-legend .prev i{background:#a9c2c8;box-shadow:none}.ocb-panel-tools select{border:1px solid #e0eaed;border-radius:8px;background:#fbfdfe;color:#526a70;font-size:10px;padding:7px 8px}.ocb-performance-chart{height:315px;padding:8px 18px 20px}.ocb-performance-chart canvas{width:100%!important;height:100%!important}
#ocb-view-dashboard .ocb-panel-heading.compact{padding-bottom:16px}.ocb-panel-link{font-size:10px;color:var(--dash-teal);font-weight:800;text-decoration:none}.ocb-panel-link span{margin-left:4px}.ocb-transactions-card .ocb-table-wrap{border:0;border-radius:0;box-shadow:none}.ocb-tx-table th{font-size:8px;letter-spacing:.1em;text-transform:uppercase}.ocb-tx-table td{font-size:11px}.ocb-tx-table tbody tr{height:59px}
#ocb-view-dashboard .ocb-health-panel{padding-bottom:17px}.ocb-health-ring{width:130px;height:130px;margin:5px auto 12px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--dash-teal) 0deg,rgba(0,117,143,.13) 0deg 360deg);position:relative}.ocb-health-ring:after{content:"";position:absolute;inset:10px;background:#fff;border-radius:50%}.ocb-health-ring>div{position:relative;z-index:1;text-align:center}.ocb-health-ring strong{display:block;font-size:20px;color:var(--dash-ink);letter-spacing:-.04em}.ocb-health-ring span{font-size:9px;color:#839399;text-transform:uppercase;letter-spacing:.1em}.ocb-health-caption{text-align:center;font-size:10px;color:#829196;margin-bottom:17px}.ocb-health-list{border-top:1px solid #edf2f3;margin:0 18px}.ocb-health-list div{display:grid;grid-template-columns:12px 1fr auto;gap:7px;align-items:center;padding:9px 0;border-bottom:1px solid #edf2f3;font-size:10px}.ocb-health-list b{font-size:10px;color:var(--dash-ink)}.health-dot{width:7px;height:7px;border-radius:50%;background:#9ab5bc}.health-dot.income{background:#23b7c8}.health-dot.expense{background:#d8a18f}.health-dot.balance{background:#8095d2}
#ocb-view-dashboard .ocb-breakdown-card{padding-bottom:8px}.ocb-breakdown-list{padding:0 19px 10px}.ocb-breakdown-row{display:grid;grid-template-columns:minmax(70px,1fr) 60px 30px;gap:8px;align-items:center;padding:11px 0;border-bottom:1px solid #edf2f3}.ocb-bd-label{font-size:10px;font-weight:700;color:#4f656b}.ocb-bd-bar-wrap{height:5px;border-radius:8px;background:#edf3f4;overflow:hidden}.ocb-bd-bar{height:100%;border-radius:8px;background:linear-gradient(90deg,#00758f,#35c6d8);box-shadow:0 0 8px rgba(0,117,143,.22)}.ocb-bd-pct{font-size:8px;color:#8a9ba0;text-align:right}.ocb-bd-total{grid-column:1/-1;font-size:10px;color:#71848a;margin-top:-4px}.ocb-shortcuts-panel{padding-bottom:8px}.ocb-shortcut{width:calc(100% - 30px);margin:0 15px;border:0;border-top:1px solid #edf2f3;background:transparent;display:grid;grid-template-columns:25px 1fr auto;align-items:center;padding:12px 3px;text-align:left;cursor:pointer;color:var(--dash-ink)}.ocb-shortcut span{font-size:8px;color:#9eacb0;font-weight:900}.ocb-shortcut b{font-size:11px}.ocb-shortcut i{font-style:normal;color:#8ea0a5;transition:.18s}.ocb-shortcut:hover i{color:var(--dash-teal);transform:translate(2px,-2px)}.ocb-shortcut:hover b{color:var(--dash-teal)}
@media(max-width:1100px){#ocb-view-dashboard .ocb-command-hero{grid-template-columns:1fr}.ocb-hero-side{display:none!important}#ocb-view-dashboard .ocb-finance-pulse{grid-template-columns:1.6fr 1px repeat(3,1fr)}#ocb-view-dashboard .ocb-pulse-metric{padding:0 14px}#ocb-view-dashboard .ocb-dashboard-grid{grid-template-columns:1fr}.ocb-dashboard-rail{grid-template-columns:1fr 1fr}.ocb-shortcuts-panel{grid-column:1/-1}}
@media(max-width:720px){#ocb-view-dashboard .ocb-command-hero{border-radius:20px}.ocb-hero-copy{padding:25px!important}.ocb-hero-copy h1{font-size:31px!important}.ocb-hero-topline{margin-bottom:24px!important}.ocb-finance-pulse{display:grid!important;grid-template-columns:1fr 1fr!important}.ocb-pulse-main{grid-column:1/-1}.ocb-pulse-divider{display:none}.ocb-pulse-metric{padding:14px 18px!important;border-top:1px solid #edf2f3}.ocb-dashboard-rail{grid-template-columns:1fr}.ocb-shortcuts-panel{grid-column:auto}.ocb-panel-tools .ocb-chart-legend{display:none}.ocb-performance-panel{min-height:330px}.ocb-performance-chart{height:245px}.ocb-table-wrap{overflow-x:auto}.ocb-tx-table{min-width:650px}}

/* v1.6.0 dashboard refinement — clean command centre */
:root{--ocb-brand:#00758F;--ocb-brand-dark:#063942;--ocb-ink:#10262d;--ocb-soft:#f5f9fa}
#ocb-view-dashboard{max-width:1500px;margin:0 auto;padding-bottom:42px}
#ocb-view-dashboard .ocb-command-hero{border-radius:24px;background:linear-gradient(135deg,#062d35 0%,#074753 52%,#00758f 100%);box-shadow:0 22px 55px rgba(0,63,77,.18);min-height:250px;overflow:hidden;position:relative}
#ocb-view-dashboard .ocb-command-hero:after{content:"";position:absolute;right:-80px;top:-120px;width:360px;height:360px;border:1px solid rgba(255,255,255,.14);border-radius:50%;box-shadow:0 0 0 55px rgba(255,255,255,.025),0 0 0 110px rgba(255,255,255,.018)}
#ocb-view-dashboard .ocb-hero-grid{opacity:.16;background-image:linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(90deg,#000,transparent 75%)}
#ocb-view-dashboard .ocb-hero-copy{padding:34px 36px}.ocb-hero-actions{margin-top:2px}
#ocb-view-dashboard .ocb-finance-pulse{margin-top:14px;border-radius:18px;box-shadow:0 8px 30px rgba(8,39,48,.045)}
#ocb-view-dashboard .ocb-dashboard-grid{grid-template-columns:minmax(0,1.8fr) minmax(290px,.7fr);gap:14px}
#ocb-view-dashboard .ocb-dashboard-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#ocb-view-dashboard .ocb-dash-panel{border-radius:18px;box-shadow:0 7px 26px rgba(8,39,48,.045);border-color:#e4edef}
#ocb-view-dashboard .ocb-dash-panel:hover{box-shadow:0 12px 34px rgba(0,78,94,.075)}
#ocb-view-dashboard .ocb-panel-heading{padding:18px 20px 10px}.ocb-panel-heading h2{font-size:16px}.ocb-panel-heading p{font-size:8px}
#ocb-view-dashboard .ocb-performance-panel{min-height:370px}.ocb-performance-chart{height:280px;padding:8px 18px 18px}
#ocb-view-dashboard .ocb-chart-panel{min-height:280px}.ocb-small-chart{height:205px;padding:0 16px 18px}.ocb-small-chart canvas{width:100%!important;height:100%!important}
#ocb-view-dashboard .ocb-pie-layout{display:grid;grid-template-columns:145px 1fr;align-items:center;gap:10px;padding:4px 16px 18px}.ocb-pie-chart{height:175px}.ocb-pie-chart canvas{width:100%!important;height:100%!important}.ocb-mini-legend{display:grid;gap:8px}.ocb-mini-legend div{display:grid;grid-template-columns:9px 1fr auto;gap:7px;align-items:center;font-size:10px;color:#60767c}.ocb-mini-legend b{font-size:10px;color:#173840}.ocb-legend-dot{width:7px;height:7px;border-radius:50%}
#ocb-view-dashboard .ocb-expense-pie{height:145px;padding:4px 55px 0}.ocb-expense-pie canvas{width:100%!important;height:100%!important}
#ocb-view-dashboard .ocb-breakdown-card .ocb-breakdown-list{padding:0 18px 10px}.ocb-breakdown-row{grid-template-columns:1fr auto!important;gap:5px;padding:8px 0}.ocb-breakdown-row .ocb-bd-total{grid-column:auto!important;font-weight:700;margin:0}.ocb-breakdown-row .ocb-bd-pct{display:none}
#ocb-view-dashboard .ocb-shortcut{width:calc(100% - 32px);margin:0 16px;padding:11px 2px}.ocb-shortcut:hover{background:#f7fbfc;border-radius:9px;padding-left:8px}
.ocb-support-card{margin:12px 14px 14px;padding:14px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.025));color:#d8eef1}.ocb-support-top{display:flex;align-items:center;gap:7px;font-size:8px;font-weight:900;letter-spacing:.13em;color:#82d7e1}.ocb-support-dot{width:6px;height:6px;border-radius:50%;background:#43d2c4;box-shadow:0 0 12px #43d2c4}.ocb-support-card strong{display:block;margin-top:10px;font-size:13px}.ocb-support-card p{margin:4px 0 12px;color:#8eafb6;font-size:10px;line-height:1.45}.ocb-support-btn{display:flex;justify-content:space-between;align-items:center;text-decoration:none;color:#fff;background:#00758F;border-radius:9px;padding:9px 10px;font-size:10px;font-weight:800;box-shadow:0 7px 20px rgba(0,117,143,.22);transition:.18s ease}.ocb-support-btn:hover{transform:translateY(-1px);background:#008ca7;color:#fff;box-shadow:0 10px 25px rgba(0,117,143,.32)}
@media(max-width:1000px){#ocb-view-dashboard .ocb-dashboard-duo{grid-template-columns:1fr 1fr}.ocb-dashboard-grid{grid-template-columns:1fr!important}.ocb-dashboard-rail{grid-template-columns:1fr 1fr!important}}
@media(max-width:680px){#ocb-view-dashboard .ocb-dashboard-duo{grid-template-columns:1fr}.ocb-dashboard-rail{grid-template-columns:1fr!important}.ocb-pie-layout{grid-template-columns:130px 1fr!important}.ocb-expense-pie{padding-left:45px!important;padding-right:45px!important}.ocb-finance-pulse{grid-template-columns:1fr 1fr!important}.ocb-pulse-main{grid-column:1/-1}.ocb-pulse-divider{display:none}}

/* v1.6.1 — functional account control */
.ocb-profile-trigger{display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:4px 7px 4px 4px;border-radius:14px;cursor:pointer;color:inherit;text-align:left;transition:background .18s ease,box-shadow .18s ease}
.ocb-profile-trigger:hover,.ocb-profile-menu.is-open .ocb-profile-trigger{background:rgba(0,117,143,.07);box-shadow:0 0 0 1px rgba(0,117,143,.09)}
.ocb-profile-avatar{width:40px;height:40px;display:grid;place-items:center;overflow:hidden;border-radius:12px;background:linear-gradient(145deg,#00758f,#00576a);color:#fff;box-shadow:0 5px 18px rgba(0,117,143,.18)}
.ocb-profile-photo{width:40px!important;height:40px!important;border-radius:12px!important;display:block}
.ocb-profile-photo img{width:100%;height:100%;object-fit:cover}
.ocb-profile-dropdown{position:absolute;right:0;top:calc(100% + 10px);width:285px;padding:8px;background:rgba(255,255,255,.98);border:1px solid rgba(0,117,143,.13);border-radius:18px;box-shadow:0 22px 55px rgba(12,31,39,.16),0 0 28px rgba(0,117,143,.08);z-index:1000;backdrop-filter:blur(18px)}
.ocb-profile-dropdown[hidden]{display:none}
.ocb-profile-dropdown-head{padding:13px 13px 11px;border-bottom:1px solid rgba(15,35,43,.07);display:flex;flex-direction:column;gap:3px}
.ocb-profile-dropdown-head strong{font-size:14px;color:#13252b}.ocb-profile-dropdown-head span{font-size:11px;color:#71828a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ocb-profile-action{width:100%;display:flex;align-items:center;gap:11px;padding:11px 12px;border:0;background:transparent;border-radius:11px;color:#24363d;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;box-sizing:border-box}
.ocb-profile-action svg{width:17px;height:17px;color:#00758f;flex:0 0 17px}.ocb-profile-action:hover{background:rgba(0,117,143,.07);color:#00758f}
.ocb-profile-divider{height:1px;background:rgba(15,35,43,.07);margin:5px 6px}.ocb-profile-logout{color:#34474e}.ocb-profile-logout:hover{background:rgba(210,65,65,.07);color:#b43737}
.ocb-user-menu{position:relative}

/* v1.6.2 — dashboard implementation from approved visual blueprint. Existing palette preserved. */
#ocb-view-dashboard{max-width:1500px;margin:0 auto;padding:8px 0 42px}
#ocb-view-dashboard .ocb-command-hero{display:none!important}
#ocb-view-dashboard .ocb-dashboard-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:10px 2px 22px;border-bottom:1px solid var(--dash-line)}
#ocb-view-dashboard .ocb-dashboard-intro-copy{min-width:0}
#ocb-view-dashboard .ocb-live-line{display:flex;align-items:center;gap:8px;margin-bottom:12px;color:#74868b;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
#ocb-view-dashboard .ocb-live-line b{font-weight:600;letter-spacing:0;text-transform:none;color:#8a999e;margin-left:4px}
#ocb-view-dashboard .ocb-live-dot{width:6px;height:6px;border-radius:50%;background:#2fc3b0;box-shadow:0 0 0 4px rgba(47,195,176,.10),0 0 12px rgba(47,195,176,.45)}
#ocb-view-dashboard .ocb-dashboard-eyebrow{margin:0 0 6px;color:var(--dash-teal);font-size:9px;font-weight:900;letter-spacing:.14em}
#ocb-view-dashboard .ocb-dashboard-intro h1{margin:0;color:var(--dash-ink);font-size:34px;line-height:1.05;letter-spacing:-.045em;font-weight:800}
#ocb-view-dashboard .ocb-dashboard-subtitle{margin:8px 0 0;color:#708187;font-size:13px}
#ocb-view-dashboard .ocb-dashboard-actions{display:flex;gap:9px;flex:0 0 auto}
#ocb-view-dashboard .ocb-dashboard-actions .ocb-btn{height:42px;padding:0 16px;border-radius:10px;white-space:nowrap}
#ocb-view-dashboard .ocb-dashboard-filter{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0}
#ocb-view-dashboard .ocb-dashboard-filter>div:first-child{display:flex;align-items:baseline;gap:8px}
#ocb-view-dashboard .ocb-dashboard-filter>div:first-child span{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#91a0a5;font-weight:800}
#ocb-view-dashboard .ocb-dashboard-filter>div:first-child strong{font-size:12px;color:var(--dash-ink)}
#ocb-view-dashboard .ocb-period-pills{display:flex;gap:4px;padding:3px;background:#f2f6f7;border:1px solid #e5edef;border-radius:10px}
#ocb-view-dashboard .ocb-period-pill{border:0;background:transparent;color:#71848a;border-radius:7px;padding:7px 12px;font-size:10px;font-weight:700;cursor:pointer}
#ocb-view-dashboard .ocb-period-pill:hover{color:var(--dash-teal)}
#ocb-view-dashboard .ocb-period-pill.is-active{background:#fff;color:var(--dash-teal);box-shadow:0 2px 8px rgba(8,39,48,.08)}
#ocb-view-dashboard .ocb-period-select{display:none}
#ocb-view-dashboard .ocb-finance-cards{display:grid;grid-template-columns:1.35fr repeat(3,1fr);gap:10px;margin-bottom:14px}
#ocb-view-dashboard .ocb-finance-card{min-height:116px;padding:17px 18px;border:1px solid var(--dash-line);border-radius:14px;background:#fff;box-shadow:0 5px 18px rgba(8,39,48,.035);display:flex;flex-direction:column;justify-content:space-between}
#ocb-view-dashboard .ocb-finance-card-balance{background:#f7fbfc}
#ocb-view-dashboard .ocb-finance-card-top{display:flex;align-items:center;justify-content:space-between;color:#75868b;font-size:10px;font-weight:700}
#ocb-view-dashboard .ocb-finance-card strong{display:block;color:var(--dash-ink);font-size:24px;letter-spacing:-.045em;line-height:1.1}
#ocb-view-dashboard .ocb-finance-card-balance strong{font-size:27px;color:var(--dash-teal)}
#ocb-view-dashboard .ocb-finance-card small{font-size:9px;color:#96a4a8}
#ocb-view-dashboard .ocb-finance-card small em{font-style:normal;margin-left:5px}
#ocb-view-dashboard .ocb-finance-card-mark,.ocb-finance-icon{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#eef7f8;color:var(--dash-teal);font-size:13px;font-weight:900}
#ocb-view-dashboard .ocb-finance-icon.income{background:#edf8f3;color:#268c68}.ocb-finance-icon.expense{background:#fff2ef;color:#c36d5d}.ocb-finance-icon.profit{background:#f1f0fb;color:#635cb5}
#ocb-view-dashboard .ocb-finance-card .up{color:#268c68}.ocb-finance-card .down{color:#c36d5d}
#ocb-view-dashboard .ocb-dashboard-grid{grid-template-columns:minmax(0,1.8fr) minmax(280px,.72fr);gap:12px}
#ocb-view-dashboard .ocb-dashboard-duo{gap:12px}
#ocb-view-dashboard .ocb-dash-panel{border-radius:14px;box-shadow:0 5px 20px rgba(8,39,48,.035);border-color:#e4edef}
#ocb-view-dashboard .ocb-dash-panel:hover{box-shadow:0 8px 24px rgba(0,78,94,.055)}
#ocb-view-dashboard .ocb-panel-heading{padding:15px 17px 9px}.ocb-panel-heading h2{font-size:14px}.ocb-panel-heading p{font-size:8px}
#ocb-view-dashboard .ocb-performance-panel{min-height:345px}.ocb-performance-chart{height:255px;padding:5px 16px 15px}
#ocb-view-dashboard .ocb-chart-panel{min-height:260px}.ocb-small-chart{height:190px;padding:0 14px 14px}
#ocb-view-dashboard .ocb-pie-layout{grid-template-columns:125px 1fr;gap:8px;padding:4px 14px 14px}.ocb-pie-chart{height:165px}
#ocb-view-dashboard .ocb-expense-pie{height:140px;padding:4px 45px 0}
#ocb-view-dashboard .ocb-health-panel{padding-bottom:8px}
#ocb-view-dashboard .ocb-health-ring{width:128px;height:128px;margin:7px auto 10px}
#ocb-view-dashboard .ocb-health-ring strong{font-size:20px}
#ocb-view-dashboard .ocb-health-list{margin:0 16px}
#ocb-view-dashboard .ocb-health-list div{padding:8px 0}
#ocb-view-dashboard .ocb-breakdown-list{padding:0 16px 8px}
#ocb-view-dashboard .ocb-shortcut{width:calc(100% - 28px);margin:0 14px;padding:10px 2px}
#ocb-view-dashboard .ocb-shortcut:hover{background:#f7fbfc;border-radius:8px;padding-left:7px}
@media(max-width:1050px){#ocb-view-dashboard .ocb-dashboard-intro{align-items:flex-start;flex-direction:column}.ocb-dashboard-actions{width:100%}.ocb-dashboard-actions .ocb-btn{flex:1}.ocb-finance-cards{grid-template-columns:1fr 1fr!important}.ocb-dashboard-grid{grid-template-columns:1fr!important}}
@media(max-width:700px){#ocb-view-dashboard .ocb-dashboard-intro h1{font-size:28px}.ocb-dashboard-actions{display:grid;grid-template-columns:1fr}.ocb-dashboard-filter{align-items:flex-start!important;flex-direction:column}.ocb-period-pills{display:grid!important;grid-template-columns:1fr 1fr;width:100%}.ocb-period-pill{width:100%}.ocb-finance-cards{grid-template-columns:1fr 1fr!important}.ocb-finance-card:first-child{grid-column:1/-1}.ocb-dashboard-duo{grid-template-columns:1fr!important}.ocb-dashboard-rail{grid-template-columns:1fr!important}.ocb-table-wrap{overflow-x:auto}.ocb-tx-table{min-width:650px}}


/* ==========================================================================\n   OneCloud Business 1.6.3 — invoice workspace refinement\n   Keep the existing palette; improve hierarchy, density and interaction.\n   ========================================================================== */
.ocb-inv-list { max-width: 1480px; margin: 0 auto; }
.ocb-inv-list .ocb-page-header {
  margin-bottom: 20px;
  align-items: flex-end;
}
.ocb-inv-list .ocb-page-title-row { gap: 13px; }
.ocb-inv-list .ocb-page-title-row h1 {
  font-size: clamp(25px, 2.2vw, 32px);
  letter-spacing: -0.035em;
}
.ocb-inv-list .ocb-page-icon {
  width: 44px !important; height: 44px !important;
  border-radius: 13px !important;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,117,143,.10);
}
.ocb-inv-kpis {
  display: grid;
  grid-template-columns: minmax(190px,1.2fr) repeat(3,minmax(180px,1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.ocb-inv-kpis .ocb-kpi-card {
  min-height: 112px;
  padding: 17px 18px;
  border-radius: 15px;
  border: 1px solid rgba(0,117,143,.11);
  box-shadow: 0 8px 24px rgba(13,36,45,.045);
  position: relative;
  overflow: hidden;
}
.ocb-inv-kpis .ocb-kpi-card:first-child {
  background: linear-gradient(145deg, rgba(0,117,143,.075), rgba(255,255,255,.98) 70%);
}
.ocb-inv-kpis .ocb-kpi-card::after {
  content: ""; position:absolute; width:80px; height:80px; border-radius:50%;
  right:-42px; bottom:-42px; background:rgba(0,117,143,.055); pointer-events:none;
}
.ocb-inv-kpis .ocb-kpi-value { font-size: 25px; letter-spacing:-.035em; margin-top: 11px; }
.ocb-inv-kpis .ocb-kpi-label { font-size: 12px; font-weight: 650; }
.ocb-inv-kpis .ocb-kpi-footer { margin-top: 4px; }

.ocb-inv-list .ocb-status-tabs {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  gap: 6px;
  margin-bottom: 13px;
}
.ocb-inv-list .ocb-status-tab {
  background: var(--ocb-card);
  border: 1px solid var(--ocb-border);
  box-shadow: 0 4px 14px rgba(13,36,45,.035);
  min-height: 35px;
  padding: 7px 11px;
}
.ocb-inv-list .ocb-status-tab.is-active {
  box-shadow: 0 7px 18px rgba(0,117,143,.16);
}

.ocb-inv-toolbar {
  display:grid !important;
  grid-template-columns: minmax(240px,1.5fr) minmax(160px,.85fr) minmax(145px,.7fr) minmax(145px,.7fr) auto auto;
  align-items:center;
  padding: 9px;
  border: 1px solid var(--ocb-border);
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 24px rgba(13,36,45,.045);
  margin-bottom: 13px;
}
.ocb-inv-toolbar .ocb-search,
.ocb-inv-toolbar .ocb-input { max-width:none; width:100%; }
.ocb-inv-toolbar .ocb-search { min-height: 39px; }
.ocb-inv-toolbar > .ocb-input { min-height:39px; }
.ocb-inv-toolbar .ocb-btn { min-height:39px; white-space:nowrap; }

.ocb-inv-list > .ocb-card {
  border-radius: 16px !important;
  border: 1px solid var(--ocb-border);
  box-shadow: 0 12px 34px rgba(13,36,45,.055) !important;
  background: var(--ocb-card);
}
.ocb-inv-list #invoices-table { border-collapse: separate; border-spacing:0; }
.ocb-inv-list #invoices-table thead th {
  background: #f7fafb;
  color: #60717b;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .075em;
  font-weight: 700;
  padding: 13px 12px;
  border-bottom: 1px solid var(--ocb-border);
}
.ocb-inv-list #invoices-table tbody td {
  padding: 14px 12px;
  border-bottom: 1px solid rgba(13,36,45,.055);
  vertical-align: middle;
}
.ocb-inv-list #invoices-table tbody tr:last-child td { border-bottom:0; }
.ocb-inv-list #invoices-table tbody tr.ocb-row-clickable { cursor:pointer; transition: background .16s ease; }
.ocb-inv-list #invoices-table tbody tr.ocb-row-clickable:hover { background: rgba(0,117,143,.035); }
.ocb-inv-list .ocb-inv-number { font-size:13px; font-weight:750; }
.ocb-inv-list .ocb-cell-actions { width: 156px; }
.ocb-inv-list .ocb-inv-actions { opacity:1; gap:4px; }
.ocb-inv-list .ocb-inv-actions .ocb-icon-btn {
  width:31px; height:31px; border-radius:9px;
  background:#fff; border:1px solid rgba(13,36,45,.09);
  box-shadow:0 3px 9px rgba(13,36,45,.035);
}
.ocb-inv-list .ocb-inv-actions .ocb-icon-btn:hover {
  color: var(--ocb-blue);
  border-color: rgba(0,117,143,.24);
  background: rgba(0,117,143,.045);
  transform:translateY(-1px);
}
.ocb-inv-list .ocb-table-footer { background:#fbfcfd; border-radius:0 0 16px 16px; }

.ocb-inv-detail { max-width:1480px; margin:0 auto; }
.ocb-inv-detail-header {
  border:1px solid var(--ocb-border); border-radius:16px;
  padding:14px 16px; background:rgba(255,255,255,.92);
  box-shadow:0 8px 24px rgba(13,36,45,.045);
}
.ocb-inv-detail-title h1 { letter-spacing:-.035em; }
.ocb-inv-actions-bar .ocb-icon-btn { width:38px; height:38px; border-radius:10px; }

@media (max-width: 1100px) {
  .ocb-inv-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ocb-inv-toolbar { grid-template-columns:1fr 1fr; }
}
@media (max-width: 680px) {
  .ocb-inv-kpis { grid-template-columns:1fr; }
  .ocb-inv-toolbar { grid-template-columns:1fr; }
  .ocb-inv-list #invoices-table { min-width: 980px; }
  .ocb-inv-list .ocb-table-wrap { overflow-x:auto; }
}

/* Functional topbar messaging control */
#ocb-topbar-messages { position:relative; }
#ocb-topbar-messages.is-active,
#ocb-topbar-messages:hover { color:var(--ocb-blue); background:rgba(0,117,143,.07); }

/* OneCloud Business 1.7.0 — Invoice Studio */
.ocb-invoice-studio-modal .ocb-modal-dialog{width:min(1380px,96vw);max-width:1380px;height:min(900px,94vh);display:flex;flex-direction:column;border-radius:22px;overflow:hidden}
.ocb-invoice-studio-modal .ocb-modal-header{padding:16px 22px;border-bottom:1px solid var(--ocb-border);background:rgba(255,255,255,.96)}
.ocb-invoice-studio-modal .ocb-modal-body{padding:0;overflow:auto;background:#f6f8fa}
.ocb-invoice-studio-modal .ocb-modal-footer{padding:12px 22px;background:#fff;border-top:1px solid var(--ocb-border)}
.ocb-invoice-studio{min-height:100%;color:var(--ocb-text)}
.ocb-invoice-studio-head{display:flex;align-items:center;justify-content:space-between;padding:26px 30px;background:#fff;border-bottom:1px solid var(--ocb-border)}
.ocb-invoice-studio-kicker{font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--ocb-blue);display:block;margin-bottom:7px}
.ocb-invoice-studio-head h2{margin:0;font-size:25px;letter-spacing:-.03em}.ocb-invoice-studio-head p{margin:5px 0 0;color:var(--ocb-muted);font-size:13px}.ocb-invoice-studio-status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ocb-muted);padding:8px 12px;border:1px solid var(--ocb-border);border-radius:999px;background:#fff}
.ocb-invoice-studio-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(340px,.75fr);gap:20px;padding:22px 30px 30px}.ocb-invoice-editor{display:flex;flex-direction:column;gap:16px}.ocb-invoice-section{background:#fff;border:1px solid var(--ocb-border);border-radius:16px;padding:20px;box-shadow:0 8px 28px rgba(15,23,42,.035)}
.ocb-invoice-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.ocb-invoice-section-head>div{display:flex;gap:12px;align-items:center}.ocb-invoice-section-head>div>span{font-size:10px;font-weight:800;color:var(--ocb-blue);letter-spacing:.12em}.ocb-invoice-section-head h3{margin:0;font-size:15px}.ocb-invoice-section-head p{margin:3px 0 0;font-size:11px;color:var(--ocb-muted)}
.ocb-invoice-fields{margin:0}.ocb-invoice-customer-strip{margin-top:12px;padding:11px 13px;border:1px solid var(--ocb-border);border-radius:12px;background:#f8fafb;display:flex;align-items:center;gap:11px}.ocb-invoice-customer-avatar{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--ocb-blue-soft);color:var(--ocb-blue);font-weight:800}.ocb-invoice-customer-strip strong,.ocb-invoice-customer-strip small{display:block}.ocb-invoice-customer-strip small{font-size:11px;color:var(--ocb-muted);margin-top:2px}
.ocb-invoice-lines-wrap{overflow:auto;border:1px solid var(--ocb-border);border-radius:12px}.ocb-invoice-lines-head,.ocb-studio-line{display:grid;grid-template-columns:minmax(180px,2fr) 70px 100px 105px 95px 105px 38px;gap:8px;align-items:center}.ocb-invoice-lines-head{padding:9px 10px;background:#f7f9fa;color:var(--ocb-muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;min-width:760px}.ocb-studio-line{padding:9px 10px;border-top:1px solid var(--ocb-border);min-width:760px}.ocb-studio-line .ocb-input{height:38px;padding:0 9px;font-size:12px}.ocb-input-wrap{position:relative}.ocb-input-wrap .ocb-input{padding-right:25px}.ocb-input-wrap span{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--ocb-muted)}.ocb-studio-line .line-amount{text-align:right;font-size:12px}.ocb-invoice-add-row{display:flex;gap:16px;margin-top:12px}.ocb-link-btn{border:0;background:none;color:var(--ocb-blue);font-size:12px;font-weight:700;padding:3px;cursor:pointer}.ocb-link-btn:hover{text-decoration:underline}
.ocb-invoice-preview-column{position:sticky;top:0;align-self:start;display:flex;flex-direction:column;gap:12px}.ocb-invoice-preview-card{background:#fff;border:1px solid var(--ocb-border);border-radius:16px;padding:16px;box-shadow:0 8px 28px rgba(15,23,42,.05)}.ocb-invoice-preview-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}.ocb-invoice-preview-head span:first-child{font-size:9px;letter-spacing:.14em;font-weight:800;color:var(--ocb-blue)}.ocb-invoice-preview-head strong{display:block;font-size:15px;margin-top:3px}.ocb-invoice-preview-head>span:last-child{font-size:10px;font-weight:800;color:var(--ocb-muted);background:#f1f4f5;padding:5px 7px;border-radius:6px}.ocb-invoice-paper{background:#fff;border:1px solid #e7ebee;border-radius:10px;padding:18px;box-shadow:0 12px 25px rgba(15,23,42,.06);font-size:10px}.ocb-preview-brand{display:flex;gap:8px;align-items:center;padding-bottom:14px;border-bottom:1px solid #edf0f2}.ocb-preview-logo{width:30px;height:30px;border-radius:8px;background:var(--ocb-blue);color:#fff;display:grid;place-items:center;font-size:9px;font-weight:900}.ocb-preview-brand strong,.ocb-preview-brand small{display:block}.ocb-preview-brand strong{font-size:9px}.ocb-preview-brand small{color:#87939a;font-size:8px;margin-top:2px}.ocb-preview-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 0}.ocb-preview-meta small{display:block;color:#87939a;font-size:7px;letter-spacing:.08em;font-weight:800;margin-bottom:4px}.ocb-preview-meta strong,.ocb-preview-meta span{display:block;font-size:9px}.ocb-preview-meta span{color:#87939a;margin-top:2px}.ocb-preview-lines{border-top:1px solid #edf0f2}.ocb-preview-line{display:grid;grid-template-columns:1fr auto;gap:4px;padding:7px 0;border-bottom:1px solid #f0f2f4}.ocb-preview-line span{font-weight:700}.ocb-preview-line small{grid-column:1;color:#87939a}.ocb-preview-line strong{grid-column:2;grid-row:1/3;align-self:center}.ocb-preview-empty{padding:18px 0;color:#9aa5ab;text-align:center}.ocb-preview-totals{margin-top:10px}.ocb-preview-totals>div{display:flex;justify-content:space-between;padding:4px 0;color:#64717a}.ocb-preview-totals strong{color:#17242b}.ocb-preview-totals .grand{margin-top:6px;padding-top:9px;border-top:1px solid #dfe5e8;color:#17242b;font-size:12px}.ocb-preview-note{margin-top:12px;padding:9px;background:#f6f8f9;border-radius:7px;color:#76828a;line-height:1.5}.ocb-invoice-total-card{background:#0e1e25;color:#fff;border-radius:14px;padding:16px 18px}.ocb-invoice-total-card span,.ocb-invoice-total-card small{display:block;color:#9fb0b7;font-size:10px}.ocb-invoice-total-card strong{display:block;font-size:25px;letter-spacing:-.03em;margin:4px 0}.ocb-invoice-save-send{width:100%;justify-content:center;height:46px}.ocb-invoice-save-send span{margin-left:6px}
@media(max-width:1050px){.ocb-invoice-studio-layout{grid-template-columns:1fr}.ocb-invoice-preview-column{position:static}.ocb-invoice-studio-modal .ocb-modal-dialog{width:98vw;height:96vh}}
@media(max-width:700px){.ocb-invoice-studio-head{padding:20px;align-items:flex-start;gap:10px;flex-direction:column}.ocb-invoice-studio-layout{padding:14px}.ocb-invoice-section{padding:15px}.ocb-invoice-lines-head,.ocb-studio-line{min-width:760px}.ocb-invoice-studio-modal .ocb-modal-dialog{border-radius:14px}}

/* OneCloud Business 1.8.0 — Invoice Command UI */
.ocb-invoice-command-modal .ocb-modal-dialog{width:min(1480px,97vw);height:min(940px,96vh);max-width:1480px;border-radius:18px;overflow:hidden}
.ocb-invoice-command-modal .ocb-modal-header{display:none}.ocb-invoice-command-modal .ocb-modal-body{padding:0;background:var(--ocb-bg,#f5f7f9);overflow:auto}.ocb-invoice-command-modal .ocb-modal-footer{display:none}
.ocb-invoice-command{min-height:100%;color:var(--ocb-text)}
.ocb-invoice-command-top{height:76px;background:#fff;border-bottom:1px solid var(--ocb-border);display:flex;align-items:center;justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:10}
.ocb-command-kicker{font-size:9px;font-weight:800;letter-spacing:.18em;color:var(--ocb-blue);display:block}.ocb-invoice-command-title h2{margin:3px 0 0;font-size:22px;letter-spacing:-.03em}.ocb-command-status{margin-left:12px;font-size:11px;color:var(--ocb-muted)}.ocb-command-status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#a7b0b7;margin-right:5px}.ocb-command-top-actions{display:flex;gap:8px}
.ocb-invoice-command-body{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:18px;padding:18px 22px 26px;max-width:1500px;margin:auto}.ocb-invoice-command-main{min-width:0}.ocb-invoice-stepbar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ocb-border);border:1px solid var(--ocb-border);border-radius:12px;overflow:hidden;margin-bottom:14px}.ocb-invoice-stepbar button{border:0;background:#fff;padding:11px 14px;display:flex;align-items:center;gap:9px;color:var(--ocb-muted);cursor:pointer;text-align:left}.ocb-invoice-stepbar button b{font-size:10px}.ocb-invoice-stepbar button span{font-size:12px;font-weight:700}.ocb-invoice-stepbar button.is-active{background:var(--ocb-blue-soft,#e8f5f8);color:var(--ocb-blue)}
.ocb-command-card{background:#fff;border:1px solid var(--ocb-border);border-radius:14px;margin-bottom:14px;box-shadow:0 4px 18px rgba(15,23,42,.025);padding:20px}.ocb-inv-step-panel{display:none}.ocb-inv-step-panel.is-active{display:block}.ocb-command-card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.ocb-command-card-head>div:first-child{display:flex;align-items:center;gap:12px}.ocb-command-number{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--ocb-blue-soft,#e8f5f8);color:var(--ocb-blue);font-size:10px;font-weight:800}.ocb-command-card h3{margin:0;font-size:15px}.ocb-command-card p{margin:3px 0 0;color:var(--ocb-muted);font-size:11px}.ocb-command-hint{font-size:10px;color:var(--ocb-muted);border:1px solid var(--ocb-border);padding:5px 8px;border-radius:999px}.ocb-command-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ocb-command-customer{margin-top:14px;display:flex;gap:11px;align-items:center;padding:11px 13px;border:1px solid var(--ocb-border);border-radius:10px;background:#fafcfd}.ocb-command-avatar{width:34px;height:34px;border-radius:9px;background:var(--ocb-blue-soft,#e8f5f8);color:var(--ocb-blue);display:grid;place-items:center;font-weight:800}.ocb-command-customer strong{display:block;font-size:12px}.ocb-command-customer small{display:block;color:var(--ocb-muted);font-size:10px;margin-top:2px}
.ocb-command-lines{border:1px solid var(--ocb-border);border-radius:11px;overflow:auto}.ocb-command-lines-head,.ocb-command-line{display:grid;grid-template-columns:minmax(220px,2fr) 70px 110px 105px 95px 120px 36px;gap:8px;align-items:center;min-width:790px}.ocb-command-lines-head{padding:10px 11px;background:#f8fafb;color:var(--ocb-muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.ocb-command-line{padding:9px 11px;border-top:1px solid var(--ocb-border)}.ocb-command-line .ocb-input{height:37px;font-size:11px}.ocb-command-line .line-amount{text-align:right;font-size:11px}.ocb-command-percent{position:relative}.ocb-command-percent .ocb-input{padding-right:24px}.ocb-command-percent span{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:9px;color:var(--ocb-muted)}.ocb-command-addline{display:flex;gap:16px;margin-top:10px}.ocb-command-addline button{border:0;background:none;color:var(--ocb-blue);font-size:11px;font-weight:700;cursor:pointer}.ocb-commercial-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.ocb-commercial-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.ocb-check-card{display:flex;gap:10px;padding:12px;border:1px solid var(--ocb-border);border-radius:10px;cursor:pointer}.ocb-check-card b,.ocb-check-card small{display:block}.ocb-check-card b{font-size:11px}.ocb-check-card small{font-size:10px;color:var(--ocb-muted);margin-top:2px}.ocb-check-card input{accent-color:var(--ocb-blue)}
.ocb-review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;border:1px solid var(--ocb-border);border-radius:10px;overflow:hidden}.ocb-review-grid>div{padding:13px;background:#fafcfd;border-bottom:1px solid var(--ocb-border)}.ocb-review-grid small{display:block;color:var(--ocb-muted);font-size:9px;text-transform:uppercase;font-weight:800;letter-spacing:.06em}.ocb-review-grid strong{display:block;font-size:12px;margin-top:5px}
.ocb-invoice-command-side{min-width:0}.ocb-command-preview{background:#e9eef1;border:1px solid var(--ocb-border);border-radius:14px;padding:13px;position:sticky;top:94px}.ocb-command-preview-head{display:flex;justify-content:space-between;align-items:flex-start;padding:3px 4px 11px}.ocb-command-preview-head span{font-size:9px;color:var(--ocb-muted);font-weight:800}.ocb-command-preview-head strong{display:block;font-size:13px;margin-top:2px}.ocb-command-preview-head>span:last-child{padding:5px 8px;border-radius:6px;background:#fff;border:1px solid var(--ocb-border)}.ocb-command-paper{background:#fff;border:1px solid #e1e6e8;border-radius:7px;min-height:500px;padding:24px 22px;box-shadow:0 12px 28px rgba(15,23,42,.08)}.ocb-command-paper-brand{display:flex;gap:9px;align-items:center;border-bottom:1px solid #edf0f1;padding-bottom:16px}.ocb-command-paper-logo{width:30px;height:30px;border-radius:7px;background:var(--ocb-blue);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:800}.ocb-command-paper-brand b{font-size:10px;letter-spacing:.06em}.ocb-command-paper-brand small{display:block;color:#87939a;font-size:8px;margin-top:2px}.ocb-command-paper-meta{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;padding:18px 0;border-bottom:1px solid #edf0f1}.ocb-command-paper-meta small{display:block;color:#9aa4aa;font-size:8px;font-weight:800}.ocb-command-paper-meta strong{display:block;font-size:11px;margin-top:5px}.ocb-command-paper-meta span{display:block;color:#87939a;font-size:8px;margin-top:2px}.ocb-command-paper-lines{padding:13px 0;min-height:130px}.ocb-command-paper-line{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:7px 0;border-bottom:1px solid #f1f3f4;align-items:center}.ocb-command-paper-line span{font-size:9px}.ocb-command-paper-line small{font-size:8px;color:#8c979c}.ocb-command-paper-line b{font-size:9px;text-align:right}.ocb-command-empty{font-size:9px;color:#a0aaaf;padding:35px 0;text-align:center}.ocb-command-paper-totals{border-top:1px solid #edf0f1;padding-top:10px}.ocb-command-paper-totals>div{display:flex;justify-content:space-between;padding:4px 0}.ocb-command-paper-totals span,.ocb-command-paper-totals b{font-size:9px}.ocb-command-paper-totals .total{margin-top:6px;padding-top:9px;border-top:1px solid #edf0f1}.ocb-command-paper-totals .total span,.ocb-command-paper-totals .total b{font-size:13px}.ocb-command-paper-note{margin-top:16px;padding:10px;background:#f7f9fa;border-radius:7px;color:#7e898f;font-size:8px;line-height:1.5}.ocb-command-total{margin-top:12px;background:#fff;border:1px solid var(--ocb-border);border-radius:12px;padding:14px}.ocb-command-total span,.ocb-command-total small{display:block;color:var(--ocb-muted);font-size:10px}.ocb-command-total strong{display:block;font-size:23px;letter-spacing:-.03em;margin:4px 0}.ocb-command-side-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}.ocb-command-side-actions .ocb-btn{width:100%}
@media(max-width:1050px){.ocb-invoice-command-body{grid-template-columns:1fr}.ocb-invoice-command-side{display:none}.ocb-invoice-command.show-preview .ocb-invoice-command-side{display:block}.ocb-invoice-command.show-preview .ocb-invoice-command-main{display:none}.ocb-command-preview{position:static}.ocb-invoice-command-modal .ocb-modal-dialog{width:98vw;height:96vh}}
@media(max-width:700px){.ocb-invoice-command-top{height:auto;padding:14px;align-items:flex-start;gap:12px;flex-direction:column}.ocb-command-top-actions{width:100%}.ocb-command-top-actions .ocb-btn{flex:1}.ocb-invoice-command-body{padding:12px}.ocb-command-grid,.ocb-commercial-grid,.ocb-commercial-options,.ocb-review-grid{grid-template-columns:1fr}.ocb-invoice-stepbar button{padding:10px 7px}.ocb-invoice-stepbar button span{display:none}}

/* OneCloud Business 1.8.1 — premium invoice template selector */
.ocb-invoice-template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.ocb-invoice-template-option{position:relative;display:block;cursor:pointer;border:1px solid var(--ocb-border);border-radius:16px;background:#fff;padding:12px;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.ocb-invoice-template-option:hover{transform:translateY(-2px);border-color:rgba(0,117,143,.28);box-shadow:0 12px 28px rgba(13,36,45,.07)}
.ocb-invoice-template-option input{position:absolute;opacity:0;pointer-events:none}
.ocb-invoice-template-option.is-selected{border-color:var(--ocb-blue);box-shadow:0 0 0 2px rgba(0,117,143,.10),0 14px 32px rgba(13,36,45,.08)}
.ocb-template-check{position:absolute;right:20px;top:20px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid #dbe3e7;color:transparent;font-size:12px;font-weight:900;z-index:2;box-shadow:0 3px 8px rgba(0,0,0,.06)}
.ocb-invoice-template-option.is-selected .ocb-template-check{background:var(--ocb-blue);border-color:var(--ocb-blue);color:#fff}
.ocb-template-preview{height:245px;border:1px solid #e3e8eb;border-radius:11px;padding:22px;position:relative;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.ocb-template-preview .tp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;color:#17252e;font-size:8px}
.ocb-template-preview .tp-head b{font-size:9px;letter-spacing:.04em}.ocb-template-preview .tp-head strong{font-size:18px;letter-spacing:.09em}.ocb-template-preview .tp-rule{height:3px;background:var(--ocb-blue);margin:13px 0 14px}.ocb-template-preview .tp-party{height:28px;width:58%;background:#f0f4f5;border-left:3px solid var(--ocb-blue);margin:12px 0}.ocb-template-preview .tp-table{border-radius:5px;overflow:hidden;border:1px solid #e5eaec}.ocb-template-preview .tp-table i{display:block;height:17px;border-bottom:1px solid #edf0f1;background:#fff}.ocb-template-preview .tp-table i:first-child{height:23px;background:#17252e;border-bottom:0}.ocb-template-preview .tp-table i:nth-child(3){background:#fbfcfc}.ocb-template-preview .tp-total{position:absolute;right:22px;bottom:23px;width:34%;height:45px;border:1px solid #e0e6e8;border-radius:5px;background:linear-gradient(to bottom,#fff 0 55%,var(--ocb-blue) 55% 100%)}
.ocb-tp-editorial{padding:25px 26px}.ocb-tp-editorial .tp-head{border-bottom:1px solid #17252e;padding-bottom:17px}.ocb-tp-editorial .tp-head strong{font-size:23px;line-height:.92;text-align:right}.ocb-tp-editorial .tp-party{border-left:0;border-top:2px solid var(--ocb-blue);background:#fff;height:25px;margin-top:17px}.ocb-tp-editorial .tp-table{border:0;border-radius:0;border-top:2px solid var(--ocb-blue)}.ocb-tp-editorial .tp-table i:first-child{background:#fff;border-bottom:1px solid #17252e}.ocb-tp-editorial .tp-total{background:linear-gradient(to bottom,#fff 0 60%,#17252e 60% 100%);border:0;border-top:1px solid #17252e;border-radius:0}
.ocb-tp-modern{padding-left:27px}.ocb-tp-modern:before{content:"";position:absolute;left:0;top:0;width:7px;height:100%;background:var(--ocb-blue)}.ocb-tp-modern .tp-head strong{background:var(--ocb-blue);color:#fff;padding:9px 11px;border-radius:6px;font-size:14px}.ocb-tp-modern .tp-accent{height:1px;background:#dce4e7;margin:17px 0}.ocb-tp-modern .tp-party{background:#fff;border:1px solid #e0e6e8;border-left:3px solid var(--ocb-blue);height:31px}.ocb-tp-modern .tp-total{border-color:var(--ocb-blue)}
.ocb-tp-minimal{padding:29px 30px}.ocb-tp-minimal .tp-head{border-bottom:1px solid #d9e0e3;padding-bottom:18px}.ocb-tp-minimal .tp-head strong{font-size:16px;letter-spacing:.15em}.ocb-tp-minimal .tp-party{border:0;border-bottom:1px solid #dfe5e8;background:#fff;height:27px;margin-top:18px}.ocb-tp-minimal .tp-table{border:0;border-radius:0;border-top:1px solid #17252e}.ocb-tp-minimal .tp-table i:first-child{background:#fff;border-bottom:1px solid #17252e}.ocb-tp-minimal .tp-total{border:0;border-top:1px solid #17252e;border-radius:0;background:linear-gradient(to bottom,#fff 0 58%,#17252e 58% 100%)}
.ocb-template-copy{padding:13px 4px 3px}.ocb-template-copy>div{display:flex;align-items:center;gap:8px}.ocb-template-copy strong{font-size:14px}.ocb-template-copy span{font-size:10px;color:var(--ocb-muted);padding:4px 7px;border:1px solid var(--ocb-border);border-radius:999px}.ocb-template-copy small{display:block;color:var(--ocb-muted);font-size:11px;line-height:1.45;margin-top:7px;padding-right:28px}.ocb-invoice-design-bar{margin-top:20px;padding:14px 16px;border:1px solid var(--ocb-border);border-radius:12px;background:#f8fafb;display:flex;align-items:center;justify-content:space-between;gap:15px}.ocb-invoice-design-bar b,.ocb-invoice-design-bar span{display:block}.ocb-invoice-design-bar b{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ocb-muted)}.ocb-invoice-design-bar span{font-size:13px;font-weight:750;margin-top:3px}
@media(max-width:800px){.ocb-invoice-template-grid{grid-template-columns:1fr}.ocb-invoice-design-bar{align-items:flex-start;flex-direction:column}.ocb-invoice-design-bar .ocb-btn{width:100%}}

/* ==========================================================================
   Zoho-style Invoice Workspace (full page create/edit)
   ========================================================================== */
.ocb-inv-editor {
  width: 100%;
  max-width: none;
}
.ocb-zoho-inv-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ocb-border, #e5e9ef);
}
.ocb-zoho-inv-top-left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ocb-zoho-inv-top-left h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.ocb-zoho-inv-top-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ocb-zoho-inv-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
  gap: 20px;
  align-items: start;
  width: 100%;
}
.ocb-zoho-inv-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.ocb-zoho-card {
  background: #fff;
  border: 1px solid #e5e9ef;
  border-radius: 10px;
  padding: 18px 18px 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.ocb-zoho-card h3 {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
.ocb-zoho-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.ocb-zoho-card-head h3 { margin: 0; }
.ocb-zoho-customer-card {
  margin-top: 12px;
  padding: 12px 14px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px dashed #e2e8f0;
  font-size: 13px;
  line-height: 1.45;
}
.ocb-zoho-lines-wrap { overflow-x: auto; }
.ocb-zoho-lines input.ocb-input {
  width: 100%;
  min-width: 0;
  font-size: 12.5px;
  padding: 6px 8px;
  height: 34px;
}
.ocb-zoho-lines td { vertical-align: middle; }
.ocb-zoho-totals-row {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 280px);
  gap: 20px;
  align-items: start;
}
.ocb-zoho-totals {
  background: #f8fafc;
  border: 1px solid #e5e9ef;
  border-radius: 8px;
  padding: 12px 14px;
}
.ocb-zoho-total-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 6px 0;
  color: #64748b;
}
.ocb-zoho-total-line strong { color: #0f172a; font-weight: 600; }
.ocb-zoho-total-line.is-grand {
  border-top: 1px solid #e2e8f0;
  margin-top: 6px;
  padding-top: 10px;
  font-size: 15px;
  color: #0f172a;
}
.ocb-zoho-total-line.is-grand strong { color: #00758F; font-size: 16px; }

.ocb-zoho-inv-preview { position: sticky; top: 72px; }
.ocb-zoho-preview-card {
  background: #eef2f6;
  border-radius: 12px;
  padding: 14px;
  border: 1px solid #e2e8f0;
}
.ocb-zoho-preview-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 10px;
}
.ocb-zoho-preview-doc {
  background: #fff;
  border-radius: 8px;
  padding: 20px 18px;
  box-shadow: 0 8px 24px rgba(15,23,42,.08);
  font-size: 12px;
  color: #0f172a;
}
.ze-pv-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid #00758F;
  padding-bottom: 12px;
  margin-bottom: 14px;
}
.ze-pv-head span { font-weight: 700; letter-spacing: .04em; color: #00758F; }
.ze-pv-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  line-height: 1.5;
}
.ze-pv-right { text-align: right; }
.ze-pv-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.ze-pv-table th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
  padding: 6px 4px;
}
.ze-pv-table td { padding: 7px 4px; border-bottom: 1px solid #f1f5f9; }
.ze-pv-totals { margin-top: 8px; }
.ze-pv-totals > div {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  color: #64748b;
}
.ze-pv-totals .is-grand {
  font-weight: 700;
  color: #0f172a;
  border-top: 1px solid #e2e8f0;
  margin-top: 4px;
  padding-top: 8px;
}
@media (max-width: 1100px) {
  .ocb-zoho-inv-layout { grid-template-columns: 1fr; }
  .ocb-zoho-inv-preview { position: static; }
  .ocb-zoho-totals-row { grid-template-columns: 1fr; }
}

/* Invoice row actions — always clickable */
#invoices-table .ocb-cell-actions,
#invoices-table .ocb-inv-actions,
#invoices-table .js-inv-view,
#invoices-table .js-inv-edit,
#invoices-table .js-inv-pdf,
#invoices-table .js-inv-email,
#invoices-table .js-inv-more {
  pointer-events: auto !important;
  position: relative;
  z-index: 3;
}
#invoices-table .ocb-icon-btn {
  cursor: pointer !important;
  opacity: 1 !important;
}
#invoices-table .ocb-inv-actions {
  opacity: 1 !important;
  display: inline-flex !important;
  gap: 4px;
}
.ocb-inv-detail { display: none; }
.ocb-inv-detail.is-open { display: block !important; }
.ocb-inv-list.is-hidden { display: none !important; }

/* ==========================================================================
   Zoho-style invoice document (on-screen detail)
   ========================================================================== */
.zoho-invoice-doc {
  font-size: 13px;
  color: #1e293b;
  line-height: 1.45;
}
.zoho-top {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.zoho-title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #0f172a;
  line-height: 1.1;
}
.zoho-inv-id {
  margin-top: 8px;
  font-size: 13px;
  color: #64748b;
}
.zoho-balance-label {
  margin-top: 18px;
  font-size: 12px;
  color: #64748b;
}
.zoho-balance-value {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
}
.zoho-top-right {
  text-align: right;
  max-width: 280px;
}
.zoho-logo {
  max-height: 64px;
  max-width: 140px;
  object-fit: contain;
  margin-bottom: 10px;
  border-radius: 8px;
}
.zoho-logo-fallback {
  width: 56px;
  height: 56px;
  margin-left: auto;
  margin-bottom: 10px;
  border-radius: 12px;
  background: #00758F;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
}
.zoho-company-name {
  font-weight: 600;
  color: #00758F;
  font-size: 14px;
}
.zoho-company-meta {
  font-size: 11.5px;
  color: #64748b;
  margin-top: 4px;
  line-height: 1.4;
}
.zoho-status-stamp {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #475569;
}
.zoho-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 22px;
}
.zoho-meta-line {
  margin-bottom: 6px;
  color: #64748b;
  font-size: 12.5px;
}
.zoho-meta-line strong { color: #0f172a; font-weight: 600; }
.zoho-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  margin-bottom: 4px;
  font-weight: 600;
}
.zoho-bill-name {
  font-weight: 600;
  font-size: 14px;
  color: #0f172a;
}
.zoho-muted { color: #64748b; font-size: 12.5px; margin-top: 2px; }
.zoho-items {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
.zoho-items thead th {
  background: #00758F;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  padding: 10px 12px;
  text-align: left;
  border: none;
}
.zoho-items thead th.num { text-align: right; }
.zoho-items tbody td {
  padding: 12px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 13px;
  vertical-align: top;
}
.zoho-items tbody td.num,
.zoho-items tbody td.zoho-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.zoho-items tbody td.zoho-num { text-align: left; color: #64748b; }
.zoho-bottom {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 28px;
  align-items: start;
}
.zoho-section { margin-bottom: 16px; font-size: 12.5px; color: #475569; }
.zoho-terms { font-size: 11.5px; line-height: 1.5; color: #64748b; }
.zoho-bank { margin-bottom: 16px; font-size: 12.5px; color: #334155; line-height: 1.5; }
.zoho-totals {
  border-top: 1px solid #e2e8f0;
  padding-top: 8px;
}
.zoho-total-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  font-size: 13px;
  color: #64748b;
}
.zoho-total-row span:last-child { color: #0f172a; font-weight: 600; font-variant-numeric: tabular-nums; }
.zoho-total-row.zoho-grand {
  border-top: 1px solid #e2e8f0;
  margin-top: 4px;
  padding-top: 10px;
  font-size: 14px;
  color: #0f172a;
}
.zoho-total-row.zoho-due span:last-child { color: #0f172a; font-size: 15px; }
.zoho-paid { color: #047857 !important; }
.ocb-inv-document {
  max-width: none !important;
  width: 100%;
  padding: 32px 36px;
}
@media (max-width: 800px) {
  .zoho-top, .zoho-meta-row, .zoho-bottom { grid-template-columns: 1fr; display: flex; flex-direction: column; }
  .zoho-top-right { text-align: left; }
  .zoho-logo-fallback { margin-left: 0; }
}

/* ==========================================================================
   v1.9.10 — Module display hardening
   Ensures every module uses the same sizing, icon, table and responsive rules.
   ========================================================================== */
.ocb-app .ocb-view { width: 100%; min-width: 0; }
.ocb-app .ocb-view[style*="display:none"] { display: none !important; }
.ocb-app .ocb-page-header,
.ocb-app .ocb-page-actions,
.ocb-app .ocb-toolbar { min-width: 0; }
.ocb-app .ocb-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ocb-app .ocb-page-title-row { min-width: 0; }
.ocb-app .ocb-page-title-row > div { min-width: 0; }
.ocb-app .ocb-page-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ocb-app svg { max-width: 100%; }
.ocb-app .ocb-icon,
.ocb-app .ocb-icon svg,
.ocb-app .ocb-page-icon svg,
.ocb-app .ocb-btn svg,
.ocb-app .ocb-icon-btn svg,
.ocb-app .ocb-profile-action svg {
    flex: 0 0 auto;
}
.ocb-app .ocb-nav-item .ocb-icon svg,
.ocb-app .ocb-support-card svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
}
.ocb-app .ocb-table-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}
.ocb-app .ocb-table { min-width: 720px; }
.ocb-app .ocb-table td,
.ocb-app .ocb-table th { white-space: nowrap; }
.ocb-app .ocb-table td:first-child { white-space: normal; }
.ocb-app .ocb-num { text-align: right; font-variant-numeric: tabular-nums; }
.ocb-app .ocb-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.ocb-app .ocb-toolbar .ocb-search { flex: 1 1 280px; max-width: 420px; }
.ocb-app .ocb-toolbar > .ocb-input { flex: 0 1 200px; width: auto; min-width: 160px; }
.ocb-app .ocb-card { overflow: visible; }
.ocb-app .ocb-card[style*="overflow:hidden"] { overflow: hidden !important; }
.ocb-app .ocb-row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; }
.ocb-app .ocb-icon-btn { flex: 0 0 auto; }
.ocb-app .ocb-loading { min-height: 52px; align-items: center; justify-content: center; }
.ocb-app .ocb-empty-state { width: 100%; }
.ocb-app .ocb-chart-wrap canvas,
.ocb-app .ocb-revenue-chart canvas,
.ocb-app .ocb-expense-pie canvas { display: block; max-width: 100%; }
.ocb-app .ocb-form-grid { min-width: 0; }
.ocb-app input[type="date"].ocb-input,
.ocb-app input[type="number"].ocb-input,
.ocb-app input[type="email"].ocb-input { min-width: 0; }
.ocb-app button,
.ocb-app input,
.ocb-app select,
.ocb-app textarea { font-family: inherit; }
.ocb-app .ocb-btn { justify-content: center; }
.ocb-app .ocb-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; }

@media (max-width: 900px) {
    .ocb-app .ocb-content { width: 100%; }
    .ocb-app .ocb-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ocb-app .ocb-dash-bottom,
    .ocb-app .ocb-chart-grid,
    .ocb-app .ocb-two-col { grid-template-columns: minmax(0, 1fr); }
    .ocb-app .ocb-chat-layout { grid-template-columns: 1fr !important; }
    .ocb-app .ocb-chat-layout > aside { display: none !important; }
}
@media (max-width: 640px) {
    .ocb-app .ocb-kpi-grid,
    .ocb-app .ocb-stats-grid { grid-template-columns: 1fr; }
    .ocb-app .ocb-page-header { margin-top: 12px; }
    .ocb-app .ocb-page-actions,
    .ocb-app .ocb-page-actions .ocb-btn { width: 100%; }
    .ocb-app .ocb-page-actions .ocb-btn { min-height: 42px; }
    .ocb-app .ocb-toolbar > .ocb-input,
    .ocb-app .ocb-toolbar .ocb-search { flex: 1 1 100%; width: 100%; max-width: none; }
    .ocb-app .ocb-user-role { display: none; }
}

/* ========== Zoho-style invoice detail toolbar ========== */
.ocb-zoho-inv-toolbar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-start; /* left → right */
  width: 100%;
  margin-top: 12px;
}
.ocb-inv-detail-header {
  flex-direction: column;
  align-items: stretch;
}
.ocb-inv-detail-header > div:first-child {
  width: 100%;
}
.ocb-zoho-inv-toolbar .ocb-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
}
.ocb-zoho-inv-toolbar .ocb-dropdown-menu {
  min-width: 180px;
  z-index: 80;
}
.ocb-inv-detail-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ocb-border, #e5e9f0);
}
.ocb-inv-detail-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ocb-inv-detail-title h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Zoho invoice document paper */
.zoho-doc {
  background: #fff;
  border: 1px solid #e8edf2;
  border-radius: 12px;
  padding: 32px 36px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.04);
  max-width: 900px;
  margin: 0 auto;
}
.zoho-top {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.zoho-logo {
  max-height: 52px;
  max-width: 180px;
  object-fit: contain;
}
.zoho-logo-fallback {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--ocb-blue, #00758f);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
}
.zoho-company-name {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin-top: 8px;
}
.zoho-company-meta {
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
  line-height: 1.45;
}
.zoho-doc-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ocb-blue, #00758f);
  text-align: right;
}
.zoho-balance-box {
  margin-top: 10px;
  background: #f0f9fb;
  border: 1px solid #cce7ee;
  border-radius: 10px;
  padding: 12px 14px;
  text-align: right;
}
.zoho-balance-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.zoho-balance-value {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin-top: 2px;
}
.zoho-meta-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.zoho-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  margin-bottom: 4px;
}
.zoho-lines {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 13px;
}
.zoho-lines th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  border-bottom: 2px solid #e2e8f0;
  padding: 8px 10px;
  background: #f8fafc;
}
.zoho-lines td {
  padding: 10px;
  border-bottom: 1px solid #f1f5f9;
  color: #0f172a;
  vertical-align: top;
}
.zoho-lines .num { text-align: right; font-variant-numeric: tabular-nums; }
.zoho-bottom {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 24px;
  margin-top: 8px;
}
.zoho-totals {
  background: #f8fafc;
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid #eef2f6;
}
.zoho-total-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 6px 0;
  color: #334155;
}
.zoho-total-row.zoho-grand {
  border-top: 1px solid #e2e8f0;
  margin-top: 6px;
  padding-top: 10px;
  font-weight: 700;
  font-size: 15px;
  color: #0f172a;
}
.zoho-total-row.zoho-due {
  color: var(--ocb-blue, #00758f);
  font-weight: 700;
}
.zoho-paid { color: #0a7a3e; }
.zoho-section { margin-bottom: 14px; font-size: 13px; color: #475569; line-height: 1.5; }
.zoho-terms { white-space: pre-wrap; }
@media (max-width: 720px) {
  .zoho-doc { padding: 20px 16px; }
  .zoho-top, .zoho-meta-grid, .zoho-bottom { grid-template-columns: 1fr; display: grid; }
  .zoho-doc-title, .zoho-balance-box { text-align: left; }
  .ocb-zoho-inv-toolbar { justify-content: flex-start; }
}

/* ========== Company switcher (top bar) ========== */
.ocb-company-switcher {
  position: relative;
  margin-right: 4px;
}
.ocb-company-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 240px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--ocb-border, #e5e9f0);
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.ocb-company-switcher-btn:hover,
.ocb-company-switcher.is-open .ocb-company-switcher-btn {
  border-color: var(--ocb-blue, #00758f);
  box-shadow: 0 0 0 3px rgba(0, 117, 143, 0.1);
}
.ocb-company-switcher-label {
  display: inline-flex;
  color: var(--ocb-blue, #00758f);
}
.ocb-company-switcher-label svg { width: 16px; height: 16px; }
.ocb-company-switcher-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ocb-company-switcher-caret {
  font-size: 10px;
  opacity: 0.55;
  margin-left: 2px;
}
.ocb-company-switcher-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 260px;
  max-width: 320px;
  background: #fff;
  border: 1px solid var(--ocb-border, #e5e9f0);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  z-index: 200;
  padding: 8px;
}
.ocb-company-switcher-menu-head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  padding: 6px 10px 8px;
}
.ocb-company-switcher-list {
  display: grid;
  gap: 2px;
  max-height: 240px;
  overflow: auto;
}
.ocb-company-switcher-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #0f172a;
  cursor: pointer;
}
.ocb-company-switcher-item:hover { background: #f1f5f9; }
.ocb-company-switcher-item.is-current {
  background: rgba(0, 117, 143, 0.08);
  color: var(--ocb-blue, #00758f);
  font-weight: 600;
}
.ocb-company-switcher-item em {
  font-style: normal;
  font-size: 11px;
  opacity: 0.75;
}
.ocb-company-switcher-create {
  display: block;
  margin-top: 6px;
  padding: 10px 12px;
  border-top: 1px solid #eef2f6;
  font-size: 13px;
  font-weight: 600;
  color: var(--ocb-blue, #00758f);
  text-decoration: none;
}
.ocb-company-switcher-create:hover { background: #f8fafc; border-radius: 0 0 10px 10px; }
@media (max-width: 720px) {
  .ocb-company-switcher-name { max-width: 110px; }
}

/* Live payslip PAYE/UIF/net preview (New Payslip modal) */
.ocb-payslip-preview {
    background: var(--ocb-blue-soft, #eef6f8);
    border: 1px solid rgba(0,117,143,.15);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 4px;
}
.ocb-payslip-preview-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 13px;
}
.ocb-payslip-preview-row span { color: var(--ocb-muted, #6b7b80); }
.ocb-payslip-preview-row strong { font-size: 14px; }

/* Dashboard loading skeleton - stat numbers pulse grey instead of sitting
   on a stale/zero value (or nothing) while /dashboard is being fetched. */
@keyframes ocbSkeletonPulse {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}
.ocb-finance-cards.is-loading .ocb-finance-card strong,
.ocb-finance-cards.is-loading .ocb-finance-card small em,
.ocb-health-panel.is-loading #ocb-health-value,
.ocb-health-panel.is-loading .ocb-health-list b {
    color: transparent !important;
    background: linear-gradient(90deg, #e7edef 0%, #dde6e8 50%, #e7edef 100%);
    background-size: 200% 100%;
    border-radius: 6px;
    display: inline-block;
    min-width: 70px;
    animation: ocbSkeletonPulse 1.1s ease-in-out infinite;
}
.ocb-health-panel.is-loading .ocb-health-ring { opacity: .5; }
@media (prefers-reduced-motion: reduce) {
    .ocb-finance-cards.is-loading .ocb-finance-card strong,
    .ocb-finance-cards.is-loading .ocb-finance-card small em,
    .ocb-health-panel.is-loading #ocb-health-value,
    .ocb-health-panel.is-loading .ocb-health-list b {
        animation: none;
    }
}

/* ==========================================================================
   OneCloud Business — Pro Glow Finishing Layer (v2.0)
   Applied through the same shared selectors every module already uses
   (.ocb-card, .ocb-btn, .ocb-input, .ocb-badge, .ocb-table, .ocb-nav-item…)
   so the effect is automatically identical across Dashboard, CRM, Invoices,
   Payroll, Accounting, Mail, Documents, Reports, Projects, Settings — every
   screen in the app, with zero per-module CSS needed.
   ========================================================================== */

/* Global scrollbar, restyled to match the brand instead of the OS default */
.ocb-app ::-webkit-scrollbar { width: 9px; height: 9px; }
.ocb-app ::-webkit-scrollbar-track { background: transparent; }
.ocb-app ::-webkit-scrollbar-thumb {
    background: rgba(0,117,143,.28);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.ocb-app ::-webkit-scrollbar-thumb:hover { background: rgba(0,117,143,.5); background-clip: padding-box; }

/* Sidebar brand mark gets a quiet, living glow ring — signals "premium
   product", not "template". Respects prefers-reduced-motion via the
   existing ocb-breathe rule guard further up the file. */
.ocb-sidebar-header { position: relative; }
.ocb-logo, .ocb-brand { position: relative; z-index: 1; }
.ocb-sidebar-header::before {
    content: "";
    position: absolute;
    left: 18px; right: 18px; top: 14px; bottom: 0;
    border-radius: 16px;
    background: radial-gradient(circle at 30% 20%, rgba(79,216,240,.16), transparent 65%);
    filter: blur(6px);
    pointer-events: none;
}

/* Every nav item — not just the active one — gets a soft glow trail on
   hover so the whole rail feels responsive and alive. */
.ocb-nav-item:hover .ocb-icon { color: var(--ocb-glow-cyan, #4FD8F0); filter: drop-shadow(0 0 5px rgba(79,216,240,.45)); }

/* Topbar avatar + notification affordances pick up the same cyan glow
   used in the sidebar, so the whole shell reads as one instrument panel. */
.ocb-user-avatar {
    box-shadow: 0 0 0 3px rgba(0,117,143,.10), 0 4px 14px rgba(0,117,143,.18);
    transition: box-shadow .2s ease;
}
.ocb-user-menu:hover .ocb-user-avatar { box-shadow: 0 0 0 4px rgba(79,216,240,.18), 0 6px 18px rgba(0,117,143,.26); }

/* Universal card / KPI glow-on-hover — now identical on every screen,
   including modules the earlier "module signatures" pass didn't cover
   (Purchase Orders, Supplier Bills, Calendar, Chat, CRM sub-panels, etc). */
.ocb-card, .ocb-stat-card, .ocb-kpi-card, .ocb-settings-card,
.ocb-acct-panel, .ocb-acct-kpi, .ocb-upgrade-card, .ocb-crm-kpi,
.ocb-finance-card, .ocb-health-panel {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ocb-card:hover, .ocb-stat-card:hover, .ocb-kpi-card:hover,
.ocb-settings-card:hover, .ocb-acct-panel:hover, .ocb-crm-kpi:hover,
.ocb-finance-card:hover {
    border-color: rgba(0,117,143,.28);
    box-shadow: 0 18px 42px rgba(8,35,45,.09), 0 0 0 1px rgba(0,117,143,.05), 0 0 24px rgba(0,117,143,.08);
    transform: translateY(-2px);
}

/* Every stat / KPI icon glows the same way everywhere, brand-consistent. */
.ocb-stat-icon, .ocb-kpi-icon, .ocb-command-mark, .ocb-entity-avatar {
    transition: box-shadow .2s ease, transform .2s ease;
}
.ocb-stat-card:hover .ocb-stat-icon, .ocb-kpi-card:hover .ocb-kpi-icon {
    box-shadow: inset 0 0 0 1px rgba(0,117,143,.14), 0 0 0 6px rgba(0,117,143,.08), 0 8px 20px rgba(0,117,143,.16);
    transform: translateY(-1px);
}

/* Secondary buttons and icon buttons get a matching glow ring, not just a
   colour change, so primary/secondary actions feel like one family. */
.ocb-btn-secondary, .ocb-icon-btn, .ocb-btn { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease, background .15s ease; }
.ocb-btn:active { transform: translateY(0) scale(.98); }
.ocb-btn-primary:active { transform: translateY(0) scale(.98); }

/* Table rows: same accent rail + glow used on the dashboard transaction
   list, now applied to every .ocb-table in the app. */
.ocb-table tbody tr { transition: background .16s ease, box-shadow .16s ease; }
.ocb-table tbody tr:hover {
    background: linear-gradient(90deg, rgba(0,117,143,.05), rgba(0,117,143,.01));
    box-shadow: inset 3px 0 0 var(--ocb-primary, #00758F);
}

/* Badges pick up a faint glow so status pills read as "live data" rather
   than flat labels — consistent across CRM, Invoices, Payroll, Projects. */
.ocb-badge { box-shadow: inset 0 0 0 1px rgba(0,0,0,.03); }
.ocb-badge-success { box-shadow: inset 0 0 0 1px rgba(4,120,87,.12), 0 0 10px rgba(4,120,87,.10); }
.ocb-badge-info { box-shadow: inset 0 0 0 1px rgba(0,117,143,.14), 0 0 10px rgba(0,117,143,.10); }
.ocb-badge-warning { box-shadow: inset 0 0 0 1px rgba(161,98,7,.14), 0 0 10px rgba(161,98,7,.08); }
.ocb-badge-danger { box-shadow: inset 0 0 0 1px rgba(185,28,28,.14), 0 0 10px rgba(185,28,28,.08); }

/* Modal / dialog surfaces (used across every module for create/edit
   forms) get the same glass + glow treatment as the topbar, so opening
   "New Invoice", "New Lead", "New Employee" etc. always feels identical. */
.ocb-modal, .ocb-dialog, .ocb-drawer {
    border-radius: 18px !important;
    box-shadow: 0 30px 80px rgba(6,20,28,.28), 0 0 0 1px rgba(0,117,143,.08) !important;
}
.ocb-modal-header, .ocb-dialog-header {
    position: relative;
}
.ocb-modal-header::after, .ocb-dialog-header::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, var(--ocb-primary, #00758F), rgba(0,117,143,.1) 70%, transparent);
    opacity: .6;
}

/* Primary CTAs everywhere (New Invoice, Save, Send, etc.) get a resting
   ambient glow, not just an on-hover one — this is the single strongest
   "premium" signal in the whole UI, so it's worth being unmissable but
   tasteful (no animation, no flashing — just a still, confident halo). */
.ocb-btn-primary {
    position: relative;
}
.ocb-btn-primary::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    box-shadow: 0 0 18px rgba(0,117,143,.22);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .ocb-card, .ocb-stat-card, .ocb-kpi-card, .ocb-btn, .ocb-btn-primary,
    .ocb-nav-item, .ocb-user-avatar, .ocb-table tbody tr { transition: none !important; }
}

/* ========== Pro Team Chat ========== */
.ocb-chat-shell {
    display: grid;
    grid-template-columns: 300px 1fr;
    min-height: 560px;
    height: calc(100vh - 180px);
    max-height: 720px;
    border: 1px solid var(--ocb-border, #e5e9f0);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.04);
}
.ocb-chat-sidebar {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-right: 1px solid var(--ocb-border, #e5e9f0);
}
.ocb-chat-side-head {
    padding: 18px 16px 12px;
    border-bottom: 1px solid rgba(0,0,0,.04);
}
.ocb-chat-side-title {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ocb-chat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #00758f;
    color: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.ocb-chat-side-title strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
}
.ocb-chat-side-sub {
    font-size: 11px;
    display: block;
    margin-top: 1px;
}
.ocb-chat-search-wrap {
    padding: 10px 12px 8px;
}
.ocb-chat-search {
    width: 100%;
    font-size: 13px;
    padding: 9px 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
}
.ocb-chat-list {
    flex: 1;
    overflow: auto;
    padding: 6px 8px 12px;
}
.ocb-chat-empty {
    padding: 24px 12px;
    text-align: center;
    font-size: 13px;
}
.ocb-chat-conv {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    width: 100%;
    text-align: left;
    padding: 11px 12px;
    border: none;
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    margin-bottom: 2px;
    transition: background .15s ease;
}
.ocb-chat-conv:hover {
    background: rgba(0, 117, 143, 0.07) !important;
}
.ocb-chat-conv.is-active {
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 0 0 1px rgba(0,117,143,.12);
}
.ocb-chat-conv-avatar {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, #00758f, #0d9488);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    letter-spacing: -0.02em;
}
.ocb-chat-conv-body {
    min-width: 0;
    flex: 1;
}
.ocb-chat-conv-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.ocb-chat-conv-top strong {
    font-size: 13px;
    font-weight: 650;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ocb-chat-unread {
    background: #00758f;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ocb-chat-conv-preview {
    font-size: 12px;
    color: #64748b;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ocb-chat-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
}
.ocb-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ocb-border, #e5e9f0);
    background: #fff;
}
.ocb-chat-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.ocb-chat-channel-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e0f2fe, #ccfbf1);
    color: #00758f;
    font-size: 14px;
    font-weight: 800;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.ocb-chat-header-left strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}
.ocb-chat-header-left .ocb-muted {
    font-size: 12px;
}

.ocb-chat-messages {
    flex: 1;
    overflow: auto;
    padding: 20px 20px 12px;
    background: linear-gradient(180deg, #fafbfc 0%, #fff 40%);
}
.ocb-chat-welcome {
    text-align: center;
    padding: 60px 24px;
    max-width: 360px;
    margin: 0 auto;
}
.ocb-chat-welcome-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #e0f2fe, #ccfbf1);
    color: #00758f;
    display: grid;
    place-items: center;
}
.ocb-chat-welcome h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
}
.ocb-chat-welcome p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

.ocb-chat-msg {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    align-items: flex-end;
    max-width: 78%;
}
.ocb-chat-msg.is-mine {
    margin-left: auto;
    flex-direction: row-reverse;
}
.ocb-chat-msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.ocb-chat-msg-content {
    min-width: 0;
}
.ocb-chat-msg-name {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 3px;
    padding-left: 2px;
}
.ocb-chat-bubble {
    display: inline-block;
    padding: 10px 14px;
    border-radius: 14px 14px 14px 4px;
    background: #f1f5f9;
    color: #0f172a;
    font-size: 13.5px;
    line-height: 1.45;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.ocb-chat-msg.is-mine .ocb-chat-bubble {
    background: linear-gradient(135deg, #00758f, #0d9488);
    color: #fff;
    border-radius: 14px 14px 4px 14px;
}
.ocb-chat-msg-time {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 4px;
    padding-left: 2px;
}
.ocb-chat-msg.is-mine .ocb-chat-msg-time {
    text-align: right;
    padding-right: 2px;
    padding-left: 0;
}

.ocb-chat-composer {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--ocb-border, #e5e9f0);
    background: #fff;
}
.ocb-chat-composer-inner {
    display: flex;
    gap: 10px;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 6px 6px 6px 14px;
    transition: border-color .15s, box-shadow .15s;
}
.ocb-chat-composer-inner:focus-within {
    border-color: #00758f;
    box-shadow: 0 0 0 3px rgba(0,117,143,.12);
    background: #fff;
}
.ocb-chat-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    font-size: 14px;
}
.ocb-chat-input:disabled {
    opacity: .55;
}
.ocb-chat-send {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 10px !important;
    padding: 9px 14px !important;
    flex-shrink: 0;
}
.ocb-chat-send:disabled {
    opacity: .5;
    cursor: not-allowed;
}

@media (max-width: 800px) {
    .ocb-chat-shell {
        grid-template-columns: 1fr;
        height: auto;
        max-height: none;
        min-height: 480px;
    }
    .ocb-chat-sidebar {
        max-height: 220px;
        border-right: none;
        border-bottom: 1px solid var(--ocb-border, #e5e9f0);
    }
}

/* ========== Improved Business Health ========== */
.ocb-health-status {
    text-align: center;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .02em;
    margin: -4px 16px 10px;
    padding: 5px 10px;
    border-radius: 8px;
}
.ocb-health-status.ocb-health-good {
    color: #0f766e;
    background: rgba(13, 148, 136, .1);
}
.ocb-health-status.ocb-health-ok {
    color: #0e7490;
    background: rgba(0, 117, 143, .1);
}
.ocb-health-status.ocb-health-warn {
    color: #b45309;
    background: rgba(217, 119, 6, .12);
}
.ocb-health-status.ocb-health-bad {
    color: #b91c1c;
    background: rgba(220, 38, 38, .1);
}
.ocb-health-status.ocb-health-neutral {
    color: #64748b;
    background: transparent;
    font-weight: 500;
}
.ocb-health-profit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 18px 8px;
    padding: 8px 0;
    border-bottom: 1px solid #edf2f3;
    font-size: 11px;
    color: #64748b;
}
.ocb-health-profit-row b {
    font-size: 12px;
    color: var(--dash-ink, #0f172a);
    font-weight: 700;
}
.ocb-health-ring.is-loss strong {
    color: #dc2626;
}

/* ========== Automatic Backup panel ========== */
.ocb-backup-auto-panel {
    border: 1px solid #e5e9f0;
    border-radius: 14px;
    padding: 16px 18px;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    margin-bottom: 8px;
}
.ocb-backup-status-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
.ocb-backup-stat {
    background: #fff;
    border: 1px solid #edf2f3;
    border-radius: 10px;
    padding: 10px 12px;
}
.ocb-backup-stat span {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 4px;
}
.ocb-backup-stat strong {
    font-size: 13px;
    color: #0f172a;
    font-weight: 650;
}
.ocb-backup-auto-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.ocb-toggle-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 550;
    color: #0f172a;
    cursor: pointer;
}
.ocb-backup-history {
    border: 1px solid #e5e9f0;
    border-radius: 12px;
    overflow: hidden;
}
.ocb-backup-history table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.ocb-backup-history th {
    text-align: left;
    padding: 10px 12px;
    background: #f8fafc;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b;
    border-bottom: 1px solid #e5e9f0;
}
.ocb-backup-history td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.ocb-backup-history tr:last-child td { border-bottom: none; }
.ocb-bk-type {
    display: inline-block;
    font-size: 11px;
    font-weight: 650;
    padding: 2px 8px;
    border-radius: 6px;
    background: #e2e8f0;
    color: #475569;
}
.ocb-bk-type.manual { background: #e0f2fe; color: #0369a1; }
.ocb-bk-type.automatic { background: #ccfbf1; color: #0f766e; }
.ocb-bk-status-ok { color: #0f766e; font-weight: 650; }
.ocb-bk-status-fail { color: #b91c1c; font-weight: 650; }
.ocb-bk-status-run { color: #b45309; font-weight: 650; }
@media (max-width: 900px) {
    .ocb-backup-status-grid { grid-template-columns: 1fr 1fr; }
}