/* =========================================================
   TEMAX CRM UI V3 - CLEAN FINAL
   Clean Enterprise Theme
   Desktop + Tablet + Mobile
   ========================================================= */

/* =========================================================
   VARIABLES
   ========================================================= */

:root {
    --primary: #1769e0;
    --primary-dark: #0f4ea8;
    --primary-darker: #0b397d;
    --primary-light: #eaf3ff;
    --primary-soft: #f3f8ff;

    --navy: #0d1b2f;
    --navy-light: #14263f;
    --navy-soft: #1b3150;

    --background: #f4f7fb;
    --surface: #ffffff;
    --surface-soft: #f8fafc;

    --text: #172033;
    --text-secondary: #425066;
    --text-muted: #768399;

    --border: #e2e8f0;
    --border-strong: #d5dde8;

    --success: #16845b;
    --success-bg: #eaf8f1;

    --warning: #c98715;
    --warning-bg: #fff7e5;

    --danger: #c94747;
    --danger-bg: #fff0f0;

    --purple: #6c5ce7;

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.03);
    --shadow-sm: 0 3px 12px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 8px 25px rgba(15, 23, 42, 0.07);

    --radius-sm: 7px;
    --radius: 10px;
    --radius-lg: 14px;

    --sidebar-width: 252px;
}

/* =========================================================
   RESET
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background: var(--background);
    color: var(--text);

    line-height: 1.45;

    -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    cursor: pointer;
}

img {
    max-width: 100%;
}

::selection {
    background: #cfe3ff;
    color: var(--primary-dark);
}

/* =========================================================
   APP
   ========================================================= */

.app {
    min-height: 100vh;
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;

    width: var(--sidebar-width);

    display: flex;
    flex-direction: column;

    padding: 22px 14px 18px;

    background:
        linear-gradient(
            180deg,
            var(--navy) 0%,
            #0c192b 100%
        );

    border-right: 1px solid rgba(255,255,255,0.04);

    color: white;

    z-index: 1000;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 2px 10px 25px;
}

.logo-mark {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #2c7cf0,
            var(--primary)
        );

    color: white;

    box-shadow:
        0 7px 18px rgba(23,105,224,0.28);

    font-size: 19px;
    font-weight: 800;
}

.logo-title {
    color: white;

    font-size: 17px;
    font-weight: 800;

    letter-spacing: 1.2px;
}

.logo-subtitle {
    margin-top: 1px;

    color: rgba(255,255,255,0.45);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2.3px;
}

/* =========================================================
   SIDEBAR NAV
   ========================================================= */

.sidebar-nav {
    display: flex;
    flex-direction: column;

    gap: 4px;

    overflow-y: auto;

    scrollbar-width: none;
}

.sidebar-nav::-webkit-scrollbar {
    display: none;
}

.nav-item {
    position: relative;

    display: flex;
    align-items: center;

    gap: 12px;

    min-height: 44px;

    padding: 0 13px;

    border-radius: 8px;

    color: rgba(255,255,255,0.63);

    font-size: 13px;
    font-weight: 600;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.nav-item:hover {
    background: rgba(255,255,255,0.065);
    color: white;
}

.nav-item.active {
    background:
        linear-gradient(
            90deg,
            rgba(23,105,224,0.95),
            rgba(23,105,224,0.75)
        );

    color: white;

    box-shadow:
        0 5px 15px rgba(0,0,0,0.16);
}

.nav-icon {
    width: 21px;

    flex-shrink: 0;

    text-align: center;

    font-size: 16px;

    opacity: .9;
}

/* =========================================================
   SIDEBAR USER
   ========================================================= */

.sidebar-user {
    margin-top: auto;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 17px 7px 2px;

    border-top: 1px solid rgba(255,255,255,0.08);
}

.user-avatar {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: rgba(255,255,255,0.09);

    color: white;

    font-size: 13px;
    font-weight: 800;
}

.user-avatar.small {
    width: 34px;
    height: 34px;
}

.user-info {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
}

.user-info strong {
    overflow: hidden;

    color: white;

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.user-info span {
    margin-top: 2px;

    color: rgba(255,255,255,0.45);

    font-size: 10px;
}

.logout-button {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    color: rgba(255,255,255,0.5);

    transition: .18s ease;
}

.logout-button:hover {
    background: rgba(255,255,255,0.08);
    color: white;
}

/* =========================================================
   MAIN
   ========================================================= */

.main-content {
    min-height: 100vh;

    margin-left: var(--sidebar-width);
}

/* =========================================================
   TOPBAR
   ========================================================= */

.topbar {
    position: sticky;
    top: 0;
    overflow: visible;

    min-height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 12px 30px;

    background: rgba(255,255,255,0.95);

    backdrop-filter: blur(14px);

    border-bottom: 1px solid var(--border);

    z-index: 100;
}

.topbar-left {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 13px;
}

.topbar-left > div {
    min-width: 0;
}

.topbar-left h1 {
    color: var(--text);

    font-size: 19px;
    font-weight: 750;

    line-height: 1.2;
}

.topbar-left p {
    margin-top: 3px;

    color: var(--text-muted);

    font-size: 11px;
}

.topbar-right {
    position: relative;
    display: flex;
    align-items: center;

    gap: 10px;

    overflow: visible;
}

.dashboard-user {
    color: var(--text-secondary);

    font-size: 12px;
    font-weight: 700;
}

.menu-button,
.notification-button {
    border: 0;
}

.menu-button {
    display: none;

    width: 40px;
    height: 40px;

    flex-shrink: 0;

    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: var(--primary-soft);

    color: var(--primary);

    font-size: 21px;
}

.notification-button {
    width: 38px;
    height: 38px;

    border-radius: 8px;

    background: var(--surface-soft);
}

/* =========================================================
   PAGE CONTENT
   ========================================================= */

.page-content {
    padding: 26px 30px 40px;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.primary-button,
.secondary-button,
.success-button,
.danger-button {
    min-height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 0 15px;

    border-radius: 8px;

    font-size: 12px;
    font-weight: 700;

    line-height: 1;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.primary-button {
    border: 1px solid var(--primary);

    background: var(--primary);
    color: white;

    box-shadow:
        0 3px 9px rgba(23,105,224,0.17);
}

.primary-button:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);

    transform: translateY(-1px);

    box-shadow:
        0 5px 14px rgba(23,105,224,0.21);
}

.secondary-button {
    border: 1px solid var(--border-strong);

    background: white;
    color: var(--text-secondary);
}

.secondary-button:hover {
    border-color: #b9c7d8;

    background: var(--surface-soft);

    color: var(--text);
}

.success-button,
.danger-button {
    border: 0;

    color: white;
}

.success-button {
    background: var(--success);
}

.success-button:hover {
    background: #106f4b;
}

.danger-button {
    background: var(--danger);
}

.danger-button:hover {
    background: #b53c3c;
}

.small-link-button {
    color: var(--primary);

    font-size: 11px;
    font-weight: 700;
}

.small-link-button:hover,
.table-action a:hover,
.timeline-actions a:hover {
    text-decoration: underline;
}

/* =========================================================
   PANELS
   ========================================================= */

.panel,
.form-panel {
    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-xs);

    overflow: hidden;
}

.panel-header,
.form-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding: 17px 20px;

    border-bottom: 1px solid var(--border);
}

.panel-header h3,
.form-panel-header h3 {
    color: var(--text);

    font-size: 14px;
    font-weight: 750;
}

.panel-header p,
.form-panel-header p {
    margin-top: 3px;

    color: var(--text-muted);

    font-size: 10px;
}

.profile-section {
    margin-top: 16px;
}

.empty-state {
    min-height: 150px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 28px;

    color: var(--text-muted);

    font-size: 12px;

    text-align: center;
}

/* =========================================================
   ALERTS
   ========================================================= */

.form-alert {
    max-width: 1000px;

    margin-bottom: 16px;

    padding: 12px 14px;

    border: 1px solid transparent;
    border-radius: 8px;

    font-size: 12px;
    font-weight: 600;
}

.form-alert.success {
    background: var(--success-bg);
    color: var(--success);

    border-color: #cdebdc;
}

.form-alert.error {
    background: var(--danger-bg);
    color: var(--danger);

    border-color: #f0d3d3;
}

/* =========================================================
   WELCOME / GENERIC STATS
   ========================================================= */

.welcome-card {
    margin-bottom: 20px;

    padding: 27px;

    border-radius: var(--radius-lg);

    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--primary)
        );

    color: white;

    box-shadow:
        0 8px 24px rgba(23,105,224,0.15);
}

.eyebrow {
    display: block;

    margin-bottom: 8px;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.8px;

    opacity: .72;
}

.welcome-card h2 {
    font-size: 25px;
}

.welcome-card p {
    max-width: 650px;

    margin-top: 8px;

    opacity: .82;

    font-size: 13px;
    line-height: 1.6;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));

    gap: 14px;

    margin-bottom: 20px;
}

.stat-card {
    min-height: 130px;

    display: flex;
    flex-direction: column;

    padding: 19px;

    background: white;

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-xs);
}

.stat-label {
    color: var(--text-muted);

    font-size: 11px;
    font-weight: 700;
}

.stat-value {
    margin-top: 12px;

    font-size: 27px;
    font-weight: 750;
}

.stat-helper {
    margin-top: auto;

    padding-top: 10px;

    color: var(--text-muted);

    font-size: 10px;
}

/* =========================================================
   PAGE TOOLBAR / SEARCH
   ========================================================= */

.page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    margin-bottom: 16px;
}

.search-box {
    width: 100%;
    max-width: 420px;
}

.search-box input {
    width: 100%;
    height: 42px;

    padding: 0 13px;

    background: white;

    border: 1px solid var(--border-strong);
    border-radius: 8px;

    color: var(--text);

    outline: none;

    transition: .18s ease;
}

.search-box input:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(23,105,224,0.09);
}

.customer-count {
    color: var(--text-muted);

    font-size: 11px;
}

/* =========================================================
   TABLES
   ========================================================= */

.table-wrapper {
    overflow-x: auto;
}

.crm-table {
    width: 100%;

    border-collapse: collapse;
}

.crm-table th,
.crm-table td {
    padding: 14px 17px;

    text-align: left;

    border-bottom: 1px solid var(--border);

    vertical-align: middle;
}

.crm-table tr:last-child td {
    border-bottom: 0;
}

.crm-table th {
    background: #fbfcfe;

    color: var(--text-muted);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .7px;

    text-transform: uppercase;
}

.crm-table td {
    color: var(--text-secondary);

    font-size: 12px;
}

.crm-table tbody tr {
    transition: background .15s ease;
}

.crm-table tbody tr:hover {
    background: #fafcff;
}

.crm-table td strong {
    color: var(--text);

    font-weight: 700;
}

.table-secondary {
    display: block;

    margin-top: 3px;

    color: var(--text-muted);

    font-size: 10px;
}

.table-action {
    text-align: right !important;
}

.table-action a {
    color: var(--primary);

    font-size: 11px;
    font-weight: 700;
}

/* =========================================================
   BADGES
   ========================================================= */

.source-badge,
.team-company,
.team-role,
.activity-type-badge,
.timeline-event-badge,
.user-status,
.ticket-priority,
.ticket-status,
.order-status,
.production-due,
.closed-opportunity,
.primary-contact-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    font-weight: 800;
}

.source-badge {
    padding: 4px 8px;

    background: var(--primary-light);
    color: var(--primary);

    font-size: 9px;
}

.team-company,
.team-role {
    padding: 4px 8px;

    background: var(--primary-light);
    color: var(--primary);

    font-size: 9px;
}

.primary-contact-badge {
    padding: 3px 7px;

    background: var(--success-bg);
    color: var(--success);

    font-size: 9px;
}

/* =========================================================
   FORMS
   ========================================================= */

.customer-form {
    max-width: 1000px;
}

.form-panel {
    margin-bottom: 17px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));

    gap: 17px;

    padding: 20px;
}

.form-field {
    display: flex;
    flex-direction: column;

    gap: 6px;
}

.form-field.full-width {
    grid-column: 1 / -1;
}

.form-field label {
    color: var(--text-secondary);

    font-size: 11px;
    font-weight: 700;
}

.form-field input,
.form-field select,
.form-field textarea,
.ticket-comment-form textarea,
.order-comment-form textarea {
    width: 100%;

    padding: 10px 11px;

    background: white;

    border: 1px solid var(--border-strong);
    border-radius: 8px;

    color: var(--text);

    outline: none;

    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}

.form-field input,
.form-field select {
    min-height: 42px;
}

.form-field textarea {
    min-height: 115px;

    resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.ticket-comment-form textarea:focus,
.order-comment-form textarea:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(23,105,224,0.09);
}

.form-help {
    color: var(--text-muted);

    font-size: 10px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;

    gap: 9px;

    padding-bottom: 26px;
}

.checkbox-row {
    min-height: 42px;

    display: flex;
    align-items: center;

    gap: 9px;

    cursor: pointer;
}

.checkbox-row input {
    width: 17px;
    height: 17px;

    min-height: auto;

    accent-color: var(--primary);
}

/* =========================================================
   PROFILE HEADERS
   ========================================================= */

.customer-profile-header,
.opportunity-profile-header,
.ticket-profile-header,
.order-profile-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 16px;

    padding: 23px 24px;

    border-radius: var(--radius-lg);

    background:
        linear-gradient(
            135deg,
            #1156bd,
            var(--primary)
        );

    color: white;

    box-shadow:
        0 8px 24px rgba(23,105,224,0.13);
}

.customer-profile-header h2,
.opportunity-profile-header h2,
.ticket-profile-header h2,
.order-profile-header h2 {
    font-size: 24px;
    font-weight: 750;
}

.profile-eyebrow {
    color: white;
}

.profile-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 8px;

    margin-top: 8px;

    font-size: 11px;
}

.customer-profile-header .source-badge,
.opportunity-profile-header .source-badge,
.ticket-profile-header .ticket-priority,
.ticket-profile-header .ticket-status,
.order-profile-header .order-status {
    background: rgba(255,255,255,0.14);
    color: white;

    border: 1px solid rgba(255,255,255,0.13);
}

.customer-profile-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.customer-profile-header .secondary-button,
.opportunity-profile-header .secondary-button,
.ticket-profile-header .secondary-button,
.order-profile-header .secondary-button {
    background: rgba(255,255,255,0.10);

    color: white;

    border-color: rgba(255,255,255,0.23);
}

.customer-profile-header .primary-button,
.opportunity-profile-header .primary-button,
.ticket-profile-header .primary-button,
.order-profile-header .primary-button {
    background: white;
    color: var(--primary);

    border-color: white;
}

/* =========================================================
   PROFILE TABS / STAGES
   ========================================================= */

.profile-tabs,
.opportunity-stage-bar,
.ticket-status-bar,
.order-production-bar {
    display: flex;

    gap: 7px;

    margin-bottom: 16px;

    overflow-x: auto;

    padding-bottom: 3px;

    scrollbar-width: none;
}

.profile-tabs::-webkit-scrollbar,
.opportunity-stage-bar::-webkit-scrollbar,
.ticket-status-bar::-webkit-scrollbar,
.order-production-bar::-webkit-scrollbar {
    display: none;
}

.profile-tab,
.stage-step {
    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    padding: 0 13px;

    white-space: nowrap;

    border: 1px solid var(--border-strong);
    border-radius: 8px;

    background: white;

    color: var(--text-muted);

    font-size: 10px;
    font-weight: 700;

    transition: .17s ease;
}

.profile-tab:hover,
.stage-step:hover {
    border-color: #a9c8ee;

    color: var(--primary);

    background: var(--primary-soft);
}

.profile-tab.active,
.stage-step.active {
    background: var(--primary);
    color: white;

    border-color: var(--primary);

    box-shadow:
        0 3px 10px rgba(23,105,224,0.14);
}

/* =========================================================
   PROFILE GRID
   ========================================================= */

.customer-profile-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(260px, .78fr);

    gap: 16px;
}

.profile-main,
.profile-sidebar {
    min-width: 0;
}

.profile-details {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));

    gap: 19px;

    padding: 20px;
}

.profile-detail {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.profile-detail.full {
    grid-column: 1 / -1;
}

.profile-detail span,
.sidebar-detail span {
    color: var(--text-muted);

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .3px;
}

.profile-detail strong,
.sidebar-detail strong {
    color: var(--text);

    font-size: 12px;
    font-weight: 700;

    overflow-wrap: anywhere;
}

.profile-link {
    color: var(--primary);
}

.profile-sidebar-content {
    padding: 17px 20px;
}

.sidebar-detail {
    display: flex;
    flex-direction: column;

    gap: 5px;

    padding: 11px 0;

    border-bottom: 1px solid var(--border);
}

.sidebar-detail:first-child {
    padding-top: 0;
}

.sidebar-detail:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}

.customer-notes {
    padding: 18px 20px;

    color: var(--text-secondary);

    font-size: 12px;

    line-height: 1.65;
}

/* =========================================================
   CONTACTS
   ========================================================= */

.contacts-list {
    padding: 4px 20px;
}

.contact-card {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 14px 0;

    border-bottom: 1px solid var(--border);
}

.contact-card:last-child {
    border-bottom: 0;
}

.contact-avatar {
    width: 39px;
    height: 39px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: var(--primary-light);
    color: var(--primary);

    font-size: 12px;
    font-weight: 800;
}

.contact-card-body {
    min-width: 0;
}

.contact-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 7px;

    font-size: 12px;
    font-weight: 700;
}

.contact-position,
.contact-data {
    color: var(--text-muted);

    font-size: 10px;
}

.contact-position {
    margin-top: 3px;
}

.contact-data {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 6px;
}

.contact-actions {
    margin-top: 7px;
}

.contact-actions a {
    color: var(--primary);

    font-size: 10px;
    font-weight: 700;
}

/* =========================================================
   SALES SUMMARY
   ========================================================= */

.sales-summary {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,220px));

    gap: 12px;

    margin-bottom: 17px;
}

.sales-summary > div,
.ticket-summary-card,
.order-summary-card,
.production-summary-card,
.team-summary-card {
    background: white;

    border: 1px solid var(--border);
    border-radius: 10px;

    box-shadow: var(--shadow-xs);
}

.sales-summary > div {
    display: flex;
    flex-direction: column;

    gap: 6px;

    padding: 16px 17px;
}

.sales-summary span {
    color: var(--text-muted);

    font-size: 10px;
    font-weight: 700;
}

.sales-summary strong {
    font-size: 20px;
}

/* =========================================================
   SALES BOARD
   ========================================================= */

.sales-board {
    display: grid;
    grid-template-columns: repeat(5,minmax(250px,1fr));

    gap: 11px;

    overflow-x: auto;

    padding-bottom: 14px;
}

.sales-column {
    min-width: 250px;

    background: #edf2f7;

    border: 1px solid #e3e8ef;
    border-radius: 11px;

    overflow: hidden;
}

.sales-column-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 9px;

    padding: 14px;
}

.sales-column-header h3 {
    font-size: 12px;
}

.sales-column-header span {
    display: block;

    margin-top: 3px;

    color: var(--text-muted);

    font-size: 9px;
}

.sales-column-header > strong {
    color: var(--primary);

    font-size: 11px;
}

.sales-column-body {
    min-height: 390px;

    display: flex;
    flex-direction: column;

    gap: 8px;

    padding: 0 8px 8px;
}

.sales-empty {
    padding: 27px 10px;

    color: var(--text-muted);

    font-size: 10px;

    text-align: center;
}

.opportunity-card {
    display: block;

    padding: 13px;

    background: white;

    border: 1px solid var(--border);
    border-radius: 9px;

    box-shadow: var(--shadow-xs);

    transition: .17s ease;
}

.opportunity-card:hover {
    transform: translateY(-1px);

    border-color: #bcd5f5;

    box-shadow: var(--shadow-sm);
}

.opportunity-number {
    margin-bottom: 6px;

    color: var(--text-muted);

    font-size: 9px;
    font-weight: 700;
}

.opportunity-card h4 {
    font-size: 12px;
    line-height: 1.4;
}

.opportunity-customer {
    margin-top: 4px;

    color: var(--text-muted);

    font-size: 10px;
}

.opportunity-value {
    margin-top: 12px;

    color: var(--primary);

    font-size: 15px;
    font-weight: 800;
}

.opportunity-date {
    margin-top: 7px;

    color: var(--text-muted);

    font-size: 9px;
}

.opportunity-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    margin-top: 11px;

    padding-top: 9px;

    border-top: 1px solid var(--border);

    color: var(--text-muted);

    font-size: 9px;
}

/* =========================================================
   WON / LOST
   ========================================================= */

.opportunity-close-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 16px;
}

.closed-opportunity {
    padding: 8px 13px;

    font-size: 11px;
}

.closed-opportunity.won {
    background: var(--success-bg);
    color: var(--success);
}

.closed-opportunity.lost {
    background: var(--danger-bg);
    color: var(--danger);
}

.close-message {
    padding: 19px;

    border-radius: 9px;
}

.close-message.won {
    background: var(--success-bg);
}

.close-message strong {
    display: block;

    font-size: 15px;
}

.close-message p {
    margin-top: 5px;

    color: var(--text-muted);

    font-size: 11px;

    line-height: 1.5;
}

.close-value {
    margin-top: 15px;

    color: var(--success);

    font-size: 24px;
    font-weight: 800;
}

/* =========================================================
   ACTIVITY TIMELINE
   ========================================================= */

.activity-timeline,
.order-timeline {
    padding: 4px 20px 20px;
}

.timeline-item,
.order-timeline-item {
    display: grid;
    grid-template-columns: 22px minmax(0,1fr);

    gap: 11px;
}

.timeline-marker,
.order-timeline-marker {
    position: relative;

    display: flex;
    justify-content: center;
}

.timeline-marker .timeline-dot,
.order-timeline-dot {
    position: relative;

    z-index: 2;

    width: 9px;
    height: 9px;

    margin-top: 21px;

    border-radius: 50%;

    background: var(--primary);

    box-shadow:
        0 0 0 4px var(--primary-light);
}

.timeline-line,
.order-timeline-line {
    position: absolute;

    top: 26px;
    bottom: 0;

    width: 1px;

    background: var(--border-strong);
}

.timeline-content,
.order-timeline-content {
    padding: 16px 0 19px;

    border-bottom: 1px solid var(--border);
}

.timeline-item:last-child .timeline-content,
.order-timeline-item:last-child .order-timeline-content {
    border-bottom: 0;
}

.order-timeline-item:last-child .order-timeline-line {
    display: none;
}

.timeline-header,
.order-timeline-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 11px;
}

.timeline-header > div,
.order-timeline-header > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 7px;
}

.activity-type-badge,
.timeline-event-badge {
    padding: 3px 7px;

    font-size: 8px;

    text-transform: uppercase;
}

.activity-type-badge,
.timeline-event-badge.status {
    background: var(--primary-light);
    color: var(--primary);
}

.timeline-event-badge.comment {
    background: var(--success-bg);
    color: var(--success);
}

.timeline-event-badge.created {
    background: #edf1f5;
    color: var(--text-muted);
}

.activity-status {
    display: inline-flex;

    padding: 3px 7px;

    border-radius: 999px;

    font-size: 8px;
    font-weight: 800;

    text-transform: uppercase;
}

.activity-status.planned {
    background: var(--warning-bg);
    color: var(--warning);
}

.activity-status.completed {
    background: var(--success-bg);
    color: var(--success);
}

.activity-status.cancelled {
    background: var(--danger-bg);
    color: var(--danger);
}

.timeline-meta,
.order-timeline-header > span {
    color: var(--text-muted);

    font-size: 9px;
}

.timeline-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 6px;
}

.timeline-section {
    margin-top: 12px;
}

.timeline-section span {
    display: block;

    margin-bottom: 3px;

    color: var(--text-muted);

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
}

.timeline-section p,
.order-timeline-message {
    color: var(--text-secondary);

    font-size: 11px;

    line-height: 1.6;
}

.timeline-section.next-step {
    padding: 10px 11px;

    border-radius: 7px;

    background: var(--primary-soft);
}

.timeline-created-by {
    margin-top: 10px;

    color: var(--text-muted);

    font-size: 9px;
}

.timeline-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 8px;
}

.timeline-actions a {
    color: var(--primary);

    font-size: 9px;
    font-weight: 700;
}

.order-timeline-dot.comment {
    background: var(--success);

    box-shadow:
        0 0 0 4px var(--success-bg);
}

.order-timeline-dot.created {
    background: var(--text-muted);

    box-shadow:
        0 0 0 4px #edf1f5;
}

.order-status-change {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 8px;

    font-size: 11px;
}

.order-status-change span {
    color: var(--text-muted);
}

.order-status-change .new-status {
    color: var(--primary);

    font-weight: 800;
}

.order-timeline-message {
    margin-top: 8px;
}

/* =========================================================
   TICKETS
   ========================================================= */

.ticket-summary,
.order-summary,
.team-summary {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));

    gap: 12px;

    margin-bottom: 16px;
}

.ticket-summary-card,
.order-summary-card,
.team-summary-card {
    padding: 15px;
}

.ticket-summary-card span,
.order-summary-card span,
.team-summary-card span {
    display: block;

    color: var(--text-muted);

    font-size: 9px;
    font-weight: 700;
}

.ticket-summary-card strong,
.order-summary-card strong,
.team-summary-card strong {
    display: block;

    margin-top: 6px;

    font-size: 21px;
}

.ticket-priority,
.ticket-status,
.order-status,
.user-status {
    padding: 3px 7px;

    font-size: 8px;
}

.ticket-priority.low,
.ticket-status.closed,
.order-status.new,
.order-status.closed,
.user-status.inactive {
    background: #edf1f5;
    color: var(--text-muted);
}

.ticket-priority.normal,
.ticket-status.in_progress,
.order-status.in_production {
    background: var(--primary-light);
    color: var(--primary);
}

.ticket-priority.high,
.ticket-status.waiting,
.order-status.planned {
    background: var(--warning-bg);
    color: var(--warning);
}

.ticket-priority.critical,
.ticket-status.open {
    background: var(--danger-bg);
    color: var(--danger);
}

.ticket-status.resolved,
.order-status.ready,
.user-status.active {
    background: var(--success-bg);
    color: var(--success);
}

.order-status.sent_to_belgium {
    background: #eef0ff;
    color: #5360c9;
}

.ticket-comments {
    padding: 3px 20px;
}

.ticket-comment {
    display: flex;

    gap: 11px;

    padding: 15px 0;

    border-bottom: 1px solid var(--border);
}

.ticket-comment-avatar,
.order-comment-avatar {
    width: 35px;
    height: 35px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: var(--primary-light);
    color: var(--primary);

    font-size: 11px;
    font-weight: 800;
}

.ticket-comment-body {
    min-width: 0;
    flex: 1;
}

.ticket-comment-header {
    display: flex;
    justify-content: space-between;

    gap: 10px;
}

.ticket-comment-header span {
    color: var(--text-muted);

    font-size: 9px;
}

.ticket-comment-body p {
    margin-top: 6px;

    color: var(--text-secondary);

    font-size: 11px;

    line-height: 1.6;
}

.ticket-comment-form,
.order-comment-form {
    padding: 16px 20px 19px;

    border-top: 1px solid var(--border);
}

.ticket-comment-actions,
.order-comment-form-actions {
    display: flex;
    justify-content: flex-end;

    margin-top: 9px;
}

.resolution-problem,
.ticket-resolution-box {
    padding: 13px;

    border-radius: 8px;

    font-size: 11px;
    line-height: 1.6;
}

.resolution-problem {
    background: var(--surface-soft);

    border: 1px solid var(--border);
}

.ticket-resolution-box {
    background: var(--success-bg);

    border: 1px solid #cdebdc;
}

/* =========================================================
   ORDERS
   ========================================================= */

.order-items-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;
}

.order-items {
    padding: 19px;
}

.order-item {
    margin-bottom: 13px;

    padding: 15px;

    background: #f7f9fc;

    border: 1px solid var(--border);
    border-radius: 9px;
}

.order-item:last-child {
    margin-bottom: 0;
}

.order-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 13px;
}

.remove-order-item {
    border: 0;

    background: transparent;

    color: var(--danger);

    font-size: 10px;
    font-weight: 700;
}

.order-item-grid {
    display: grid;

    grid-template-columns:
        minmax(180px,2fr)
        minmax(100px,1fr)
        minmax(100px,1fr);

    gap: 12px;
}

.order-total-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 17px;

    padding: 15px 20px;

    border-top: 1px solid var(--border);
}

.order-total-box span,
.order-profile-grand-total span {
    color: var(--text-muted);

    font-size: 10px;
    font-weight: 700;
}

.order-total-box strong,
.order-profile-grand-total strong {
    color: var(--primary);

    font-size: 21px;
    font-weight: 800;
}

.order-profile-total {
    color: var(--primary) !important;

    font-size: 16px !important;
}

.order-product-list {
    padding: 5px 20px;
}

.order-product-card {
    padding: 15px 0;

    border-bottom: 1px solid var(--border);
}

.order-product-card:last-child {
    border-bottom: 0;
}

.order-product-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;
}

.order-product-name {
    display: block;

    font-size: 13px;
}

.order-product-sku {
    display: block;

    margin-top: 3px;

    color: var(--text-muted);

    font-size: 9px;
}

.order-product-total {
    flex-shrink: 0;

    color: var(--primary);

    font-size: 12px;
    font-weight: 800;
}

.order-product-details {
    display: flex;
    flex-wrap: wrap;

    gap: 26px;

    margin-top: 11px;
}

.order-product-details > div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.order-product-details span {
    color: var(--text-muted);

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
}

.order-product-details strong {
    font-size: 11px;
}

.order-product-description {
    margin-top: 11px;

    padding: 10px;

    background: var(--surface-soft);

    border-radius: 7px;

    color: var(--text-muted);

    font-size: 10px;

    line-height: 1.55;
}

.order-profile-grand-total {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 17px;

    padding: 17px 20px;

    border-top: 1px solid var(--border);
}

/* =========================================================
   ORDER COMMENTS
   ========================================================= */

.order-comments {
    padding: 3px 20px;
}

.order-comment {
    display: flex;

    gap: 11px;

    padding: 15px 0;

    border-bottom: 1px solid var(--border);
}

.order-comment:last-child {
    border-bottom: 0;
}

.order-comment-body {
    min-width: 0;
    flex: 1;
}

.order-comment-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 10px;
}

.order-comment-header > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 7px;
}

.order-comment-header strong {
    font-size: 11px;
}

.order-comment-company {
    display: inline-flex;

    padding: 2px 6px;

    border-radius: 999px;

    background: var(--primary-light);
    color: var(--primary);

    font-size: 8px;
    font-weight: 800;

    text-transform: uppercase;
}

.order-comment-date {
    flex-shrink: 0;

    color: var(--text-muted);

    font-size: 9px;
}

.order-comment-body p {
    margin-top: 7px;

    color: var(--text-secondary);

    font-size: 11px;

    line-height: 1.6;
}

/* =========================================================
   PRODUCTION
   ========================================================= */

.production-page {
    overflow: hidden;
}

.production-summary {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));

    gap: 10px;

    margin-bottom: 15px;
}

.production-summary-card {
    padding: 14px;
}

.production-summary-card span {
    display: block;

    color: var(--text-muted);

    font-size: 9px;
    font-weight: 700;
}

.production-summary-card strong {
    display: block;

    margin-top: 5px;

    font-size: 20px;
}

.production-board {
    display: grid;
    grid-template-columns: repeat(5,minmax(245px,1fr));

    gap: 10px;

    overflow-x: auto;

    padding-bottom: 16px;
}

.production-column {
    min-width: 245px;

    background: #edf2f7;

    border: 1px solid #e1e7ee;
    border-radius: 11px;

    overflow: hidden;
}

.production-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 12px 13px;

    background: #f9fbfd;

    border-bottom: 1px solid var(--border);
}

.production-column-header > div {
    display: flex;
    align-items: center;

    gap: 7px;
}

.production-column-header strong {
    font-size: 10px;
}

.production-column-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #9ba7b4;
}

.production-column-dot.planned {
    background: var(--warning);
}

.production-column-dot.in_production {
    background: var(--primary);
}

.production-column-dot.ready {
    background: var(--success);
}

.production-column-dot.sent_to_belgium {
    background: var(--purple);
}

.production-column-count {
    min-width: 21px;
    height: 21px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 5px;

    border-radius: 999px;

    background: #edf1f5;

    color: var(--text-muted);

    font-size: 8px;
    font-weight: 800;
}

.production-column-body {
    min-height: 290px;

    padding: 8px;
}

.production-empty {
    padding: 27px 10px;

    color: var(--text-muted);

    font-size: 9px;

    text-align: center;
}

.production-card {
    display: block;

    margin-bottom: 8px;

    background: white;

    border: 1px solid var(--border);
    border-radius: 9px;

    overflow: hidden;

    box-shadow: var(--shadow-xs);

    transition: .17s ease;
}

.production-card:last-child {
    margin-bottom: 0;
}

.production-card:hover {
    transform: translateY(-1px);

    border-color: #bdd5f4;

    box-shadow: var(--shadow-sm);
}

.production-card-main {
    display: block;

    padding: 12px;

    color: var(--text);
}

.production-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 7px;
}

.production-card-top > strong {
    color: var(--primary);

    font-size: 9px;
}

.production-card h4 {
    margin: 7px 0 10px;

    font-size: 12px;
}

.production-products {
    display: flex;
    flex-direction: column;

    gap: 6px;

    padding: 8px 0;

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.production-product {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 8px;

    font-size: 9px;
}

.production-product span {
    color: var(--text-muted);
}

.production-product strong {
    text-align: right;
}

.production-more-products {
    color: var(--primary);

    font-size: 9px;
    font-weight: 700;
}

.production-card-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 8px;

    margin-top: 9px;
}

.production-card-footer > div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.production-card-footer span {
    color: var(--text-muted);

    font-size: 7px;

    text-transform: uppercase;
}

.production-card-footer strong {
    font-size: 9px;
}

.production-due {
    padding: 2px 5px;

    font-size: 7px;

    text-transform: uppercase;
}

.production-due.overdue {
    background: var(--danger-bg);
    color: var(--danger);
}

.production-due.soon {
    background: var(--warning-bg);
    color: var(--warning);
}

.production-card-actions {
    padding: 8px;

    border-top: 1px solid var(--border);

    background: #fafbfd;
}

.production-move-button {
    width: 100%;
    min-height: 33px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 9px;

    border-radius: 6px;

    background: var(--primary-soft);
    color: var(--primary);

    font-size: 9px;
    font-weight: 800;

    text-align: center;

    transition: .17s ease;
}

.production-move-button:hover {
    background: var(--primary);
    color: white;
}

/* =========================================================
   TEAM / USERS
   ========================================================= */

.user-role-info {
    max-width: 1000px;

    margin-bottom: 17px;

    padding: 13px 15px;

    background: var(--primary-soft);

    border: 1px solid #d8e8fb;
    border-radius: 8px;
}

.user-role-info strong {
    color: var(--primary);

    font-size: 11px;
}

.user-role-info p {
    margin-top: 4px;

    color: var(--text-muted);

    font-size: 10px;

    line-height: 1.55;
}

/* =========================================================
   MOBILE CARDS
   ========================================================= */

.mobile-customer-list,
.mobile-ticket-list,
.mobile-order-list,
.mobile-user-list {
    display: none;
}

.customer-mobile-card,
.ticket-mobile-card,
.order-mobile-card,
.user-mobile-card {
    display: block;

    padding: 14px;

    border-bottom: 1px solid var(--border);
}

.customer-mobile-top,
.ticket-mobile-top,
.order-mobile-top,
.user-mobile-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 10px;
}

.customer-mobile-top > div,
.ticket-mobile-top > div,
.order-mobile-top > div,
.user-mobile-top > div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.customer-mobile-top span,
.ticket-mobile-top span,
.order-mobile-top span,
.user-mobile-top span {
    color: var(--text-muted);

    font-size: 9px;
}

.customer-mobile-info,
.ticket-mobile-info,
.order-mobile-info,
.user-mobile-info {
    margin-top: 10px;

    color: var(--text-muted);

    font-size: 10px;
}

.customer-mobile-info {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.ticket-mobile-info,
.order-mobile-info {
    display: flex;
    justify-content: space-between;

    gap: 10px;
}

.user-mobile-info {
    display: flex;

    gap: 10px;
}

/* =========================================================
   OVERLAY
   ========================================================= */

.sidebar-overlay {
    display: none;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1250px) {

    .dashboard-kpis {
        grid-template-columns: repeat(3,1fr);
    }

    .production-summary {
        grid-template-columns: repeat(3,1fr);
    }

}

@media (max-width: 1100px) {

    .stats-grid {
        grid-template-columns: repeat(2,1fr);
    }

}

@media (max-width: 950px) {

    .customer-profile-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 900px) {

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .ticket-summary,
    .order-summary,
    .team-summary {
        grid-template-columns: repeat(2,1fr);
    }

    .order-item-grid {
        grid-template-columns: 1fr 1fr;
    }

    .calendar-panel {
        overflow-x: auto;
    }

    .calendar-weekdays,
    .calendar-grid {
        min-width: 900px;
    }

}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    :root {
        --sidebar-width: 252px;
    }

    body {
        overflow-x: hidden;
    }

    .sidebar {
        width: 270px;

        transform: translateX(-100%);

        box-shadow:
            14px 0 35px rgba(0,0,0,0.18);

        transition: transform .23s ease;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-overlay {
        position: fixed;

        inset: 0;

        background: rgba(7,18,35,0.48);

        backdrop-filter: blur(2px);

        z-index: 900;
    }

    .sidebar-overlay.show {
        display: block;
    }

    .main-content {
        margin-left: 0;
    }

    .topbar {
        min-height: 64px;

        padding: 10px 14px;
    }

    .menu-button {
        display: flex;
    }

    .topbar-left h1 {
        max-width: 220px;

        overflow: hidden;

        font-size: 16px;

        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .topbar-left p {
        display: none;
    }

    .topbar-user-text,
    .dashboard-user {
        display: none;
    }

    .page-content {
        padding: 15px 12px 28px;
    }

    /* buttons */

    .primary-button,
    .secondary-button,
    .success-button,
    .danger-button {
        min-height: 40px;

        font-size: 11px;
    }

    .topbar-right .primary-button {
        padding: 0 11px;
    }

    /* dashboard */

    .dashboard-kpis {
        grid-template-columns: repeat(2,minmax(0,1fr));

        gap: 9px;
    }

    .dashboard-kpi {
        min-height: 103px;

        padding: 13px;
    }

    .dashboard-kpi strong {
        font-size: 20px;
    }

    .dashboard-pipeline,
    .dashboard-activity-list,
    .dashboard-list {
        padding-left: 14px;
        padding-right: 14px;
    }

    /* toolbar */

    .page-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .search-box {
        max-width: none;
    }

    .customer-count {
        display: none;
    }

    /* forms */

    .form-grid {
        grid-template-columns: 1fr;

        gap: 14px;

        padding: 16px;
    }

    .form-field.full-width {
        grid-column: auto;
    }

    .form-actions {
        position: sticky;

        bottom: 0;

        padding: 10px 12px;

        background: rgba(244,247,251,0.96);

        backdrop-filter: blur(12px);

        border-top: 1px solid var(--border);

        z-index: 50;
    }

    .form-actions .primary-button,
    .form-actions .secondary-button,
    .form-actions .success-button,
    .form-actions .danger-button {
        flex: 1;
    }

    /* profile headers */

    .customer-profile-header,
    .opportunity-profile-header,
    .ticket-profile-header,
    .order-profile-header {
        flex-direction: column;

        padding: 19px 16px;
    }

    .customer-profile-header h2,
    .opportunity-profile-header h2,
    .ticket-profile-header h2,
    .order-profile-header h2 {
        font-size: 21px;
    }

    .customer-profile-actions {
        width: 100%;
    }

    .customer-profile-actions a {
        flex: 1;
    }

    /* stage bars */

    .profile-tabs,
    .opportunity-stage-bar,
    .ticket-status-bar,
    .order-production-bar {
        margin-left: -12px;
        margin-right: -12px;

        padding-left: 12px;
        padding-right: 12px;
    }

    .stage-step,
    .profile-tab {
        min-height: 36px;

        padding: 0 12px;

        font-size: 9px;
    }

    /* details */

    .profile-details {
        grid-template-columns: 1fr;

        gap: 16px;

        padding: 16px;
    }

    .profile-detail.full {
        grid-column: auto;
    }

    /* tables -> cards */

    .customer-table-panel .table-wrapper,
    .table-wrapper {
        display: none;
    }

    .mobile-customer-list,
    .mobile-ticket-list,
    .mobile-order-list,
    .mobile-user-list {
        display: block;
    }

    /* sales */

    .sales-summary {
        grid-template-columns: repeat(2,1fr);
    }

    .sales-summary > div {
        padding: 13px;
    }

    .sales-summary strong {
        font-size: 17px;
    }

    .sales-board {
        margin-left: -12px;
        margin-right: -12px;

        padding-left: 12px;
        padding-right: 12px;

        scroll-snap-type: x mandatory;
    }

    .sales-column {
        width: 83vw;
        min-width: 83vw;

        scroll-snap-align: start;
    }

    /* won/lost */

    .opportunity-close-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    /* activity timeline */

    .activity-timeline,
    .order-timeline {
        padding:
            3px
            14px
            16px;
    }

    .timeline-header,
    .order-timeline-header {
        flex-direction: column;

        gap: 6px;
    }

    /* calendar */

    .calendar-title h2 {
        font-size: 16px;
    }

    /* order creation */

    .order-items-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .order-items-header .secondary-button {
        width: 100%;
    }

    .order-items {
        padding: 12px;
    }

    .order-item {
        padding: 12px;
    }

    .order-item-grid {
        grid-template-columns: 1fr;
    }

    .order-total-box {
        justify-content: space-between;
    }

    /* order products */

    .order-product-list {
        padding: 4px 14px;
    }

    .order-product-main {
        flex-direction: column;
    }

    .order-product-details {
        gap: 16px;
    }

    .order-profile-grand-total {
        justify-content: space-between;

        padding: 15px;
    }

    /* comments */

    .ticket-comment-header,
    .order-comment-header {
        flex-direction: column;
    }

    .ticket-comments,
    .order-comments {
        padding:
            3px
            14px;
    }

    .ticket-comment-form,
    .order-comment-form {
        padding: 14px;
    }

    /* production */

    .production-page {
        overflow: visible;
    }

    .production-summary {
        grid-template-columns: repeat(2,1fr);
    }

    .production-board {
        display: flex;

        margin-left: -12px;
        margin-right: -12px;

        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: 18px;

        overflow-x: auto;

        scroll-snap-type: x mandatory;
    }

    .production-column {
        flex: 0 0 84vw;

        min-width: 275px;

        scroll-snap-align: start;
    }

}

/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 420px) {

    .page-content {
        padding-left: 10px;
        padding-right: 10px;
    }

    .dashboard-kpis {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .ticket-summary,
    .order-summary,
    .team-summary,
    .production-summary {
        gap: 8px;
    }

    .ticket-summary-card,
    .order-summary-card,
    .team-summary-card,
    .production-summary-card {
        padding: 12px;
    }

    .customer-profile-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

}

/* =========================================================
   ACCESSIBILITY / FINISHING
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}
/* =========================================================
   WOOCOMMERCE SYNC
   ========================================================= */

.woo-sync-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.woo-sync-content {
    padding: 20px;
}

.woo-sync-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding-bottom: 18px;

    border-bottom: 1px solid var(--border);
}

.woo-sync-stat span {
    color: var(--text-muted);

    font-size: 11px;
    font-weight: 700;
}

.woo-sync-stat strong {
    color: var(--primary);

    font-size: 25px;
}

.woo-sync-info {
    margin: 18px 0;

    padding: 14px;

    background: var(--primary-soft);

    border: 1px solid #d8e8fb;
    border-radius: 8px;
}

.woo-sync-info strong {
    color: var(--primary);

    font-size: 11px;
}

.woo-sync-info p {
    margin-top: 5px;

    color: var(--text-muted);

    font-size: 10px;

    line-height: 1.6;
}

.woo-sync-button {
    width: 100%;
}

.woo-result-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    padding: 20px;
}

.woo-result-summary > div {
    padding: 14px;

    background: var(--surface-soft);

    border: 1px solid var(--border);
    border-radius: 8px;
}

.woo-result-summary span {
    display: block;

    color: var(--text-muted);

    font-size: 9px;
    font-weight: 700;
}

.woo-result-summary strong {
    display: block;

    margin-top: 5px;

    font-size: 20px;
}

.woo-result-summary .woo-imported {
    color: var(--success);
}

.woo-result-summary .woo-failed {
    color: var(--danger);
}

.woo-result-list {
    padding: 5px 20px 16px;
}

.woo-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 13px 0;

    border-bottom: 1px solid var(--border);
}

.woo-result-item:last-child {
    border-bottom: 0;
}

.woo-result-item > div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.woo-result-item span {
    color: var(--text-muted);

    font-size: 9px;
}

.woo-result-item strong {
    font-size: 11px;
}

.woo-result-open {
    color: var(--primary) !important;

    font-weight: 700;
}

.woo-result-item.error strong {
    color: var(--danger);
}

@media (max-width: 900px) {

    .woo-sync-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 768px) {

    .woo-result-summary {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   TEMAX CRM - DASHBOARD V3
   Final Desktop + Tablet + Mobile
   ========================================================= */

.dashboard-v3 {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

.dashboard-command-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.dashboard-command-header > div:first-child {
    min-width: 0;
}

.dashboard-command-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--primary);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.6px;
}

.dashboard-command-header h2 {
    font-size: 25px;
    font-weight: 760;
    letter-spacing: -0.55px;
    line-height: 1.15;
}

.dashboard-command-header p {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.5;
}

.dashboard-command-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* KPI */

.dashboard-v3-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 18px;
}

.dashboard-v3-kpi {
    position: relative;
    min-width: 0;
    min-height: 132px;
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .025);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.dashboard-v3-kpi::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--primary);
    opacity: 0;
    transition: opacity .18s ease;
}

.dashboard-v3-kpi:hover {
    transform: translateY(-2px);
    border-color: #c6d9f0;
    box-shadow: 0 9px 24px rgba(15, 23, 42, .07);
}

.dashboard-v3-kpi:hover::after {
    opacity: 1;
}

.dashboard-v3-kpi-accent {
    background: linear-gradient(145deg, #0f5ecc 0%, #1769e0 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 22px rgba(23, 105, 224, .18);
}

.dashboard-v3-kpi-accent:hover {
    border-color: transparent;
}

.dashboard-v3-kpi-top {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dashboard-v3-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
}

.dashboard-v3-kpi-accent .dashboard-v3-icon {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.dashboard-v3-label {
    min-width: 0;
    color: var(--text-muted);
    font-size: 8px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .35px;
    text-transform: uppercase;
}

.dashboard-v3-kpi-accent .dashboard-v3-label {
    color: rgba(255, 255, 255, .76);
}

.dashboard-v3-number {
    margin-top: 13px;
    font-size: 29px;
    font-weight: 770;
    line-height: 1;
}

.dashboard-v3-helper {
    margin-top: auto;
    padding-top: 9px;
    color: var(--text-muted);
    font-size: 8px;
    line-height: 1.4;
}

.dashboard-v3-kpi-accent .dashboard-v3-helper {
    color: rgba(255, 255, 255, .66);
}

/* Main layout */

.dashboard-v3-main {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .8fr);
    align-items: start;
    gap: 16px;
}

.dashboard-v3-left,
.dashboard-v3-right {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dashboard-v3-panel {
    min-width: 0;
    box-shadow: 0 2px 9px rgba(15, 23, 42, .035);
}

.dashboard-v3-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.dashboard-v3-panel-header > div:first-child {
    min-width: 0;
}

.dashboard-v3-section-label {
    display: block;
    margin-bottom: 4px;
    color: var(--primary);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.dashboard-v3-panel-header h3 {
    font-size: 14px;
    font-weight: 760;
}

.dashboard-v3-panel-header p {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.45;
}

.dashboard-v3-link {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--primary);
    font-size: 9px;
    font-weight: 800;
}

/* Activities */

.dashboard-v3-activities {
    padding: 4px 20px 13px;
}

.dashboard-v3-activity {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    transition: opacity .15s ease;
}

.dashboard-v3-activity:last-child {
    border-bottom: 0;
}

.dashboard-v3-activity:hover {
    opacity: .78;
}

.dashboard-v3-date {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #dceafa;
    border-radius: 9px;
    background: var(--primary-soft);
}

.dashboard-v3-date strong {
    color: var(--primary);
    font-size: 14px;
}

.dashboard-v3-date span {
    color: var(--primary);
    font-size: 7px;
    font-weight: 900;
}

.dashboard-v3-activity-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dashboard-v3-activity-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.dashboard-v3-activity-title strong {
    min-width: 0;
    font-size: 11px;
}

.dashboard-v3-activity-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    color: var(--text-muted);
    font-size: 8px;
}

/* Orders */

.dashboard-v3-orders {
    padding: 4px 20px 13px;
}

.dashboard-v3-order {
    display: block;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
}

.dashboard-v3-order:last-child {
    border-bottom: 0;
}

.dashboard-v3-order-main {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-v3-order-main > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dashboard-v3-order-number {
    color: var(--primary);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .3px;
}

.dashboard-v3-order-main strong {
    min-width: 0;
    font-size: 11px;
    overflow-wrap: anywhere;
}

.dashboard-v3-order-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

.dashboard-v3-order-footer span {
    color: var(--text-muted);
    font-size: 8px;
}

.dashboard-v3-order-footer strong {
    flex-shrink: 0;
    font-size: 10px;
}

/* Pipeline */

.dashboard-v3-pipeline {
    padding: 7px 20px 16px;
}

.dashboard-v3-pipeline-item {
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}

.dashboard-v3-pipeline-item:last-child {
    border-bottom: 0;
}

.dashboard-v3-pipeline-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-v3-pipeline-top > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dashboard-v3-pipeline-top strong {
    font-size: 10px;
}

.dashboard-v3-pipeline-top span {
    color: var(--text-muted);
    font-size: 8px;
}

.dashboard-v3-pipeline-value {
    flex-shrink: 0;
    color: var(--primary);
    font-size: 9px !important;
    white-space: nowrap;
}

.dashboard-v3-progress {
    height: 4px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 20px;
    background: #edf1f6;
}

.dashboard-v3-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary), #5b9cf3);
}

/* Tickets */

.dashboard-v3-tickets {
    padding: 4px 20px 13px;
}

.dashboard-v3-ticket {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.dashboard-v3-ticket:last-child {
    border-bottom: 0;
}

.dashboard-v3-ticket > div:first-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dashboard-v3-ticket-number {
    color: var(--primary) !important;
    font-size: 8px !important;
    font-weight: 900;
}

.dashboard-v3-ticket > div:first-child strong {
    min-width: 0;
    font-size: 10px;
    overflow-wrap: anywhere;
}

.dashboard-v3-ticket > div:first-child span {
    color: var(--text-muted);
    font-size: 8px;
}

.dashboard-v3-ticket-badges {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

/* Empty */

.dashboard-v3-empty {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
}

.dashboard-v3-empty strong {
    font-size: 11px;
}

.dashboard-v3-empty span {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 9px;
}

/* Large desktop: keep all six KPIs */
@media (min-width: 1450px) {
    .dashboard-v3-kpis {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* Typical desktop/laptop */
@media (max-width: 1449px) and (min-width: 1181px) {
    .dashboard-v3-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-v3-main {
        grid-template-columns: minmax(0, 1.3fr) minmax(300px, .8fr);
    }
}

/* Compact desktop / tablet landscape */
@media (max-width: 1180px) {
    .dashboard-v3-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-v3-main {
        grid-template-columns: 1fr;
    }
}

/* Tablet */
@media (max-width: 900px) {
    .dashboard-command-header {
        gap: 16px;
    }

    .dashboard-command-header h2 {
        font-size: 22px;
    }

    .dashboard-v3-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 768px) {
    .dashboard-command-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .dashboard-command-header h2 {
        font-size: 20px;
    }

    .dashboard-command-actions {
        width: 100%;
    }

    .dashboard-command-actions a {
        flex: 1;
    }

    .dashboard-v3-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .dashboard-v3-kpi {
        min-height: 120px;
        padding: 13px;
    }

    .dashboard-v3-number {
        font-size: 24px;
    }

    .dashboard-v3-panel-header {
        padding: 15px;
    }

    .dashboard-v3-activities,
    .dashboard-v3-orders,
    .dashboard-v3-pipeline,
    .dashboard-v3-tickets {
        padding-left: 15px;
        padding-right: 15px;
    }

    .dashboard-v3-order-footer,
    .dashboard-v3-pipeline-top {
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .dashboard-command-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .dashboard-v3-kpi {
        min-height: 116px;
    }

    .dashboard-v3-icon {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
    }

    .dashboard-v3-label,
    .dashboard-v3-helper {
        font-size: 7px;
    }

    .dashboard-v3-ticket {
        align-items: flex-start;
    }
}

@media (max-width: 360px) {
    .dashboard-v3-kpis {
        grid-template-columns: 1fr;
    }

    .dashboard-command-actions {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   NOTIFICATIONS V1
   ========================================================= */

.notification-bell-wrapper {
    position: relative;
    z-index: 2000;
}

.notification-bell-button {
    position: relative;
    z-index: 2001;

    width: 39px;
    height: 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: white;

    color: var(--text-secondary);

    cursor: pointer;

    transition: .17s ease;
}

.notification-bell-button:hover {
    background: var(--primary-soft);
    color: var(--primary);

    border-color: #c7daf2;
}

.notification-bell-symbol {
    font-size: 18px;
}

.notification-bell-count {
    position: absolute;

    top: -5px;
    right: -5px;

    min-width: 18px;
    height: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 4px;

    border: 2px solid white;
    border-radius: 999px;

    background: var(--danger);
    color: white;

    font-size: 8px;
    font-weight: 900;
}

/* DROPDOWN */

.notification-dropdown {
    position: absolute;

    top: calc(100% + 10px);
    right: 0;

    width: 365px;

    display: none;

    background: white;

    border: 1px solid var(--border);
    border-radius: 12px;

    box-shadow:
        0 18px 45px rgba(15,23,42,.14);

    overflow: hidden;

    z-index: 3000;
    pointer-events: auto;
}

.notification-dropdown.show {
    display: block;
    pointer-events: auto;
}

.notification-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 14px 15px;

    border-bottom: 1px solid var(--border);
}

.notification-dropdown-header > div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.notification-dropdown-header strong {
    font-size: 12px;
}

.notification-dropdown-header span {
    color: var(--text-muted);

    font-size: 8px;
}

.notification-dropdown-header a {
    position: relative;
    z-index: 3001;
    pointer-events: auto;

    color: var(--primary);

    font-size: 9px;
    font-weight: 800;
}

.notification-dropdown-list {
    max-height: 420px;

    overflow-y: auto;
}

.notification-dropdown-item {
    position: relative;
    z-index: 3001;
    pointer-events: auto;

    display: flex;
    flex-direction: column;

    gap: 4px;

    padding: 12px 15px 12px 19px;

    border-bottom: 1px solid var(--border);

    transition: background .15s ease;
}

.notification-dropdown-item:last-child {
    border-bottom: 0;
}

.notification-dropdown-item:hover {
    background: var(--surface-soft);
}

.notification-dropdown-item.unread {
    background: var(--primary-soft);
}

.notification-dropdown-item.unread::before {
    content: "";

    position: absolute;

    left: 7px;
    top: 17px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--primary);
}

.notification-dropdown-item strong {
    font-size: 10px;
}

.notification-dropdown-item span {
    color: var(--text-muted);

    font-size: 9px;

    line-height: 1.4;
}

.notification-dropdown-item small {
    color: #9aa4b2;

    font-size: 8px;
}

.notification-dropdown-empty {
    padding: 28px;

    color: var(--text-muted);

    font-size: 10px;

    text-align: center;
}

/* NOTIFICATIONS PAGE */

.notification-page-header {
    margin-bottom: 17px;

    padding: 22px 24px;

    background:
        linear-gradient(
            135deg,
            #0f5ecc,
            #1769e0
        );

    border-radius: 14px;

    color: white;
}

.notification-page-label {
    display: block;

    margin-bottom: 5px;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1.4px;

    opacity: .7;
}

.notification-page-header h2 {
    font-size: 22px;
}

.notification-page-header p {
    margin-top: 5px;

    font-size: 10px;

    opacity: .75;
}

.notification-list {
    padding: 4px 20px;
}

.notification-item {
    position: relative;

    display: flex;

    gap: 12px;

    padding: 15px 0;

    border-bottom: 1px solid var(--border);

    transition: background .15s ease;
}

.notification-item:last-child {
    border-bottom: 0;
}

.notification-item.unread {
    margin-left: -20px;
    margin-right: -20px;

    padding-left: 20px;
    padding-right: 20px;

    background: var(--primary-soft);
}

.notification-icon {
    width: 37px;
    height: 37px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: var(--primary-light);
    color: var(--primary);

    font-size: 13px;
    font-weight: 900;
}

.notification-icon.ticket {
    background: var(--danger-bg);
    color: var(--danger);
}

.notification-icon.production {
    background: var(--warning-bg);
    color: var(--warning);
}

.notification-icon.activity {
    background: #f1efff;
    color: var(--purple);
}

.notification-icon.woocommerce {
    background: #f1ebff;
    color: #7b4cc5;
}

.notification-body {
    min-width: 0;
    flex: 1;
}

.notification-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;
}

.notification-title-row strong {
    font-size: 11px;
}

.notification-new {
    padding: 2px 6px;

    border-radius: 999px;

    background: var(--primary);
    color: white;

    font-size: 7px;
    font-weight: 900;

    text-transform: uppercase;
}

.notification-body p {
    margin-top: 5px;

    color: var(--text-muted);

    font-size: 10px;

    line-height: 1.5;
}

.notification-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;

    margin-top: 7px;

    color: #9aa4b2;

    font-size: 8px;
}

/* MOBILE */

@media (max-width: 768px) {

    .notification-dropdown {
        position: fixed;

        top: 67px;
        left: 10px;
        right: 10px;

        width: auto;
    }

    .notification-list {
        padding-left: 14px;
        padding-right: 14px;
    }

    .notification-item.unread {
        margin-left: -14px;
        margin-right: -14px;

        padding-left: 14px;
        padding-right: 14px;
    }

}
/* =========================================================
   ORDERS SEARCH + ORDER NAME
   ========================================================= */

.orders-search-form {
    width: 100%;
    max-width: 720px;

    display: flex;
    align-items: center;

    gap: 8px;
}

.orders-search-form .search-box {
    max-width: none;
    flex: 1;
}

.order-list-identity {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.order-list-number,
.order-list-name {
    color: var(--text);

    font-size: 11px;
    font-weight: 700;

    line-height: 1.35;
}

.order-list-name.muted {
    color: var(--text-muted);

    font-weight: 500;
}

.order-mobile-name {
   color: var(--text) !important;
    font-weight: 700;
}

@media (max-width: 768px) {

    .orders-search-form {
        max-width: none;

        display: grid;
        grid-template-columns: 1fr auto;
    }

    .orders-search-form .search-box {
        grid-column: 1 / -1;
    }

    .orders-search-form .primary-button,
    .orders-search-form .secondary-button {
        width: 100%;
    }

}
/* =========================================================
   ORDER PROFILE NAME
   ========================================================= */

.order-profile-name {
    margin-top: 5px;

    color: white;

    font-size: 15px;
    font-weight: 700;

    line-height: 1.35;
}
.timeline-event-badge.change {
    background: #eef4ff;
    color: #376cb4;
}
/* =========================================================
   CUSTOMER 360
   ========================================================= */

.customer-360-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.customer-360-kpi {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 15px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 11px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .03);
}

.customer-360-kpi span {
    color: var(--text-muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .35px;
    text-transform: uppercase;
}

.customer-360-kpi strong {
    color: var(--text);
    font-size: 23px;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.customer-360-kpi small {
    color: var(--text-muted);
    font-size: 8px;
}

.customer-360-list {
    padding: 4px 20px 14px;
}

.customer-360-list-item {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    transition:
        background .16s ease,
        padding-left .16s ease,
        padding-right .16s ease;
}

.customer-360-list-item:last-child {
    border-bottom: 0;
}

.customer-360-list-item:hover {
    margin-left: -8px;
    margin-right: -8px;
    padding-left: 8px;
    padding-right: 8px;
    background: var(--primary-soft);
    border-radius: 8px;
}

.customer-360-list-item > div:first-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.customer-360-list-item strong {
    font-size: 10px;
    overflow-wrap: anywhere;
}

.customer-360-list-item small {
    color: var(--text-muted);
    font-size: 8px;
}

.customer-360-item-label {
    color: var(--primary);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .3px;
}

.customer-360-item-value {
    flex-shrink: 0;
    color: var(--text);
    font-size: 10px;
    font-weight: 800;
}

.customer-360-item-side {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 5px;
}

.customer-360-item-side strong {
    font-size: 9px;
}

@media (max-width: 1200px) {
    .customer-360-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .customer-360-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .customer-360-list {
        padding-left: 14px;
        padding-right: 14px;
    }

    .customer-360-list-item {
        align-items: flex-start;
    }
}

@media (max-width: 420px) {
    .customer-360-kpis {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .customer-360-kpi {
        padding: 12px;
    }

    .customer-360-kpi strong {
        font-size: 20px;
    }

    .customer-360-list-item {
        gap: 10px;
    }
}
/* =========================================================
   DASHBOARD MANAGEMENT SNAPSHOT + ATTENTION
   ========================================================= */

.dashboard-management-snapshot {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.dashboard-management-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 15px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 11px;
    box-shadow: var(--shadow-xs);
}

.dashboard-management-card span {
    color: var(--text-muted);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .35px;
    text-transform: uppercase;
}

.dashboard-management-card strong {
    color: var(--text);
    font-size: 22px;
    line-height: 1;
}

.dashboard-management-card small {
    color: var(--text-muted);
    font-size: 8px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.dashboard-management-card.won {
    border-left: 3px solid var(--success);
}

.dashboard-management-card.lost {
    border-left: 3px solid var(--danger);
}

.dashboard-management-card.attention {
    border-left: 3px solid var(--warning);
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease;
}

.dashboard-management-card.attention:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.dashboard-attention-list {
    padding: 4px 20px 13px;
}

.dashboard-attention-item {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}

.dashboard-attention-item:last-child {
    border-bottom: 0;
}

.dashboard-attention-type {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 7px;
    font-weight: 900;
    text-transform: uppercase;
}

.dashboard-attention-type.order {
    background: var(--warning-bg);
    color: var(--warning);
}

.dashboard-attention-type.ticket {
    background: var(--danger-bg);
    color: var(--danger);
}

.dashboard-attention-type.activity {
    background: var(--primary-light);
    color: var(--primary);
}

.dashboard-attention-item > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dashboard-attention-item strong {
    font-size: 10px;
    overflow-wrap: anywhere;
}

.dashboard-attention-item small {
    color: var(--text-muted);
    font-size: 8px;
    line-height: 1.4;
}

@media (max-width: 1100px) {
    .dashboard-management-snapshot {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .dashboard-management-snapshot {
        gap: 8px;
    }

    .dashboard-management-card {
        padding: 12px;
    }

    .dashboard-management-card strong {
        font-size: 19px;
    }

    .dashboard-attention-list {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 420px) {
    .dashboard-management-snapshot {
        grid-template-columns: 1fr 1fr;
    }
}
/* =========================================================
   GLOBAL SEARCH V1
   ========================================================= */

.global-search {
    position: relative;
    width: min(380px, 34vw);
    z-index: 2500;
}

.global-search-box {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.global-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 15px;
    pointer-events: none;
}

.global-search-input {
    width: 100%;
    height: 39px;
    padding: 0 38px 0 35px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
    color: var(--text);
    outline: none;
    font-size: 11px;
    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}

.global-search-input:focus {
    border-color: #b7cff0;
    box-shadow: 0 0 0 3px rgba(23, 105, 224, .08);
}

.global-search-shortcut {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--surface-soft);
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 800;
    pointer-events: none;
}

.global-search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: min(520px, 82vw);
    display: none;
    overflow: hidden;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .16);
    z-index: 3500;
}

.global-search.open .global-search-dropdown {
    display: block;
}

.global-search-state {
    padding: 18px;
    color: var(--text-muted);
    font-size: 10px;
    text-align: center;
}

.global-search-results {
    max-height: 520px;
    overflow-y: auto;
}

.global-search-result {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--border);
    transition: background .14s ease;
}

.global-search-result:last-child {
    border-bottom: 0;
}

.global-search-result:hover,
.global-search-result.active {
    background: var(--primary-soft);
}

.global-search-result-badge {
    flex: 0 0 auto;
    min-width: 65px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 7px;
    border-radius: 999px;
    background: #edf1f5;
    color: var(--text-muted);
    font-size: 7px;
    font-weight: 900;
    text-transform: uppercase;
}

.global-search-result.customer .global-search-result-badge {
    background: var(--primary-light);
    color: var(--primary);
}

.global-search-result.contact .global-search-result-badge {
    background: #eef7ff;
    color: #2d7fb8;
}

.global-search-result.order .global-search-result-badge {
    background: var(--warning-bg);
    color: var(--warning);
}

.global-search-result.opportunity .global-search-result-badge {
    background: #f1efff;
    color: var(--purple);
}

.global-search-result.ticket .global-search-result-badge {
    background: var(--danger-bg);
    color: var(--danger);
}

.global-search-result-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.global-search-result-title {
    color: var(--text);
    font-size: 10px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.global-search-result-meta {
    color: var(--text-muted);
    font-size: 8px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.global-search-mobile-button {
    display: none;
    width: 39px;
    height: 39px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: white;
    color: var(--text-secondary);
    font-size: 18px;
}

@media (max-width: 1050px) {
    .global-search {
        width: min(300px, 30vw);
    }
}

@media (max-width: 768px) {

    .global-search {
        width: auto;
    }

    .global-search-mobile-button {
        display: flex;
    }

    .global-search-box {
        position: fixed;
        top: 70px;
        left: 10px;
        right: 10px;
        width: auto;
        display: none;
        z-index: 3600;
    }

    .global-search.mobile-open .global-search-box {
        display: flex;
    }

    .global-search.mobile-open .global-search-input {
        height: 46px;
        font-size: 12px;
        box-shadow: 0 14px 35px rgba(15, 23, 42, .12);
    }

    .global-search-dropdown {
        position: fixed;
        top: 124px;
        left: 10px;
        right: 10px;
        width: auto;
        max-height: calc(100vh - 145px);
    }

    .global-search-results {
        max-height: calc(100vh - 200px);
    }

}

@media (max-width: 420px) {

    .global-search-result {
        gap: 8px;
        padding: 10px;
    }

    .global-search-result-badge {
        min-width: 58px;
        font-size: 6px;
    }

}
/* =========================================================
   TEMAX CRM - LOVABLE REPLICA V1
   Structural dashboard redesign based on supplied mockup
   ========================================================= */

:root {
    --lovable-navy: #111e4a;
    --lovable-navy-2: #0f1b45;
    --lovable-text: #111c4c;
    --lovable-blue: #3972ad;
    --lovable-bg: #e7eef4;
    --lovable-card: #ffffff;
    --lovable-border: #cdd7e0;
    --lovable-muted: #6f82a0;
    --lovable-active: #204a68;
    --lovable-green: #18a25d;
    --lovable-red: #e23b44;
    --lovable-red-soft: #fff0ee;
    --sidebar-width: 255px;
}

body {
    background: var(--lovable-bg);
    color: var(--lovable-text);
}

/* ---------------------------------------------------------
   SIDEBAR - shared across CRM
   --------------------------------------------------------- */

.sidebar.lovable-sidebar {
    width: var(--sidebar-width);
    padding: 24px 16px 18px;
    background: var(--lovable-navy);
    border-right: 0;
    box-shadow: none;
}

.lovable-sidebar-brand {
    width: 150px;
    height: 62px;
    display: flex;
    align-items: center;
    margin: 0 7px 18px;
    overflow: hidden;
}

.lovable-sidebar-brand img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    mix-blend-mode: screen;
}

.lovable-sidebar-nav {
    gap: 2px;
}

.sidebar-section-label {
    display: block;
    margin: 13px 8px 5px;
    color: rgba(255,255,255,.34);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.9px;
    text-transform: uppercase;
}

.sidebar.lovable-sidebar .nav-item {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 7px;
    color: rgba(255,255,255,.61);
    font-size: 13px;
    font-weight: 500;
}

.sidebar.lovable-sidebar .nav-item:hover {
    background: rgba(255,255,255,.055);
    color: #fff;
}

.sidebar.lovable-sidebar .nav-item.active {
    background: var(--lovable-active);
    color: #fff;
    box-shadow: none;
}

.lovable-sidebar-user {
    margin-left: -16px;
    margin-right: -16px;
    margin-bottom: -18px;
    min-height: 96px;
    padding: 16px 23px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.lovable-user-avatar {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
    background: #18325f;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
}

.lovable-sidebar-user .user-info strong {
    font-size: 11px;
    font-weight: 600;
}

.lovable-sidebar-user .user-info span {
    color: rgba(255,255,255,.32);
    font-size: 8px;
}

.lovable-logout-button {
    width: 30px;
    height: 30px;
    border-radius: 7px;
}

/* ---------------------------------------------------------
   DASHBOARD SHELL
   --------------------------------------------------------- */

.main-content.lovable-dashboard-shell {
    min-height: 100vh;
    margin-left: var(--sidebar-width);
    background: var(--lovable-bg);
}

.lovable-dashboard-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 295px;
}

.lovable-dashboard-main {
    min-width: 0;
    padding: 31px 32px 50px;
}

.lovable-dashboard-rail {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    overflow-y: auto;
    padding: 25px 26px 28px 24px;
    background: #fff;
    border-left: 1px solid #dbe2e8;
}

/* ---------------------------------------------------------
   DASHBOARD HEADER
   --------------------------------------------------------- */

.lovable-dashboard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 31px;
}

.lovable-dashboard-heading {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.lovable-dashboard-heading h1 {
    margin: 0;
    color: var(--lovable-text);
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.8px;
    line-height: 1.08;
}

.lovable-dashboard-heading p {
    margin-top: 7px;
    color: #4479ad;
    font-size: 13px;
    line-height: 1.4;
}

.lovable-menu-button {
    display: none;
}

.lovable-dashboard-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.lovable-dashboard-tools {
    display: flex;
    align-items: center;
    gap: 7px;
}

.lovable-dashboard-tools .global-search {
    width: 185px;
}

.lovable-dashboard-tools .global-search-input {
    height: 38px;
    border-color: #d2dae3;
    border-radius: 10px;
    font-size: 10px;
}

.lovable-dashboard-tools .notification-bell-button {
    width: 38px;
    height: 38px;
    border-color: #d2dae3;
    border-radius: 10px;
}

.lovable-action {
    height: 38px;
    min-width: 130px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 2px 5px rgba(15, 28, 66, .08);
    transition: transform .15s ease, box-shadow .15s ease;
}

.lovable-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 28, 66, .11);
}

.lovable-action-light {
    background: #fff;
    color: var(--lovable-text);
    border: 1px solid #cdd6df;
}

.lovable-action-dark {
    background: var(--lovable-navy);
    color: #fff;
    border: 1px solid var(--lovable-navy);
}

.lovable-mobile-actions {
    display: none;
}

/* ---------------------------------------------------------
   KPI CARDS
   --------------------------------------------------------- */

.lovable-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 30px;
}

.lovable-kpi-card {
    min-width: 0;
    min-height: 133px;
    display: flex;
    flex-direction: column;
    padding: 22px 20px 18px;
    background: var(--lovable-card);
    border: 1px solid var(--lovable-border);
    border-radius: 15px;
    box-shadow: 0 1px 2px rgba(20, 36, 70, .06);
    transition: transform .16s ease, box-shadow .16s ease;
}

.lovable-kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(20, 36, 70, .07);
}

.lovable-kpi-label {
    color: #3d72a8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.lovable-kpi-value {
    margin-top: 10px;
    color: var(--lovable-text);
    font-size: 31px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
    overflow-wrap: anywhere;
}

.lovable-kpi-money {
    font-size: clamp(23px, 2.2vw, 31px);
}

.lovable-kpi-helper {
    margin-top: auto;
    padding-top: 15px;
    color: #4679ae;
    font-size: 10px;
}

.lovable-kpi-positive {
    color: var(--lovable-green);
}

.lovable-kpi-progress {
    height: 6px;
    margin-top: auto;
    overflow: hidden;
    border-radius: 20px;
    background: #e6edf3;
}

.lovable-kpi-progress span {
    display: block;
    height: 100%;
    min-width: 18%;
    border-radius: inherit;
    background: var(--lovable-navy);
}

/* ---------------------------------------------------------
   RECENT ORDERS
   --------------------------------------------------------- */

.lovable-orders-panel {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--lovable-border);
    border-radius: 15px;
    box-shadow: 0 1px 2px rgba(20, 36, 70, .05);
}

.lovable-panel-heading {
    min-height: 57px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 24px;
    border-bottom: 1px solid #dce4eb;
}

.lovable-panel-heading h2 {
    color: var(--lovable-text);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.25px;
}

.lovable-panel-heading a {
    color: #356fa8;
    font-size: 10px;
    font-weight: 600;
}

.lovable-orders-table {
    width: 100%;
}

.lovable-order-row {
    min-width: 690px;
    display: grid;
    grid-template-columns: 1.05fr 2.1fr .75fr 1fr;
    align-items: center;
    gap: 20px;
    min-height: 54px;
    padding: 0 24px;
    border-bottom: 1px solid #dce4eb;
    transition: background .14s ease;
}

.lovable-order-row:last-child {
    border-bottom: 0;
}

.lovable-order-row:not(.lovable-order-head):hover {
    background: #f8fbfd;
}

.lovable-order-head {
    min-height: 40px;
    background: #f7fafc;
    color: #3d72a8;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.lovable-order-id {
    color: #3d72a8;
    font-size: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.lovable-order-client,
.lovable-order-value {
    color: var(--lovable-text);
    font-size: 12px;
    font-weight: 500;
}

.lovable-order-value {
    text-align: left;
    white-space: nowrap;
}

.lovable-order-row .order-status {
    padding: 4px 9px;
    font-size: 8px;
    font-weight: 700;
}

.lovable-empty {
    padding: 35px 24px;
    color: var(--lovable-muted);
    font-size: 11px;
    text-align: center;
}

/* ---------------------------------------------------------
   RIGHT RAIL
   --------------------------------------------------------- */

.lovable-rail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 26px;
}

.lovable-rail-header h2 {
    color: var(--lovable-text);
    font-size: 14px;
    font-weight: 800;
}

.lovable-attention-count {
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 999px;
    background: #ffe9e7;
    color: var(--lovable-red);
    font-size: 9px;
    font-weight: 800;
}

.lovable-attention-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lovable-attention-card {
    display: block;
    padding: 16px;
    background: #fff;
    border: 1px solid #dce3e9;
    border-radius: 11px;
    box-shadow: 0 1px 2px rgba(20, 36, 70, .04);
}

.lovable-attention-danger {
    background: var(--lovable-red-soft);
    border-color: #ffb9b4;
}

.lovable-attention-clear {
    color: var(--lovable-text);
}

.lovable-attention-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    color: #3370aa;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
}

.lovable-attention-danger .lovable-attention-meta {
    color: var(--lovable-red);
}

.lovable-attention-card > strong {
    display: block;
    color: var(--lovable-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.lovable-attention-card p {
    margin-top: 5px;
    color: #5579a6;
    font-size: 10px;
    line-height: 1.45;
}

.lovable-alert-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lovable-red);
}

.lovable-resolve-button {
    min-height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 11px;
    border-radius: 3px;
    background: var(--lovable-navy);
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.lovable-upcoming {
    margin-top: 32px;
}

.lovable-rail-label {
    display: block;
    color: #3e75aa;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.lovable-rail-divider {
    height: 1px;
    margin: 8px 0 12px;
    background: #dbe3ea;
}

.lovable-upcoming-item {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 0;
}

.lovable-upcoming-dot {
    width: 8px;
    height: 8px;
    margin-top: 4px;
    border-radius: 50%;
    background: #4c7fb0;
}

.lovable-upcoming-item:nth-of-type(even) .lovable-upcoming-dot {
    background: #dfe8ef;
}

.lovable-upcoming-item > span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lovable-upcoming-item strong {
    color: var(--lovable-text);
    font-size: 10px;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.lovable-upcoming-item small,
.lovable-upcoming-empty {
    color: #4f7ead;
    font-size: 8px;
}

.lovable-sales-snapshot {
    margin-top: 42px;
    padding: 17px;
    border-radius: 11px;
    background: var(--lovable-navy);
    color: #fff;
}

.lovable-sales-snapshot > span {
    display: block;
    color: rgba(255,255,255,.48);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.lovable-sales-snapshot strong {
    display: block;
    margin-top: 8px;
    font-size: 12px;
}

.lovable-sales-snapshot p {
    margin-top: 8px;
    color: rgba(255,255,255,.68);
    font-size: 10px;
    line-height: 1.5;
}

.lovable-sales-snapshot a {
    display: inline-block;
    margin-top: 12px;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
}

/* ---------------------------------------------------------
   SEARCH / NOTIFICATION ALIGNMENT
   --------------------------------------------------------- */

.lovable-dashboard-tools .global-search-dropdown {
    left: auto;
    right: 0;
}

.lovable-dashboard-tools .notification-dropdown {
    right: 0;
}

/* ---------------------------------------------------------
   LAPTOP
   --------------------------------------------------------- */

@media (max-width: 1320px) {
    .lovable-dashboard-main {
        padding-left: 24px;
        padding-right: 24px;
    }

    .lovable-dashboard-layout {
        grid-template-columns: minmax(0, 1fr) 275px;
    }

    .lovable-dashboard-rail {
        padding-left: 20px;
        padding-right: 20px;
    }

    .lovable-dashboard-tools .global-search {
        width: 145px;
    }

    .lovable-action {
        min-width: 112px;
    }
}

@media (max-width: 1120px) {
    .lovable-dashboard-layout {
        grid-template-columns: 1fr;
    }

    .lovable-dashboard-rail {
        position: static;
        height: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        padding: 24px;
        border-top: 1px solid #dbe2e8;
        border-left: 0;
    }

    .lovable-rail-header {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }

    .lovable-sales-snapshot {
        margin-top: 0;
    }

    .lovable-upcoming {
        margin-top: 0;
    }
}

@media (max-width: 1000px) {
    .lovable-dashboard-header {
        flex-direction: column;
    }

    .lovable-dashboard-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .lovable-dashboard-tools .global-search {
        width: min(260px, 35vw);
    }

    .lovable-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------
   MOBILE - matches supplied mobile composition
   --------------------------------------------------------- */

@media (max-width: 768px) {

    :root {
        --sidebar-width: 255px;
    }

    .sidebar.lovable-sidebar {
        width: 270px;
    }

    .main-content.lovable-dashboard-shell {
        margin-left: 0;
    }

    .lovable-dashboard-layout {
        display: block;
        min-height: 100vh;
    }

    .lovable-dashboard-main {
        padding: 18px 15px 34px;
    }

    .lovable-dashboard-header {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 17px;
    }

    .lovable-dashboard-heading {
        flex: 1;
        gap: 10px;
    }

    .lovable-menu-button {
        display: flex;
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        border: 1px solid #cad5de;
        border-radius: 9px;
        background: #fff;
        color: var(--lovable-text);
        font-size: 17px;
        box-shadow: 0 1px 2px rgba(20, 36, 70, .04);
    }

    .lovable-dashboard-heading h1 {
        font-size: 25px;
        line-height: 1.1;
    }

    .lovable-dashboard-heading p {
        margin-top: 5px;
        font-size: 12px;
    }

    .lovable-dashboard-actions {
        width: auto;
        gap: 6px;
    }

    .lovable-dashboard-actions > .lovable-action {
        display: none;
    }

    .lovable-dashboard-tools {
        gap: 5px;
    }

    .lovable-dashboard-tools .global-search {
        width: auto;
    }

    .lovable-dashboard-tools .notification-bell-button,
    .global-search-mobile-button {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }

    .lovable-mobile-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 30px;
    }

    .lovable-mobile-actions .lovable-action {
        min-width: 0;
        height: 38px;
        font-size: 12px;
    }

    .lovable-kpi-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 30px;
    }

    .lovable-kpi-card {
        min-height: 123px;
        padding: 21px 20px 18px;
        border-radius: 15px;
    }

    .lovable-kpi-value {
        font-size: 31px;
    }

    .lovable-kpi-money {
        font-size: 31px;
    }

    .lovable-orders-panel {
        border-radius: 15px;
    }

    .lovable-panel-heading {
        padding: 0 23px;
    }

    .lovable-orders-table {
        overflow-x: auto;
    }

    .lovable-order-row {
        min-width: 650px;
    }

    .lovable-dashboard-rail {
        display: none;
    }

    .lovable-dashboard-tools .global-search-box {
        top: 62px;
    }

    .lovable-dashboard-tools .global-search-dropdown {
        top: 116px;
    }

    .notification-dropdown {
        top: 58px;
    }
}

@media (max-width: 420px) {
    .lovable-dashboard-main {
        padding-left: 15px;
        padding-right: 15px;
    }

    .lovable-dashboard-heading h1 {
        font-size: 24px;
    }

    .lovable-dashboard-heading p {
        max-width: 260px;
    }

    .lovable-kpi-card {
        min-height: 123px;
    }
}
/* =========================================================
   TEMAX GLOBAL TYPOGRAPHY
   Match sidebar visual style
   ========================================================= */

body {
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Main headings */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: inherit;
    color: var(--text);
    font-weight: 700;
    letter-spacing: -0.025em;
}

/* Normal text */

p,
span,
div,
a,
td,
label,
small {
    font-family: inherit;
}

/* Buttons */

button,
.primary-button,
.secondary-button,
.success-button,
.danger-button {
    font-family: inherit;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Inputs */

input,
select,
textarea {
    font-family: inherit;
    font-weight: 500;
}

/* Tables */

.crm-table th {
    font-family: inherit;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.crm-table td {
    font-family: inherit;
    font-weight: 500;
}

/* Dashboard */

.lovable-dashboard,
.lovable-dashboard *,
.dashboard-v3,
.dashboard-v3 * {
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}

.lovable-dashboard h1,
.lovable-dashboard h2,
.lovable-dashboard h3,
.lovable-dashboard h4 {
    font-weight: 700;
    letter-spacing: -0.03em;
}

/* Keep IDs / order numbers monospace */

.lovable-order-id {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;
}
/* =========================================================
   TEMAX CRM V4 - CUSTOMERS MODULE
   Lovable-inspired module design
   Append this to the END of public/css/style.css
   ========================================================= */

.temax-module-shell {
    min-height: 100vh;
    background: #f5f7f9;
}

.temax-module-header {
    width: 100%;
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 30px 18px;
    background: transparent;
    border: 0;
}

.temax-module-heading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
}

.temax-module-heading > div {
    min-width: 0;
}

.temax-module-heading h1 {
    margin: 0;
    color: #111827;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.035em;
}

.temax-module-heading p {
    margin-top: 5px;
    color: #86909c;
    font-size: 11px;
    line-height: 1.45;
}

.temax-module-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.temax-module-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.temax-module-content {
    width: 100%;
    padding: 4px 30px 42px;
}

/* Toolbar */

.temax-list-toolbar {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 13px;
    padding: 0;
}

.temax-list-toolbar .search-box {
    max-width: 430px;
}

.temax-list-toolbar .search-box input {
    height: 42px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid #e4e8ed;
    border-radius: 8px;
    color: #20262e;
    box-shadow: 0 1px 2px rgba(20, 27, 35, .02);
}

.temax-list-toolbar .search-box input:focus {
    border-color: #bfc7d0;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, .04);
}

.temax-list-toolbar .customer-count {
    color: #9aa2ad;
    font-size: 10px;
    font-weight: 600;
}

/* Customer list */

.temax-list-panel {
    background: #fff;
    border: 1px solid #e7eaee;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(20, 27, 35, .025);
}

.temax-list-panel .crm-table th {
    padding: 12px 17px;
    background: #fafbfc;
    color: #8e98a4;
    border-bottom-color: #eceff2;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .08em;
}

.temax-list-panel .crm-table td {
    padding: 15px 17px;
    color: #596370;
    border-bottom-color: #eef0f2;
    font-size: 11px;
}

.temax-list-panel .crm-table tbody tr:hover {
    background: #fafbfc;
}

.temax-list-panel .crm-table td strong {
    color: #1e2630;
    font-size: 11px;
    font-weight: 700;
}

.temax-list-panel .table-secondary {
    margin-top: 4px;
    color: #9da5ae;
    font-size: 9px;
}

.temax-list-panel .source-badge {
    padding: 4px 8px;
    background: #f0f3f5;
    color: #5d6671;
    border: 1px solid #e5e9ed;
    font-size: 8px;
    font-weight: 700;
}

.temax-list-panel .table-action a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 9px;
    border: 1px solid #e4e8ec;
    border-radius: 7px;
    color: #343c46;
    background: #fff;
    font-size: 9px;
    font-weight: 700;
    text-decoration: none;
}

.temax-list-panel .table-action a:hover {
    background: #f5f7f9;
    border-color: #d4d9df;
    text-decoration: none;
}

/* Modern customer form */

.temax-form-page {
    max-width: 1220px;
}

.temax-modern-form {
    width: 100%;
    max-width: 980px;
}

.temax-modern-form .form-panel {
    margin-bottom: 14px;
    background: #fff;
    border: 1px solid #e6e9ed;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(20, 27, 35, .025);
}

.temax-modern-form .form-panel-header {
    padding: 18px 20px 14px;
    background: #fff;
    border-bottom: 1px solid #eef0f2;
}

.temax-modern-form .form-panel-header h3 {
    color: #202832;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.015em;
}

.temax-modern-form .form-panel-header p {
    margin-top: 4px;
    color: #969faa;
    font-size: 9px;
}

.temax-modern-form .form-grid {
    gap: 16px 18px;
    padding: 20px;
}

.temax-modern-form .form-field {
    gap: 7px;
}

.temax-modern-form .form-field label {
    color: #5f6873;
    font-size: 9px;
    font-weight: 700;
}

.temax-modern-form .form-field input,
.temax-modern-form .form-field select,
.temax-modern-form .form-field textarea {
    min-height: 43px;
    padding: 10px 12px;
    background: #fbfcfd;
    border: 1px solid #e0e5ea;
    border-radius: 8px;
    color: #232a33;
    font-size: 11px;
    box-shadow: inset 0 1px 0 rgba(20, 27, 35, .01);
}

.temax-modern-form .form-field textarea {
    min-height: 125px;
}

.temax-modern-form .form-field input:focus,
.temax-modern-form .form-field select:focus,
.temax-modern-form .form-field textarea:focus {
    background: #fff;
    border-color: #aeb7c1;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, .04);
}

.temax-modern-form .form-actions {
    justify-content: flex-start;
    gap: 9px;
    padding: 4px 0 24px;
}

.temax-modern-form .form-actions .primary-button {
    background: #111a27;
    border-color: #111a27;
    box-shadow: none;
}

.temax-modern-form .form-actions .primary-button:hover {
    background: #1c2735;
    border-color: #1c2735;
}

/* Customer 360 */

.temax-customer-360 {
    max-width: 1560px;
}

.temax-customer-hero {
    margin-bottom: 14px;
    padding: 22px 23px;
    background: #fff;
    border: 1px solid #e6e9ed;
    border-radius: 10px;
    color: #1f2730;
    box-shadow: 0 1px 2px rgba(20, 27, 35, .025);
}

.temax-customer-hero .profile-eyebrow {
    color: #9ca5af;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .12em;
}

.temax-customer-hero h2 {
    margin-top: 5px;
    color: #151c24;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.035em;
}

.temax-customer-hero .profile-meta {
    margin-top: 9px;
    color: #7f8994;
    font-size: 10px;
}

.temax-customer-hero .source-badge {
    background: #f0f3f5;
    color: #55606b;
    border: 1px solid #e4e8ec;
}

.temax-customer-hero .secondary-button,
.temax-customer-hero .primary-button {
    min-height: 37px;
    padding: 0 12px;
    border-radius: 7px;
    font-size: 9px;
    font-weight: 700;
    box-shadow: none;
}

.temax-customer-hero .secondary-button {
    background: #fff;
    color: #303945;
    border-color: #dfe4e9;
}

.temax-customer-hero .primary-button {
    background: #111a27;
    color: #fff;
    border-color: #111a27;
}

.temax-customer-hero .primary-button:hover {
    background: #1d2937;
    border-color: #1d2937;
}

.temax-customer-360 .customer-360-kpis {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.temax-customer-360 .customer-360-kpi {
    min-height: 112px;
    padding: 15px;
    background: #fff;
    border: 1px solid #e7eaed;
    border-radius: 9px;
    box-shadow: 0 1px 2px rgba(20, 27, 35, .02);
}

.temax-customer-360 .customer-360-kpi span {
    color: #8c96a1;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .05em;
}

.temax-customer-360 .customer-360-kpi strong {
    margin-top: 9px;
    color: #1b232c;
    font-size: 23px;
    font-weight: 700;
}

.temax-customer-360 .customer-360-kpi small {
    margin-top: auto;
    padding-top: 7px;
    color: #9ba3ac;
    font-size: 8px;
}

.temax-customer-360 .customer-profile-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(270px, .62fr);
    gap: 14px;
}

.temax-customer-360 .panel {
    background: #fff;
    border: 1px solid #e7eaed;
    border-radius: 9px;
    box-shadow: 0 1px 2px rgba(20, 27, 35, .02);
}

.temax-customer-360 .profile-section {
    margin-top: 14px;
}

.temax-customer-360 .panel-header {
    padding: 15px 17px 13px;
    border-bottom-color: #eef0f2;
}

.temax-customer-360 .panel-header h3 {
    color: #202832;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -.015em;
}

.temax-customer-360 .panel-header p {
    color: #969faa;
    font-size: 8px;
}

.temax-customer-360 .profile-details {
    gap: 17px 20px;
    padding: 18px;
}

.temax-customer-360 .profile-detail span,
.temax-customer-360 .sidebar-detail span {
    color: #9aa2ac;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .04em;
}

.temax-customer-360 .profile-detail strong,
.temax-customer-360 .sidebar-detail strong {
    color: #313a45;
    font-size: 10px;
    font-weight: 600;
}

.temax-customer-360 .profile-link,
.temax-customer-360 .small-link-button,
.temax-customer-360 .contact-actions a,
.temax-customer-360 .timeline-actions a {
    color: #42566d;
}

.temax-customer-360 .contacts-list,
.temax-customer-360 .customer-360-list {
    padding-left: 17px;
    padding-right: 17px;
}

.temax-customer-360 .contact-card,
.temax-customer-360 .customer-360-list-item {
    border-bottom-color: #eef0f2;
}

.temax-customer-360 .contact-avatar {
    background: #eff2f4;
    color: #495562;
}

.temax-customer-360 .customer-360-list-item:hover {
    background: #f7f8fa;
}

.temax-customer-360 .customer-360-item-label {
    color: #687481;
}

.temax-customer-360 .customer-360-item-value,
.temax-customer-360 .customer-360-item-side strong {
    color: #252e38;
}

.temax-customer-360 .activity-timeline {
    padding-left: 17px;
    padding-right: 17px;
}

.temax-customer-360 .timeline-marker .timeline-dot {
    background: #344250;
    box-shadow: 0 0 0 4px #eef1f4;
}

.temax-customer-360 .timeline-line {
    background: #e6e9ed;
}

.temax-customer-360 .activity-type-badge {
    background: #eff2f4;
    color: #55616d;
}

.temax-customer-360 .timeline-section.next-step {
    background: #f6f8f9;
}

.temax-customer-360 .profile-sidebar .panel {
    position: relative;
}

/* Mobile */

@media (max-width: 1100px) {
    .temax-customer-360 .customer-360-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .temax-customer-360 .customer-profile-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .temax-module-header {
        min-height: 70px;
        align-items: center;
        padding: 12px 14px 9px;
    }

    .temax-module-heading h1 {
        max-width: 180px;
        font-size: 18px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .temax-module-heading p {
        display: none;
    }

    .temax-module-actions {
        gap: 7px;
    }

    .temax-module-actions > .lovable-action {
        display: none;
    }

    .temax-module-tools {
        display: flex;
    }

    .temax-module-content {
        padding: 8px 12px 28px;
    }

    .temax-list-toolbar {
        min-height: auto;
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
        margin-bottom: 11px;
    }

    .temax-list-toolbar .search-box {
        max-width: none;
    }

    .temax-list-toolbar .customer-count {
        display: block;
    }

    .temax-list-panel .table-wrapper {
        display: none;
    }

    .temax-list-panel .mobile-customer-list {
        display: block;
    }

    .temax-list-panel .customer-mobile-card {
        padding: 15px;
        border-bottom: 1px solid #eef0f2;
    }

    .temax-list-panel .customer-mobile-card:last-child {
        border-bottom: 0;
    }

    .temax-list-panel .customer-mobile-top strong {
        color: #1e2630;
        font-size: 11px;
    }

    .temax-list-panel .customer-mobile-info {
        color: #8f99a4;
        font-size: 9px;
    }

    .temax-modern-form {
        max-width: none;
    }

    .temax-modern-form .form-grid {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .temax-modern-form .form-field.full-width {
        grid-column: auto;
    }

    .temax-modern-form .form-actions {
        position: sticky;
        bottom: 0;
        z-index: 50;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 10px 0;
        background: rgba(245, 247, 249, .96);
        backdrop-filter: blur(10px);
    }

    .temax-modern-form .form-actions > * {
        width: 100%;
    }

    .temax-customer-hero {
        flex-direction: column;
        padding: 18px 16px;
    }

    .temax-customer-hero h2 {
        font-size: 21px;
    }

    .temax-customer-hero .customer-profile-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 7px;
    }

    .temax-customer-hero .customer-profile-actions a {
        width: 100%;
        padding-left: 8px;
        padding-right: 8px;
    }

    .temax-customer-360 .customer-360-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .temax-customer-360 .customer-360-kpi {
        min-height: 105px;
        padding: 13px;
    }

    .temax-customer-360 .customer-360-kpi strong {
        font-size: 20px;
    }

    .temax-customer-360 .profile-details {
        grid-template-columns: 1fr;
        padding: 15px;
    }
}

@media (max-width: 430px) {
    .temax-customer-hero .customer-profile-actions {
        grid-template-columns: 1fr 1fr;
    }

    .temax-customer-hero .customer-profile-actions a:first-child {
        grid-column: 1 / -1;
    }
}
/* =========================================================
   ORDERS V4
   ========================================================= */

.orders-v4-page {
    background: #f3f6f9;
    min-height: 100vh;
}

.orders-v4-topbar {
    align-items: center;
    min-height: 92px;
    padding-top: 18px;
    padding-bottom: 18px;
}

.orders-v4-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.orders-v4-eyebrow,
.orders-v4-section-label {
    color: #7c8998;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}

.orders-v4-heading h1 {
    font-size: 25px;
    line-height: 1.15;
    letter-spacing: -.03em;
}

.orders-v4-heading p {
    margin-top: 3px;
    color: #7c8998;
    font-size: 10px;
}

.orders-v4-topbar-actions {
    gap: 9px;
}

.orders-v4-new-button {
    white-space: nowrap;
}

.orders-v4-content {
    padding-top: 18px;
}

/* =========================================================
   KPI
   ========================================================= */

.orders-v4-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.orders-v4-kpi {
    min-width: 0;
    padding: 17px 18px 16px;
    background: #fff;
    border: 1px solid #e1e7ed;
    border-radius: 13px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .025);
}

.orders-v4-kpi.attention {
    border-color: #f1d5c7;
    background: #fffbf8;
}

.orders-v4-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 17px;
}

.orders-v4-kpi-top > span {
    color: #738092;
    font-size: 9px;
    font-weight: 700;
}

.orders-v4-kpi-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f1f5f8;
    color: #526172;
    font-size: 12px;
    font-weight: 800;
}

.orders-v4-kpi.attention .orders-v4-kpi-icon {
    background: #fff0e8;
    color: #c96c37;
}

.orders-v4-kpi > strong {
    display: block;
    color: #172232;
    font-size: 29px;
    font-weight: 700;
    line-height: 1;
}

.orders-v4-kpi > small {
    display: block;
    margin-top: 7px;
    color: #8a95a4;
    font-size: 8px;
}

/* =========================================================
   TOOLBAR
   ========================================================= */

.orders-v4-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.orders-v4-search-form {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orders-v4-search-box {
    position: relative;
    width: min(520px, 100%);
}

.orders-v4-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a95a4;
    font-size: 14px;
    pointer-events: none;
}

.orders-v4-search-box input {
    width: 100%;
    height: 40px;
    padding: 0 14px 0 36px;
    border: 1px solid #dfe5eb;
    border-radius: 9px;
    background: #fff;
    color: #172232;
    outline: none;
    font-size: 10px;
}

.orders-v4-search-box input:focus {
    border-color: #a9bed5;
    box-shadow: 0 0 0 3px rgba(30, 64, 96, .06);
}

.orders-v4-toolbar-meta {
    flex-shrink: 0;
    color: #818d9b;
    font-size: 9px;
    font-weight: 600;
}

/* =========================================================
   PANEL
   ========================================================= */

.orders-v4-panel {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e1e7ed;
    border-radius: 14px;
    box-shadow: 0 5px 16px rgba(15, 23, 42, .025);
}

.orders-v4-panel-header {
    padding: 18px 19px 15px;
    border-bottom: 1px solid #edf0f3;
}

.orders-v4-panel-header h2 {
    margin-top: 3px;
    color: #172232;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.orders-v4-panel-header p {
    margin-top: 3px;
    color: #8a95a4;
    font-size: 9px;
}

/* =========================================================
   TABLE
   ========================================================= */

.orders-v4-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.orders-v4-table {
    width: 100%;
    border-collapse: collapse;
}

.orders-v4-table th {
    padding: 10px 14px;
    background: #fafbfc;
    border-bottom: 1px solid #e8edf1;
    color: #84909e;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.orders-v4-table td {
    padding: 13px 14px;
    border-bottom: 1px solid #eef1f4;
    color: #364250;
    font-size: 9px;
    vertical-align: middle;
}

.orders-v4-table tbody tr:last-child td {
    border-bottom: 0;
}

.orders-v4-table tbody tr {
    transition: background .14s ease;
}

.orders-v4-table tbody tr:hover {
    background: #fafcfd;
}

.orders-v4-table tbody tr.is-overdue {
    background: #fffdfb;
}

.orders-v4-table tbody tr.is-overdue:hover {
    background: #fff9f5;
}

.orders-v4-order-identity {
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.orders-v4-order-identity > strong {
    color: #18324d;
    font-size: 9px;
    font-weight: 800;
}

.orders-v4-order-name {
    max-width: 250px;
    color: #172232;
    font-size: 10px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orders-v4-order-name.muted,
.orders-v4-muted {
    color: #9aa4af;
    font-weight: 500;
}

.orders-v4-order-identity small {
    color: #98a1ac;
    font-size: 8px;
}

.orders-v4-customer-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 145px;
}

.orders-v4-customer-avatar {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #edf2f6;
    color: #4e6173;
    font-size: 9px;
    font-weight: 800;
}

.orders-v4-customer-cell strong {
    font-size: 9px;
    font-weight: 700;
}

.orders-v4-source {
    display: inline-flex;
    align-items: center;
    padding: 4px 7px;
    border-radius: 999px;
    background: #f2f5f7;
    color: #647182;
    font-size: 7px;
    font-weight: 700;
    white-space: nowrap;
}

.orders-v4-date-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    white-space: nowrap;
}

.orders-v4-date-cell strong {
    font-size: 9px;
    font-weight: 700;
}

.orders-v4-date-cell small {
    color: #9aa4af;
    font-size: 7px;
}

.orders-v4-date-cell.overdue strong,
.orders-v4-date-cell.overdue small {
    color: #b55d34;
}

.orders-v4-total strong {
    color: #172232;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.orders-v4-action {
    text-align: right;
}

.orders-v4-action a {
    color: #315e87;
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
}

/* =========================================================
   EMPTY
   ========================================================= */

.orders-v4-empty {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 30px;
    text-align: center;
}

.orders-v4-empty strong {
    color: #172232;
    font-size: 14px;
}

.orders-v4-empty span {
    max-width: 420px;
    color: #8792a0;
    font-size: 9px;
}

.orders-v4-empty .primary-button {
    margin-top: 9px;
}

/* =========================================================
   MOBILE
   ========================================================= */

.orders-v4-mobile-list {
    display: none;
}

@media (max-width: 1180px) {

    .orders-v4-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 768px) {

    .orders-v4-topbar {
        min-height: auto;
        align-items: flex-start;
        padding-top: 14px;
        padding-bottom: 12px;
    }

    .orders-v4-heading h1 {
        font-size: 21px;
    }

    .orders-v4-heading p,
    .orders-v4-eyebrow {
        display: none;
    }

    .orders-v4-topbar-actions {
        gap: 6px;
    }

    .orders-v4-new-button {
        min-height: 39px;
        padding-left: 11px;
        padding-right: 11px;
        font-size: 8px;
    }

    .orders-v4-content {
        padding-top: 10px;
    }

    .orders-v4-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .orders-v4-kpi {
        padding: 13px;
        border-radius: 11px;
    }

    .orders-v4-kpi-top {
        margin-bottom: 12px;
    }

    .orders-v4-kpi > strong {
        font-size: 24px;
    }

    .orders-v4-kpi > small {
        font-size: 7px;
    }

    .orders-v4-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .orders-v4-search-form {
        width: 100%;
    }

    .orders-v4-search-box {
        max-width: none;
    }

    .orders-v4-toolbar-meta {
        display: none;
    }

    .orders-v4-panel-header {
        padding: 15px;
    }

    .orders-v4-table-wrapper {
        display: none;
    }

    .orders-v4-mobile-list {
        display: grid;
        gap: 9px;
        padding: 10px;
    }

    .orders-v4-mobile-card {
        display: block;
        padding: 13px;
        border: 1px solid #e2e7ec;
        border-radius: 12px;
        background: #fff;
    }

    .orders-v4-mobile-card.is-overdue {
        border-color: #efd7ca;
        background: #fffcfa;
    }

    .orders-v4-mobile-card-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
    }

    .orders-v4-mobile-card-top > div {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .orders-v4-mobile-number {
        color: #54708a;
        font-size: 7px;
        font-weight: 800;
    }

    .orders-v4-mobile-card-top strong {
        color: #172232;
        font-size: 11px;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    .orders-v4-mobile-card-top small {
        color: #8894a1;
        font-size: 8px;
    }

    .orders-v4-mobile-card-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 13px;
        padding-top: 11px;
        border-top: 1px solid #edf0f3;
    }

    .orders-v4-mobile-card-grid > div {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .orders-v4-mobile-card-grid span {
        color: #909ba7;
        font-size: 7px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .orders-v4-mobile-card-grid strong {
        color: #283544;
        font-size: 9px;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    .orders-v4-mobile-total {
        grid-column: 1 / -1;
    }

    .orders-v4-mobile-total strong {
        font-size: 12px;
    }

    .overdue-text {
        color: #b55d34 !important;
    }

    .orders-v4-mobile-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid #edf0f3;
        color: #8d98a4;
        font-size: 8px;
    }

    .orders-v4-mobile-footer > strong {
        color: #315e87;
        font-size: 8px;
    }

    .orders-v4-overdue-badge {
        display: inline-flex;
        padding: 3px 7px;
        border-radius: 999px;
        background: #fff0e8;
        color: #b55d34;
        font-weight: 800;
    }

}

@media (max-width: 480px) {

    .orders-v4-kpis {
        grid-template-columns: 1fr 1fr;
    }

    .orders-v4-search-form {
        display: grid;
        grid-template-columns: 1fr auto;
    }

    .orders-v4-search-form .orders-v4-search-box {
        grid-column: 1 / -1;
    }

}
/* =========================================================
   ORDERS V4 - TYPOGRAPHY FIX
   ========================================================= */

/* Header */
.orders-v4-heading h1 {
    font-size: 30px;
}

.orders-v4-heading p {
    font-size: 14px;
}

.orders-v4-eyebrow,
.orders-v4-section-label {
    font-size: 11px;
}

/* KPI cards */
.orders-v4-kpi-top > span {
    font-size: 12px;
}

.orders-v4-kpi > strong {
    font-size: 34px;
}

.orders-v4-kpi > small {
    font-size: 12px;
}

/* Search */
.orders-v4-search-box input {
    font-size: 14px;
}

.orders-v4-toolbar-meta {
    font-size: 12px;
}

/* Panel heading */
.orders-v4-panel-header h2 {
    font-size: 18px;
}

.orders-v4-panel-header p {
    font-size: 12px;
}

/* Table headers */
.orders-v4-table th {
    font-size: 11px;
}

/* Normal table text */
.orders-v4-table td {
    font-size: 13px;
}

/* Order number */
.orders-v4-order-identity > strong {
    font-size: 13px;
}

/* Manual order name */
.orders-v4-order-name {
    font-size: 13px;
}

/* Order date */
.orders-v4-order-identity small {
    font-size: 11px;
}

/* Customer */
.orders-v4-customer-cell strong {
    font-size: 13px;
}

.orders-v4-customer-avatar {
    font-size: 11px;
}

/* Source badge */
.orders-v4-source {
    font-size: 10px;
}

/* Required date */
.orders-v4-date-cell strong {
    font-size: 13px;
}

.orders-v4-date-cell small {
    font-size: 10px;
}

/* Total */
.orders-v4-total strong {
    font-size: 13px;
}

/* View link */
.orders-v4-action a {
    font-size: 12px;
}

/* Production status */
.orders-v4-table .order-status {
    font-size: 10px;
}

/* Empty state */
.orders-v4-empty strong {
    font-size: 18px;
}

.orders-v4-empty span {
    font-size: 13px;
}
/* =========================================================
   SALES V4
   ========================================================= */
.sales-v4-page {
    min-height:100vh;
    background:#f3f6f9}

.sales-v4-topbar {
    min-height:92px;
    align-items:center;
    padding-top:18px;
    padding-bottom:18px}

.sales-v4-heading {
    display:flex;
    flex-direction:column;
    gap:2px}

.sales-v4-eyebrow,.sales-v4-section-label {
    color:#7d8996;
    font-size:11px;
    font-weight:800;
    letter-spacing:.13em}

.sales-v4-heading h1 {
    color:#172232;
    font-size:30px;
    line-height:1.15;
    letter-spacing:-.03em}

.sales-v4-heading p {
    margin-top:3px;
    color:#7e8996;
    font-size:14px}

.sales-v4-topbar-actions {
    gap:9px}

.sales-v4-new-button {
    white-space:nowrap}

.sales-v4-content {
    padding-top:18px}


.sales-v4-kpis {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin-bottom:12px}

.sales-v4-kpi {
    min-width:0;
    padding:18px;
    background:#fff;
    border:1px solid #e0e6ec;
    border-radius:13px;
    box-shadow:0 4px 14px rgba(15,23,42,.025)}

.sales-v4-kpi.warning {
    border-color:#eddcb6;
    background:#fffdf8}

.sales-v4-kpi.danger {
    border-color:#eed3ca;
    background:#fffaf8}

.sales-v4-kpi-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:16px}

.sales-v4-kpi-top>span:first-child {
    color:#758291;
    font-size:12px;
    font-weight:700}

.sales-v4-kpi-icon {
    width:29px;
    height:29px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:#f0f4f7;
    color:#506173;
    font-size:13px;
    font-weight:800}

.sales-v4-kpi.warning .sales-v4-kpi-icon {
    background:#fff5dc;
    color:#a87517}

.sales-v4-kpi.danger .sales-v4-kpi-icon {
    background:#fff0eb;
    color:#b95b38}

.sales-v4-kpi>strong,.sales-v4-pipeline-values strong {
    display:block;
    color:#172232;
    font-size:34px;
    font-weight:700;
    line-height:1.05}

.sales-v4-pipeline-values {
    display:flex;
    flex-direction:column;
    gap:3px}

.sales-v4-pipeline-values strong {
    font-size:22px}

.sales-v4-kpi>small {
    display:block;
    margin-top:8px;
    color:#8b96a3;
    font-size:12px;
    line-height:1.4}


.sales-v4-snapshot {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
    margin-bottom:14px}

.sales-v4-snapshot>div {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:48px;
    padding:0 14px;
    background:#fff;
    border:1px solid #e3e8ed;
    border-radius:10px}

.sales-v4-snapshot span {
    color:#84909d;
    font-size:11px;
    font-weight:700}

.sales-v4-snapshot strong {
    color:#273544;
    font-size:15px}


.sales-v4-toolbar {
    margin-bottom:17px}

.sales-v4-filter-form {
    display:flex;
    align-items:center;
    gap:8px}

.sales-v4-search-box {
    position:relative;
    width:min(480px,100%);
    flex:1}

.sales-v4-search-icon {
    position:absolute;
    left:13px;
    top:50%;
    transform:translateY(-50%);
    color:#8d98a4;
    font-size:15px;
    pointer-events:none}

.sales-v4-search-box input,.sales-v4-filter-form select {
    height:40px;
    border:1px solid #dce3e9;
    border-radius:9px;
    background:#fff;
    color:#263342;
    outline:none;
    font-size:13px}

.sales-v4-search-box input {
    width:100%;
    padding:0 13px 0 36px}

.sales-v4-filter-form select {
    min-width:150px;
    padding:0 30px 0 11px}

.sales-v4-search-box input:focus,.sales-v4-filter-form select:focus {
    border-color:#9fb4c9;
    box-shadow:0 0 0 3px rgba(38,74,108,.06)}


.sales-v4-section-header {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    margin-bottom:12px}

.sales-v4-section-header h2 {
    margin-top:3px;
    color:#172232;
    font-size:19px;
    letter-spacing:-.02em}

.sales-v4-section-header p {
    margin-top:3px;
    color:#8994a1;
    font-size:12px}


.sales-v4-board {
    display:grid;
    grid-template-columns:repeat(5,minmax(245px,1fr));
    gap:10px;
    overflow-x:auto;
    padding-bottom:16px}

.sales-v4-column {
    min-width:245px;
    overflow:hidden;
    background:#edf1f4;
    border:1px solid #dfe5ea;
    border-radius:13px}

.sales-v4-column-header {
    padding:13px 13px 11px;
    background:#f9fafb;
    border-bottom:1px solid #dfe5ea}

.sales-v4-column-title {
    display:flex;
    align-items:center;
    gap:7px}

.sales-v4-column-title h3 {
    color:#263544;
    font-size:13px}

.sales-v4-stage-dot {
    width:7px;
    height:7px;
    flex-shrink:0;
    border-radius:50%;
    background:#8996a3}

.sales-v4-stage-dot.new {
    background:#8190a1}

.sales-v4-stage-dot.contacted {
    background:#477aa7}

.sales-v4-stage-dot.meeting {
    background:#6c67b4}

.sales-v4-stage-dot.offer {
    background:#c08b36}

.sales-v4-stage-dot.negotiation {
    background:#bf684e}

.sales-v4-stage-count {
    min-width:20px;
    height:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 5px;
    border-radius:999px;
    background:#e8edf1;
    color:#64717f;
    font-size:10px;
    font-weight:800}

.sales-v4-column-value {
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-top:7px}

.sales-v4-column-value span {
    color:#758291;
    font-size:11px;
    font-weight:700}

.sales-v4-column-body {
    min-height:390px;
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:8px}


.sales-v4-card {
    display:block;
    padding:13px;
    background:#fff;
    border:1px solid #dfe5ea;
    border-radius:11px;
    box-shadow:0 2px 7px rgba(15,23,42,.025);
    transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}

.sales-v4-card:hover {
    transform:translateY(-1px);
    border-color:#bacbd9;
    box-shadow:0 7px 18px rgba(15,23,42,.07)}

.sales-v4-card.overdue {
    border-color:#edcfc4}

.sales-v4-card-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:7px}

.sales-v4-card-number {
    color:#63809a;
    font-size:10px;
    font-weight:800}

.sales-v4-due-badge {
    display:inline-flex;
    align-items:center;
    padding:3px 6px;
    border-radius:999px;
    font-size:8px;
    font-weight:800;
    white-space:nowrap}

.sales-v4-due-badge.overdue {
    background:#fff0eb;
    color:#b65736}

.sales-v4-due-badge.soon {
    background:#fff5df;
    color:#a2741e}

.sales-v4-card h4 {
    margin-top:9px;
    color:#172232;
    font-size:14px;
    line-height:1.38;
    overflow-wrap:anywhere}

.sales-v4-company {
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:9px;
    color:#768392;
    font-size:11px}

.sales-v4-company-avatar {
    width:24px;
    height:24px;
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:7px;
    background:#edf2f5;
    color:#536678;
    font-size:9px;
    font-weight:800}

.sales-v4-card-value {
    margin-top:13px;
    color:#172232;
    font-size:18px;
    font-weight:800}

.sales-v4-probability {
    margin-top:11px}

.sales-v4-probability-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:5px}

.sales-v4-probability-top span {
    color:#8a95a2;
    font-size:9px}

.sales-v4-probability-top strong {
    color:#53616f;
    font-size:10px}

.sales-v4-progress {
    height:4px;
    overflow:hidden;
    border-radius:999px;
    background:#edf1f4}

.sales-v4-progress-fill {
    height:100%;
    border-radius:inherit;
    background:#4e7699}

.sales-v4-card-footer {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:12px;
    padding-top:10px;
    border-top:1px solid #edf0f2}

.sales-v4-card-footer>div {
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px}

.sales-v4-card-footer span {
    color:#909aa6;
    font-size:8px}

.sales-v4-card-footer strong {
    color:#53606d;
    font-size:9px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap}

.sales-v4-card-footer .overdue-text {
    color:#b65736}

.sales-v4-empty-column {
    min-height:125px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:16px;
    text-align:center}

.sales-v4-empty-column strong {
    color:#697683;
    font-size:11px}

.sales-v4-empty-column span {
    margin-top:3px;
    color:#98a2ac;
    font-size:9px}


.sales-v4-mobile {
    display:none}


@media(max-width:1180px) {
    .sales-v4-kpis {
    grid-template-columns:repeat(2,minmax(0,1fr))}

}


@media(max-width:900px) {
    .sales-v4-filter-form {
    flex-wrap:wrap}

.sales-v4-search-box {
    flex-basis:100%;
    width:100%}

}


@media(max-width:768px) {
    .sales-v4-topbar {
    min-height:auto;
    align-items:flex-start;
    padding-top:14px;
    padding-bottom:12px}

.sales-v4-heading h1 {
    font-size:21px}

.sales-v4-heading p,.sales-v4-eyebrow {
    display:none}

.sales-v4-new-button {
    min-height:39px;
    padding-left:10px;
    padding-right:10px;
    font-size:9px}

.sales-v4-content {
    padding-top:10px}

.sales-v4-kpis {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px}

.sales-v4-kpi {
    padding:13px}

.sales-v4-kpi>strong {
    font-size:25px}

.sales-v4-pipeline-values strong {
    font-size:15px}

.sales-v4-kpi>small {
    font-size:9px}

.sales-v4-snapshot {
    grid-template-columns:1fr;
    gap:7px}

.sales-v4-filter-form {
    display:grid;
    grid-template-columns:1fr 1fr}

.sales-v4-search-box {
    grid-column:1/-1}

.sales-v4-filter-form select {
    min-width:0;
    width:100%}

.sales-v4-filter-form .secondary-button {
    width:100%}

.sales-v4-section-header p {
    display:none}

.sales-v4-board {
    display:none}

.sales-v4-mobile {
    display:flex;
    flex-direction:column;
    gap:13px}

.sales-v4-mobile-stage {
    overflow:hidden;
    background:#fff;
    border:1px solid #e0e5ea;
    border-radius:12px}

.sales-v4-mobile-stage-header {
    min-height:45px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:0 13px;
    background:#f8fafb;
    border-bottom:1px solid #e6eaee}

.sales-v4-mobile-stage-header>div {
    display:flex;
    align-items:center;
    gap:7px}

.sales-v4-mobile-stage-header strong {
    font-size:12px}

.sales-v4-mobile-stage-header>span {
    color:#7d8996;
    font-size:10px;
    font-weight:800}

.sales-v4-mobile-list {
    display:grid;
    gap:8px;
    padding:9px}

.sales-v4-mobile-card {
    display:block;
    padding:13px;
    border:1px solid #e2e7ec;
    border-radius:11px;
    background:#fff}

.sales-v4-mobile-card.overdue {
    border-color:#edcfc4;
    background:#fffcfb}

.sales-v4-mobile-card-top {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:9px}

.sales-v4-mobile-card-top>div {
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px}

.sales-v4-mobile-card-top span {
    color:#63809a;
    font-size:8px;
    font-weight:800}

.sales-v4-mobile-card-top strong {
    color:#172232;
    font-size:12px;
    line-height:1.35}

.sales-v4-mobile-card-top small {
    color:#8994a1;
    font-size:9px}

.sales-v4-mobile-value {
    margin-top:11px;
    color:#172232;
    font-size:18px;
    font-weight:800}

.sales-v4-mobile-meta {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-top:12px;
    padding-top:10px;
    border-top:1px solid #edf0f2}

.sales-v4-mobile-meta>div {
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px}

.sales-v4-mobile-meta span {
    color:#929da8;
    font-size:7px;
    text-transform:uppercase}

.sales-v4-mobile-meta strong {
    color:#53606d;
    font-size:9px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap}

}


@media(max-width:450px) {
    .sales-v4-kpis {
    grid-template-columns:1fr 1fr}

.sales-v4-mobile-meta {
    grid-template-columns:1fr 1fr}

.sales-v4-mobile-meta>div:last-child {
    grid-column:1/-1}

}
/* =========================================================
   REPORTS V1
   ========================================================= */

.reports-v1-page {
    min-height: 100vh;
    background: #f3f6f9;
}

.reports-v1-topbar {
    min-height: 92px;
    align-items: center;
    padding-top: 18px;
    padding-bottom: 18px;
}

.reports-v1-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reports-v1-eyebrow {
    color: #7d8996;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
}

.reports-v1-heading h1 {
    color: #172232;
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -.03em;
}

.reports-v1-heading p {
    margin-top: 3px;
    color: #7e8996;
    font-size: 14px;
}

.reports-v1-content {
    padding-top: 18px;
}


/* =========================================================
   PERIOD
   ========================================================= */

.reports-v1-period-card {
    margin-bottom: 14px;
    padding: 14px;
    background: #fff;
    border: 1px solid #e0e6ec;
    border-radius: 13px;
}

.reports-v1-period-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 14px;
}

.reports-v1-period-tabs a {
    min-height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid #dfe5ea;
    border-radius: 8px;
    background: #fff;
    color: #748190;
    font-size: 11px;
    font-weight: 700;
}

.reports-v1-period-tabs a.active {
    background: #17293b;
    border-color: #17293b;
    color: #fff;
}

.reports-v1-period-navigation {
    display: grid;
    grid-template-columns: auto minmax(200px, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.reports-v1-period-navigation > div {
    text-align: center;
}

.reports-v1-period-navigation span {
    display: block;
    color: #929ca6;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

.reports-v1-period-navigation strong {
    display: block;
    margin-top: 3px;
    color: #1e2c3a;
    font-size: 15px;
}

.reports-v1-custom-form {
    display: flex;
    align-items: end;
    gap: 10px;
}

.reports-v1-custom-form > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.reports-v1-custom-form label {
    color: #7f8b97;
    font-size: 10px;
    font-weight: 700;
}

.reports-v1-custom-form input {
    height: 40px;
    padding: 0 11px;
    border: 1px solid #dce3e9;
    border-radius: 8px;
    background: #fff;
    color: #24313f;
    outline: none;
}


/* =========================================================
   KPI
   ========================================================= */

.reports-v1-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.reports-v1-kpi {
    min-width: 0;
    min-height: 132px;
    display: flex;
    flex-direction: column;
    padding: 15px;
    background: #fff;
    border: 1px solid #e0e6ec;
    border-radius: 12px;
}

.reports-v1-kpi > span {
    color: #778493;
    font-size: 11px;
    font-weight: 700;
}

.reports-v1-kpi > strong,
.reports-v1-money-stack strong {
    display: block;
    margin-top: 12px;
    color: #172232;
    font-size: 27px;
    font-weight: 750;
    line-height: 1.05;
}

.reports-v1-money-stack {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.reports-v1-money-stack strong {
    font-size: 18px;
}

.reports-v1-kpi small {
    margin-top: auto;
    padding-top: 10px;
    color: #8d98a4;
    font-size: 9px;
}


/* =========================================================
   PANELS
   ========================================================= */

.reports-v1-grid {
    display: grid;
    gap: 14px;
    margin-bottom: 14px;
}

.reports-v1-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reports-v1-panel {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e0e6ec;
    border-radius: 13px;
}

.reports-v1-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 16px 18px;
    border-bottom: 1px solid #e8edf1;
}

.reports-v1-panel-header span {
    color: #7c8996;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
}

.reports-v1-panel-header h2 {
    margin-top: 3px;
    color: #172232;
    font-size: 17px;
}

.reports-v1-panel-header p {
    margin-top: 3px;
    color: #8b96a2;
    font-size: 10px;
}

.reports-v1-table-count {
    color: #7e8a96;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}


/* =========================================================
   TOP CUSTOMERS
   ========================================================= */

.reports-v1-ranking {
    padding: 4px 17px 12px;
}

.reports-v1-ranking-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid #edf0f2;
}

.reports-v1-ranking-item:last-child {
    border-bottom: 0;
}

.reports-v1-rank {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #eef2f5;
    color: #657585;
    font-size: 10px;
    font-weight: 800;
}

.reports-v1-ranking-item > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reports-v1-ranking-item > div strong {
    color: #273544;
    font-size: 11px;
}

.reports-v1-ranking-item > div span {
    color: #929ca6;
    font-size: 9px;
}

.reports-v1-ranking-item > strong {
    color: #172232;
    font-size: 11px;
}


/* =========================================================
   TICKETS
   ========================================================= */

.reports-v1-ticket-overview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 14px 17px 9px;
}

.reports-v1-ticket-overview > div {
    padding: 12px;
    border-radius: 9px;
    background: #f7f9fb;
    border: 1px solid #e6eaee;
}

.reports-v1-ticket-overview span {
    display: block;
    color: #85919d;
    font-size: 9px;
    font-weight: 700;
}

.reports-v1-ticket-overview strong {
    display: block;
    margin-top: 5px;
    color: #172232;
    font-size: 20px;
}

.reports-v1-ticket-types {
    padding: 4px 17px 14px;
}

.reports-v1-ticket-types > div:not(.reports-v1-empty) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #edf0f2;
}

.reports-v1-ticket-types > div:last-child {
    border-bottom: 0;
}

.reports-v1-ticket-types span {
    color: #64717f;
    font-size: 10px;
}

.reports-v1-ticket-types strong {
    color: #273544;
    font-size: 11px;
}


/* =========================================================
   TABLES
   ========================================================= */

.reports-v1-table-panel {
    margin-bottom: 14px;
}

.reports-v1-table-wrapper {
    overflow-x: auto;
}

.reports-v1-table {
    width: 100%;
    border-collapse: collapse;
}

.reports-v1-table th {
    padding: 10px 14px;
    background: #fafbfc;
    border-bottom: 1px solid #e8edf1;
    color: #84909d;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

.reports-v1-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #edf0f2;
    color: #465361;
    font-size: 11px;
    vertical-align: middle;
}

.reports-v1-table tbody tr:last-child td {
    border-bottom: 0;
}

.reports-v1-table tbody tr:hover {
    background: #fafcfd;
}

.reports-v1-primary-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reports-v1-primary-link strong {
    color: #28445d;
    font-size: 10px;
}

.reports-v1-primary-link span {
    max-width: 250px;
    color: #172232;
    font-size: 11px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reports-v1-result {
    display: inline-flex;
    align-items: center;
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
}

.reports-v1-result.won {
    background: #eaf8f1;
    color: #16845b;
}

.reports-v1-result.lost {
    background: #fff0f0;
    color: #c94747;
}

.reports-v1-empty {
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #8d98a4;
    font-size: 10px;
    text-align: center;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1250px) {

    .reports-v1-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

@media (max-width: 900px) {

    .reports-v1-grid-two {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 768px) {

    .reports-v1-topbar {
        min-height: auto;
        padding-top: 14px;
        padding-bottom: 12px;
    }

    .reports-v1-heading h1 {
        font-size: 21px;
    }

    .reports-v1-heading p,
    .reports-v1-eyebrow {
        display: none;
    }

    .reports-v1-content {
        padding-top: 10px;
    }

    .reports-v1-period-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 2px;
    }

    .reports-v1-period-tabs a {
        flex-shrink: 0;
    }

    .reports-v1-period-navigation {
        grid-template-columns: 1fr 1fr;
    }

    .reports-v1-period-navigation > div {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .reports-v1-custom-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .reports-v1-custom-form button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .reports-v1-custom-form input {
        width: 100%;
    }

    .reports-v1-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .reports-v1-kpi {
        min-height: 115px;
        padding: 13px;
    }

    .reports-v1-kpi > strong {
        font-size: 23px;
    }

    .reports-v1-money-stack strong {
        font-size: 14px;
    }

    .reports-v1-ticket-overview {
        grid-template-columns: repeat(3, 1fr);
    }

    .reports-v1-table th,
    .reports-v1-table td {
        padding-left: 11px;
        padding-right: 11px;
    }

}

@media (max-width: 460px) {

    .reports-v1-ticket-overview {
        grid-template-columns: 1fr;
    }

}
/* =========================================================
REPORTS FINAL
Add to the END of public/css/style.css
========================================================= */
.reports-final-page {
    min-height:100vh;
    background:#f3f6f9
}
.reports-final-topbar {
    min-height:92px;
    align-items:center;
    padding-top:18px;
    padding-bottom:18px
}
.reports-final-heading {
    display:flex;
    flex-direction:column;
    gap:2px
}
.reports-final-eyebrow,.reports-final-panel-head span {
    color:#7d8996;
    font-size:11px;
    font-weight:800;
    letter-spacing:.11em
}
.reports-final-heading h1 {
    color:#172232;
    font-size:30px;
    line-height:1.15;
    letter-spacing:-.03em
}
.reports-final-heading p {
    margin-top:3px;
    color:#7e8996;
    font-size:14px
}
.reports-final-actions {
    gap:8px
}
.reports-final-content {
    padding-top:18px
}
.reports-final-period-card,.reports-final-panel,.reports-final-kpi {
    background:#fff;
    border:1px solid #e0e6ec;
    border-radius:13px
}
.reports-final-period-card {
    padding:14px;
    margin-bottom:14px
}
.reports-final-period-tabs {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-bottom:14px
}
.reports-final-period-tabs a {
    min-height:35px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 13px;
    border:1px solid #dfe5ea;
    border-radius:8px;
    color:#748190;
    font-size:11px;
    font-weight:700
}
.reports-final-period-tabs a.active {
    background:#17293b;
    border-color:#17293b;
    color:#fff
}
.reports-final-period-nav {
    display:grid;
    grid-template-columns:auto minmax(200px,1fr) auto;
    align-items:center;
    gap:12px
}
.reports-final-period-nav>div {
    text-align:center
}
.reports-final-period-nav span {
    display:block;
    color:#929ca6;
    font-size:9px;
    font-weight:800;
    letter-spacing:.08em
}
.reports-final-period-nav strong {
    display:block;
    margin-top:3px;
    color:#1e2c3a;
    font-size:15px
}
.reports-final-custom-form {
    display:flex;
    align-items:end;
    gap:10px
}
.reports-final-custom-form label {
    display:flex;
    flex-direction:column;
    gap:5px;
    color:#7f8b97;
    font-size:10px;
    font-weight:700
}
.reports-final-custom-form input {
    height:40px;
    padding:0 11px;
    border:1px solid #dce3e9;
    border-radius:8px;
    background:#fff;
    color:#24313f
}
.reports-final-kpis {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:10px;
    margin-bottom:14px
}
.reports-final-kpi {
    min-height:132px;
    display:flex;
    flex-direction:column;
    padding:15px
}
.reports-final-kpi>span {
    color:#778493;
    font-size:11px;
    font-weight:700
}
.reports-final-kpi>strong,.reports-final-money strong {
    display:block;
    margin-top:12px;
    color:#172232;
    font-size:27px;
    line-height:1.05
}
.reports-final-money strong {
    font-size:18px;
    margin-top:3px
}
.reports-final-kpi small {
    margin-top:auto;
    padding-top:10px;
    color:#8d98a4;
    font-size:9px
}
.reports-final-chart-grid,.reports-final-grid-two {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-bottom:14px
}
.reports-final-panel {
    overflow:hidden;
    margin-bottom:14px
}
.reports-final-panel-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;
    padding:16px 18px;
    border-bottom:1px solid #e8edf1
}
.reports-final-panel-head h2 {
    margin-top:3px;
    color:#172232;
    font-size:17px
}
.reports-final-panel-head p {
    margin-top:3px;
    color:#8b96a2;
    font-size:10px
}
.reports-final-chart {
    position:relative;
    height:320px;
    padding:16px 18px 18px
}
.reports-final-chart canvas {
    width:100%!important;
    height:100%!important
}
.reports-final-pipeline {
    padding:8px 18px 14px
}
.reports-final-pipeline-row {
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:11px 0;
    border-bottom:1px solid #edf0f2
}
.reports-final-pipeline-row:last-child {
    border-bottom:0
}
.reports-final-pipeline-row>div:first-child {
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:8px
}
.reports-final-pipeline-row small {
    grid-column:2;
    color:#929ca6;
    font-size:9px
}
.reports-final-pipeline-row>div:last-child {
    text-align:right
}
.reports-final-pipeline-row>div:last-child strong {
    display:block;
    font-size:11px
}
.reports-final-stage-dot {
    width:8px;
    height:8px;
    margin-top:4px;
    border-radius:50%;
    background:#8491a0
}
.reports-final-stage-dot.contacted {
    background:#477aa7
}
.reports-final-stage-dot.meeting {
    background:#6c67b4
}
.reports-final-stage-dot.offer {
    background:#c08b36
}
.reports-final-stage-dot.negotiation {
    background:#bf684e
}
.reports-final-result-box {
    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:18px;
    padding:22px
}
.reports-final-win-rate {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-right:1px solid #edf0f2
}
.reports-final-win-rate strong {
    font-size:42px;
    color:#172232
}
.reports-final-win-rate span {
    color:#8994a1;
    font-size:10px
}
.reports-final-result-stats {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px
}
.reports-final-result-stats div {
    padding:13px;
    border-radius:9px;
    background:#f7f9fb
}
.reports-final-result-stats span {
    display:block;
    color:#8894a1;
    font-size:9px
}
.reports-final-result-stats strong {
    display:block;
    margin-top:5px;
    font-size:20px
}
.reports-final-ranking {
    padding:4px 17px 12px
}
.reports-final-ranking>a,.reports-final-ranking-static {
    display:grid;
    grid-template-columns:28px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    padding:11px 0;
    border-bottom:1px solid #edf0f2
}
.reports-final-ranking>a:last-child,.reports-final-ranking-static:last-child {
    border-bottom:0
}
.reports-final-rank {
    width:26px;
    height:26px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:7px;
    background:#eef2f5;
    color:#657585;
    font-size:10px;
    font-weight:800
}
.reports-final-ranking div>strong {
    font-size:11px;
    color:#273544
}
.reports-final-ranking small {
    display:block;
    color:#929ca6;
    font-size:9px;
    margin-top:2px
}
.reports-final-ranking>a>strong,.reports-final-ranking-static>strong {
    font-size:11px;
    color:#172232
}
.reports-final-table-wrap {
    overflow-x:auto
}
.reports-final-table {
    width:100%;
    border-collapse:collapse
}
.reports-final-table th {
    padding:10px 14px;
    background:#fafbfc;
    border-bottom:1px solid #e8edf1;
    color:#84909d;
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
    text-align:left;
    white-space:nowrap
}
.reports-final-table td {
    padding:12px 14px;
    border-bottom:1px solid #edf0f2;
    color:#465361;
    font-size:11px;
    vertical-align:middle
}
.reports-final-table tbody tr:last-child td {
    border-bottom:0
}
.reports-final-table tbody tr:hover {
    background:#fafcfd
}
.reports-final-link {
    display:flex;
    flex-direction:column;
    gap:2px
}
.reports-final-link strong {
    color:#28445d;
    font-size:10px
}
.reports-final-link span {
    max-width:250px;
    color:#172232;
    font-size:11px;
    font-weight:700;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.reports-final-subtext {
    display:block;
    color:#929ca6;
    font-size:9px;
    margin-top:2px
}
.reports-final-result {
    display:inline-flex;
    padding:4px 7px;
    border-radius:999px;
    font-size:8px;
    font-weight:800
}
.reports-final-result.won {
    background:#eaf8f1;
    color:#16845b
}
.reports-final-result.lost {
    background:#fff0f0;
    color:#c94747
}
.reports-final-count {
    color:#7e8a96;
    font-size:10px;
    font-weight:700;
    white-space:nowrap
}
.reports-final-empty {
    min-height:90px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    color:#8d98a4;
    font-size:10px;
    text-align:center
}
@media(max-width:1250px) {
    .reports-final-kpis {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
}
@media(max-width:1000px) {
    .reports-final-chart-grid,.reports-final-grid-two {
        grid-template-columns:1fr
    }
}
@media(max-width:768px) {
    .reports-final-topbar {
        min-height:auto;
        padding-top:14px;
        padding-bottom:12px
    }
    .reports-final-heading h1 {
        font-size:21px
    }
    .reports-final-heading p,.reports-final-eyebrow {
        display:none
    }
    .reports-final-actions .secondary-button,.reports-final-actions .primary-button {
        display:none
    }
    .reports-final-content {
        padding-top:10px
    }
    .reports-final-period-tabs {
        overflow-x:auto;
        flex-wrap:nowrap
    }
    .reports-final-period-tabs a {
        flex-shrink:0
    }
    .reports-final-period-nav {
        grid-template-columns:1fr 1fr
    }
    .reports-final-period-nav>div {
        grid-column:1/-1;
        grid-row:1
    }
    .reports-final-custom-form {
        display:grid;
        grid-template-columns:1fr 1fr
    }
    .reports-final-custom-form button {
        grid-column:1/-1;
        width:100%
    }
    .reports-final-custom-form input {
        width:100%
    }
    .reports-final-kpis {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px
    }
    .reports-final-kpi {
        min-height:115px;
        padding:13px
    }
    .reports-final-kpi>strong {
        font-size:23px
    }
    .reports-final-money strong {
        font-size:14px
    }
    .reports-final-chart {
        height:260px;
        padding:12px
    }
    .reports-final-result-box {
        grid-template-columns:1fr
    }
    .reports-final-win-rate {
        border-right:0;
        border-bottom:1px solid #edf0f2;
        padding-bottom:15px
    }
    .reports-final-table th,.reports-final-table td {
        padding-left:11px;
        padding-right:11px
    }
}
/* =========================================================
   PRODUCTION V2 FINAL
   ========================================================= */

.production-v2-page {
    min-height: 100vh;
    background: #f3f6f9;
}

.production-v2-topbar {
    min-height: 92px;
    align-items: center;
    padding-top: 18px;
    padding-bottom: 18px;
}

.production-v2-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.production-v2-eyebrow,
.production-v2-section-heading > div > span {
    color: #7d8996;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

.production-v2-heading h1 {
    color: #172232;
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -.03em;
}

.production-v2-heading p {
    margin-top: 3px;
    color: #7e8996;
    font-size: 14px;
}

.production-v2-content {
    padding-top: 18px;
}


/* =========================================================
   KPIs
   ========================================================= */

.production-v2-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.production-v2-kpi {
    min-width: 0;
    min-height: 125px;
    display: flex;
    flex-direction: column;
    padding: 15px;
    background: #fff;
    border: 1px solid #e0e6ec;
    border-radius: 12px;
}

.production-v2-kpi.danger {
    border-color: #edcec4;
    background: #fffaf8;
}

.production-v2-kpi.urgent {
    border-color: #ead5bb;
    background: #fffcf7;
}

.production-v2-kpi > span {
    color: #778493;
    font-size: 11px;
    font-weight: 700;
}

.production-v2-kpi > strong {
    display: block;
    margin-top: 12px;
    color: #172232;
    font-size: 28px;
    line-height: 1;
}

.production-v2-kpi > small {
    margin-top: auto;
    padding-top: 10px;
    color: #8c97a3;
    font-size: 9px;
}


/* =========================================================
   FILTERS
   ========================================================= */

.production-v2-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.production-v2-search {
    position: relative;
    flex: 1;
    min-width: 220px;
}

.production-v2-search > span {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #8c97a3;
    pointer-events: none;
}

.production-v2-search input,
.production-v2-filters select {
    height: 40px;
    border: 1px solid #dce3e9;
    border-radius: 9px;
    background: #fff;
    color: #273544;
    outline: none;
    font-size: 12px;
}

.production-v2-search input {
    width: 100%;
    padding: 0 12px 0 36px;
}

.production-v2-filters select {
    min-width: 130px;
    padding: 0 28px 0 10px;
}


/* =========================================================
   TODAY PLAN
   ========================================================= */

.production-v2-today {
    margin-bottom: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e0e6ec;
    border-radius: 13px;
}

.production-v2-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid #e8edf1;
}

.production-v2-section-heading h2 {
    margin-top: 3px;
    color: #172232;
    font-size: 18px;
}

.production-v2-section-heading p {
    margin-top: 3px;
    color: #8b96a2;
    font-size: 10px;
}

.production-v2-section-heading > strong {
    color: #687582;
    font-size: 11px;
}

.production-v2-today-list {
    padding: 4px 17px 10px;
}

.production-v2-today-item {
    display: grid;
    grid-template-columns: 10px minmax(180px, 1.3fr) 1fr 1fr 1fr;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid #edf0f2;
}

.production-v2-today-item:last-child {
    border-bottom: 0;
}

.production-v2-today-item > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.production-v2-today-item span {
    color: #8b96a2;
    font-size: 9px;
}

.production-v2-today-item strong {
    color: #2a3745;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.production-v2-priority-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8996a3;
}

.production-v2-priority-dot.urgent {
    background: #c75436;
}

.production-v2-priority-dot.high {
    background: #c4862e;
}

.production-v2-priority-dot.normal {
    background: #477aa7;
}

.production-v2-priority-dot.low {
    background: #759181;
}

.production-v2-empty-plan {
    padding: 25px;
    color: #8d98a4;
    font-size: 11px;
    text-align: center;
}


/* =========================================================
   BOARD
   ========================================================= */

.production-v2-board {
    display: grid;
    grid-template-columns: repeat(5, minmax(265px, 1fr));
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 18px;
}

.production-v2-column {
    min-width: 265px;
    overflow: hidden;
    background: #edf1f4;
    border: 1px solid #dfe5ea;
    border-radius: 13px;
}

.production-v2-column-header {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 13px;
    background: #fafbfc;
    border-bottom: 1px solid #dfe5ea;
}

.production-v2-column-header > div {
    display: flex;
    align-items: center;
    gap: 7px;
}

.production-v2-column-header strong {
    color: #273544;
    font-size: 12px;
}

.production-v2-column-header > span {
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 999px;
    background: #e8edf1;
    color: #687582;
    font-size: 10px;
    font-weight: 800;
}

.production-v2-stage-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.production-v2-stage-dot.new {
    background: #8190a1;
}

.production-v2-stage-dot.planned {
    background: #477aa7;
}

.production-v2-stage-dot.in_production {
    background: #b37a2c;
}

.production-v2-stage-dot.ready {
    background: #4b8b75;
}

.production-v2-stage-dot.sent_to_belgium {
    background: #6b67a8;
}

.production-v2-column-body {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
}

.production-v2-empty-column {
    padding: 22px 10px;
    color: #98a2ac;
    font-size: 10px;
    text-align: center;
}


/* =========================================================
   CARD
   ========================================================= */

.production-v2-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #dfe5ea;
    border-radius: 11px;
    box-shadow: 0 2px 7px rgba(15, 23, 42, .025);
}

.production-v2-card.urgent {
    border-color: #e4bba9;
}

.production-v2-card.high {
    border-color: #e4d0aa;
}

.production-v2-card-main {
    display: block;
    padding: 13px;
}

.production-v2-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 9px;
}

.production-v2-card-top > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.production-v2-order-number {
    color: #607d96;
    font-size: 9px;
    font-weight: 800;
}

.production-v2-card-top strong {
    color: #172232;
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.production-v2-priority {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 3px 6px;
    border-radius: 999px;
    background: #f0f3f5;
    color: #687582;
    font-size: 8px;
    font-weight: 800;
}

.production-v2-priority.urgent {
    background: #fff0eb;
    color: #b85535;
}

.production-v2-priority.high {
    background: #fff5df;
    color: #9e6b1d;
}

.production-v2-priority.normal {
    background: #edf4fa;
    color: #467397;
}

.production-v2-priority.low {
    background: #eef5f1;
    color: #577867;
}

.production-v2-customer {
    margin-top: 8px;
    color: #778493;
    font-size: 10px;
    font-weight: 600;
}

.production-v2-due {
    display: inline-flex;
    margin-top: 8px;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
}

.production-v2-due.overdue {
    background: #fff0eb;
    color: #b85535;
}

.production-v2-due.soon {
    background: #fff5df;
    color: #a16e1d;
}

.production-v2-products {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 11px;
    padding: 9px;
    border-radius: 8px;
    background: #f7f9fa;
}

.production-v2-products > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.production-v2-products span {
    min-width: 0;
    color: #5e6c79;
    font-size: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.production-v2-products strong {
    flex-shrink: 0;
    color: #273544;
    font-size: 9px;
}

.production-v2-products small {
    color: #929ca6;
    font-size: 8px;
}

.production-v2-card-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid #edf0f2;
}

.production-v2-card-meta > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.production-v2-card-meta span {
    color: #909aa6;
    font-size: 8px;
}

.production-v2-card-meta strong {
    color: #53606d;
    font-size: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.production-v2-card-meta .danger-text {
    color: #b85535;
}

.production-v2-card-actions {
    display: flex;
    align-items: stretch;
    gap: 1px;
    border-top: 1px solid #e8edf1;
    background: #e8edf1;
}

.production-v2-card-actions form {
    flex: 1;
}

.production-v2-card-actions button {
    width: 100%;
    min-height: 38px;
    border: 0;
    background: #fff;
    cursor: pointer;
    font-size: 9px;
    font-weight: 800;
}

.production-v2-back-button {
    color: #687582;
}

.production-v2-next-button {
    color: #315f86;
}


/* =========================================================
   MANAGE FORM
   ========================================================= */

.production-v2-manage {
    border-top: 1px solid #e8edf1;
}

.production-v2-manage summary {
    padding: 10px 13px;
    color: #687582;
    cursor: pointer;
    font-size: 9px;
    font-weight: 800;
    user-select: none;
}

.production-v2-manage[open] summary {
    background: #f8fafb;
}

.production-v2-manage-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    padding: 12px;
    background: #f8fafb;
}

.production-v2-manage-form > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.production-v2-manage-form > div.full {
    grid-column: 1 / -1;
}

.production-v2-manage-form label {
    color: #74808d;
    font-size: 8px;
    font-weight: 700;
}

.production-v2-manage-form input,
.production-v2-manage-form select,
.production-v2-manage-form textarea {
    width: 100%;
    border: 1px solid #dce3e9;
    border-radius: 7px;
    background: #fff;
    color: #273544;
    outline: none;
    font-size: 10px;
}

.production-v2-manage-form input,
.production-v2-manage-form select {
    height: 35px;
    padding: 0 8px;
}

.production-v2-manage-form textarea {
    resize: vertical;
    padding: 8px;
}

.production-v2-manage-form > button {
    grid-column: 1 / -1;
    width: 100%;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1300px) {

    .production-v2-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

@media (max-width: 980px) {

    .production-v2-filters {
        flex-wrap: wrap;
    }

    .production-v2-search {
        flex-basis: 100%;
    }

    .production-v2-today-item {
        grid-template-columns: 10px minmax(180px, 1.5fr) 1fr 1fr;
    }

    .production-v2-today-item > div:last-child {
        display: none;
    }

}

@media (max-width: 768px) {

    .production-v2-topbar {
        min-height: auto;
        padding-top: 14px;
        padding-bottom: 12px;
    }

    .production-v2-heading h1 {
        font-size: 21px;
    }

    .production-v2-heading p,
    .production-v2-eyebrow {
        display: none;
    }

    .production-v2-content {
        padding-top: 10px;
    }

    .production-v2-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .production-v2-kpi {
        min-height: 105px;
        padding: 12px;
    }

    .production-v2-kpi > strong {
        font-size: 24px;
    }

    .production-v2-filters {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .production-v2-search {
        grid-column: 1 / -1;
    }

    .production-v2-filters select,
    .production-v2-filters .secondary-button {
        width: 100%;
        min-width: 0;
    }

    .production-v2-today-item {
        grid-template-columns: 8px 1fr;
        gap: 8px;
    }

    .production-v2-today-item > div:nth-of-type(n+2) {
        display: none;
    }

    .production-v2-board {
        grid-template-columns: repeat(5, minmax(285px, 285px));
    }

}

/* =========================================================
   CALENDAR V2 FINAL - MATCHES CURRENT views/calendar.php
   ========================================================= */

.calendar-v2 {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}


/* =========================================================
   HERO
   ========================================================= */

.calendar-v2 .cal-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 16px;
    padding: 22px 24px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 2px 9px rgba(15, 23, 42, .035);
}

.calendar-v2 .cal-hero > div {
    min-width: 0;
}

.calendar-v2 .cal-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--primary);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.15px;
    text-transform: uppercase;
}

.calendar-v2 .cal-hero h2 {
    color: var(--text);
    font-size: 24px;
    font-weight: 760;
    line-height: 1.18;
    letter-spacing: -.45px;
}

.calendar-v2 .cal-hero p {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.55;
}

.calendar-v2 .cal-new-btn {
    flex: 0 0 auto;
}


/* =========================================================
   KPI CARDS
   ========================================================= */

.calendar-v2 .cal-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 16px;
}

.calendar-v2 .cal-kpi {
    position: relative;
    min-width: 0;
    min-height: 118px;
    display: flex;
    flex-direction: column;
    padding: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .025);
}

.calendar-v2 .cal-kpi::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--primary);
    opacity: .75;
}

.calendar-v2 .cal-kpi.danger::after {
    background: var(--danger);
}

.calendar-v2 .cal-kpi > span {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .25px;
    text-transform: uppercase;
}

.calendar-v2 .cal-kpi > strong {
    margin-top: 11px;
    color: var(--text);
    font-size: 27px;
    font-weight: 770;
    line-height: 1;
}

.calendar-v2 .cal-kpi.danger > strong {
    color: var(--danger);
}

.calendar-v2 .cal-kpi > small {
    margin-top: auto;
    padding-top: 8px;
    color: var(--text-muted);
    font-size: 8px;
}


/* =========================================================
   MAIN SHELL
   ========================================================= */

.calendar-v2 .cal-shell {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 2px 9px rgba(15, 23, 42, .035);
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.calendar-v2 .cal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: #fff;
}

.calendar-v2 .cal-nav {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

.calendar-v2 .cal-icon-btn,
.calendar-v2 .cal-today-btn {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    transition:
        background .16s ease,
        border-color .16s ease,
        color .16s ease;
}

.calendar-v2 .cal-icon-btn {
    width: 36px;
    padding: 0;
}

.calendar-v2 .cal-today-btn {
    padding: 0 12px;
}

.calendar-v2 .cal-icon-btn:hover,
.calendar-v2 .cal-today-btn:hover {
    border-color: #b9c7d8;
    background: var(--surface-soft);
    color: var(--primary);
}

.calendar-v2 .cal-period {
    min-width: 170px;
    margin-left: 5px;
    color: var(--text);
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

.calendar-v2 .cal-view-switch {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 2px;
    padding: 3px;
    border-radius: 9px;
    background: #eef2f5;
}

.calendar-v2 .cal-view-switch button {
    min-width: 64px;
    height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #6d7986;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.calendar-v2 .cal-view-switch button.active {
    background: #fff;
    color: var(--text);
    box-shadow: 0 2px 7px rgba(15, 23, 42, .07);
}


/* =========================================================
   FILTERS
   ========================================================= */

.calendar-v2 .cal-filters {
    display: grid;
    grid-template-columns:
        minmax(260px, 1fr)
        repeat(3, minmax(130px, 165px));
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: #fbfcfe;
}

.calendar-v2 .cal-search {
    position: relative;
    min-width: 0;
}

.calendar-v2 .cal-search > span {
    position: absolute;
    top: 50%;
    left: 13px;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.calendar-v2 .cal-search input,
.calendar-v2 .cal-filters select {
    width: 100%;
    height: 39px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    outline: none;
    font-size: 10px;
    transition:
        border-color .16s ease,
        box-shadow .16s ease;
}

.calendar-v2 .cal-search input {
    padding: 0 12px 0 36px;
}

.calendar-v2 .cal-filters select {
    padding: 0 30px 0 10px;
}

.calendar-v2 .cal-search input:focus,
.calendar-v2 .cal-filters select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(23, 105, 224, .08);
}


/* =========================================================
   DESKTOP / MOBILE CONTAINERS
   ========================================================= */

.calendar-v2 .cal-desktop {
    display: block;
    min-width: 0;
}

.calendar-v2 .cal-mobile {
    display: none;
}


/* =========================================================
   MONTH VIEW
   ========================================================= */

.calendar-v2 .cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-bottom: 1px solid var(--border);
    background: #f8fafc;
}

.calendar-v2 .cal-weekdays > div {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .55px;
    text-transform: uppercase;
}

.calendar-v2 .cal-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-v2 .cal-day {
    min-width: 0;
    min-height: 145px;
    padding: 8px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: #fff;
    transition: background .15s ease;
}

.calendar-v2 .cal-day:nth-child(7n) {
    border-right: 0;
}

.calendar-v2 .cal-day:nth-last-child(-n + 7) {
    border-bottom: 0;
}

.calendar-v2 .cal-day.outside {
    background: #fafbfd;
}

.calendar-v2 .cal-day.today {
    background: #f8fbff;
    box-shadow: inset 0 0 0 1px #bdd5f2;
}

.calendar-v2 .cal-day-head {
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    margin-bottom: 6px;
}

.calendar-v2 .cal-day-head button {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.calendar-v2 .cal-day.today .cal-day-head button {
    background: var(--primary);
    color: #fff;
}

.calendar-v2 .cal-day.outside .cal-day-head button {
    color: #a2abb5;
}

.calendar-v2 .cal-day-head > span {
    min-width: 19px;
    height: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: 999px;
    background: #edf1f5;
    color: var(--text-muted);
    font-size: 7px;
    font-weight: 900;
}

.calendar-v2 .cal-day-events {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


/* =========================================================
   EVENT CARDS
   ========================================================= */

.calendar-v2 .cal-event {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 6px auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    padding: 6px 7px;
    border: 1px solid #e1e7ec;
    border-radius: 7px;
    background: #f8fafb;
    text-align: left;
    cursor: pointer;
    transition:
        border-color .15s ease,
        background .15s ease;
}

.calendar-v2 .cal-event:hover {
    border-color: #bdcad5;
    background: #fff;
}

.calendar-v2 .cal-event-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8090a0;
}

.calendar-v2 .cal-event-time {
    color: #6f7c89;
    font-size: 8px;
    font-weight: 800;
}

.calendar-v2 .cal-event-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.calendar-v2 .cal-event-main strong {
    overflow: hidden;
    color: #283744;
    font-size: 9px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.calendar-v2 .cal-event-main small {
    overflow: hidden;
    color: #929ca6;
    font-size: 7px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.calendar-v2 .cal-event.type-meeting .cal-event-dot {
    background: #6b67a8;
}

.calendar-v2 .cal-event.type-call .cal-event-dot {
    background: #477aa7;
}

.calendar-v2 .cal-event.type-email .cal-event-dot {
    background: #759181;
}

.calendar-v2 .cal-event.type-follow_up .cal-event-dot {
    background: #b37a2c;
}

.calendar-v2 .cal-event.type-task .cal-event-dot {
    background: #bd6651;
}

.calendar-v2 .cal-event.type-note .cal-event-dot {
    background: #8996a3;
}

.calendar-v2 .cal-event.status-completed {
    opacity: .62;
}

.calendar-v2 .cal-event.status-cancelled {
    opacity: .42;
    text-decoration: line-through;
}

.calendar-v2 .cal-event.is-overdue {
    border-color: #ebc8bb;
    background: #fffaf8;
}

.calendar-v2 .cal-more {
    border: 0;
    background: transparent;
    color: #587692;
    font-size: 8px;
    font-weight: 800;
    cursor: pointer;
    text-align: left;
}


/* =========================================================
   WEEK VIEW
   ========================================================= */

.calendar-v2 .cal-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(160px, 1fr));
    overflow-x: auto;
}

.calendar-v2 .cal-week-col {
    min-width: 160px;
    min-height: 560px;
    border-right: 1px solid var(--border);
}

.calendar-v2 .cal-week-col:last-child {
    border-right: 0;
}

.calendar-v2 .cal-week-col.today {
    background: #fbfdff;
}

.calendar-v2 .cal-week-head {
    min-height: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    background: #fafbfc;
}

.calendar-v2 .cal-week-head span {
    color: #87929d;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.calendar-v2 .cal-week-head button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #2e3b48;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.calendar-v2 .cal-week-col.today .cal-week-head button {
    background: var(--primary);
    color: #fff;
}

.calendar-v2 .cal-week-events {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 8px;
}

.calendar-v2 .cal-empty {
    display: block;
    padding: 15px 4px;
    color: #a0a9b2;
    font-size: 8px;
    text-align: center;
}


/* =========================================================
   DAY VIEW / AGENDA
   ========================================================= */

.calendar-v2 .cal-day-view {
    min-height: 520px;
}

.calendar-v2 .cal-day-view-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 17px 18px;
    border-bottom: 1px solid var(--border);
}

.calendar-v2 .cal-day-view-head span {
    color: #87929d;
    font-size: 9px;
    font-weight: 700;
}

.calendar-v2 .cal-day-view-head h3 {
    margin-top: 3px;
    color: var(--text);
    font-size: 18px;
}

.calendar-v2 .cal-agenda {
    padding: 10px 18px 18px;
}

.calendar-v2 .cal-agenda-row {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

.calendar-v2 .cal-agenda-row:last-child {
    border-bottom: 0;
}

.calendar-v2 .cal-agenda-row > time {
    padding-top: 7px;
    color: #687582;
    font-size: 10px;
    font-weight: 800;
}

.calendar-v2 .cal-agenda-row .cal-event {
    max-width: 650px;
}

.calendar-v2 .cal-agenda-empty {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #929ca6;
    font-size: 10px;
    text-align: center;
}


/* =========================================================
   TYPE PILLS
   ========================================================= */

.cal-type-pill {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    padding: 4px 7px;
    border-radius: 999px;
    color: #fff;
    font-size: 8px;
    font-weight: 800;
}

.cal-type-pill.type-meeting {
    background: #6b67a8;
}

.cal-type-pill.type-call {
    background: #477aa7;
}

.cal-type-pill.type-email {
    background: #759181;
}

.cal-type-pill.type-follow_up {
    background: #b37a2c;
}

.cal-type-pill.type-task {
    background: #bd6651;
}

.cal-type-pill.type-note {
    background: #8996a3;
}


/* =========================================================
   QUICK ADD MODAL
   ========================================================= */

.cal-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cal-modal.open {
    display: flex;
}

.cal-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 31, 42, .48);
    backdrop-filter: blur(2px);
}

.cal-modal-card {
    position: relative;
    z-index: 1;
    width: min(620px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 22px 60px rgba(15, 23, 42, .24);
}

.cal-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    border-bottom: 1px solid var(--border);
}

.cal-modal-head h3 {
    margin-top: 4px;
    color: var(--text);
    font-size: 19px;
}

.cal-modal-x {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
}

#calCreateForm {
    padding: 17px 18px 18px;
}

.cal-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cal-form-grid > label {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #72808d;
    font-size: 9px;
    font-weight: 700;
}

.cal-form-grid > label.full {
    grid-column: 1 / -1;
}

.cal-form-grid input,
.cal-form-grid select,
.cal-form-grid textarea {
    width: 100%;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    outline: none;
    font-size: 11px;
}

.cal-form-grid input,
.cal-form-grid select {
    height: 39px;
    padding: 0 10px;
}

.cal-form-grid textarea {
    resize: vertical;
    padding: 9px 10px;
}

.cal-form-grid input:focus,
.cal-form-grid select:focus,
.cal-form-grid textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(23, 105, 224, .08);
}

.cal-form-message {
    min-height: 14px;
    margin-top: 10px;
    color: var(--danger);
    font-size: 9px;
}

.cal-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}


/* =========================================================
   DETAILS DRAWER
   ========================================================= */

.cal-drawer {
    position: fixed;
    inset: 0;
    z-index: 4900;
    display: none;
}

.cal-drawer.open {
    display: block;
}

.cal-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 31, 42, .36);
}

.cal-drawer-card {
    position: absolute;
    top: 0;
    right: 0;
    width: min(430px, 100%);
    height: 100%;
    overflow-y: auto;
    padding: 14px 20px 20px;
    background: #fff;
    border-left: 1px solid var(--border);
    box-shadow: -16px 0 42px rgba(15, 23, 42, .16);
}

.cal-drawer-card > .cal-modal-x {
    display: flex;
    margin-left: auto;
}

#calDrawerContent {
    padding-top: 8px;
}

#calDrawerContent h2 {
    margin-top: 10px;
    color: var(--text);
    font-size: 23px;
    line-height: 1.25;
}

.cal-drawer-company {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 12px;
}

.cal-detail-list {
    display: grid;
    gap: 9px;
    margin-top: 20px;
}

.cal-detail-list > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 12px;
    border-radius: 9px;
    background: #f7f9fa;
}

.cal-detail-list span {
    color: #8d98a4;
    font-size: 8px;
    text-transform: uppercase;
}

.cal-detail-list strong {
    color: #33414e;
    font-size: 11px;
}

.cal-drawer-notes {
    margin-top: 18px;
}

.cal-drawer-notes > span {
    color: #8d98a4;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.cal-drawer-notes p {
    margin-top: 7px;
    color: #53606d;
    font-size: 11px;
    line-height: 1.6;
}

.cal-drawer-actions {
    display: flex;
    gap: 8px;
    margin-top: 22px;
}

.cal-drawer-actions > * {
    flex: 1;
    justify-content: center;
}


/* =========================================================
   MOBILE AGENDA
   ========================================================= */

.cal-mobile-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 11px;
}

.cal-mobile-date {
    min-width: 0;
    min-height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #71808e;
    cursor: pointer;
}

.cal-mobile-date span {
    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
}

.cal-mobile-date strong {
    font-size: 13px;
}

.cal-mobile-date.active {
    background: var(--primary);
    color: #fff;
}

.cal-mobile-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 11px;
}

.cal-mobile-title span {
    color: var(--text-muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
}

.cal-mobile-title h3 {
    margin-top: 3px;
    color: var(--text);
    font-size: 15px;
}

.cal-mobile-title > button {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 9px;
    background: var(--primary);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

.cal-mobile-agenda {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.cal-mobile-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px;
    padding: 13px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 11px;
    cursor: pointer;
}

.cal-mobile-item > time {
    padding-top: 4px;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 800;
}

.cal-mobile-item > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.cal-mobile-item strong {
    color: var(--text);
    font-size: 12px;
    line-height: 1.35;
}

.cal-mobile-item p {
    color: var(--text-muted);
    font-size: 9px;
}

.cal-mobile-item small {
    color: #98a2ac;
    font-size: 8px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {

    .calendar-v2 .cal-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calendar-v2 .cal-filters {
        grid-template-columns:
            minmax(240px, 1fr)
            repeat(3, minmax(120px, 1fr));
    }

}


@media (max-width: 900px) {

    .calendar-v2 .cal-hero {
        align-items: flex-start;
    }

    .calendar-v2 .cal-toolbar {
        flex-wrap: wrap;
    }

    .calendar-v2 .cal-filters {
        grid-template-columns: 1fr 1fr;
    }

    .calendar-v2 .cal-search {
        grid-column: 1 / -1;
    }

    .calendar-v2 .cal-desktop {
        overflow-x: auto;
    }

    .calendar-v2 .cal-month-grid,
    .calendar-v2 .cal-weekdays {
        min-width: 860px;
    }

}


@media (max-width: 768px) {

    .calendar-v2 {
        max-width: none;
    }

    .calendar-v2 .cal-hero {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
        padding: 17px 15px;
    }

    .calendar-v2 .cal-hero h2 {
        font-size: 20px;
    }

    .calendar-v2 .cal-hero p {
        font-size: 10px;
    }

    .calendar-v2 .cal-new-btn {
        width: 100%;
    }

    .calendar-v2 .cal-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .calendar-v2 .cal-kpi {
        min-height: 104px;
        padding: 12px;
    }

    .calendar-v2 .cal-kpi > strong {
        font-size: 23px;
    }

    .calendar-v2 .cal-shell {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .calendar-v2 .cal-toolbar {
        display: block;
        padding: 10px;
        border: 1px solid var(--border);
        border-radius: 11px;
        background: #fff;
    }

    .calendar-v2 .cal-nav {
        width: 100%;
        display: grid;
        grid-template-columns:
            36px
            auto
            36px
            minmax(0, 1fr);
    }

    .calendar-v2 .cal-period {
        min-width: 0;
        margin-left: 3px;
        overflow: hidden;
        font-size: 12px;
        text-align: right;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .calendar-v2 .cal-view-switch {
        display: none;
    }

    .calendar-v2 .cal-filters {
        grid-template-columns: 1fr 1fr;
        margin-top: 8px;
        padding: 10px;
        border: 1px solid var(--border);
        border-radius: 11px;
        background: #fff;
    }

    .calendar-v2 .cal-search {
        grid-column: 1 / -1;
    }

    .calendar-v2 .cal-desktop {
        display: none;
    }

    .calendar-v2 .cal-mobile {
        display: block;
        margin-top: 10px;
    }

    .cal-modal {
        align-items: flex-end;
        padding: 0;
    }

    .cal-modal-card {
        width: 100%;
        max-height: 92vh;
        border-radius: 16px 16px 0 0;
    }

    .cal-form-grid {
        grid-template-columns: 1fr;
    }

    .cal-form-grid > label.full {
        grid-column: auto;
    }

    .cal-modal-actions {
        position: sticky;
        bottom: -18px;
        margin-left: -18px;
        margin-right: -18px;
        padding: 12px 18px;
        background: rgba(255, 255, 255, .97);
    }

    .cal-modal-actions > * {
        flex: 1;
    }

    .cal-drawer-card {
        top: auto;
        bottom: 0;
        width: 100%;
        height: auto;
        max-height: 88vh;
        border-left: 0;
        border-top: 1px solid var(--border);
        border-radius: 16px 16px 0 0;
    }

    .cal-drawer-actions {
        flex-direction: column;
    }

}


@media (max-width: 450px) {

    .calendar-v2 .cal-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calendar-v2 .cal-filters {
        grid-template-columns: 1fr;
    }

    .calendar-v2 .cal-search {
        grid-column: auto;
    }

    .calendar-v2 .cal-nav {
        grid-template-columns:
            34px
            auto
            34px
            minmax(0, 1fr);
        gap: 5px;
    }

    .calendar-v2 .cal-icon-btn {
        width: 34px;
    }

    .calendar-v2 .cal-today-btn {
        padding: 0 9px;
    }

    .cal-mobile-strip {
        gap: 3px;
        padding: 8px;
    }

    .cal-mobile-date {
        min-height: 52px;
    }

    .cal-mobile-item {
        grid-template-columns: 50px minmax(0, 1fr);
        padding: 11px;
    }

}
/* =========================================================
   PROJECTS FINAL
   Add to end of public/css/style.css
   ========================================================= */

.projects-v1 {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

.projects-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
    padding: 22px 24px;
    background: linear-gradient(145deg,#fff 0%,#f8fbff 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 2px 9px rgba(15,23,42,.035);
}

.projects-hero > div {
    min-width: 0;
}

.projects-hero > div > span {
    display: block;
    margin-bottom: 5px;
    color: var(--primary);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.projects-hero h2 {
    font-size: 24px;
    font-weight: 760;
    letter-spacing: -.4px;
}

.projects-hero p {
    max-width: 650px;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.55;
}

.projects-kpis {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.projects-kpi {
    min-width: 0;
    min-height: 112px;
    display: flex;
    flex-direction: column;
    padding: 15px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 11px;
}

.projects-kpi > span {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.projects-kpi > strong {
    margin-top: 10px;
    font-size: 25px;
    line-height: 1;
}

.projects-kpi > small {
    margin-top: auto;
    padding-top: 8px;
    color: var(--text-muted);
    font-size: 8px;
}

.projects-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.projects-search {
    position: relative;
    flex: 1;
    min-width: 240px;
}

.projects-search > span {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.projects-search input,
.projects-filters select {
    height: 40px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    outline: none;
    font-size: 10px;
}

.projects-search input {
    width: 100%;
    padding: 0 12px 0 36px;
}

.projects-filters select {
    min-width: 130px;
    padding: 0 28px 0 10px;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
}

.project-card {
    min-width: 0;
    min-height: 285px;
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-xs);
    transition: transform .17s ease,box-shadow .17s ease,border-color .17s ease;
}

.project-card:hover {
    transform: translateY(-2px);
    border-color: #bfd3eb;
    box-shadow: var(--shadow-sm);
}

.project-card-top,
.project-card-status,
.project-card-footer,
.project-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.project-card-top > div {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.project-number {
    color: var(--primary);
    font-size: 8px;
    font-weight: 900;
}

.project-category {
    display: inline-flex;
    padding: 3px 7px;
    border-radius: 999px;
    background: #edf2f7;
    color: var(--text-muted);
    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
}

.project-card h3 {
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.35;
}

.project-card > p {
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.55;
}

.project-priority,
.project-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 7px;
    font-weight: 900;
    text-transform: uppercase;
}

.project-priority.low {
    background: #edf1f5;
    color: var(--text-muted);
}

.project-priority.normal {
    background: var(--primary-light);
    color: var(--primary);
}

.project-priority.high {
    background: var(--warning-bg);
    color: var(--warning);
}

.project-priority.critical {
    background: var(--danger-bg);
    color: var(--danger);
}

.project-status.idea {
    background: #edf1f5;
    color: #687582;
}

.project-status.under_review,
.project-status.approved {
    background: #eef4ff;
    color: #446fa6;
}

.project-status.in_progress {
    background: var(--warning-bg);
    color: var(--warning);
}

.project-status.testing {
    background: #f1efff;
    color: var(--purple);
}

.project-status.completed {
    background: var(--success-bg);
    color: var(--success);
}

.project-status.on_hold {
    background: #fff4e7;
    color: #a86d20;
}

.project-status.rejected {
    background: var(--danger-bg);
    color: var(--danger);
}

.project-card-status {
    margin-top: auto;
    padding-top: 17px;
}

.project-card-status > span:last-child {
    color: var(--text-muted);
    font-size: 8px;
}

.project-progress-head {
    margin-top: 14px;
    color: var(--text-muted);
    font-size: 8px;
}

.project-progress-head strong {
    color: var(--text-secondary);
    font-size: 8px;
}

.project-progress {
    height: 5px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf1f5;
}

.project-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,var(--primary),#65a0f2);
}

.project-card-footer {
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 8px;
}

.projects-empty {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.projects-empty strong {
    font-size: 12px;
}

.projects-empty span {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 9px;
}

/* CREATE */

.project-create-layout {
    display: grid;
    grid-template-columns: minmax(0,1.6fr) minmax(300px,.7fr);
    gap: 16px;
    align-items: start;
}

.project-create-main,
.project-create-side {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.project-impact-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 9px;
    padding: 18px 20px;
}

.project-impact-option {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fafbfd;
    cursor: pointer;
}

.project-impact-option input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

.project-impact-option span {
    font-size: 10px;
    font-weight: 700;
}

.project-team-picker,
.project-side-form,
.project-side-settings {
    padding: 17px;
}

.project-member-checks {
    max-height: 350px;
    overflow-y: auto;
    margin-top: 15px;
}

.project-member-checks > span {
    display: block;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 800;
}

.project-member-checks label {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.project-member-checks label:last-child {
    border-bottom: 0;
}

.project-member-checks input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

.project-member-checks label > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.project-member-checks strong {
    font-size: 10px;
}

.project-member-checks small {
    color: var(--text-muted);
    font-size: 8px;
}

.project-create-submit {
    width: 100%;
}

/* PROFILE */

.project-profile-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 14px;
    padding: 22px 24px;
    border-radius: 14px;
    background: linear-gradient(135deg,#1156bd,var(--primary));
    color: #fff;
}

.project-profile-labels,
.project-profile-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.project-profile-labels > span:first-child {
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .4px;
}

.project-profile-header .project-category {
    background: rgba(255,255,255,.13);
    color: #fff;
}

.project-profile-header h2 {
    margin-top: 9px;
    font-size: 24px;
    line-height: 1.25;
}

.project-profile-meta {
    margin-top: 10px;
}

.project-profile-meta > span:last-child {
    color: rgba(255,255,255,.74);
    font-size: 9px;
}

.project-profile-progress {
    width: 240px;
    flex: 0 0 240px;
    padding: 13px;
    border-radius: 10px;
    background: rgba(255,255,255,.1);
}

.project-profile-progress > span {
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .7px;
    opacity: .7;
}

.project-profile-progress > strong {
    display: block;
    margin-top: 6px;
    font-size: 24px;
}

.project-profile-progress .project-progress {
    background: rgba(255,255,255,.2);
}

.project-profile-progress .project-progress > span {
    background: #fff;
}

.project-profile-progress small {
    display: block;
    margin-top: 7px;
    font-size: 8px;
    opacity: .7;
}

.project-status-flow {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding-bottom: 3px;
}

.project-status-flow form {
    flex: 0 0 auto;
}

.project-status-flow button {
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--text-muted);
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
}

.project-status-flow button:hover {
    border-color: #a9c8ee;
    color: var(--primary);
    background: var(--primary-soft);
}

.project-status-flow button.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.project-status-flow button.hold.active {
    background: var(--warning);
    border-color: var(--warning);
}

.project-status-flow button.reject.active {
    background: var(--danger);
    border-color: var(--danger);
}

.project-detail-layout {
    display: grid;
    grid-template-columns: minmax(0,1.55fr) minmax(310px,.7fr);
    gap: 16px;
    align-items: start;
}

.project-detail-main,
.project-detail-side {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.project-overview {
    display: grid;
    gap: 18px;
    padding: 20px;
}

.project-overview > div > span {
    color: var(--text-muted);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .5px;
}

.project-overview p {
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.7;
}

/* TASKS */

.project-task-list {
    padding: 4px 20px;
}

.project-task {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
}

.project-task:last-child {
    border-bottom: 0;
}

.project-task.completed {
    opacity: .65;
}

.project-task-main {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.project-task-check button,
.project-task-check > span {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: #fff;
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
}

.project-task-check button {
    cursor: pointer;
}

.project-task-check > span {
    background: var(--success-bg);
    border-color: #cdebdc;
    color: var(--success);
}

.project-task-main > div:last-child {
    min-width: 0;
    flex: 1;
}

.project-task-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.project-task-title strong {
    font-size: 11px;
}

.project-task.completed .project-task-title strong {
    text-decoration: line-through;
}

.project-task-main p {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.5;
}

.project-task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 8px;
}

.project-task-meta .danger-text {
    color: var(--danger);
    font-weight: 800;
}

.project-task-status-form select {
    height: 31px;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    background: #fff;
    color: var(--text-secondary);
    font-size: 8px;
}

.projects-empty-inline {
    padding: 25px;
    color: var(--text-muted);
    font-size: 9px;
    text-align: center;
}

.project-add-box {
    border-top: 1px solid var(--border);
}

.project-add-box summary {
    padding: 12px 20px;
    color: var(--primary);
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
}

.project-add-box[open] summary {
    background: var(--primary-soft);
}

.project-inline-form {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 11px;
    padding: 16px 20px 20px;
    background: #fafbfd;
}

.project-inline-form .full-width {
    grid-column: 1 / -1;
}

.project-inline-form > button {
    align-self: end;
}

/* DISCUSSION */

.project-comments {
    padding: 4px 20px;
}

.project-comment {
    display: flex;
    gap: 11px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.project-comment:last-child {
    border-bottom: 0;
}

.project-comment-avatar,
.project-member-avatar {
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 9px;
    font-weight: 900;
}

.project-comment > div:last-child {
    min-width: 0;
    flex: 1;
}

.project-comment-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.project-comment-head strong {
    font-size: 10px;
}

.project-comment-head span {
    color: var(--text-muted);
    font-size: 8px;
}

.project-comment p {
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1.6;
}

.project-comment-form {
    padding: 14px 20px 18px;
    border-top: 1px solid var(--border);
}

.project-comment-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    outline: none;
    resize: vertical;
    font-size: 10px;
}

.project-comment-form > div {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.project-outcome-form {
    display: grid;
    gap: 13px;
    padding: 20px;
}

.project-outcome-form > button {
    justify-self: start;
}

/* SIDE */

.project-members {
    padding: 4px 17px;
}

.project-member {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}

.project-member:last-child {
    border-bottom: 0;
}

.project-member > div:nth-child(2) {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.project-member strong {
    font-size: 10px;
}

.project-member span {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 8px;
}

.project-member form button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
}

.project-member form button:hover {
    background: var(--danger-bg);
    color: var(--danger);
}

.project-member-add {
    display: grid;
    gap: 8px;
    padding: 12px 17px 17px;
}

.project-member-add select {
    width: 100%;
    height: 37px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: #fff;
    font-size: 9px;
}

.project-impact-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 17px;
}

.project-impact-list > span {
    padding: 8px 10px;
    border-radius: 7px;
    background: var(--success-bg);
    color: var(--success);
    font-size: 9px;
    font-weight: 700;
}

.project-impact-list > small {
    color: var(--text-muted);
    font-size: 9px;
}

.project-activity-list {
    padding: 6px 17px 14px;
}

.project-activity-item {
    display: grid;
    grid-template-columns: 8px minmax(0,1fr);
    gap: 9px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.project-activity-item:last-child {
    border-bottom: 0;
}

.project-activity-dot {
    width: 7px;
    height: 7px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--primary);
}

.project-activity-item > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.project-activity-item strong {
    color: var(--text-secondary);
    font-size: 9px;
    line-height: 1.4;
}

.project-activity-item span:last-child {
    color: var(--text-muted);
    font-size: 7px;
}

/* RESPONSIVE */

@media (max-width:1250px) {
    .projects-kpis {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .projects-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:1000px) {
    .project-create-layout,
    .project-detail-layout {
        grid-template-columns: 1fr;
    }

    .project-create-side,
    .project-detail-side {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        align-items: start;
    }

    .project-create-submit {
        min-height: 48px;
    }

    .projects-filters {
        flex-wrap: wrap;
    }

    .projects-search {
        flex-basis: 100%;
    }
}

@media (max-width:768px) {
    .projects-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 17px 15px;
    }

    .projects-hero h2 {
        font-size: 20px;
    }

    .projects-hero > .primary-button {
        width: 100%;
    }

    .projects-kpis {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 8px;
    }

    .projects-kpi {
        min-height: 100px;
        padding: 12px;
    }

    .projects-kpi > strong {
        font-size: 22px;
    }

    .projects-filters {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .projects-search {
        grid-column: 1 / -1;
    }

    .projects-filters select,
    .projects-filters .secondary-button {
        width: 100%;
        min-width: 0;
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }

    .project-card {
        min-height: 245px;
    }

    .project-impact-grid {
        grid-template-columns: 1fr 1fr;
        padding: 15px;
    }

    .project-create-side,
    .project-detail-side {
        display: flex;
        flex-direction: column;
    }

    .project-profile-header {
        flex-direction: column;
        padding: 18px 16px;
    }

    .project-profile-header h2 {
        font-size: 20px;
    }

    .project-profile-progress {
        width: 100%;
        flex-basis: auto;
    }

    .project-status-flow {
        margin-left: -12px;
        margin-right: -12px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .project-task {
        align-items: flex-start;
        flex-direction: column;
    }

    .project-task-status-form {
        width: 100%;
        padding-left: 35px;
    }

    .project-task-status-form select {
        width: 100%;
    }

    .project-inline-form {
        grid-template-columns: 1fr;
        padding-left: 15px;
        padding-right: 15px;
    }

    .project-inline-form .full-width {
        grid-column: auto;
    }

    .project-comment-head {
        flex-direction: column;
        gap: 3px;
    }
}

@media (max-width:430px) {
    .projects-kpis {
        grid-template-columns: 1fr 1fr;
    }

    .projects-filters {
        grid-template-columns: 1fr;
    }

    .projects-search {
        grid-column: auto;
    }

    .project-impact-grid {
        grid-template-columns: 1fr;
    }
}
.lovable-order-id {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.lovable-order-id strong {
    color: var(--primary);
    font-size: inherit;
    font-weight: 800;
}

.lovable-order-name {
    color: var(--text);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.25;
}
.notification-bell-icon {
    width: 18px;
    height: 18px;
    display: block;
    color: var(--text-secondary);
}

.notification-bell-button:hover .notification-bell-icon {
    color: var(--primary);
}
/* =========================================================
   NOTIFICATIONS V2 FINAL
   Add to end of public/css/style.css
   ========================================================= */

.notification-bell-icon {
    width: 19px;
    height: 19px;
    display: block;
    color: var(--text-secondary);
}

.notification-bell-button:hover .notification-bell-icon {
    color: var(--primary);
}


/* =========================================================
   DROPDOWN
   ========================================================= */

.notification-v2-dropdown {
    width: min(390px, calc(100vw - 24px));
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .16);
}

.notification-v2-dropdown-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 16px 13px;
    border-bottom: 1px solid var(--border);
    background: #fff;
}

.notification-v2-dropdown-head > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notification-v2-eyebrow {
    color: var(--primary);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .9px;
}

.notification-v2-dropdown-head strong {
    color: var(--text);
    font-size: 13px;
}

.notification-v2-dropdown-head small {
    color: var(--text-muted);
    font-size: 8px;
}

.notification-v2-mark-all {
    min-height: 30px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #fff;
    color: var(--primary);
    font-size: 8px;
    font-weight: 800;
    cursor: pointer;
}

.notification-v2-mark-all:hover {
    background: var(--primary-soft);
    border-color: #b9d0ee;
}

.notification-v2-dropdown-list {
    max-height: 430px;
    overflow-y: auto;
}

.notification-v2-item {
    position: relative;
    min-height: 79px;
    display: grid;
    grid-template-columns: 8px 34px minmax(0, 1fr);
    gap: 9px;
    align-items: flex-start;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: #fff;
    transition: background .15s ease;
}

.notification-v2-item:hover {
    background: #f8fafc;
}

.notification-v2-item.unread {
    background: #f7fbff;
}

.notification-v2-item.unread:hover {
    background: #f1f7fe;
}

.notification-v2-unread-dot {
    width: 6px;
    height: 6px;
    margin-top: 14px;
    border-radius: 50%;
    background: transparent;
}

.notification-v2-item.unread .notification-v2-unread-dot {
    background: var(--primary);
}

.notification-v2-type-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #edf2f7;
    color: #667788;
}

.notification-v2-type-icon svg {
    width: 17px;
    height: 17px;
}

.notification-v2-type-icon.order,
.notification-v2-type-icon.woocommerce {
    background: #eef4ff;
    color: #4874a9;
}

.notification-v2-type-icon.production {
    background: #fff4e7;
    color: #a66d22;
}

.notification-v2-type-icon.project {
    background: #f2efff;
    color: #6d61a7;
}

.notification-v2-type-icon.ticket {
    background: #fff0ec;
    color: #b65a41;
}

.notification-v2-type-icon.activity,
.notification-v2-type-icon.calendar {
    background: #edf7f2;
    color: #5b826f;
}

.notification-v2-type-icon.sales {
    background: #edf8f8;
    color: #427c80;
}

.notification-v2-type-icon.comment {
    background: #f4f5f7;
    color: #737f8d;
}

.notification-v2-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notification-v2-type-label {
    color: var(--text-muted);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.notification-v2-copy > strong {
    overflow: hidden;
    color: var(--text);
    font-size: 10px;
    line-height: 1.35;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.notification-v2-message {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 8px;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.notification-v2-copy small {
    margin-top: 2px;
    color: #9aa4ae;
    font-size: 7px;
}

.notification-v2-view-all {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 16px;
    background: #fbfcfe;
    color: var(--primary);
    font-size: 9px;
    font-weight: 800;
}

.notification-v2-view-all:hover {
    background: var(--primary-soft);
}

.notification-v2-empty {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 20px;
    text-align: center;
}

.notification-v2-empty strong {
    color: var(--text);
    font-size: 10px;
}

.notification-v2-empty span {
    color: var(--text-muted);
    font-size: 8px;
}


/* =========================================================
   NOTIFICATION CENTER PAGE
   ========================================================= */

.notification-v2-page {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
}

.notification-v2-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
    padding: 20px 22px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient(145deg, #fff 0%, #f8fbff 100%);
}

.notification-v2-hero > div:first-child {
    min-width: 0;
}

.notification-v2-hero > div:first-child > span {
    display: block;
    color: var(--primary);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.notification-v2-hero h2 {
    margin-top: 5px;
    color: var(--text);
    font-size: 23px;
    letter-spacing: -.35px;
}

.notification-v2-hero p {
    max-width: 700px;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.55;
}

.notification-v2-hero-side {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notification-v2-unread-card {
    min-width: 92px;
    padding: 10px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
}

.notification-v2-unread-card span {
    display: block;
    color: var(--text-muted);
    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
}

.notification-v2-unread-card strong {
    display: block;
    margin-top: 3px;
    color: var(--primary);
    font-size: 22px;
}

.notification-v2-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #fff;
}

.notification-v2-filter-group,
.notification-v2-type-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.notification-v2-toolbar a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 7px;
    color: var(--text-muted);
    font-size: 8px;
    font-weight: 800;
}

.notification-v2-toolbar a:hover {
    background: #f3f6f9;
    color: var(--text);
}

.notification-v2-toolbar a.active {
    background: var(--primary);
    color: #fff;
}

.notification-v2-groups {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.notification-v2-group {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
}

.notification-v2-group-heading {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 15px;
    border-bottom: 1px solid var(--border);
    background: #fafbfd;
}

.notification-v2-group-heading > span {
    color: var(--text-secondary);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .55px;
    text-transform: uppercase;
}

.notification-v2-group-heading small {
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #edf1f5;
    color: var(--text-muted);
    font-size: 7px;
    font-weight: 800;
}

.notification-v2-page-item {
    position: relative;
    min-height: 96px;
    display: grid;
    grid-template-columns: 7px 42px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: #fff;
    transition: background .15s ease;
}

.notification-v2-page-item:last-child {
    border-bottom: 0;
}

.notification-v2-page-item:hover {
    background: #fafcfe;
}

.notification-v2-page-item.unread {
    background: #f7fbff;
}

.notification-v2-page-item.unread:hover {
    background: #f1f7fe;
}

.notification-v2-page-unread {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: transparent;
}

.notification-v2-page-item.unread .notification-v2-page-unread {
    background: var(--primary);
}

.notification-v2-type-icon.large {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.notification-v2-type-icon.large svg {
    width: 20px;
    height: 20px;
}

.notification-v2-page-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.notification-v2-page-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.notification-v2-page-type,
.notification-v2-new {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    padding: 3px 6px;
    border-radius: 999px;
    font-size: 7px;
    font-weight: 900;
    text-transform: uppercase;
}

.notification-v2-page-type {
    background: #edf1f5;
    color: var(--text-muted);
}

.notification-v2-page-type.order,
.notification-v2-page-type.woocommerce {
    background: #eef4ff;
    color: #4874a9;
}

.notification-v2-page-type.production {
    background: #fff4e7;
    color: #a66d22;
}

.notification-v2-page-type.project {
    background: #f2efff;
    color: #6d61a7;
}

.notification-v2-page-type.ticket {
    background: #fff0ec;
    color: #b65a41;
}

.notification-v2-page-type.activity,
.notification-v2-page-type.calendar {
    background: #edf7f2;
    color: #5b826f;
}

.notification-v2-page-type.sales {
    background: #edf8f8;
    color: #427c80;
}

.notification-v2-new {
    background: var(--primary);
    color: #fff;
}

.notification-v2-page-body > strong {
    color: var(--text);
    font-size: 11px;
    line-height: 1.35;
}

.notification-v2-page-body > p {
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.5;
}

.notification-v2-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: #929da7;
    font-size: 7px;
}

.notification-v2-arrow {
    color: #a5aeb7;
    font-size: 14px;
}

.notification-v2-page-item:hover .notification-v2-arrow {
    color: var(--primary);
}

.notification-v2-empty-page {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    text-align: center;
}

.notification-v2-empty-page strong {
    font-size: 12px;
}

.notification-v2-empty-page span {
    color: var(--text-muted);
    font-size: 9px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .notification-v2-dropdown {
        position: fixed;
        top: 64px;
        right: 12px;
        left: 12px;
        width: auto;
        max-height: calc(100vh - 78px);
    }

    .notification-v2-dropdown-list {
        max-height: calc(100vh - 190px);
    }

    .notification-v2-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 16px;
    }

    .notification-v2-hero h2 {
        font-size: 19px;
    }

    .notification-v2-hero-side {
        justify-content: space-between;
    }

    .notification-v2-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .notification-v2-filter-group,
    .notification-v2-type-filters {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 2px;
    }

    .notification-v2-toolbar a {
        flex: 0 0 auto;
    }

    .notification-v2-page-item {
        grid-template-columns: 6px 36px minmax(0, 1fr);
        gap: 9px;
        padding: 12px;
    }

    .notification-v2-type-icon.large {
        width: 34px;
        height: 34px;
    }

    .notification-v2-arrow {
        display: none;
    }

    .notification-v2-page-body > strong {
        font-size: 10px;
    }

    .notification-v2-page-body > p {
        font-size: 8px;
    }

    .notification-v2-meta {
        gap: 5px;
    }

}


@media (max-width: 420px) {

    .notification-v2-dropdown-head {
        padding-left: 13px;
        padding-right: 13px;
    }

    .notification-v2-item {
        grid-template-columns: 7px 30px minmax(0, 1fr);
        padding-left: 11px;
        padding-right: 11px;
    }

    .notification-v2-type-icon {
        width: 29px;
        height: 29px;
    }

    .notification-v2-type-icon svg {
        width: 15px;
        height: 15px;
    }

    .notification-v2-hero-side {
        align-items: stretch;
        flex-direction: column;
    }

    .notification-v2-unread-card {
        width: 100%;
    }

    .notification-v2-hero-side form,
    .notification-v2-hero-side button {
        width: 100%;
    }

}
/* =========================================================
   TEMAX CHAT V1 FINAL
   Add to end of public/css/style.css
   ========================================================= */

.chat-v1-main {
    min-height: 100vh;
}

.chat-v1-page {
    height: calc(100vh - 78px);
    min-height: 620px;
    padding-bottom: 18px;
}

.chat-v1-shell {
    height: 100%;
    min-height: 560px;
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 3px 16px rgba(15, 23, 42, .05);
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.chat-v1-sidebar {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    background: #fbfcfe;
}

.chat-v1-sidebar-head {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: #fff;
}

.chat-v1-sidebar-head > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-v1-sidebar-head span {
    color: var(--primary);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .9px;
}

.chat-v1-sidebar-head strong {
    color: var(--text);
    font-size: 14px;
}

.chat-v1-sidebar-head > button {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--primary);
    font-size: 18px;
    cursor: pointer;
}

.chat-v1-sidebar-head > button:hover {
    background: var(--primary-soft);
}

.chat-v1-search {
    position: relative;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

.chat-v1-search > span {
    position: absolute;
    top: 50%;
    left: 25px;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.chat-v1-search input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 34px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    outline: none;
    font-size: 9px;
}

.chat-v1-search input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(23, 105, 224, .07);
}

.chat-v1-conversations {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
}

.chat-v1-conversation {
    min-height: 72px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    border-bottom: 1px solid var(--border);
    background: transparent;
    transition: background .15s ease;
}

.chat-v1-conversation:hover {
    background: #f4f7fa;
}

.chat-v1-conversation.active {
    background: #eef5fd;
    box-shadow: inset 3px 0 0 var(--primary);
}

.chat-v1-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(145deg, #e8f1fc, #dfeafb);
    color: var(--primary);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .2px;
}

.chat-v1-avatar.large {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 11px;
}

.chat-v1-avatar.xlarge {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
    border-radius: 16px;
    font-size: 14px;
}

.chat-v1-conversation-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.chat-v1-conversation-top,
.chat-v1-conversation-bottom {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.chat-v1-conversation-top strong {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-v1-conversation-top small {
    flex: 0 0 auto;
    color: #9aa4ae;
    font-size: 7px;
}

.chat-v1-conversation-bottom > span {
    min-width: 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-v1-unread {
    min-width: 20px;
    height: 20px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 7px;
    font-weight: 900;
}

.chat-v1-empty-conversations {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 20px;
    text-align: center;
}

.chat-v1-empty-conversations strong {
    color: var(--text);
    font-size: 10px;
}

.chat-v1-empty-conversations span {
    color: var(--text-muted);
    font-size: 8px;
}


/* =========================================================
   CONVERSATION
   ========================================================= */

.chat-v1-conversation-panel {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(
            180deg,
            #fbfcfe 0%,
            #f7f9fc 100%
        );
}

.chat-v1-conversation-header {
    min-height: 70px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,.96);
}

.chat-v1-mobile-back {
    display: none;
}

.chat-v1-conversation-title {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-v1-conversation-title strong {
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-v1-conversation-title span {
    color: var(--text-muted);
    font-size: 8px;
}

.chat-v1-members-menu {
    position: relative;
}

.chat-v1-members-menu summary {
    padding: 8px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--text-muted);
    font-size: 8px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.chat-v1-members-menu > div {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    min-width: 190px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(15,23,42,.12);
}

.chat-v1-members-menu > div span {
    color: var(--text-secondary);
    font-size: 8px;
}

.chat-v1-messages {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 20px 24px;
}

.chat-v1-first-message {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-align: center;
}

.chat-v1-first-message > strong {
    color: var(--text);
    font-size: 13px;
}

.chat-v1-first-message > p {
    color: var(--text-muted);
    font-size: 9px;
}

.chat-v1-message {
    max-width: min(72%, 680px);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.chat-v1-message.mine {
    align-self: flex-end;
    align-items: flex-end;
}

.chat-v1-message.theirs {
    align-self: flex-start;
    align-items: flex-start;
}

.chat-v1-message-author {
    padding-left: 3px;
    color: var(--text-muted);
    font-size: 7px;
    font-weight: 800;
}

.chat-v1-bubble {
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1.55;
    overflow-wrap: anywhere;
    box-shadow: 0 1px 2px rgba(15,23,42,.025);
}

.chat-v1-message.mine .chat-v1-bubble {
    border-color: var(--primary);
    border-bottom-right-radius: 4px;
    background: var(--primary);
    color: #fff;
}

.chat-v1-message.theirs .chat-v1-bubble {
    border-bottom-left-radius: 4px;
}

.chat-v1-message-time {
    padding: 0 3px;
    color: #9aa4ae;
    font-size: 7px;
}

.chat-v1-message-time > span {
    color: var(--primary);
}


/* =========================================================
   COMPOSE
   ========================================================= */

.chat-v1-compose {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 9px;
    padding: 11px 14px;
    border-top: 1px solid var(--border);
    background: #fff;
}

.chat-v1-compose textarea {
    width: 100%;
    min-height: 40px;
    max-height: 130px;
    resize: none;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: #fbfcfe;
    color: var(--text);
    outline: none;
    font-size: 10px;
    line-height: 1.45;
}

.chat-v1-compose textarea:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(23,105,224,.07);
}

.chat-v1-send {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    border: 0;
    border-radius: 9px;
    background: var(--primary);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
}

.chat-v1-send:hover {
    filter: brightness(.96);
}

.chat-v1-send svg {
    width: 16px;
    height: 16px;
}


/* =========================================================
   NO ACTIVE
   ========================================================= */

.chat-v1-no-active {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 30px;
    text-align: center;
}

.chat-v1-no-active-icon {
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    border-radius: 17px;
    background: var(--primary-light);
    color: var(--primary);
}

.chat-v1-no-active-icon svg {
    width: 30px;
    height: 30px;
}

.chat-v1-no-active > strong {
    font-size: 16px;
}

.chat-v1-no-active > span {
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 9px;
}


/* =========================================================
   NEW CHAT MODAL
   ========================================================= */

.chat-v1-modal {
    position: fixed;
    inset: 0;
    z-index: 5200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.chat-v1-modal.open {
    display: flex;
}

.chat-v1-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18, 29, 40, .48);
    backdrop-filter: blur(2px);
}

.chat-v1-modal-card {
    position: relative;
    z-index: 1;
    width: min(580px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(15,23,42,.24);
}

.chat-v1-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 17px 18px;
    border-bottom: 1px solid var(--border);
}

.chat-v1-modal-head span {
    color: var(--primary);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .9px;
}

.chat-v1-modal-head h3 {
    margin-top: 3px;
    color: var(--text);
    font-size: 18px;
}

.chat-v1-modal-head > button {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
}

.chat-v1-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 13px 18px 0;
    padding: 3px;
    border-radius: 9px;
    background: #eef2f5;
}

.chat-v1-tabs button {
    min-height: 34px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
}

.chat-v1-tabs button.active {
    background: #fff;
    color: var(--text);
    box-shadow: 0 2px 7px rgba(15,23,42,.06);
}

#chatCreateConversationForm {
    padding: 15px 18px 18px;
}

.chat-v1-create-section.hidden {
    display: none;
}

.chat-v1-create-section > label,
.chat-v1-member-label {
    display: block;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 8px;
    font-weight: 800;
}

.chat-v1-user-picker {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 9px;
}

.chat-v1-user-picker > label {
    display: grid;
    grid-template-columns: 18px 36px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.chat-v1-user-picker > label:last-child {
    border-bottom: 0;
}

.chat-v1-user-picker > label:hover {
    background: #f7f9fc;
}

.chat-v1-user-picker input {
    width: 15px;
    height: 15px;
    accent-color: var(--primary);
}

.chat-v1-user-picker .chat-v1-avatar {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
}

.chat-v1-user-picker > label > span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-v1-user-picker strong {
    font-size: 9px;
}

.chat-v1-user-picker small {
    color: var(--text-muted);
    font-size: 7px;
}

.chat-v1-create-section .form-field {
    margin-bottom: 14px;
}

.chat-v1-create-section .form-field input {
    width: 100%;
    height: 39px;
    padding: 0 10px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    outline: none;
}

.chat-v1-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--border);
}


/* =========================================================
   SIDEBAR BADGE
   ========================================================= */

.chat-nav-badge {
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 7px;
    font-weight: 900;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .chat-v1-shell {
        grid-template-columns: 290px minmax(0, 1fr);
    }

}


@media (max-width: 768px) {

    .chat-v1-page {
        height: calc(100vh - 64px);
        min-height: 0;
        padding: 0;
    }

    .chat-v1-shell {
        grid-template-columns: 1fr;
        min-height: 0;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    .chat-v1-sidebar {
        border-right: 0;
    }

    .chat-v1-conversation-panel {
        display: none;
        position: absolute;
        inset: 0;
        z-index: 40;
    }

    .chat-v1-shell {
        position: relative;
    }

    .chat-v1-shell.has-conversation .chat-v1-sidebar {
        display: none;
    }

    .chat-v1-shell.has-conversation .chat-v1-conversation-panel {
        display: flex;
    }

    .chat-v1-mobile-back {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border-strong);
        border-radius: 8px;
        background: #fff;
        color: var(--text-secondary);
        cursor: pointer;
    }

    .chat-v1-messages {
        padding: 14px 12px;
    }

    .chat-v1-message {
        max-width: 86%;
    }

    .chat-v1-compose {
        position: sticky;
        bottom: 0;
        padding: 9px;
    }

    .chat-v1-send span {
        display: none;
    }

    .chat-v1-send {
        width: 42px;
        padding: 0;
    }

    .chat-v1-modal {
        align-items: flex-end;
        padding: 0;
    }

    .chat-v1-modal-card {
        width: 100%;
        max-height: 92vh;
        border-radius: 16px 16px 0 0;
    }

}


@media (max-width: 420px) {

    .chat-v1-conversation {
        min-height: 68px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .chat-v1-conversation-header {
        padding-left: 10px;
        padding-right: 10px;
    }

    .chat-v1-message {
        max-width: 90%;
    }

}
/* =========================================================
   TEMAX CRM LOGIN
   ========================================================= */

.crm-login-page {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background: #f4f7fa;
}

.crm-login-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns:
        minmax(420px, 46%)
        minmax(0, 54%);
}


/* =========================================================
   LEFT SIDE
   ========================================================= */

.crm-login-brand {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 46px 52px 34px;
    background:
        linear-gradient(
            145deg,
            #102b46 0%,
            #163d61 45%,
            #0f2e4c 100%
        );
    color: #fff;
}

.crm-login-brand::before {
    content: "";
    position: absolute;
    width: 440px;
    height: 440px;
    top: -190px;
    right: -180px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .08);
}

.crm-login-brand::after {
    content: "";
    position: absolute;
    width: 540px;
    height: 540px;
    bottom: -320px;
    left: -250px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .05);
}

.crm-login-brand-inner {
    position: relative;
    z-index: 1;
    max-width: 560px;
}

.crm-login-logo {
    display: flex;
    align-items: center;
    min-height: 80px;
}

.crm-login-logo img {
    width: auto;
    max-width: 220px;
    max-height: 78px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.crm-login-brand-copy {
    margin-top: 80px;
}

.crm-login-brand-copy > span {
    display: block;
    margin-bottom: 13px;
    color: rgba(255, 255, 255, .55);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.6px;
}

.crm-login-brand-copy h1 {
    color: #fff;
    font-size: clamp(
        38px,
        4vw,
        58px
    );
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -2px;
}

.crm-login-brand-copy p {
    max-width: 460px;
    margin-top: 22px;
    color: rgba(255, 255, 255, .65);
    font-size: 12px;
    line-height: 1.75;
}

.crm-login-features {
    display: grid;
    gap: 14px;
    margin-top: 46px;
}

.crm-login-features > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.crm-login-feature-icon {
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 8px;
    background: rgba(255, 255, 255, .07);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
}

.crm-login-features > div > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.crm-login-features strong {
    color: #fff;
    font-size: 10px;
}

.crm-login-features small {
    color: rgba(255, 255, 255, .52);
    font-size: 8px;
}

.crm-login-brand-footer {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: rgba(255, 255, 255, .36);
    font-size: 8px;
}


/* =========================================================
   RIGHT SIDE
   ========================================================= */

.crm-login-area {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(43, 107, 170, .06),
            transparent 32%
        ),
        #f5f7fa;
}

.crm-login-card {
    width: min(
        410px,
        100%
    );
}

.crm-login-mobile-logo {
    display: none;
}

.crm-login-heading > span {
    display: block;
    margin-bottom: 7px;
    color: var(--primary);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.25px;
}

.crm-login-heading h2 {
    color: var(--text);
    font-size: 28px;
    font-weight: 730;
    line-height: 1.2;
    letter-spacing: -.55px;
}

.crm-login-heading p {
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.55;
}


/* =========================================================
   ERROR
   ========================================================= */

.crm-login-error {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 22px;
    padding: 11px 12px;
    border: 1px solid #f2cfc8;
    border-radius: 9px;
    background: #fff5f2;
}

.crm-login-error > span {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #fbe3dc;
    color: #b6533c;
    font-size: 9px;
    font-weight: 900;
}

.crm-login-error > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.crm-login-error strong {
    color: #934632;
    font-size: 9px;
}

.crm-login-error p {
    color: #b2614b;
    font-size: 8px;
}


/* =========================================================
   FORM
   ========================================================= */

.crm-login-form {
    display: flex;
    flex-direction: column;
    gap: 17px;
    margin-top: 28px;
}

.crm-login-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.crm-login-field label {
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 800;
}

.crm-login-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.crm-login-input {
    position: relative;
}

.crm-login-input > input {
    width: 100%;
    height: 47px;
    padding:
        0
        45px
        0
        43px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    outline: none;
    font-size: 10px;
    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}

.crm-login-input > input::placeholder {
    color: #a4adb7;
}

.crm-login-input > input:hover {
    border-color: #bbc7d3;
}

.crm-login-input > input:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow:
        0 0 0 3px
        rgba(23, 105, 224, .08);
}

.crm-login-input-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 2;
    transform: translateY(-50%);
    color: #8995a1;
    pointer-events: none;
}

.crm-login-input-icon svg {
    width: 17px;
    height: 17px;
    display: block;
}

.crm-login-password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #8995a1;
    cursor: pointer;
}

.crm-login-password-toggle:hover {
    background: #f2f5f8;
    color: var(--primary);
}

.crm-login-password-toggle svg {
    width: 17px;
    height: 17px;
}

.crm-login-submit {
    width: 100%;
    min-height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 4px;
    border: 0;
    border-radius: 10px;
    background:
        linear-gradient(
            135deg,
            #175ca8,
            var(--primary)
        );
    color: #fff;
    font-size: 10px;
    font-weight: 850;
    cursor: pointer;
    box-shadow:
        0 8px 20px
        rgba(23, 105, 224, .16);
    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.crm-login-submit:hover {
    transform: translateY(-1px);
    box-shadow:
        0 11px 25px
        rgba(23, 105, 224, .21);
}

.crm-login-submit:active {
    transform: translateY(0);
}

.crm-login-submit svg {
    width: 17px;
    height: 17px;
}


/* =========================================================
   SECURITY / FOOTER
   ========================================================= */

.crm-login-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 21px;
    color: #929ca6;
    font-size: 8px;
}

.crm-login-security svg {
    width: 15px;
    height: 15px;
}

.crm-login-footer {
    position: absolute;
    right: 0;
    bottom: 24px;
    left: 0;
    color: #9ba5af;
    font-size: 7px;
    text-align: center;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .crm-login-layout {
        grid-template-columns:
            minmax(350px, 42%)
            minmax(0, 58%);
    }

    .crm-login-brand {
        padding:
            38px
            34px
            30px;
    }

    .crm-login-brand-copy {
        margin-top: 60px;
    }

    .crm-login-brand-copy h1 {
        font-size: 39px;
    }

    .crm-login-area {
        padding: 36px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

    .crm-login-page {
        background: #f5f7fa;
    }

    .crm-login-layout {
        display: block;
        min-height: 100vh;
    }

    .crm-login-brand {
        display: none;
    }

    .crm-login-area {
        min-height: 100vh;
        align-items: center;
        padding:
            38px
            22px
            70px;
    }

    .crm-login-card {
        width: 100%;
        max-width: 420px;
    }

    .crm-login-mobile-logo {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 38px;
    }

    .crm-login-mobile-logo img {
        width: auto;
        max-width: 175px;
        max-height: 65px;
        object-fit: contain;
    }

    .crm-login-heading h2 {
        font-size: 24px;
    }

    .crm-login-heading p {
        font-size: 10px;
    }

}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media (max-width: 390px) {

    .crm-login-area {
        padding-left: 17px;
        padding-right: 17px;
    }

    .crm-login-heading h2 {
        font-size: 22px;
    }

}
/* =========================================================
   ORDERS SECURITY V1 - STATUS FORM COMPATIBILITY
   Add to end of public/css/style.css
   ========================================================= */

.order-production-bar .order-status-form {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

.order-production-bar .order-status-form .stage-step {
    width: 100%;
    height: 100%;
    border: 0;
    font: inherit;
    cursor: pointer;
}

@media (max-width: 768px) {
    .order-production-bar .order-status-form {
        flex: 0 0 auto;
    }
}
/* =========================================================
   SALES SECURITY V1 + SMART KPI
   Add to end of public/css/style.css
   ========================================================= */

.opportunity-stage-bar .opportunity-stage-form {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

.opportunity-stage-bar .opportunity-stage-form .stage-step {
    width: 100%;
    height: 100%;
    border: 0;
    font: inherit;
    cursor: pointer;
}

.sales-v4-kpi-realized {
    gap: 10px;
}

.sales-v4-realized-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sales-v4-realized-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .45px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sales-v4-realized-divider {
    height: 1px;
    background: var(--border);
}

@media (max-width: 768px) {

    .opportunity-stage-bar .opportunity-stage-form {
        flex: 0 0 auto;
    }

}

/* =========================================================
   SALES V4 - READABILITY FIX (SAFE OVERRIDE)
   Keeps the rest of the original stylesheet unchanged.
   ========================================================= */

/* Keep all five KPI cards on one row on large desktops.
   Sales Performance gets double width because it contains two datasets. */
@media (min-width: 1281px) {
    .sales-v4-kpis {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        align-items: stretch;
    }

    .sales-v4-kpi-realized {
        grid-column: span 2;
    }
}

.sales-v4-kpi {
    min-height: 185px;
    display: flex;
    flex-direction: column;
}

.sales-v4-kpi-top {
    margin-bottom: 13px;
}

.sales-v4-kpi-top > span:first-child {
    color: #667587;
    font-size: 11px;
    font-weight: 800;
}

.sales-v4-kpi > strong {
    margin-top: 2px;
    font-size: 31px;
    letter-spacing: -0.6px;
}

.sales-v4-kpi > small {
    margin-top: 8px;
    line-height: 1.45;
}

/* Sales Performance */
.sales-v4-kpi-realized {
    gap: 0;
    padding: 18px 20px;
}

.sales-v4-kpi-realized .sales-v4-kpi-top {
    margin-bottom: 12px;
}

.sales-v4-realized-block {
    display: grid;
    grid-template-columns: minmax(105px, .78fr) minmax(0, 1.6fr);
    align-items: start;
    gap: 8px 14px;
    padding: 8px 0;
}

.sales-v4-realized-label {
    padding-top: 3px;
    color: #7a8796;
    font-size: 8px;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: .55px;
    text-transform: uppercase;
}

.sales-v4-kpi-realized .sales-v4-pipeline-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 14px;
}

.sales-v4-kpi-realized .sales-v4-pipeline-values strong {
    min-width: 0;
    color: #172232;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.sales-v4-kpi-realized .sales-v4-realized-block:nth-of-type(2) .sales-v4-pipeline-values strong {
    color: var(--success);
}

.sales-v4-realized-divider {
    width: 100%;
    height: 1px;
    margin: 1px 0;
    background: var(--border);
}

.sales-v4-kpi-realized > small {
    margin-top: auto;
    padding-top: 8px;
    color: #8995a2;
    font-size: 10px;
}

/* Normal KPI values */
.sales-v4-kpi:not(.sales-v4-kpi-realized) .sales-v4-pipeline-values strong {
    font-size: 25px;
    letter-spacing: -0.35px;
}

/* Snapshot row */
.sales-v4-snapshot > div {
    min-height: 52px;
    padding: 0 16px;
}

.sales-v4-snapshot span {
    color: #718092;
    font-weight: 800;
}

.sales-v4-snapshot strong {
    font-size: 16px;
    font-weight: 800;
}

/* Toolbar */
.sales-v4-filter-form {
    align-items: stretch;
}

.sales-v4-search-box input,
.sales-v4-filter-form select,
.sales-v4-filter-form .secondary-button {
    min-height: 42px;
}

/* Kanban readability */
.sales-v4-column-header {
    min-height: 67px;
}

.sales-v4-column-title h3 {
    font-weight: 800;
}

.sales-v4-card {
    padding: 14px;
}

.sales-v4-card-number {
    color: var(--primary);
    font-weight: 900;
}

.sales-v4-card-value {
    color: #0f4ea8;
    font-size: 19px;
}

.sales-v4-card-footer span {
    font-size: 8px;
    font-weight: 700;
}

.sales-v4-card-footer strong {
    font-size: 10px;
}

/* Security V1 stage forms keep exactly the old stage-bar layout */
.opportunity-stage-bar .opportunity-stage-form {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

.opportunity-stage-bar .opportunity-stage-form .stage-step {
    width: 100%;
    height: 100%;
    border: 0;
    font: inherit;
    cursor: pointer;
}

/* Laptop */
@media (max-width: 1280px) and (min-width: 769px) {
    .sales-v4-kpis {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sales-v4-kpi-realized {
        grid-column: span 2;
    }

    .sales-v4-realized-block {
        grid-template-columns: 95px minmax(0, 1fr);
    }
}

/* Tablet */
@media (max-width: 900px) and (min-width: 769px) {
    .sales-v4-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sales-v4-kpi-realized {
        grid-column: 1 / -1;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .sales-v4-kpi {
        min-height: 145px;
    }

    .sales-v4-kpi-realized {
        grid-column: 1 / -1;
        min-height: auto;
        padding: 14px;
    }

    .sales-v4-realized-block {
        grid-template-columns: 1fr;
        gap: 5px;
        padding: 7px 0;
    }

    .sales-v4-kpi-realized .sales-v4-pipeline-values {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 10px;
    }

    .sales-v4-kpi-realized .sales-v4-pipeline-values strong {
        font-size: 16px;
    }

    .opportunity-stage-bar .opportunity-stage-form {
        flex: 0 0 auto;
    }
}

@media (max-width: 420px) {
    .sales-v4-kpis {
        grid-template-columns: 1fr;
    }

    .sales-v4-kpi-realized,
    .sales-v4-kpi {
        grid-column: auto;
    }

    .sales-v4-kpi {
        min-height: 130px;
    }
}
/* =========================================================
   DASHBOARD - ONLINE USERS
   ========================================================= */

.lovable-online-users {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 36px;
    padding: 0 12px;

    border: 1px solid #dce4eb;
    border-radius: 10px;

    background: #fff;

    color: #425466;
    font-size: 12px;
    text-decoration: none;

    transition:
        background .15s ease,
        border-color .15s ease;
}

.lovable-online-users:hover {
    background: #f7fafc;
    border-color: #cbd8e3;
}

.lovable-online-users strong {
    color: #172b3a;
    font-size: 13px;
}

.lovable-online-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;
    background: #22c55e;

    box-shadow:
        0 0 0 3px rgba(34, 197, 94, .12);
}
.team-presence {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.team-presence-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 8px;
}

.team-presence.online {
    color: #15803d;
}

.team-presence.online .team-presence-dot {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .12);
}

.team-presence.offline {
    color: #64748b;
}

.team-presence.offline .team-presence-dot {
    background: #94a3b8;
}

.team-last-seen {
    display: block;
    margin-top: 4px;
    color: #8795a5;
    font-size: 10px;
    white-space: nowrap;
}
.lovable-profile-link {
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.lovable-profile-link:hover strong {
    text-decoration: underline;
}

.profile-overview {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid #dce4eb;
    border-radius: 14px;
}

.profile-overview h2 {
    margin: 0 0 4px;
    font-size: 20px;
}

.profile-overview p {
    margin: 0;
    color: #718096;
    font-size: 13px;
}

.profile-avatar-large {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 54px;
    border-radius: 50%;
    background: #edf4fa;
    color: #2f6fa5;
    font-weight: 800;
    font-size: 17px;
}

.profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.profile-grid .customer-form {
    min-width: 0;
}

@media (max-width: 900px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   SALES V5 + CAPA
   ========================================================= */
.sales-v5-page {
    min-height: 100vh;
    background: #f4f7fa;
}

.sales-v5-topbar {
    min-height: 96px;
    align-items: center;
    padding-top: 18px;
    padding-bottom: 18px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid #e5eaf0;
}

.sales-v5-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sales-v5-eyebrow,
.sales-v5-section-label {
    color: #718096;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.sales-v5-heading h1 {
    margin: 0;
    color: #172033;
    font-size: 29px;
    line-height: 1.15;
    letter-spacing: -.035em;
}

.sales-v5-heading p {
    margin: 4px 0 0;
    color: #7f8b99;
    font-size: 13px;
}

.sales-v5-topbar-actions {
    gap: 9px;
}

.sales-v5-action-button {
    white-space: nowrap;
}

.sales-v5-content {
    padding-top: 16px;
    padding-bottom: 34px;
}

.sales-v5-tabs {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 20px;
    padding: 6px;
    background: #fff;
    border: 1px solid #e2e8ef;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(22, 34, 51, .035);
}

.sales-v5-tab {
    min-width: 150px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #687789;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.sales-v5-tab:hover {
    background: #f7f9fb;
    color: #24344b;
}

.sales-v5-tab.active {
    background: #eef5ff;
    border-color: #cfe0f7;
    color: #164f96;
}

.sales-v5-tab span {
    font-size: 13px;
    font-weight: 800;
}

.sales-v5-tab small {
    color: #8b98a7;
    font-size: 10px;
    font-weight: 600;
}

.sales-v5-tab.active small {
    color: #6686ad;
}

.sales-v5-section-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.sales-v5-section-intro h2 {
    margin: 4px 0 0;
    color: #172033;
    font-size: 22px;
    letter-spacing: -.025em;
}

.sales-v5-section-intro p {
    margin: 4px 0 0;
    color: #7f8b99;
    font-size: 12px;
    line-height: 1.5;
}

.sales-v5-section-intro.with-side-note {
    align-items: center;
}

.sales-v5-section-intro.with-action {
    align-items: center;
}

.sales-v5-info-note {
    min-width: 285px;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 13px;
    background: #f8fafc;
    border: 1px solid #dfe7ef;
    border-radius: 10px;
}

.sales-v5-info-note strong {
    color: #314158;
    font-size: 11px;
}

.sales-v5-info-note span {
    color: #8895a3;
    font-size: 10px;
    line-height: 1.4;
}

.sales-v5-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.sales-v5-kpi-grid.performance-kpis {
    grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
}

.sales-v5-kpi-card {
    min-width: 0;
    min-height: 148px;
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: #fff;
    border: 1px solid #e0e7ee;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(18, 32, 52, .035);
}

.sales-v5-kpi-card.warning {
    border-color: #ead9ac;
    background: #fffdf7;
}

.sales-v5-kpi-card.danger {
    border-color: #efd0c7;
    background: #fffaf8;
}

.sales-v5-kpi-card.success-accent {
    border-color: #cfe6da;
    background: #fbfefc;
}

.sales-v5-kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 15px;
}

.sales-v5-kpi-head > span:first-child {
    color: #687789;
    font-size: 11px;
    font-weight: 800;
}

.sales-v5-kpi-symbol {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 8px;
    background: #f0f4f8;
    color: #55708b;
    font-size: 12px;
    font-weight: 900;
}

.sales-v5-kpi-card.warning .sales-v5-kpi-symbol {
    background: #fff2cf;
    color: #9f741b;
}

.sales-v5-kpi-card.danger .sales-v5-kpi-symbol {
    background: #ffede7;
    color: #b45b3d;
}

.sales-v5-kpi-card.success-accent .sales-v5-kpi-symbol {
    background: #eaf7f0;
    color: #2f805a;
}

.sales-v5-kpi-number {
    display: block;
    margin-top: auto;
    color: #142033;
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.035em;
}

.sales-v5-kpi-card > small {
    display: block;
    margin-top: 8px;
    color: #8b97a5;
    font-size: 10px;
    line-height: 1.45;
}

.sales-v5-currency-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
}

.sales-v5-currency-stack strong {
    color: #142033;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.15;
}

.sales-v5-kpi-card.success-accent .sales-v5-currency-stack strong {
    color: #247551;
}

.sales-v5-currency-stack.compact-values strong {
    font-size: 16px;
}

.sales-v5-microstats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.sales-v5-microstats > div,
.sales-v5-microstats > a {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 13px;
    background: #fff;
    border: 1px solid #e2e8ef;
    border-radius: 10px;
}

.sales-v5-microstats > a {
    background: #f8fbff;
    border-color: #d8e4f2;
}

.sales-v5-microstats span {
    color: #7d8997;
    font-size: 10px;
    font-weight: 700;
}

.sales-v5-microstats strong {
    color: #26364b;
    font-size: 13px;
    text-align: right;
}

.sales-v5-filter-card {
    margin-bottom: 18px;
    padding: 13px;
    background: #fff;
    border: 1px solid #e0e7ee;
    border-radius: 13px;
    box-shadow: 0 4px 14px rgba(18, 32, 52, .025);
}

.sales-v5-filter-card.compact {
    padding: 11px 13px;
}

.sales-v5-filter-form {
    display: grid;
    align-items: end;
    gap: 10px;
}

.sales-v5-filter-form.pipeline-filter {
    grid-template-columns: minmax(300px, 1fr) minmax(140px, .22fr) minmax(170px, .28fr) minmax(140px, .22fr) auto;
}

.sales-v5-filter-form.performance-filter {
    grid-template-columns: minmax(240px, 1.2fr) minmax(150px, .55fr) minmax(150px, .55fr) auto;
}

.sales-v5-filter-form.capa-filter {
    grid-template-columns: minmax(260px, 1.3fr) repeat(4, minmax(135px, .55fr)) auto;
}

.sales-v5-filter-form label {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sales-v5-filter-form label > span {
    color: #718096;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sales-v5-filter-form input,
.sales-v5-filter-form select {
    width: 100%;
    height: 39px;
    padding: 0 11px;
    background: #fff;
    border: 1px solid #d9e2ea;
    border-radius: 8px;
    color: #26354a;
    font-size: 12px;
    outline: none;
}

.sales-v5-filter-form input:focus,
.sales-v5-filter-form select:focus {
    border-color: #8faed0;
    box-shadow: 0 0 0 3px rgba(49, 102, 162, .08);
}

.sales-v5-input-wrap {
    position: relative;
}

.sales-v5-input-wrap input {
    padding-left: 34px;
}

.sales-v5-search-glyph {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a97a5;
    font-size: 14px;
    pointer-events: none;
}

.sales-v5-filter-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.sales-v5-filter-actions .primary-button,
.sales-v5-filter-actions .secondary-button {
    min-height: 39px;
    white-space: nowrap;
}

.sales-v5-board-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin: 4px 0 11px;
}

.sales-v5-board-header h3,
.sales-v5-panel-header h3 {
    margin: 3px 0 0;
    color: #172033;
    font-size: 17px;
    letter-spacing: -.015em;
}

.sales-v5-board-header small {
    color: #939eaa;
    font-size: 9px;
}

.sales-v5-board {
    display: grid;
    grid-template-columns: repeat(5, minmax(260px, 1fr));
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 10px;
}

.sales-v5-column {
    min-width: 260px;
    overflow: hidden;
    background: #edf2f6;
    border: 1px solid #dce4eb;
    border-radius: 13px;
}

.sales-v5-column-header {
    padding: 12px 12px 10px;
    background: #f9fbfc;
    border-bottom: 1px solid #dce4eb;
}

.sales-v5-column-title {
    display: flex;
    align-items: center;
    gap: 7px;
}

.sales-v5-column-title h3 {
    margin: 0;
    color: #27374b;
    font-size: 12px;
}

.sales-v5-stage-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #8290a0;
}

.sales-v5-stage-dot.contacted { background: #4d7da9; }
.sales-v5-stage-dot.meeting { background: #716bb8; }
.sales-v5-stage-dot.offer { background: #c08a34; }
.sales-v5-stage-dot.negotiation { background: #bd674e; }

.sales-v5-stage-count {
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: 999px;
    background: #e7edf2;
    color: #5f6f80;
    font-size: 9px;
    font-weight: 900;
}

.sales-v5-column-values {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

.sales-v5-column-values span {
    color: #788696;
    font-size: 9px;
    font-weight: 700;
}

.sales-v5-column-body {
    min-height: 390px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
}

.sales-v5-opportunity-card {
    display: block;
    padding: 13px;
    background: #fff;
    border: 1px solid #dce4eb;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(18, 32, 52, .025);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.sales-v5-opportunity-card:hover {
    transform: translateY(-1px);
    border-color: #b8c9d9;
    box-shadow: 0 7px 18px rgba(18, 32, 52, .07);
}

.sales-v5-opportunity-card.overdue {
    border-color: #eccbc1;
}

.sales-v5-card-top,
.sales-v5-capa-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.sales-v5-card-number {
    color: #4c76a2;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .015em;
}

.sales-v5-due-badge,
.sales-v5-status-badge,
.sales-v5-priority-badge,
.sales-v5-neutral-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
}

.sales-v5-due-badge.overdue {
    background: #fff0ea;
    color: #b45536;
}

.sales-v5-due-badge.soon {
    background: #fff4d9;
    color: #9d731d;
}

.sales-v5-opportunity-card h4 {
    margin: 8px 0 0;
    color: #172033;
    font-size: 13px;
    line-height: 1.35;
}

.sales-v5-company {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    color: #748294;
    font-size: 10px;
}

.sales-v5-company-avatar {
    width: 23px;
    height: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 7px;
    background: #eef3f7;
    color: #50667d;
    font-size: 9px;
    font-weight: 900;
}

.sales-v5-card-value {
    margin-top: 12px;
    color: #0e4f9b;
    font-size: 17px;
    font-weight: 900;
}

.sales-v5-probability {
    margin-top: 10px;
}

.sales-v5-probability > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
}

.sales-v5-probability span {
    color: #8a97a5;
    font-size: 8px;
}

.sales-v5-probability strong {
    color: #526274;
    font-size: 9px;
}

.sales-v5-progress {
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf1f4;
}

.sales-v5-progress > div {
    height: 100%;
    border-radius: inherit;
    background: #4d769b;
}

.sales-v5-card-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 11px;
    padding-top: 9px;
    border-top: 1px solid #edf1f4;
}

.sales-v5-card-footer > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sales-v5-card-footer span {
    color: #929daa;
    font-size: 7px;
}

.sales-v5-card-footer strong {
    overflow: hidden;
    color: #536174;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-v5-card-footer .overdue-text,
.sales-v5-capa-meta .overdue-text {
    color: #b45536;
}

.sales-v5-empty-column {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
}

.sales-v5-empty-column strong {
    color: #687687;
    font-size: 10px;
}

.sales-v5-empty-column span {
    margin-top: 3px;
    color: #9aa4af;
    font-size: 8px;
}

.sales-v5-performance-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 12px;
    margin-bottom: 12px;
}

.sales-v5-panel {
    min-width: 0;
    background: #fff;
    border: 1px solid #e0e7ee;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(18, 32, 52, .03);
}

.sales-v5-panel-header {
    padding: 15px 16px 13px;
    border-bottom: 1px solid #e8edf2;
}

.sales-v5-panel-header.inline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sales-v5-panel-header p {
    margin: 3px 0 0;
    color: #8996a4;
    font-size: 10px;
}

.sales-v5-type-list,
.sales-v5-customer-list {
    display: flex;
    flex-direction: column;
}

.sales-v5-type-row {
    position: relative;
    min-height: 66px;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(150px, auto) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    border-bottom: 1px solid #edf1f4;
}

.sales-v5-type-row:last-child,
.sales-v5-customer-row:last-child {
    border-bottom: 0;
}

.sales-v5-type-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sales-v5-type-badge {
    width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 9px;
    background: #eef4fa;
    color: #426b96;
    font-size: 10px;
    font-weight: 900;
}

.sales-v5-type-main > div,
.sales-v5-customer-name {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sales-v5-type-main strong,
.sales-v5-customer-name strong {
    overflow: hidden;
    color: #2a394d;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-v5-type-main small,
.sales-v5-customer-name small,
.sales-v5-type-values small {
    color: #8b97a5;
    font-size: 9px;
}

.sales-v5-type-values,
.sales-v5-customer-values {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.sales-v5-type-values strong,
.sales-v5-customer-values strong {
    color: #1f5e9f;
    font-size: 10px;
}

.sales-v5-row-link {
    color: #386b9f;
    font-size: 9px;
    font-weight: 800;
}

.sales-v5-customer-row {
    min-height: 61px;
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid #edf1f4;
    transition: background .15s ease;
}

.sales-v5-customer-row:hover {
    background: #f8fafc;
}

.sales-v5-rank {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f1f4f7;
    color: #6d7b8b;
    font-size: 9px;
    font-weight: 900;
}

.sales-v5-orders-panel {
    margin-top: 12px;
}

.sales-v5-table-wrap {
    overflow-x: auto;
}

.sales-v5-table {
    width: 100%;
    border-collapse: collapse;
}

.sales-v5-table th {
    padding: 10px 13px;
    background: #fafbfd;
    border-bottom: 1px solid #e6ebf0;
    color: #7d8997;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.sales-v5-table td {
    padding: 11px 13px;
    border-bottom: 1px solid #edf1f4;
    color: #536174;
    font-size: 10px;
    vertical-align: middle;
}

.sales-v5-table tbody tr:last-child td {
    border-bottom: 0;
}

.sales-v5-table tbody tr:hover {
    background: #fbfcfd;
}

.sales-v5-table td strong {
    color: #2a394d;
    font-size: 10px;
}

.sales-v5-table td small {
    display: block;
    max-width: 260px;
    margin-top: 2px;
    overflow: hidden;
    color: #8d98a5;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-v5-table .align-right {
    text-align: right;
}

.sales-v5-table-empty {
    padding: 28px !important;
    color: #8f9aa6 !important;
    text-align: center !important;
}

.sales-v5-neutral-pill {
    background: #eef3f7;
    color: #5e6f82;
}

.sales-v5-install-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 18px;
    background: #fffdf7;
    border: 1px solid #ead9ac;
    border-radius: 13px;
}

.sales-v5-install-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 9px;
    background: #fff2cf;
    color: #9d731d;
    font-weight: 900;
}

.sales-v5-install-card h3 {
    margin: 0;
    color: #3c4652;
    font-size: 14px;
}

.sales-v5-install-card p {
    margin: 4px 0 0;
    color: #7d8792;
    font-size: 11px;
}

.sales-v5-capa-list {
    display: flex;
    flex-direction: column;
}

.sales-v5-capa-card {
    display: block;
    padding: 14px 16px;
    border-bottom: 1px solid #e9eef2;
    background: #fff;
    transition: background .15s ease;
}

.sales-v5-capa-card:last-child {
    border-bottom: 0;
}

.sales-v5-capa-card:hover {
    background: #fafcfd;
}

.sales-v5-capa-card.overdue {
    background: #fffcfb;
    box-shadow: inset 3px 0 0 #cf7657;
}

.sales-v5-capa-identity {
    min-width: 0;
}

.sales-v5-capa-identity h4 {
    margin: 4px 0 0;
    color: #1d2a3c;
    font-size: 13px;
}

.sales-v5-capa-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
}

.sales-v5-priority-badge.low {
    background: #eef3f7;
    color: #6d7b8b;
}

.sales-v5-priority-badge.normal {
    background: #edf4fb;
    color: #4c7298;
}

.sales-v5-priority-badge.high {
    background: #fff3d9;
    color: #9b711b;
}

.sales-v5-priority-badge.critical {
    background: #ffebe7;
    color: #b64c35;
}

.sales-v5-status-badge.open {
    background: #eef3f7;
    color: #607183;
}

.sales-v5-status-badge.in_progress {
    background: #e9f2fd;
    color: #376da9;
}

.sales-v5-status-badge.verification {
    background: #f3effc;
    color: #6d5ea2;
}

.sales-v5-status-badge.closed {
    background: #e8f6ee;
    color: #317657;
}

.sales-v5-capa-finding {
    max-width: 1000px;
    margin: 9px 0 0;
    color: #657487;
    font-size: 10px;
    line-height: 1.5;
}

.sales-v5-capa-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #edf1f4;
}

.sales-v5-capa-meta > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sales-v5-capa-meta span {
    color: #929daa;
    font-size: 7px;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.sales-v5-capa-meta strong {
    overflow: hidden;
    color: #526174;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-v5-empty-state {
    padding: 24px 16px;
    color: #8995a3;
    font-size: 10px;
    text-align: center;
}

.sales-v5-empty-state.large {
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.sales-v5-empty-state.large strong {
    color: #5f6d7d;
    font-size: 13px;
}

.sales-v5-empty-state.large span {
    max-width: 520px;
    line-height: 1.5;
}

/* CAPA create / edit / view */
.capa-v1-page {
    min-height: 100vh;
    background: #f4f7fa;
}

.capa-v1-topbar {
    min-height: 92px;
    align-items: center;
}

.capa-v1-content {
    max-width: 1180px;
}

.capa-v1-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.capa-v1-form-grid .full-width {
    grid-column: 1 / -1;
}

.capa-v1-form-panel {
    padding: 18px;
    background: #fff;
    border: 1px solid #e0e7ee;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(18, 32, 52, .03);
}

.capa-v1-form-panel + .capa-v1-form-panel {
    margin-top: 12px;
}

.capa-v1-form-panel h3 {
    margin: 0;
    color: #1b293b;
    font-size: 16px;
}

.capa-v1-form-panel > p {
    margin: 4px 0 15px;
    color: #8693a1;
    font-size: 10px;
}

.capa-v1-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.capa-v1-field label {
    color: #687789;
    font-size: 10px;
    font-weight: 800;
}

.capa-v1-field input,
.capa-v1-field select,
.capa-v1-field textarea {
    width: 100%;
    padding: 10px 11px;
    border: 1px solid #d9e2ea;
    border-radius: 9px;
    background: #fff;
    color: #26354a;
    font: inherit;
    font-size: 12px;
    outline: none;
}

.capa-v1-field input,
.capa-v1-field select {
    min-height: 41px;
}

.capa-v1-field textarea {
    min-height: 105px;
    resize: vertical;
    line-height: 1.5;
}

.capa-v1-field textarea.tall {
    min-height: 135px;
}

.capa-v1-field input:focus,
.capa-v1-field select:focus,
.capa-v1-field textarea:focus {
    border-color: #8faed0;
    box-shadow: 0 0 0 3px rgba(49, 102, 162, .08);
}

.capa-v1-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.capa-v1-detail-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 12px;
}

.capa-v1-card {
    background: #fff;
    border: 1px solid #e0e7ee;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(18, 32, 52, .03);
}

.capa-v1-card-header {
    padding: 15px 17px;
    border-bottom: 1px solid #e9eef2;
}

.capa-v1-card-header h3 {
    margin: 0;
    color: #1d2a3c;
    font-size: 15px;
}

.capa-v1-card-body {
    padding: 16px 17px;
}

.capa-v1-section + .capa-v1-section {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #edf1f4;
}

.capa-v1-section span {
    display: block;
    margin-bottom: 5px;
    color: #7e8b99;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.capa-v1-section h4 {
    margin: 0 0 5px;
    color: #26354a;
    font-size: 12px;
}

.capa-v1-section p {
    margin: 0;
    color: #5f6e80;
    font-size: 11px;
    line-height: 1.6;
    white-space: pre-line;
}

.capa-v1-meta-list {
    display: flex;
    flex-direction: column;
}

.capa-v1-meta-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #edf1f4;
}

.capa-v1-meta-row:last-child {
    border-bottom: 0;
}

.capa-v1-meta-row span {
    color: #8895a3;
    font-size: 9px;
}

.capa-v1-meta-row strong {
    color: #344358;
    font-size: 10px;
    text-align: right;
}

.capa-v1-status-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 12px;
}

.capa-v1-status-actions form,
.capa-v1-status-actions button {
    width: 100%;
}

.capa-v1-history {
    display: flex;
    flex-direction: column;
}

.capa-v1-history-item {
    position: relative;
    padding: 0 0 15px 18px;
}

.capa-v1-history-item::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6f8ead;
}

.capa-v1-history-item::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 14px;
    bottom: -2px;
    width: 1px;
    background: #e1e7ed;
}

.capa-v1-history-item:last-child::after {
    display: none;
}

.capa-v1-history-item strong {
    display: block;
    color: #405066;
    font-size: 10px;
}

.capa-v1-history-item p {
    margin: 3px 0 0;
    color: #69778a;
    font-size: 9px;
    line-height: 1.5;
}

.capa-v1-history-item small {
    display: block;
    margin-top: 3px;
    color: #99a3ae;
    font-size: 8px;
}

@media (max-width: 1380px) {
    .sales-v5-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sales-v5-kpi-grid.performance-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sales-v5-filter-form.capa-filter {
        grid-template-columns: minmax(240px, 1.2fr) repeat(2, minmax(145px, .6fr));
    }

    .sales-v5-filter-form.capa-filter .sales-v5-filter-actions {
        grid-column: span 2;
    }
}

@media (max-width: 1080px) {
    .sales-v5-filter-form.pipeline-filter,
    .sales-v5-filter-form.performance-filter {
        grid-template-columns: minmax(240px, 1fr) 1fr 1fr;
    }

    .sales-v5-filter-form.pipeline-filter .sales-v5-filter-actions,
    .sales-v5-filter-form.performance-filter .sales-v5-filter-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .sales-v5-performance-grid {
        grid-template-columns: 1fr;
    }

    .sales-v5-capa-meta {
        grid-template-columns: 1fr 1fr;
    }

    .capa-v1-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .sales-v5-topbar {
        min-height: auto;
        align-items: flex-start;
        padding-top: 13px;
        padding-bottom: 12px;
    }

    .sales-v5-heading h1 {
        font-size: 21px;
    }

    .sales-v5-heading p,
    .sales-v5-eyebrow {
        display: none;
    }

    .sales-v5-topbar-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .sales-v5-action-button {
        min-height: 38px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 9px;
    }

    .sales-v5-tabs {
        overflow-x: auto;
        margin-bottom: 14px;
    }

    .sales-v5-tab {
        min-width: 125px;
        padding: 8px 10px;
    }

    .sales-v5-section-intro,
    .sales-v5-section-intro.with-side-note,
    .sales-v5-section-intro.with-action {
        align-items: flex-start;
        flex-direction: column;
    }

    .sales-v5-info-note {
        min-width: 0;
        width: 100%;
        max-width: none;
    }

    .sales-v5-kpi-grid,
    .sales-v5-kpi-grid.performance-kpis {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sales-v5-kpi-card {
        min-height: 132px;
        padding: 13px;
    }

    .sales-v5-kpi-number {
        font-size: 26px;
    }

    .sales-v5-currency-stack strong {
        font-size: 15px;
    }

    .sales-v5-microstats {
        grid-template-columns: 1fr 1fr;
    }

    .sales-v5-filter-form.pipeline-filter,
    .sales-v5-filter-form.performance-filter,
    .sales-v5-filter-form.capa-filter {
        grid-template-columns: 1fr 1fr;
    }

    .sales-v5-filter-form .sales-v5-search-field,
    .sales-v5-filter-form .wide-control,
    .sales-v5-filter-form.capa-filter .sales-v5-filter-actions,
    .sales-v5-filter-form.pipeline-filter .sales-v5-filter-actions,
    .sales-v5-filter-form.performance-filter .sales-v5-filter-actions {
        grid-column: 1 / -1;
    }

    .sales-v5-filter-actions {
        justify-content: stretch;
    }

    .sales-v5-filter-actions .primary-button,
    .sales-v5-filter-actions .secondary-button {
        flex: 1;
        justify-content: center;
    }

    .sales-v5-board-header small {
        display: none;
    }

    .sales-v5-board {
        grid-template-columns: repeat(5, minmax(245px, 1fr));
    }

    .sales-v5-type-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .sales-v5-row-link {
        grid-column: 1 / -1;
        padding-left: 41px;
    }

    .sales-v5-table {
        min-width: 720px;
    }

    .sales-v5-capa-card-top {
        flex-direction: column;
    }

    .sales-v5-capa-badges {
        justify-content: flex-start;
    }

    .capa-v1-form-grid {
        grid-template-columns: 1fr;
    }

    .capa-v1-form-grid .full-width {
        grid-column: auto;
    }
}

@media (max-width: 460px) {
    .sales-v5-kpi-grid,
    .sales-v5-kpi-grid.performance-kpis {
        grid-template-columns: 1fr 1fr;
    }

    .sales-v5-kpi-card.value-card {
        grid-column: 1 / -1;
    }

    .sales-v5-microstats {
        grid-template-columns: 1fr;
    }

    .sales-v5-filter-form.pipeline-filter,
    .sales-v5-filter-form.performance-filter,
    .sales-v5-filter-form.capa-filter {
        grid-template-columns: 1fr;
    }

    .sales-v5-filter-form .sales-v5-search-field,
    .sales-v5-filter-form .wide-control,
    .sales-v5-filter-form.capa-filter .sales-v5-filter-actions,
    .sales-v5-filter-form.pipeline-filter .sales-v5-filter-actions,
    .sales-v5-filter-form.performance-filter .sales-v5-filter-actions {
        grid-column: auto;
    }

    .sales-v5-capa-meta {
        grid-template-columns: 1fr;
    }

    .sales-v5-type-row {
        grid-template-columns: 1fr;
    }

    .sales-v5-type-values {
        align-items: flex-start;
        padding-left: 41px;
    }

    .sales-v5-row-link {
        padding-left: 41px;
    }

    .sales-v5-customer-row {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .sales-v5-customer-values {
        grid-column: 2;
        align-items: flex-start;
    }

    .capa-v1-status-actions {
        grid-template-columns: 1fr;
    }
}

/* ========================================================================== */
/* Ticket v2: Order / Customer / Non-Conformance + CAPA                       */
/* ========================================================================== */

.ticket-v2-page .page-content {
    max-width: 1580px;
}

.ticket-v2-form {
    display: grid;
    gap: 16px;
}

.ticket-v2-classification-panel {
    border: 1px solid #cfd9e7;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.ticket-v2-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.ticket-v2-category-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 88px;
    padding: 14px 16px;
    border: 1px solid #dbe3ed;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}

.ticket-v2-category-card:hover {
    border-color: #8da8cf;
    box-shadow: 0 7px 20px rgba(30, 64, 175, .08);
    transform: translateY(-1px);
}

.ticket-v2-category-card.active {
    border-color: #2f6fd6;
    background: #f3f8ff;
    box-shadow: 0 0 0 2px rgba(47, 111, 214, .09);
}

.ticket-v2-category-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ticket-v2-category-card > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.ticket-v2-category-card strong {
    color: #13223a;
    font-size: 14px;
}

.ticket-v2-category-card small {
    color: #708198;
    line-height: 1.35;
}

.ticket-v2-category-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    background: #edf4ff;
    color: #245db5;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
}

.ticket-v2-relation-panel[hidden],
.ticket-v2-nc-message[hidden] {
    display: none !important;
}

.ticket-v2-nc-message {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid #e4cda1;
    border-radius: 10px;
    background: #fffaf0;
}

.ticket-v2-nc-message strong {
    color: #7a4d00;
}

.ticket-v2-nc-message span {
    color: #8a6a30;
    font-size: 13px;
}

.ticket-v2-investigation-panel {
    border-left: 3px solid #476f9e;
}

.ticket-v2-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
    padding: 20px 22px;
    border: 1px solid #dfe6ef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(26, 48, 80, .05);
}

.ticket-v2-hero h2 {
    margin: 8px 0 4px;
    color: #13223a;
    font-size: 24px;
    line-height: 1.2;
}

.ticket-v2-hero p {
    margin: 0;
    color: #6f7f93;
}

.ticket-v2-hero-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.ticket-v2-category-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid #d7e0eb;
    background: #f6f8fb;
    color: #526276;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .025em;
    white-space: nowrap;
}

.ticket-v2-category-badge.order {
    border-color: #bfd5f5;
    background: #edf5ff;
    color: #225cae;
}

.ticket-v2-category-badge.customer {
    border-color: #c9e3d5;
    background: #f0faf5;
    color: #267047;
}

.ticket-v2-category-badge.non_conformance {
    border-color: #edd2a4;
    background: #fff7e8;
    color: #8a5704;
}

.ticket-v2-status-bar {
    margin-bottom: 14px;
}

.ticket-v2-layout {
    align-items: start;
}

.ticket-v2-section {
    margin-bottom: 14px;
}

.ticket-v2-details-grid .profile-detail.full {
    grid-column: 1 / -1;
}

.ticket-v2-text-block {
    margin-top: 5px;
    color: #27384f;
    font-weight: 500;
    line-height: 1.65;
}

.ticket-v2-analysis-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
}

.ticket-v2-analysis-card {
    min-height: 128px;
    padding: 15px 16px;
    border: 1px solid #e0e6ee;
    border-radius: 11px;
    background: #fbfcfe;
}

.ticket-v2-analysis-card.full {
    grid-column: 1 / -1;
}

.ticket-v2-analysis-card > span {
    display: block;
    margin-bottom: 8px;
    color: #6e7f94;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ticket-v2-analysis-card p {
    margin: 0;
    color: #27384f;
    line-height: 1.6;
}

.ticket-v2-capa-section {
    border-top: 3px solid #142d5e;
}

.ticket-v2-capa-empty {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 16px;
    padding: 18px;
    border: 1px dashed #cbd6e4;
    border-radius: 10px;
    background: #f9fbfd;
}

.ticket-v2-capa-empty strong {
    color: #213550;
}

.ticket-v2-capa-empty span {
    color: #718197;
    line-height: 1.45;
}

.ticket-v2-capa-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
}

.ticket-v2-capa-card {
    display: block;
    padding: 15px;
    border: 1px solid #dbe3ed;
    border-radius: 11px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ticket-v2-capa-card:hover {
    border-color: #9fb5d4;
    box-shadow: 0 7px 20px rgba(26, 48, 80, .08);
    transform: translateY(-1px);
}

.ticket-v2-capa-card-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.ticket-v2-capa-card-top > strong {
    color: #1d5fba;
    font-size: 12px;
}

.ticket-v2-capa-card h4 {
    margin: 9px 0 12px;
    color: #17273e;
    font-size: 15px;
}

.ticket-v2-capa-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    color: #738298;
    font-size: 12px;
}

.ticket-v2-overdue {
    color: #bf3d26;
    font-weight: 800;
}

.ticket-v2-capa-count {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: #eaf2ff;
    color: #245fb8;
    font-size: 12px;
    font-weight: 800;
}

.ticket-v2-filterbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 190px 170px auto auto;
    gap: 9px;
    align-items: end;
    margin: 12px 0;
    padding: 12px;
    border: 1px solid #dfe6ee;
    border-radius: 11px;
    background: #fff;
}

.ticket-v2-filterbar input,
.ticket-v2-filterbar select {
    width: 100%;
    min-height: 40px;
}

.ticket-v2-table td {
    vertical-align: middle;
}

.ticket-v2-mobile-category {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: #6f7f93;
    font-size: 12px;
}

.ticket-v2-help-card {
    margin-top: 14px;
}

.ticket-v2-help-card p {
    margin: 0 0 12px;
    color: #6b7b90;
    line-height: 1.55;
}

.capa-v1-source-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
    padding: 13px;
    border: 1px solid #cbd9eb;
    border-radius: 11px;
    background: #f5f9ff;
}

.capa-v1-source-card > div,
.capa-v1-inline-source {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.capa-v1-source-card span,
.capa-v1-inline-source span {
    color: #738198;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.capa-v1-source-card strong,
.capa-v1-inline-source strong,
.capa-v1-inline-source a {
    color: #223753;
    font-size: 13px;
}

.capa-v1-inline-source {
    margin: 12px 0 4px;
    padding: 10px 12px;
    border: 1px solid #dce5ef;
    border-radius: 9px;
    background: #f9fbfd;
}

@media (max-width: 980px) {
    .ticket-v2-category-grid,
    .ticket-v2-capa-grid,
    .ticket-v2-analysis-grid,
    .capa-v1-source-card {
        grid-template-columns: 1fr;
    }

    .ticket-v2-analysis-card.full {
        grid-column: auto;
    }

    .ticket-v2-filterbar {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .ticket-v2-category-grid,
    .ticket-v2-filterbar {
        grid-template-columns: 1fr;
    }

    .ticket-v2-hero {
        flex-direction: column;
    }

    .ticket-v2-hero-badges {
        justify-content: flex-start;
    }

    .ticket-v2-category-card {
        min-height: 78px;
    }
}