:root {
    --primary: #0f172a;
    --primary-dark: #020617;
    --primary-light: #334155;
    --success: #10b981;
    --success-light: #34d399;
    --warning: #f59e0b;
    --warning-light: #fbbf24;
    --danger: #ef4444;
    --danger-light: #f87171;
    --info: #0369a1;
    --info-light: #38bdf8;
    --accent: #0369a1;
    --accent-dark: #075985;

    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --card-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.05);
    --card-shadow-hover: 0 10px 24px rgba(15, 23, 42, 0.12);

    --border-radius: 8px;
    --border-radius-lg: 8px;
    --transition: all 0.18s ease-out;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--gray-50);
    color: var(--gray-800);
    line-height: 1.6;
    min-height: 100vh;
}

:focus-visible {
    outline: 3px solid rgba(3, 105, 161, 0.28);
    outline-offset: 2px;
}

/* Header */
.header {
    background: var(--bg-gradient);
    color: white;
    padding: 1rem 2rem;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(15, 23, 42, 0.16);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    width: 100%;
    padding: 0 1rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    color: white;
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.logo-img {
    height: 36px;
    width: auto;
    object-fit: contain;
}

.nav-links {
    display: flex;
    gap: 1rem;
}

.nav-link {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: var(--transition);
    font-weight: 500;
}

.nav-link:hover,
.nav-link.active {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Main Container */
.container {
    width: 100%;
    margin: 0 auto;
    padding: 1.25rem;
}

/* Page Title */
.page-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.page-subtitle {
    color: var(--gray-500);
    font-size: 0.95rem;
}

.page-header-spaced {
    margin-bottom: 1.5rem;
}

.form-card small,
.detail-card small {
    color: var(--gray-500);
}

.clickable-row {
    cursor: pointer;
}

/* Stats Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.stat-card {
    background: white;
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--gray-200);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary);
}

.stat-card.warning::before {
    background: var(--warning);
}

.stat-card.success::before {
    background: var(--success);
}

.stat-card.danger::before {
    background: var(--danger);
}

.stat-card.info::before {
    background: var(--info);
}

.stat-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--card-shadow-hover);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gray-800);
    line-height: 1;
}

.stat-label {
    color: var(--gray-500);
    font-size: 0.875rem;
    margin-top: 0.5rem;
    font-weight: 500;
}

/* Filter Tabs */
.filter-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    background: white;
    padding: 0.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
}

.filter-tab {
    padding: 0.75rem 1.25rem;
    border: none;
    background: transparent;
    color: var(--gray-600);
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: var(--transition);
    font-size: 0.9rem;
}

.filter-tab:hover {
    background: var(--gray-100);
    color: var(--gray-800);
}

.filter-tab.active {
    background: var(--primary);
    color: white;
}

.filter-tab .count {
    background: rgba(0, 0, 0, 0.1);
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    margin-left: 0.5rem;
}

.filter-tab.active .count {
    background: rgba(255, 255, 255, 0.2);
}

/* Table */
.table-container {
    background: white;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.table-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-800);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    text-align: left;
    padding: 1rem 1.5rem;
    background: var(--gray-50);
    color: var(--gray-600);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0;
    border-bottom: 1px solid var(--gray-200);
}

td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-700);
}

tr:last-child td {
    border-bottom: none;
}

tr:hover td {
    background: var(--gray-50);
}

.invoice-lines-container {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
}

.invoice-lines-table {
    min-width: 1560px;
    table-layout: fixed;
}

.invoice-lines-table th,
.invoice-lines-table td {
    padding: 0.55rem 0.5rem;
    vertical-align: middle;
}

.invoice-lines-table th {
    white-space: nowrap;
    color: var(--gray-700);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.invoice-lines-table .form-control {
    width: 100%;
    min-height: 38px;
    padding: 0.4rem 0.5rem;
    border-width: 1px;
    border-radius: 6px;
    font-size: 0.84rem;
}

.invoice-lines-table .form-control[readonly] {
    background: var(--gray-50);
    color: var(--gray-700);
}

.invoice-lines-table .numeric-control {
    text-align: right;
}

.invoice-lines-summary {
    display: flex;
    justify-content: flex-end;
    gap: 0;
    margin-top: 0.875rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

.invoice-lines-summary-item {
    min-width: 180px;
    padding: 0.8rem 1rem;
    border-left: 1px solid var(--gray-200);
    text-align: right;
}

.invoice-lines-summary-item:first-child {
    border-left: 0;
}

.invoice-lines-summary-item span {
    display: block;
    color: var(--gray-500);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.invoice-lines-summary-item strong {
    display: block;
    margin-top: 0.2rem;
    color: var(--gray-800);
    font-size: 1rem;
}

.invoice-lines-summary-item.total {
    background: var(--gray-50);
}

.invoice-lines-summary-item.total strong {
    color: var(--primary-dark);
}

.invoice-no {
    font-weight: 600;
    color: var(--primary);
}

.supplier-name {
    font-weight: 500;
}

.amount {
    font-weight: 600;
    color: var(--gray-800);
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    gap: 0.375rem;
}

.status-pending {
    background: var(--gray-100);
    color: var(--gray-600);
}

.status-waiting {
    background: #fef3c7;
    color: #92400e;
}

.status-approved {
    background: #d1fae5;
    color: #065f46;
}

.status-rejected {
    background: #fee2e2;
    color: #991b1b;
}

.status-info {
    background: #dbeafe;
    color: #1e40af;
}

/* Assignee Badge */
.assignee-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.assignee-badge.empty {
    background: var(--gray-200);
    color: var(--gray-500);
}

/* Source Badge */
.source-badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 0.5rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.btn:disabled,
.btn.is-loading,
button:disabled {
    cursor: not-allowed;
    opacity: 0.68;
    transform: none !important;
    box-shadow: none !important;
}

.btn.is-loading::before,
.mobile-action.is-loading::before {
    content: '';
    width: 0.9em;
    height: 0.9em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.btn-sm {
    padding: 0.5rem 0.875rem;
    font-size: 0.8rem;
}

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
}

.btn-primary {
    background: var(--accent);
    color: white;
}

.btn-primary:hover {
    background: var(--accent-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(3, 105, 161, 0.24);
}

.btn-success {
    background: var(--success);
    color: white;
}

.btn-success:hover {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-danger:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.btn-warning {
    background: var(--warning);
    color: white;
}

.btn-warning:hover {
    background: #d97706;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.btn-secondary {
    background: var(--gray-200);
    color: var(--gray-700);
}

.btn-secondary:hover {
    background: var(--gray-300);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--gray-300);
    color: var(--gray-600);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Forms */
.form-card {
    background: white;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--gray-200);
    padding: 2rem;
}

.form-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gray-200);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}


/* Detail Page */
.detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

.detail-page-shell .detail-grid {
    grid-template-columns: minmax(0, 1fr);
}

.detail-page-shell .detail-grid > div:nth-child(2) {
    display: none;
}

@media (max-width: 1024px) {
    .detail-grid {
        grid-template-columns: 1fr;
    }
}

.detail-card {
    background: white;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.detail-card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.detail-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-800);
}

.detail-card-body {
    padding: 1.5rem;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--gray-100);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    color: var(--gray-500);
    font-size: 0.875rem;
}

.detail-value {
    color: var(--gray-800);
    font-weight: 500;
    text-align: right;
}

.detail-value.large {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

/* Action Panel */
.action-panel {
    background: white;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--gray-200);
    padding: 1.5rem;
}

.action-panel-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 1rem;
}

.action-panel .btn {
    width: 100%;
    margin-bottom: 0.75rem;
}

.action-panel .btn:last-child {
    margin-bottom: 0;
}

.decision-panel {
    position: sticky;
    top: 6rem;
}

.decision-panel .action-panel-title {
    margin-bottom: 0.35rem;
}

.decision-panel-subtitle {
    color: var(--gray-500);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.decision-summary {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.875rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: var(--gray-50);
}

.decision-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.85rem;
}

.decision-summary-row span:first-child {
    color: var(--gray-500);
}

.decision-summary-row strong {
    color: var(--gray-900);
    text-align: right;
}

.approval-actions-panel {
    display: grid;
    gap: 0.75rem;
}

.decision-panel .approval-helper-card {
    display: none;
}

.approval-floating-panel {
    min-height: 0;
    padding: 1.25rem;
    background: white;
    box-shadow: var(--card-shadow);
}

.approval-helper-card {
    width: 100%;
    min-height: 230px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem 0.75rem 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background: white;
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition);
}

.approval-helper-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary-light);
    box-shadow: 0 12px 28px rgba(99, 102, 241, 0.16);
}

.approval-helper-bubble {
    position: absolute;
    top: 1rem;
    left: 0.75rem;
    right: 0.75rem;
    display: block;
    padding: 0.85rem 0.75rem;
    border: 2px solid #ef4444;
    border-radius: 18px;
    background: white;
    color: var(--gray-800);
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
}

.approval-floating-panel .approval-helper-bubble {
    top: 0.65rem;
    left: 0.5rem;
    right: 0.5rem;
    padding: 0.55rem 0.45rem;
    border-radius: 14px;
    font-size: 0.78rem;
}

.approval-helper-bubble::after {
    content: '';
    position: absolute;
    bottom: -11px;
    left: 50%;
    width: 18px;
    height: 18px;
    background: white;
    border-right: 2px solid #ef4444;
    border-bottom: 2px solid #ef4444;
    transform: translateX(-50%) rotate(45deg);
}

.approval-helper-img {
    width: min(150px, 88%);
    height: auto;
    margin-top: 4.5rem;
    object-fit: contain;
}

.approval-floating-panel .approval-helper-img {
    width: 106px;
    margin-top: 3.85rem;
}

.approval-helper-idle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    color: var(--gray-600);
}

.approval-helper-idle .approval-helper-img {
    margin-top: 0;
}

.approval-actions-modal {
    max-width: 560px;
}

.approval-actions-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: white;
}

.approval-actions-hero-img {
    width: 92px;
    height: 92px;
    object-fit: contain;
    flex: 0 0 auto;
}

.approval-actions-hero strong {
    display: block;
    color: var(--gray-900);
    font-size: 1rem;
}

.approval-actions-hero span {
    display: block;
    margin-top: 0.25rem;
    color: var(--gray-500);
    font-size: 0.9rem;
}

.approval-actions-grid {
    display: grid;
    gap: 0.75rem;
}

.approval-actions-grid .btn {
    width: 100%;
}

.approval-floating-panel {
    position: fixed;
    right: 1.35rem;
    bottom: 1.35rem;
    z-index: 900;
    min-height: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    touch-action: none;
}

.approval-floating-button {
    width: 76px;
    height: 76px;
    position: relative;
    display: grid;
    place-items: center;
    border: 1px solid rgba(30, 58, 95, .18);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .18);
    cursor: grab;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.approval-floating-button:hover,
.approval-floating-button:focus-visible {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 20px 46px rgba(30, 58, 95, .24);
    outline: none;
}

.approval-floating-panel.is-dragging .approval-floating-button {
    cursor: grabbing;
    transform: scale(.96);
}

.approval-floating-avatar {
    width: 58px;
    height: 58px;
    object-fit: contain;
    pointer-events: none;
}

.approval-floating-badge {
    position: absolute;
    left: 50%;
    bottom: -9px;
    transform: translateX(-50%);
    padding: .18rem .5rem;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 8px 18px rgba(30, 58, 95, .22);
    pointer-events: none;
}

.approval-modal-section {
    display: grid;
    gap: .85rem;
    margin-top: 1rem;
}

.approval-modal-section:first-of-type {
    margin-top: 0;
}

.approval-modal-alert {
    margin-bottom: 0;
}

.approval-history-button {
    width: 100%;
}

.approval-modal-section-title {
    margin: 0;
    color: var(--gray-800);
    font-size: .98rem;
    font-weight: 700;
}

.workflow-panel {
    padding: 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background: var(--gray-50);
}

.workflow-steps {
    display: grid;
    gap: .75rem;
}

.workflow-step {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--gray-800);
    font-size: .9rem;
}

.workflow-step-dot {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gray-300);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
}

.workflow-step-dot.is-done {
    background: var(--success);
}

.workflow-step-dot.is-rejected {
    background: var(--danger);
}

@media (max-width: 768px) {
    .approval-floating-panel {
        display: none;
    }
}

.mobile-action-bar {
    display: none;
}

.logo-json-panel {
    margin: 1rem;
    border: 1px solid #d8e0ea;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
}

.logo-json-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid #e4e9f0;
    background: #f8fafc;
}

.logo-json-panel-header h3 {
    margin: 0;
    font-size: .98rem;
    color: #172033;
}

.logo-json-panel-header p {
    margin: .2rem 0 0;
    color: #667085;
    font-size: .78rem;
}

.logo-json-panel-header span {
    flex: 0 0 auto;
    color: #475467;
    font-size: .75rem;
    font-weight: 700;
}

.logo-json-list {
    display: grid;
    gap: .75rem;
    padding: 1rem;
}

.logo-json-item {
    border: 1px solid #dfe6ef;
    border-radius: 6px;
    background: #fff;
}

.logo-json-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 44px;
    padding: .75rem .9rem;
    cursor: pointer;
    font-weight: 700;
    color: #25324a;
}

.logo-json-item summary small {
    color: #667085;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logo-json-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: .75rem .9rem 0;
}

.logo-json-code {
    max-height: 520px;
    margin: .75rem .9rem .9rem;
    padding: 1rem;
    overflow: auto;
    border: 1px solid #d8e0ea;
    border-radius: 6px;
    background: #071426;
    color: #d7fbe8;
    font-size: .78rem;
    line-height: 1.55;
    white-space: pre;
}

.logo-json-error {
    margin: .75rem .9rem .9rem;
    padding: .75rem;
    border: 1px solid #f6c9c9;
    border-radius: 6px;
    background: #fff5f5;
    color: #b42318;
    font-size: .82rem;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* Timeline */
.timeline {
    margin-top: 1rem;
}

.timeline-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    position: relative;
}

.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 3rem;
    bottom: 0;
    width: 2px;
    background: var(--gray-200);
}

.timeline-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.timeline-icon.created {
    background: var(--info);
    color: white;
}

.timeline-icon.pending {
    background: var(--warning);
    color: white;
}

.timeline-icon.approved {
    background: var(--success);
    color: white;
}

.timeline-icon.rejected {
    background: var(--danger);
    color: white;
}

.timeline-icon.info {
    background: var(--info-light);
    color: white;
}

.timeline-content {
    flex: 1;
}

.timeline-title {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.9rem;
    line-height: 1.55;
    white-space: normal;
}

.timeline-meta {
    color: var(--gray-500);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal {
    background: white;
    border-radius: var(--border-radius-lg);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    transform: scale(0.9);
    transition: var(--transition);
}

.modal-overlay.active .modal {
    transform: scale(1);
}

.modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-800);
}

.modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--gray-100);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
    transition: var(--transition);
}

.modal-close:hover {
    background: var(--gray-200);
    color: var(--gray-700);
}

.modal-body {
    padding: 1.5rem;
}

.history-modal {
    max-width: 760px;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
}

.history-modal-body {
    overflow-y: auto;
    max-height: calc(86vh - 74px);
    padding-right: 1.75rem;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Alerts */
.alert {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alert-success {
    background: #d1fae5;
    color: #065f46;
}

.alert-danger {
    background: #fee2e2;
    color: #991b1b;
}

.alert-warning {
    background: #fef3c7;
    color: #92400e;
}

.alert-info {
    background: #dbeafe;
    color: #1e40af;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray-500);
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.empty-state-text {
    color: var(--gray-500);
    margin-bottom: 1.5rem;
}

/* Loading */

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.toast {
    background: white;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 300px;
    transform: translateX(400px);
    transition: var(--transition);
}

.toast.show {
    transform: translateX(0);
}

.toast-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: white;
}

.toast.success .toast-icon {
    background: var(--success);
}

.toast.error .toast-icon {
    background: var(--danger);
}

.toast.warning .toast-icon {
    background: var(--warning);
}

.toast.info .toast-icon {
    background: var(--info);
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.9rem;
}

.toast-message {
    color: var(--gray-500);
    font-size: 0.8rem;
}

/* Responsive */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 1rem;
    }

    .container {
        padding: 1rem;
    }

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

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

    table {
        min-width: 800px;
    }

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

    .form-actions {
        flex-direction: column;
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* Hover Effects */
.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

/* ==================== LOGIN PAGE ==================== */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-gradient);
    padding: 2rem;
}

.login-container {
    width: 100%;
    max-width: 420px;
}

.login-card {
    background: white;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2);
    padding: 2.5rem;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-logo {
    height: 60px;
    width: auto;
    margin-bottom: 1rem;
}

.login-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.login-subtitle {
    color: var(--gray-500);
    font-size: 0.95rem;
}

.login-form .form-group {
    margin-bottom: 1.25rem;
}

.login-form .btn-block {
    width: 100%;
    padding: 0.875rem;
    font-size: 1rem;
}

/* ==================== USER MENU ==================== */
.user-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: 1rem;
    padding-left: 1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.user-name {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    font-size: 0.9rem;
}

/* ==================== ROLE BADGES ==================== */
.role-admin {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
}

.role-muhasebe {
    background: #dbeafe;
    color: #1e40af;
}

.role-onayci {
    background: #d1fae5;
    color: #065f46;
}

.role-user {
    background: var(--gray-100);
    color: var(--gray-600);
}

/* ==================== RESPONSIVE UPDATES ==================== */
@media (max-width: 768px) {
    .user-menu {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        margin-top: 0.5rem;
    }

    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ==================== INVOICE IMAGE ==================== */
.invoice-image-container {
    text-align: center;
    background: var(--gray-50);
    border-radius: 8px;
    padding: 1rem;
}

.invoice-image {
    max-width: 100%;
    max-height: 500px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s;
}

.invoice-image:hover {
    transform: scale(1.02);
}

.empty-image-state {
    text-align: center;
    padding: 2rem;
    background: var(--gray-50);
    border-radius: 8px;
    border: 2px dashed var(--gray-300);
}

.image-upload-area {
    background: var(--gray-50);
    border-radius: 8px;
    padding: 1rem;
}
/* Filter Form */

.filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    align-items: flex-end;
}

.filter-form .form-group {
    margin-bottom: 0;
}

/* ==================== BULLETPROOF MOBILE & PWA FIX ==================== */
@media screen and (max-width: 768px) {
    /* Global Reset for Mobile */
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        position: relative;
        margin: 0 !important;
        padding: 0 !important;
        -webkit-text-size-adjust: 100%;
        background-color: #f4f6f8;
        padding-bottom: 80px !important; /* Space for Bottom Nav */
        font-size: 14px;
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Hide desktop nav links on mobile since we have bottom nav */
    .nav-links {
        display: none !important;
    }

    .header {
        padding: 0.75rem 1rem !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    }

    .header-content {
        padding: 0 !important;
        justify-content: center !important;
    }

    .logo span {
        font-size: 1.15rem !important;
    }

    /* Stats Grid optimization for mobile - make them 3 side-by-side compact cards */
    .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        margin: 1rem 0 !important;
    }

    .stat-card {
        padding: 12px 6px !important;
        text-align: center !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
        border: 1px solid #e5e7eb !important;
    }

    .stat-card::before {
        height: 3px !important;
    }

    .stat-value {
        font-size: 1.4rem !important;
        font-weight: 700 !important;
    }

    .stat-label {
        font-size: 10px !important;
        margin-top: 4px !important;
        color: #6b7280 !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Filter tabs optimization */
    .filter-tabs {
        display: flex !important;
        gap: 6px !important;
        margin-bottom: 1.25rem !important;
        padding: 4px !important;
        border-radius: 10px !important;
        background: white !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
        border: 1px solid #e5e7eb !important;
    }

    .filter-tab {
        flex: 1 !important;
        text-align: center !important;
        padding: 8px 4px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
    }

    .filter-tab .count {
        margin-left: 4px !important;
        padding: 2px 6px !important;
        font-size: 10px !important;
    }

    /* Hide table headers and transform rows into cards */
    .table-container {
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        margin-bottom: 2rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .table-header {
        padding: 8px 0 !important;
        border-bottom: none !important;
    }

    .table-title {
        font-size: 1.15rem !important;
        font-weight: 700 !important;
    }

    /* ONLY affect the dashboard table, leave detail table as a scrollable element */
    table.dashboard-table {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        border: none !important;
    }

    table.dashboard-table tbody {
        display: block !important;
        width: 100% !important;
    }

    table.dashboard-table thead {
        display: none !important;
    }

    /* Redesigned Premium Mobile Card using CSS Grid */
    table.dashboard-table tr {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px 12px !important;
        background: #ffffff !important;
        margin-bottom: 16px !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
        border: 1px solid #e5e7eb !important;
        border-left: 4px solid var(--primary) !important; /* Premium Left Accent Border */
        padding: 16px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Row 1: Fatura No (Full width span) */
    table.dashboard-table td.invoice-no-cell {
        grid-column: 1 / span 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: transparent !important;
        padding: 0 0 10px 0 !important;
        border-bottom: 1px solid #f3f4f6 !important;
        margin-bottom: 4px !important;
        width: 100% !important;
    }

    table.dashboard-table td.invoice-no-cell span:first-child {
        color: var(--primary-dark) !important;
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    table.dashboard-table td.invoice-no-cell::before {
        display: none !important;
    }

    /* Override white text / transparent background for status badges inside card header on mobile */
    table.dashboard-table td.invoice-no-cell .status-badge {
        font-size: 11px !important;
        padding: 4px 10px !important;
        border-radius: 20px !important;
        font-weight: 600 !important;
        border: none !important;
        display: inline-flex !important;
    }

    table.dashboard-table td.invoice-no-cell .status-badge.status-waiting {
        background: #fef3c7 !important;
        color: #92400e !important;
    }
    table.dashboard-table td.invoice-no-cell .status-badge.status-approved {
        background: #d1fae5 !important;
        color: #065f46 !important;
    }
    table.dashboard-table td.invoice-no-cell .status-badge.status-rejected {
        background: #fee2e2 !important;
        color: #991b1b !important;
    }
    table.dashboard-table td.invoice-no-cell .status-badge.status-info {
        background: #dbeafe !important;
        color: #1e40af !important;
    }
    table.dashboard-table td.invoice-no-cell .status-badge.status-pending {
        background: #f3f4f6 !important;
        color: #4b5563 !important;
    }

    /* Row 2: Tedarikçi (Full width span) */
    table.dashboard-table td[data-label="Tedarikçi"] {
        grid-column: 1 / span 2 !important;
        grid-row: 2 !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #111827 !important;
        margin-bottom: 4px !important;
        width: 100% !important;
        display: block !important;
    }

    table.dashboard-table td[data-label="Tedarikçi"]::before {
        display: none !important; /* Hide "Tedarikçi:" label since it is self-evident */
    }

    /* Row 3: Şirket (Left column) and Tarih (Right column) */
    table.dashboard-table td[data-label="Şirket"] {
        grid-column: 1 !important;
        grid-row: 3 !important;
        display: block !important;
        margin-bottom: 4px !important;
    }

    table.dashboard-table td[data-label="Firma"] {
        grid-column: 1 !important;
        grid-row: 3 !important;
        display: block !important;
        margin-bottom: 4px !important;
    }

    table.dashboard-table td[data-label="Tarih"] {
        grid-column: 2 !important;
        grid-row: 3 !important;
        display: block !important;
        text-align: right !important;
        margin-bottom: 4px !important;
    }

    /* Row 4: Atanan/İlgili (Left column) and Tutar (Right column) */
    table.dashboard-table td[data-label="Atanan"] {
        grid-column: 1 !important;
        grid-row: 4 !important;
        display: block !important;
        padding-top: 10px !important;
        border-top: 1px dashed #e5e7eb !important;
        margin-bottom: 0 !important;
    }

    table.dashboard-table td[data-label="Ilgili"],
    table.dashboard-table td[data-label$="lgili"],
    table.dashboard-table td[data-label="Atanacak Kisi"] {
        grid-column: 1 !important;
        grid-row: 4 !important;
        display: block !important;
        padding-top: 10px !important;
        border-top: 1px dashed #e5e7eb !important;
        margin-bottom: 0 !important;
    }

    table.dashboard-table td[data-label="Tutar"] {
        grid-column: 2 !important;
        grid-row: 4 !important;
        display: block !important;
        text-align: right !important;
        padding-top: 10px !important;
        border-top: 1px dashed #e5e7eb !important;
        margin-bottom: 0 !important;
    }

    /* Row 5: Action Button (Full width span) */
    table.dashboard-table td:last-child {
        grid-column: 1 / span 2 !important;
        grid-row: 5 !important;
        padding: 12px 0 0 0 !important;
        background: transparent !important;
        border-top: 1px solid #f3f4f6 !important;
        margin-top: 4px !important;
        width: 100% !important;
        display: block !important;
    }

    /* Hide the redundant "Durum" database field card cell completely on mobile */
    table.dashboard-table td[data-label="Durum"] {
        display: none !important;
    }

    /* Style individual grid cells on dashboard table */
    table.dashboard-table td {
        border-bottom: none !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        font-size: 13px !important;
        color: #1f2937 !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
    }

    table.dashboard-table td::before {
        content: attr(data-label) ": " !important;
        display: inline !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #9ca3af !important;
        text-transform: none !important;
        margin-right: 4px !important;
    }

    /* Hide redundant colons on cells with no labels */
    table.dashboard-table td:last-child::before {
        display: none !important;
    }

    .amount {
        color: #10b981 !important; /* Beautiful emerald green */
        font-size: 15px !important;
        font-weight: 800 !important;
    }

    .action-buttons {
        display: flex !important;
        width: 100% !important;
    }

    .action-buttons .btn {
        flex: 1 !important;
        padding: 12px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: none !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 6px rgba(79, 70, 229, 0.2) !important;
        background: var(--primary) !important;
        color: white !important;
    }

    /* Fixed Bottom Navigation (Mobile Only) */
    .bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 60px !important;
        background: #ffffff !important;
        border-top: 1px solid #e5e7eb !important;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08) !important;
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        z-index: 9999 !important;
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
    }

    .nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        color: #9ca3af !important;
        text-decoration: none !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        flex: 1 !important;
        height: 100% !important;
        transition: color 0.2s !important;
    }

    .nav-item i,
    .nav-item .app-inline-icon {
        width: 18px !important;
        height: 18px !important;
        margin-bottom: 2px !important;
        flex-shrink: 0 !important;
    }

    .nav-item.active {
        color: var(--primary) !important;
    }

    /* ==================== DETAIL PAGE MOBILE OPTIMIZATIONS ==================== */

    body {
        padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Fix page header overflow on detail page */
    .page-title {
        font-size: 1.1rem !important;
        word-break: break-word !important;
    }

    /* Detail page container layout */
    .detail-grid {
        display: block !important;
        width: 100% !important;
    }

    .detail-grid > div {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }

    /* Action panel - move to after detail cards naturally */
    .action-panel {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 1rem !important;
    }

    .action-panel .btn {
        width: 100% !important;
        padding: 14px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
    }

    .approval-helper-card {
        min-height: 210px !important;
    }

    .approval-floating-panel {
        min-height: 0 !important;
        margin-bottom: 0 !important;
    }

    .approval-floating-panel .approval-helper-card {
        top: auto !important;
        right: 0.75rem !important;
        bottom: 5.75rem !important;
        width: 136px !important;
        min-height: 144px !important;
        padding: 0.55rem 0.45rem 0.4rem !important;
        z-index: 120 !important;
    }

    .approval-floating-panel .approval-helper-bubble {
        top: 0.45rem !important;
        left: 0.4rem !important;
        right: 0.4rem !important;
        padding: 0.45rem 0.35rem !important;
        font-size: 0.68rem !important;
        border-radius: 12px !important;
    }

    .approval-helper-img {
        width: min(135px, 78%) !important;
    }

    .approval-floating-panel .approval-helper-img {
        width: 78px !important;
        margin-top: 3.45rem !important;
    }

    .approval-actions-hero {
        align-items: flex-start !important;
    }

    .approval-actions-hero-img {
        width: 78px !important;
        height: 78px !important;
    }

    /* Detail card sizing */
    .detail-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .detail-card-body {
        padding: 1rem !important;
    }

    /* Detail rows - keep label/value side by side but constrained */
    .detail-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 8px !important;
        padding: 10px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .detail-label {
        font-size: 12px !important;
        color: #6b7280 !important;
        flex-shrink: 0 !important;
        width: 38% !important;
        max-width: 38% !important;
        text-align: left !important;
        line-height: 1.4 !important;
    }

    .detail-value {
        font-size: 13px !important;
        color: #1f2937 !important;
        text-align: right !important;
        word-break: break-word !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* SUPPLIER FORM: Stack 2-col grid to single column */
    .supplier-form {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }

    /* DISTRIBUTION FORM: Stack flex row to column */
    .distribution-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    .distribution-form .form-group {
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    .distribution-form > button[type="submit"] {
        width: 100% !important;
    }

    /* Scrollable tables on detail page */
    .detail-card .table-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Reset standard tables on detail page so they remain horizontal scrollable */
    .detail-card table:not(.dashboard-table) {
        display: table !important;
        width: auto !important;
        min-width: 600px !important;
    }

    .detail-card table:not(.dashboard-table) thead {
        display: table-header-group !important;
    }

    .detail-card table:not(.dashboard-table) tbody {
        display: table-row-group !important;
    }

    .detail-card table:not(.dashboard-table) tr {
        display: table-row !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
    }

    .detail-card table:not(.dashboard-table) td,
    .detail-card table:not(.dashboard-table) th {
        display: table-cell !important;
        font-size: 12px !important;
        padding: 0.5rem !important;
    }

    .detail-card table:not(.dashboard-table) td::before {
        display: none !important;
    }

    .refresh-elogo-form {
        display: block !important;
        margin-bottom: 0.875rem !important;
    }

    .refresh-elogo-form .btn {
        width: 100% !important;
        min-height: 44px !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .invoice-lines-container {
        overflow-x: visible !important;
        background: transparent !important;
    }

    .detail-card .invoice-lines-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .detail-card .invoice-lines-table thead {
        display: none !important;
    }

    .detail-card .invoice-lines-table tbody {
        display: block !important;
        width: 100% !important;
    }

    .detail-card .invoice-lines-table .invoice-line-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        width: 100% !important;
        margin: 0 0 1rem 0 !important;
        padding: 0.875rem !important;
        background: #f9fafb !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 8px !important;
        box-shadow: none !important;
    }

    .detail-card .invoice-lines-table .invoice-line-row td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .detail-card .invoice-lines-table .invoice-line-row td::before {
        content: attr(data-label) !important;
        display: block !important;
        margin-bottom: 0.35rem !important;
        color: #6b7280 !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
    }

    .detail-card .invoice-lines-table .invoice-line-row td:first-child {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        color: var(--primary-dark) !important;
        font-weight: 800 !important;
    }

    .detail-card .invoice-lines-table .invoice-line-row td:first-child::before {
        margin-bottom: 0 !important;
    }

    .detail-card .invoice-lines-table .form-control {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
        font-size: 15px !important;
    }

    .invoice-lines-actions {
        display: block !important;
        margin-top: 0.75rem !important;
    }

    .invoice-lines-actions .btn {
        width: 100% !important;
        min-height: 48px !important;
        white-space: normal !important;
    }

    .invoice-lines-summary {
        display: grid !important;
        grid-template-columns: 1fr !important;
        margin-top: 0.75rem !important;
    }

    .invoice-lines-summary-item {
        min-width: 0 !important;
        border-left: 0 !important;
        border-top: 1px solid #e5e7eb !important;
    }

    .invoice-lines-summary-item:first-child {
        border-top: 0 !important;
    }

    .html-visual-container {
        height: 65vh !important;
    }

    .invoice-image-container {
        padding: 0.5rem !important;
    }

    .invoice-image {
        max-height: 70vh !important;
    }

    .mobile-action-bar {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 9998 !important;
        display: flex !important;
        gap: 0.5rem !important;
        padding: 0.625rem 0.75rem !important;
        background: rgba(255, 255, 255, 0.96) !important;
        border-top: 1px solid #e5e7eb !important;
        box-shadow: 0 -8px 24px rgba(17, 24, 39, 0.08) !important;
        backdrop-filter: blur(10px) !important;
    }

    .mobile-action-bar:empty {
        display: none !important;
    }

    .mobile-action {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.375rem !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        min-height: 46px !important;
        border: none !important;
        border-radius: 8px !important;
        color: white !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
        text-decoration: none !important;
    }

    .mobile-action i,
    .mobile-action .app-inline-icon {
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0 !important;
    }

    .mobile-action span {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .mobile-action-primary {
        background: var(--primary) !important;
    }

    .mobile-action-success {
        background: var(--success) !important;
    }

    .mobile-action-danger {
        background: var(--danger) !important;
    }

    .mobile-action-warning {
        background: var(--warning) !important;
    }

    /* Modal fix for mobile */
    .modal {
        width: calc(100vw - 2rem) !important;
        max-width: calc(100vw - 2rem) !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }

    .modal-footer {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .modal-footer .btn {
        width: 100% !important;
    }

    /* "Geri Dön" button full width on mobile */
    .container > div > a.btn-secondary {
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
}

/* Hide Bottom Nav on Desktop */
@media screen and (min-width: 769px) {
    .bottom-nav {
        display: none !important;
    }

    .mobile-action-bar {
        display: none !important;
    }
}

/* ==================== PROFESSIONAL UI SYSTEM 2026 ==================== */
:root {
    --primary: #1e3a5f;
    --primary-dark: #142a46;
    --primary-light: #315b86;
    --accent: #2563eb;
    --accent-dark: #1d4ed8;
    --success: #059669;
    --warning: #d97706;
    --danger: #dc2626;
    --info: #2563eb;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --bg-gradient: linear-gradient(110deg, #142a46 0%, #1e3a5f 62%, #24568b 100%);
    --card-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .05);
    --card-shadow-hover: 0 16px 38px rgba(15, 23, 42, .11);
    --border-radius: 12px;
    --border-radius-lg: 16px;
    --transition: all .2s ease-out;
}

html { scroll-behavior: smooth; }

body {
    background:
        radial-gradient(circle at 8% 0%, rgba(37, 99, 235, .07), transparent 25rem),
        var(--gray-50);
    color: var(--gray-800);
    font-size: 15px;
}

a, button, input, select, textarea { touch-action: manipulation; }

.header {
    padding: .8rem clamp(1rem, 3vw, 2.5rem);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 8px 30px rgba(15, 23, 42, .14);
}

.header-content {
    max-width: 1540px;
    min-height: 48px;
    padding: 0;
}

.logo { gap: .85rem; font-size: 1.05rem; letter-spacing: -.01em; }
.logo-img { height: 34px; max-width: 132px; }
.nav-links { align-items: center; gap: .35rem; }
.nav-link { min-height: 42px; display: inline-flex; align-items: center; padding: .6rem .85rem; border-radius: 10px; font-size: .875rem; }
.nav-link:hover { background: rgba(255, 255, 255, .1); }
.nav-link.active { background: white; color: var(--primary); box-shadow: 0 5px 15px rgba(15, 23, 42, .14); }
.user-menu { padding-left: .65rem; margin-left: .35rem; border-left: 1px solid rgba(255, 255, 255, .18); }

.container {
    max-width: 1540px;
    padding: clamp(1rem, 2.5vw, 2rem);
}

.page-title { color: var(--gray-900); font-size: clamp(1.65rem, 3vw, 2.4rem); line-height: 1.15; letter-spacing: -.035em; }
.page-subtitle { color: var(--gray-600); font-size: 1rem; line-height: 1.6; }

.btn {
    min-height: 44px;
    border-radius: 10px;
    padding: .68rem 1.15rem;
    box-shadow: none;
}
.btn-sm { min-height: 36px; padding: .45rem .8rem; }
.btn-primary { background: var(--accent); box-shadow: 0 7px 16px rgba(37, 99, 235, .2); }
.btn-primary:hover { background: var(--accent-dark); box-shadow: 0 10px 22px rgba(37, 99, 235, .28); }
.btn-secondary { background: var(--gray-100); border: 1px solid var(--gray-200); }
.btn-outline { border: 1px solid var(--gray-300); background: white; color: var(--gray-700); }
.btn-outline:hover { border-color: var(--accent); background: #eff6ff; color: var(--accent-dark); }

.form-card,
.detail-card,
.action-panel,
.table-container {
    border-color: rgba(203, 213, 225, .8);
    box-shadow: var(--card-shadow);
}
.form-control {
    min-height: 46px;
    border-radius: 10px;
    border-color: var(--gray-300);
    background: white;
}
.form-control:hover { border-color: var(--gray-400); }
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.form-label { color: var(--gray-700); font-weight: 650; }

.table-container { border-radius: 16px; }
.table-header { padding: 1.15rem 1.35rem; background: rgba(248, 250, 252, .72); }
.table-title { color: var(--gray-900); font-size: 1.05rem; font-weight: 750; }
th { padding: .85rem 1.15rem; background: #f8fafc; color: var(--gray-500); font-size: .72rem; letter-spacing: .045em; }
td { padding: .95rem 1.15rem; }
tbody tr { transition: background-color .18s ease; }
tbody tr:hover td { background: #f8fbff; }
.amount { font-variant-numeric: tabular-nums; color: var(--gray-900); }
.status-badge { font-weight: 700; border: 1px solid transparent; }
.status-waiting { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.status-approved { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.status-rejected { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.status-info { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }

.modal-overlay { background: rgba(15, 23, 42, .58); backdrop-filter: blur(3px); }
.modal { border: 1px solid rgba(255,255,255,.8); border-radius: 18px; box-shadow: 0 30px 70px rgba(15, 23, 42, .25); }
.modal-close { min-width: 40px; min-height: 40px; }

/* Dashboard */
.dashboard-container { padding-top: clamp(1.25rem, 3vw, 2.5rem); }
.list-back-link { display: inline-flex; margin-bottom: .8rem; color: var(--accent); font-size: .85rem; font-weight: 750; text-decoration: none; }
.list-back-link:hover { color: var(--accent-dark); text-decoration: underline; }

.stats-grid, .filter-tabs, .tab-strip, .report-grid .report-panel:nth-child(2) { display: none; }

.report-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.report-panel { padding: 1.15rem; overflow: hidden; border: 1px solid var(--gray-200); border-radius: 16px; background: white; box-shadow: var(--card-shadow); }
.report-panel-title { margin: 0 0 .9rem; color: var(--gray-900); font-size: 1rem; font-weight: 750; }
.approval-report-table { width: 100%; border-collapse: collapse; }
.approval-report-table th, .approval-report-table td { padding: .75rem; border-bottom: 1px solid var(--gray-100); text-align: left; }
.approval-report-table td:last-child, .approval-report-table th:last-child { text-align: right; }
.approval-link { color: var(--primary); font-weight: 750; text-decoration: none; }
.approval-link:hover { color: var(--accent); text-decoration: underline; }
.table-context { display: flex; flex-direction: column; gap: .22rem; }
.table-context small { color: var(--gray-500); font-weight: 500; }
.drilldown-note { display: inline-flex; align-items: center; gap: .5rem; color: var(--primary); font-weight: 700; }
.drilldown-note a { color: var(--accent); }

@media (max-width: 768px) {
    body { font-size: 16px; }
    .header { padding: .65rem 1rem; }
}

/* ==================== RED ERP REFERENCE - FINAL OVERRIDE ==================== */
:root {
    --ref-red: #e52f3b;
    --ref-red-dark: #cf2632;
    --ref-sidebar: #353846;
    --ref-sidebar-dark: #2d303d;
    --ref-canvas: #f0f0f4;
    --ref-border: #e2e3e8;
    --ref-text: #444957;
}

.dashboard-page {
    --erp-sidebar: 220px;
    --erp-topbar: 56px;
    background: var(--ref-canvas);
    color: var(--ref-text);
}
.dashboard-page .header {
    right: 0;
    left: 0;
    height: var(--erp-topbar);
    padding: 0 1.25rem;
    border: 0;
    background: var(--ref-red);
    box-shadow: 0 1px 4px rgba(30, 34, 45, .2);
}
.dashboard-page .header-content { max-width: none; min-height: var(--erp-topbar); padding-left: 0; }
.dashboard-page .header .logo { color: #fff; font-size: .82rem; font-weight: 700; }
.dashboard-page .header .logo-img { display: block; height: 27px; filter: brightness(0) invert(1); }
.dashboard-page .header .nav-link,
.dashboard-page .header .user-name { color: rgba(255,255,255,.92); }
.dashboard-page .header .nav-link { min-height: 34px; padding: .45rem .68rem; border-radius: 4px; font-size: .72rem; }
.dashboard-page .header .nav-link:hover,
.dashboard-page .header .nav-link.active { background: rgba(255,255,255,.14); color: #fff; }
.dashboard-page .header .user-menu { border-left-color: rgba(255,255,255,.3); }
.dashboard-page .header .btn-outline { min-height: 33px; border: 1px solid rgba(255,255,255,.65) !important; background: transparent; color: #fff !important; }
.dashboard-page .header .btn-outline:hover { background: #fff; color: var(--ref-red) !important; }

.dashboard-page .erp-sidebar {
    top: var(--erp-topbar);
    bottom: 0;
    height: auto;
    background: var(--ref-sidebar);
    box-shadow: 2px 0 8px rgba(30, 32, 42, .16);
}
.dashboard-page .erp-sidebar-brand { display: none; }
.dashboard-page .erp-menu { padding: .85rem 0; }
.dashboard-page .erp-menu-item {
    min-height: 42px;
    padding: .62rem .95rem;
    border: 0;
    border-left: 3px solid transparent;
    color: #c9cbd3;
    font-size: .72rem;
}
.dashboard-page .erp-menu-item svg { width: 15px; height: 15px; color: #a4a8b4; }
.dashboard-page .erp-menu-item:hover { background: rgba(0,0,0,.09); }
.dashboard-page .erp-menu-item.active {
    border-left-color: var(--ref-red);
    background: var(--ref-sidebar-dark);
    color: #fff;
    box-shadow: none;
}
.dashboard-page .erp-menu-item.active::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -8px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid var(--ref-sidebar-dark);
    transform: translateY(-50%);
}
.dashboard-page .erp-menu-item.active svg { color: #fff; }
.dashboard-page .erp-menu-item b { background: var(--ref-red); }
.dashboard-page .erp-sidebar-footer { background: #2a2d39; }
.dashboard-page .erp-user-avatar { background: var(--ref-red); }

.dashboard-page .dashboard-container {
    margin-left: var(--erp-sidebar);
    padding: calc(var(--erp-topbar) + 1.2rem) 1.15rem 2rem;
}
.dashboard-page .corporate-page-header {
    padding: 0 0 .8rem;
    margin-bottom: .85rem;
    border-bottom: 0;
}
.dashboard-page .corporate-page-header .page-title { color: #484c59; font-size: 1.15rem; font-weight: 650; }
.dashboard-page .corporate-page-header .page-title::before { content: ''; display: inline-block; width: 12px; height: 2px; margin-right: 8px; background: var(--ref-red); vertical-align: middle; }
.dashboard-page .page-subtitle { color: #8a8e99; font-size: .72rem; }

.dashboard-page .table-container,
.dashboard-page .report-panel {
    border: 1px solid var(--ref-border);
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(48, 51, 63, .035);
}
.dashboard-page .btn { min-height: 34px; padding: .48rem .8rem; border-radius: 4px; font-size: .7rem; }
.dashboard-page .btn-primary { background: var(--ref-red); }
.dashboard-page .btn-primary:hover { background: var(--ref-red-dark); }
.settings-page > .header {
    display: none !important;
}
.settings-page.dashboard-page {
    --erp-topbar: 0px;
}
.settings-page.dashboard-page .dashboard-container {
    padding-top: 1.25rem;
}
.dashboard-page .table-header { padding: .72rem .9rem; background: #fff; }
.dashboard-page th { padding: .62rem .75rem; background: #f4f4f6; color: #858995; font-size: .61rem; }
.dashboard-page td { padding: .68rem .75rem; color: #696d78; font-size: .7rem; }
.dashboard-page tbody tr:hover td { background: #fafafd; }
.dashboard-page .form-control { min-height: 36px; padding: .45rem .62rem; border-radius: 3px; font-size: .7rem; }
.dashboard-page .form-label { font-size: .65rem; }
.dashboard-page .status-badge { padding: .25rem .55rem; font-size: .62rem; }

/* Admin uses the same red top bar and dark sidebar language. */

@media (max-width: 900px) {
    .dashboard-page { --erp-sidebar: 68px; }
}
@media (max-width: 768px) {
    .dashboard-page { --erp-sidebar: 0px; }
    .dashboard-page .header-content { padding-left: 0; }
}

/* Invoice list toolbar and row actions */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.invoice-list-toolbar {
    position: relative;
    z-index: 20;
    margin-bottom: .75rem;
    border: 1px solid var(--ref-border);
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(48, 51, 63, .035);
}
.invoice-toolbar-main {
    display: grid;
    grid-template-columns: 185px minmax(260px, 1fr) auto auto auto;
    align-items: center;
    gap: .65rem;
    padding: .8rem .9rem;
}
.invoice-toolbar-main .form-group { gap: 0; }
.invoice-toolbar-search { position: relative; }
.invoice-toolbar-search svg { position: absolute; z-index: 1; top: 50%; left: .7rem; width: 14px; height: 14px; color: #a1a5ae; transform: translateY(-50%); pointer-events: none; }
.invoice-toolbar-search .form-control { padding-left: 2rem; }
.invoice-advanced-toggle {
    min-height: 36px;
    padding: .4rem .25rem;
    border: 0;
    background: transparent;
    color: #4a87ad;
    font-size: .68rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.invoice-advanced-toggle span { display: inline-block; margin-left: .35rem; color: #8b8f99; font-size: 1rem; font-weight: 400; }
.invoice-new-button { white-space: nowrap; }
.invoice-new-button span { margin-left: .35rem; font-size: .9rem; }
.invoice-toolbar-advanced {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr)) auto;
    align-items: end;
    gap: .75rem;
    padding: .8rem .9rem;
    border-top: 1px solid #ececf0;
    background: #fafafd;
}
.invoice-toolbar-advanced[hidden] { display: none; }
.invoice-advanced-actions { display: flex; gap: .45rem; }

.dashboard-page .table-container { overflow: visible; }
.dashboard-page .dashboard-table { position: relative; }
.dashboard-page .table-header { gap: 1rem; }
.bulk-action-bar {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-left: auto;
    padding: .55rem .65rem;
    border: 1px solid #86efac;
    border-radius: 4px;
    background: #16a34a;
    color: #fff;
    box-shadow: 0 8px 18px rgba(22, 163, 74, .18);
}
.bulk-action-bar[hidden] { display: none; }
.bulk-action-title {
    display: grid;
    gap: .05rem;
    min-width: 112px;
}
.bulk-action-title strong {
    font-size: .72rem;
    line-height: 1;
}
.bulk-action-title span {
    color: rgba(255,255,255,.86);
    font-size: .62rem;
    line-height: 1.1;
}
.bulk-action-select {
    width: 170px;
    min-height: 32px;
    border-color: rgba(255,255,255,.65);
    background: #fff;
}
.bulk-action-button {
    min-height: 32px;
    padding: .35rem .7rem;
    border-color: #0f3b63;
    background: #183b64;
    white-space: nowrap;
}
.invoice-select-column,
.invoice-select-cell {
    width: 34px;
    text-align: center;
}
.invoice-row-checkbox {
    width: 15px;
    height: 15px;
    accent-color: #16a34a;
    cursor: pointer;
}
.dashboard-page.list-view .invoice-col-select { width: 34px; }
.invoice-actions-column { width: 82px; text-align: center; }
.invoice-row-actions { position: relative; display: flex; align-items: center; justify-content: center; gap: .15rem; white-space: nowrap; }
.invoice-company-cell {
    color: #394150;
    font-weight: 650;
    line-height: 1.3;
    white-space: normal;
}
.invoice-icon-button {
    display: inline-grid;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: #8b909b;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.invoice-icon-button svg { width: 15px; height: 15px; }
.invoice-icon-button:hover { background: #f0f1f4; color: var(--ref-red); }
.invoice-icon-button:focus-visible { outline: 2px solid rgba(229, 47, 59, .3); outline-offset: 1px; }
.invoice-icon-button:disabled { background: transparent; color: #d0d2d8; cursor: not-allowed; opacity: 1; }
.invoice-icon-button.is-loading { color: var(--ref-red); }
.quick-assign-select {
    min-width: 132px;
    height: 32px;
    padding: .25rem .45rem;
    font-size: .76rem;
}
.invoice-row-assigned {
    opacity: .35;
    transition: opacity .2s ease;
}
.dashboard-page .dashboard-table .invoice-no { color: #555a66; font-weight: 600; }

@media (max-width: 1050px) {
    .invoice-toolbar-main { grid-template-columns: 170px minmax(220px, 1fr) auto auto; }
    .invoice-new-button { grid-column: 4; }
    .invoice-toolbar-main > .btn-secondary { display: none; }
}
@media (max-width: 768px) {
    .invoice-toolbar-main { grid-template-columns: 1fr; }
    .invoice-new-button { grid-column: auto; }
    .invoice-toolbar-main > .btn-secondary { display: inline-flex; }
    .invoice-toolbar-advanced { grid-template-columns: 1fr; }
    .invoice-advanced-actions .btn { flex: 1; }
}

/* Requested navigation hierarchy and consistent application shell */
.dashboard-page .erp-menu { display: flex; flex-direction: column; gap: 2px; padding: .75rem .5rem; }
.dashboard-page .erp-menu-item { border-radius: 3px; }
.dashboard-page .erp-menu-item svg { color: #ef3b47; stroke-width: 2; }
.dashboard-page .erp-menu-item.active svg { color: #fff; }
.dashboard-page .erp-sidebar { display: flex; flex-direction: column; overflow: visible; }
.dashboard-page .erp-sidebar-settings { margin-top: auto; border-top: 1px solid rgba(255,255,255,.08); background: #2d303d; position: relative; overflow: visible; }
.dashboard-page .erp-sidebar-settings > .erp-menu-item { margin: .45rem .5rem; }
.dashboard-page .erp-sidebar-settings .erp-sidebar-footer { position: static; }
.dashboard-page .erp-sidebar-footer { border-top: 1px solid rgba(255,255,255,.08); }

.list-view .report-grid,
.list-view .stats-grid,
.list-view .filter-tabs { display: none !important; }
.list-view .table-container { margin-top: 0; }

.settings-page .admin-layout { display: block !important; min-height: 0 !important; }
.settings-page .admin-layout > .admin-sidebar { display: none !important; }
.settings-page .admin-content {
    padding: 1.1rem !important;
    border: 1px solid var(--ref-border) !important;
    border-radius: 3px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(48, 51, 63, .04) !important;
}
.settings-page .stats-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .75rem !important; margin: 1rem 0 !important; }
.settings-page .stat-card { padding: 1rem !important; border: 1px solid #e2e4e9; border-radius: 3px !important; box-shadow: none !important; }
.settings-page .stat-card::before { height: 2px; background: var(--ref-red); }
.incoming-page .card,
.incoming-page .table-container,
.editor-page .form-card,
.detail-page-shell .detail-card,
.detail-page-shell .action-panel {
    border: 1px solid var(--ref-border) !important;
    border-radius: 3px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(48, 51, 63, .04) !important;
}
@media (max-width: 640px) {
    .settings-page .stats-grid { grid-template-columns: 1fr !important; }
}

/* ==================== ADMIN CONSOLE / REFERENCE UI ==================== */

.archive-page .stats-grid { display: grid !important; gap: .75rem; margin: 1rem 0 1.25rem; }
.archive-page .stat-card { padding: 1rem; border-radius: 3px; box-shadow: none; }
.archive-page .filter-tabs { border-radius: 3px; box-shadow: none; }
.archive-page .filter-tab { border-radius: 3px; }

@media (max-width: 520px) {
    .page-title { font-size: 1.7rem; }
}

/* ==================== HOLDING CORPORATE DASHBOARD ==================== */
.dashboard-page {
    background: #f4f6f8;
    color: #172033;
}

.dashboard-page .header {
    background: #101b2d;
    border-bottom: 3px solid #9a6b16;
    box-shadow: none;
}

.dashboard-page .header-content { max-width: 1440px; }
.dashboard-page .nav-link { border-radius: 3px; }
.dashboard-page .nav-link.active { background: rgba(255,255,255,.1); color: #fff; box-shadow: none; }
.dashboard-page .container { max-width: 1440px; }

.corporate-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    padding: .45rem 0 1.35rem;
    border-bottom: 1px solid #cfd6df;
    margin-bottom: 1.25rem;
}
.corporate-page-header .page-title { margin: .28rem 0 .3rem; color: #101b2d; font-size: 1.85rem; font-weight: 700; letter-spacing: -.025em; }
.corporate-page-header .page-subtitle { color: #667085; font-size: .9rem; }
.dashboard-page .btn { border-radius: 3px; }
.dashboard-page .btn-primary { background: #1e3a5f; box-shadow: none; }
.dashboard-page .btn-primary:hover { background: #142a46; box-shadow: none; }
.dashboard-page .table-container,
.dashboard-page .report-panel { border-radius: 3px; box-shadow: none; }

@media (max-width: 640px) {
    .corporate-page-header { align-items: flex-start; flex-direction: column; gap: .85rem; }
}

/* ==================== ERP SHELL / VIDEO REFERENCE ==================== */
.dashboard-page { --erp-sidebar: 230px; --erp-topbar: 58px; background: #eef1f4; }
.dashboard-page .header {
    position: fixed;
    z-index: 300;
    top: 0;
    right: 0;
    left: var(--erp-sidebar);
    height: var(--erp-topbar);
    padding: 0 1.25rem;
    border: 0;
    border-bottom: 1px solid #cfd5dc;
    background: #fff;
    color: #2d3748;
}
.dashboard-page .header-content { min-height: var(--erp-topbar); }
.dashboard-page .invoice-date-header { display: flex; max-width: none; justify-content: center; }
.invoice-date-filter { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.invoice-date-filter-label { margin-right: .25rem; color: #344054; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.invoice-date-filter .form-control { width: auto; min-width: 112px; height: 36px; padding: .38rem 1.8rem .38rem .65rem; font-size: .74rem; }
.invoice-date-filter .btn { min-height: 36px; padding: .45rem .85rem; }
.invoice-date-clear { color: #667085; font-size: .7rem; font-weight: 600; text-decoration: none; }
.invoice-date-clear:hover { color: #d92d3a; text-decoration: underline; }
.dashboard-page .header .logo { color: #25364d; font-size: .9rem; }
.dashboard-page .header .logo-img { display: none; }
.dashboard-page .header .nav-link { color: #4b5563; }
.dashboard-page .header .nav-link.active { background: #edf3f8; color: #1f5f91; }
.dashboard-page .header .user-name { color: #344054; }
.dashboard-page .header .btn-outline { border-color: #cfd5dc !important; background: #fff; color: #344054 !important; }

.erp-sidebar {
    position: fixed;
    z-index: 400;
    inset: 0 auto 0 0;
    display: flex;
    width: var(--erp-sidebar);
    flex-direction: column;
    background: #17212f;
    color: #d5dbe3;
    box-shadow: 4px 0 12px rgba(20, 30, 44, .12);
    overflow: visible;
}
.erp-sidebar-brand { display: flex; min-height: 72px; align-items: center; gap: .75rem; padding: 0 1.1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.erp-sidebar-brand strong, .erp-sidebar-brand small, .erp-sidebar-footer strong, .erp-sidebar-footer small { display: block; }
.erp-sidebar-brand strong { color: #fff; font-size: .9rem; }
.erp-sidebar-brand small { margin-top: .12rem; color: #8491a1; font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; }
.erp-menu { flex: 1; padding: .8rem 0; overflow-y: auto; }
.erp-menu-item { position: relative; display: flex; min-height: 42px; align-items: center; gap: .7rem; padding: .55rem 1.05rem; border-left: 3px solid transparent; color: #b7c0cb; font-size: .8rem; text-decoration: none; transition: background .16s ease, color .16s ease; }
.erp-menu-item svg { width: 17px; height: 17px; flex: 0 0 auto; color: #8491a1; }
.erp-menu-item span { flex: 1; }
.erp-menu-item b { min-width: 20px; padding: .12rem .35rem; border-radius: 9px; background: #2d78ad; color: #fff; font-size: .62rem; text-align: center; }
.erp-menu-item:hover { background: rgba(255,255,255,.045); color: #fff; }
.erp-menu-item.active { border-left-color: #3d8bc2; background: #202d3d; color: #fff; }
.erp-menu-item.active svg { color: #61a6d5; }
.erp-sidebar-footer { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; border-top: 1px solid rgba(255,255,255,.08); background: #131c28; }
.erp-user-avatar { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #2d78ad; color: #fff; font-size: .75rem; font-weight: 800; }
.erp-sidebar-footer strong { max-width: 135px; overflow: hidden; color: #e7ebf0; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.erp-sidebar-footer small { margin-top: .15rem; color: #7f8b99; font-size: .64rem; }

.dashboard-page .dashboard-container {
    width: calc(100% - var(--erp-sidebar));
    max-width: calc(100% - var(--erp-sidebar));
    min-width: 0;
    margin-left: var(--erp-sidebar);
    padding: calc(var(--erp-topbar) + 1.25rem) 1.3rem 2rem;
}
.dashboard-page .corporate-page-header { padding: .2rem 0 1rem; margin-bottom: 1rem; }
.dashboard-page .corporate-page-header .page-title { font-size: 1.45rem; }

.dashboard-page.list-view .table-container { width: 100%; max-width: 100%; }
.dashboard-page.list-view .dashboard-table { width: 100%; table-layout: fixed; }
.dashboard-page.list-view .dashboard-table th,
.dashboard-page.list-view .dashboard-table td { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-page.list-view .dashboard-table td:nth-child(1),
.dashboard-page.list-view .dashboard-table td:nth-child(4) { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.dashboard-page.list-view .dashboard-table.bulk-select-enabled td:nth-child(1) { white-space: nowrap; }
.dashboard-page.list-view .dashboard-table.bulk-select-enabled td:nth-child(2),
.dashboard-page.list-view .dashboard-table.bulk-select-enabled td:nth-child(5) { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.dashboard-page.list-view .invoice-col-company { width: 160px; }
.dashboard-page.list-view .invoice-col-actions { width: 48px; }
.dashboard-page.list-view .invoice-col-date { width: 92px; }
.dashboard-page.list-view .invoice-col-supplier { width: auto; }
.dashboard-page.list-view .invoice-col-number { width: 170px; }
.dashboard-page.list-view .invoice-col-due-date { width: 102px; }
.dashboard-page.list-view .invoice-col-amount { width: 132px; }
.dashboard-page.list-view .invoice-col-owner { width: 138px; }
.dashboard-page.list-view .invoice-col-status { width: 150px; }
.invoice-clickable-row { position: relative; cursor: pointer; }
.invoice-clickable-row:hover { background: #f8fafc; }
.invoice-clickable-row:focus-visible { outline: 2px solid #2d78ad; outline-offset: -2px; }

.invoice-visual-overlay { padding: 1.25rem; }
.invoice-visual-dialog {
    display: flex;
    width: min(1180px, 96vw);
    max-width: 1180px;
    height: min(88vh, 900px);
    max-height: 900px;
    flex-direction: column;
    border-radius: 6px;
}
.invoice-visual-dialog .modal-header { flex: 0 0 auto; padding: .9rem 1.1rem; }
.invoice-visual-subtitle { margin: .2rem 0 0; color: #667085; font-size: .78rem; }
.invoice-visual-body { display: flex; min-height: 0; flex: 1; padding: 0; background: #eef1f4; }
.invoice-visual-frame { width: 100%; height: 100%; border: 0; background: #fff; }
.invoice-visual-state { display: grid; margin: auto; place-items: center; gap: .5rem; padding: 2rem; color: #344054; text-align: center; }
.invoice-visual-state small { max-width: 480px; color: #667085; line-height: 1.5; }
.invoice-visual-spinner { width: 30px; height: 30px; border: 3px solid #cfd8e3; border-top-color: #2d78ad; border-radius: 50%; animation: invoice-visual-spin .8s linear infinite; }
.invoice-visual-error strong { color: #b42318; }
@keyframes invoice-visual-spin { to { transform: rotate(360deg); } }

.dashboard-page.list-view .table-container {
    overflow-x: auto;
}

.dashboard-page.list-view .dashboard-table {
    min-width: 1180px;
}

.dashboard-page.list-view .dashboard-table th,
.dashboard-page.list-view .dashboard-table td {
    height: 54px;
    vertical-align: middle;
}

.dashboard-page.list-view .dashboard-table th {
    white-space: nowrap;
}

.dashboard-page.list-view .invoice-col-select { width: 44px; }
.dashboard-page.list-view .invoice-col-company { width: 148px; }
.dashboard-page.list-view .invoice-col-actions { width: 64px; }
.dashboard-page.list-view .invoice-col-date { width: 92px; }
.dashboard-page.list-view .invoice-col-supplier { width: auto; }
.dashboard-page.list-view .invoice-col-number { width: 172px; }
.dashboard-page.list-view .invoice-col-due-date { width: 100px; }
.dashboard-page.list-view .invoice-col-amount { width: 132px; }
.dashboard-page.list-view .invoice-col-owner { width: 132px; }
.dashboard-page.list-view .invoice-col-status { width: 146px; }

.dashboard-page.list-view .invoice-select-column,
.dashboard-page.list-view .invoice-select-cell,
.dashboard-page.list-view .invoice-actions-column,
.dashboard-page.list-view .invoice-row-actions {
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: center;
    white-space: nowrap !important;
}

.dashboard-page.list-view .invoice-select-cell {
    padding-left: .75rem;
    padding-right: .35rem;
}

.dashboard-page.list-view .invoice-row-checkbox {
    display: inline-grid;
    width: 16px;
    height: 16px;
    margin: 0;
    vertical-align: middle;
}

.dashboard-page.list-view .invoice-company-cell {
    max-width: 148px;
}

.dashboard-page.list-view .quick-assign-select {
    width: 138px;
    max-width: 100%;
}

.dashboard-page.list-view td[data-label="Tedarikçi"] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
    .invoice-visual-spinner { animation-duration: 1.8s; }
}

@media (max-width: 1100px) and (min-width: 769px) {
    .dashboard-page.list-view .dashboard-table th:nth-child(6),
    .dashboard-page.list-view .dashboard-table td:nth-child(6),
    .dashboard-page.list-view .dashboard-table.bulk-select-enabled th:nth-child(7),
    .dashboard-page.list-view .dashboard-table.bulk-select-enabled td:nth-child(7),
    .dashboard-page.list-view .invoice-col-due-date { display: none; }
    .dashboard-page.list-view .invoice-col-number { width: 150px; }
    .dashboard-page.list-view .invoice-col-amount { width: 120px; }
    .dashboard-page.list-view .invoice-col-owner { width: 120px; }
}

@media (max-width: 900px) {
    .dashboard-page { --erp-sidebar: 72px; }
    .erp-sidebar-brand { justify-content: center; padding: 0; }
    .erp-sidebar-brand > div,
.erp-menu-item span,
.erp-menu-item b { display: none; }
    .erp-sidebar-footer > .erp-user-info, .erp-sidebar-footer > .erp-user-chevron { display: none; }
    .erp-menu-item { justify-content: center; padding: .7rem 0; }
    .erp-menu-item svg { width: 20px; height: 20px; }
    .erp-sidebar-footer { justify-content: center; padding: .8rem 0; }
    .invoice-date-filter-label { display: none; }
    .invoice-date-filter .form-control { min-width: 92px; }
}

@media (max-width: 768px) {
    .dashboard-page { --erp-sidebar: 0px; --erp-topbar: 54px; }
    .erp-sidebar { display: none; }
    .dashboard-page .header { left: 0; }
    .dashboard-page .dashboard-container { width: 100%; max-width: 100%; margin-left: 0; padding: calc(var(--erp-topbar) + .85rem) .8rem 5.5rem; }
    .dashboard-page .header { padding: 0 .55rem; }
    .invoice-date-filter { width: 100%; gap: .3rem; }
    .invoice-date-filter .form-control { min-width: 0; flex: 1; padding-right: 1.25rem; }
    .invoice-date-filter .btn { padding-inline: .6rem; }
    .invoice-date-clear { display: none; }
    .invoice-visual-overlay { padding: .5rem; }
    .invoice-visual-dialog { width: 100%; height: 92vh; }
}

/* Collapsible invoice date filters */
.dashboard-page .invoice-filter-trigger-bar {
    position: relative;
    display: flex;
    max-width: none;
    align-items: center;
    justify-content: flex-end;
}
.invoice-filter-trigger {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    gap: .45rem;
    padding: .45rem .75rem;
    border: 1px solid #cfd5dc;
    border-radius: 3px;
    background: #fff;
    color: #344054;
    font: inherit;
    font-size: .74rem;
    font-weight: 700;
    cursor: pointer;
}
.invoice-filter-trigger:hover { border-color: #9ca7b4; background: #f8fafc; }
.invoice-filter-trigger:focus-visible { outline: 2px solid #2d78ad; outline-offset: 2px; }
.invoice-filter-trigger svg { width: 16px; height: 16px; }
.invoice-filter-trigger b { display: grid; min-width: 19px; height: 19px; place-items: center; border-radius: 10px; background: #ef3340; color: #fff; font-size: .62rem; }
.invoice-date-filter-panel {
    position: absolute;
    z-index: 500;
    top: calc(100% + 1px);
    right: 0;
    width: min(760px, calc(100vw - var(--erp-sidebar) - 2rem));
    padding: 1rem;
    border: 1px solid #cfd5dc;
    border-top: 3px solid #2d78ad;
    border-radius: 0 0 5px 5px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(23, 33, 47, .18);
}
.invoice-date-filter-panel[hidden] { display: none; }
.invoice-filter-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: .85rem; border-bottom: 1px solid #e5e9ef; }
.invoice-filter-panel-header strong, .invoice-filter-panel-header small { display: block; }
.invoice-filter-panel-header strong { color: #172033; font-size: .9rem; }
.invoice-filter-panel-header small { margin-top: .2rem; color: #667085; font-size: .7rem; }
.invoice-filter-close { display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 3px; background: #f2f4f7; color: #475467; font-size: 1.25rem; cursor: pointer; }
.invoice-date-filter-panel .invoice-date-filter { display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)) auto; width: 100%; align-items: end; justify-content: stretch; gap: .8rem; padding-top: .9rem; }
.invoice-filter-field label { display: block; margin-bottom: .35rem; color: #344054; font-size: .7rem; font-weight: 700; }
.invoice-filter-field .form-control { width: 100%; min-width: 0; height: 38px; font-size: .75rem; }
.invoice-filter-actions { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; }
.invoice-filter-actions .btn { min-height: 38px; white-space: nowrap; }
.dashboard-page.list-view .invoice-col-actions { width: 64px; }
.dashboard-page.list-view .invoice-actions-column { width: 64px; overflow: visible; text-align: center; white-space: nowrap; }

@media (max-width: 900px) {
    .invoice-date-filter-panel { width: min(680px, calc(100vw - var(--erp-sidebar) - 1rem)); }
}

@media (max-width: 768px) {
    .invoice-date-filter-panel { position: fixed; top: var(--erp-topbar); right: .5rem; left: .5rem; width: auto; }
    .invoice-date-filter-panel .invoice-date-filter { grid-template-columns: 1fr; }
    .invoice-filter-actions .btn { flex: 1; }
}

/* e-Logo detailed search lives only on the overview page */
.invoice-index-page { --erp-topbar: 0px; }
.invoice-index-page .dashboard-container { padding-top: 1.25rem; }
.invoice-index-page .corporate-page-header { align-items: center; }
.invoice-filter-trigger-green { border-color: #169b45; background: #169b45; color: #fff; }
.invoice-filter-trigger-green:hover { border-color: #11823a; background: #11823a; color: #fff; }
.invoice-filter-trigger-green b { background: #fff; color: #11823a; }
.invoice-index-page .elogo-filter-panel {
    position: static;
    width: 100%;
    margin: -.45rem 0 1.15rem;
    padding: 1rem;
    border-top: 3px solid #169b45;
    box-shadow: 0 5px 16px rgba(23, 33, 47, .08);
}
.elogo-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .9rem 1rem;
    padding-top: 1rem;
}
.elogo-filter-grid .invoice-filter-field { min-width: 0; }
.elogo-filter-grid .form-control { width: 100%; height: 36px; border-color: #d7dde5; border-radius: 3px; background: #eef1f5; font-size: .72rem; }
.elogo-filter-grid .filter-field-pair > div { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.elogo-filter-grid .invoice-filter-actions { align-self: end; }
.invoice-index-page .invoice-toolbar-main { grid-template-columns: 185px minmax(240px, 1fr) minmax(190px, 260px) auto auto auto; }
.invoice-header-actions { display: flex; align-items: flex-end; gap: .65rem; }
.invoice-toolbar-company .form-control { height: 36px; border-color: #cfd7e2; background: #fff; font-size: .72rem; }
.invoice-toolbar-company { min-width: 190px; }
.invoice-list-detail-link {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .45rem .7rem;
    border: 1px solid #169b45;
    border-radius: 3px;
    background: #169b45;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.invoice-list-detail-link:hover { border-color: #11823a; background: #11823a; color: #fff; }
.invoice-list-detail-link svg { width: 15px; height: 15px; }
.invoice-list-detail-link b { display: grid; min-width: 18px; height: 18px; place-items: center; border-radius: 9px; background: #fff; color: #11823a; font-size: .6rem; }
.elogo-filter-grid-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.elogo-filter-grid-compact .invoice-filter-actions { grid-column: 1 / -1; justify-content: flex-end; }

@media (max-width: 1200px) {
    .elogo-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .invoice-index-page .invoice-toolbar-main { grid-template-columns: 160px minmax(200px, 1fr) minmax(170px, 220px) auto auto auto; }
}
@media (max-width: 900px) {
    .elogo-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .invoice-index-page .invoice-toolbar-main { grid-template-columns: 1fr 1fr; }
    .invoice-toolbar-search { grid-column: 1 / -1; grid-row: 1; }
}
@media (max-width: 640px) {
    .invoice-index-page .corporate-page-header { align-items: stretch; }
    .invoice-header-actions { align-items: stretch; flex-direction: column; }
    .invoice-filter-trigger-green { justify-content: center; }
    .elogo-filter-grid { grid-template-columns: 1fr; }
    .invoice-index-page .invoice-toolbar-main { grid-template-columns: 1fr; }
    .invoice-toolbar-search { grid-column: auto; grid-row: auto; }
}

/* Fast paged invoice lists */
.invoice-list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--ref-border, #e5e7eb);
    background: #fff;
}
.invoice-list-count {
    color: #667085;
    font-size: .72rem;
    font-weight: 600;
}
.invoice-pagination {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.invoice-page-link,
.invoice-page-gap {
    display: inline-flex;
    min-width: 32px;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: .72rem;
    font-weight: 700;
}
.invoice-page-link {
    border: 1px solid #d8dee8;
    background: #fff;
    color: #344054;
    text-decoration: none;
}
.invoice-page-link:hover {
    border-color: #9aa6b6;
    background: #f7f9fc;
}
.invoice-page-link.active {
    border-color: #1e3a5f;
    background: #1e3a5f;
    color: #fff;
}
.invoice-page-link.disabled {
    pointer-events: none;
    opacity: .45;
}
.invoice-page-gap {
    color: #98a2b3;
}
@media (max-width: 768px) {
    .invoice-list-footer {
        align-items: stretch;
        flex-direction: column;
    }
    .invoice-pagination {
        justify-content: flex-start;
    }
}
/* ==================== EXECUTIVE OVERVIEW DASHBOARD REFRESH ==================== */
.invoice-index-page.overview-view {
    --overview-bg: #f5f7fb;
    --overview-surface: #ffffff;
    --overview-border: #e3e8f1;
    --overview-ink: #0f1b33;
    --overview-muted: #66748a;
    --overview-blue: #2563eb;
    --overview-green: #16a34a;
    --overview-amber: #f59e0b;
    --overview-red: #ef4444;
    --overview-violet: #7c3aed;
    background: var(--overview-bg);
}

.invoice-index-page.overview-view .dashboard-container {
    padding: 1.25rem 1.5rem 2rem;
}

.overview-console {
    display: grid;
    gap: .9rem;
}

.overview-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 58px;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--overview-border);
}

.overview-title-group h1 {
    margin: 0;
    color: var(--overview-ink);
    font-size: 1.48rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.15;
}

.overview-title-group p {
    margin: .28rem 0 0;
    color: #536176;
    font-size: .84rem;
}

.overview-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
    min-width: 0;
}

.overview-toolbar svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.overview-updated {
    display: grid;
    grid-template-columns: 20px auto;
    gap: .08rem .45rem;
    min-width: 150px;
    color: #728097;
    font-size: .68rem;
    line-height: 1.1;
}

.overview-updated svg {
    grid-row: 1 / span 2;
    align-self: center;
    color: #9aa7ba;
}

.overview-updated strong {
    color: #1d2a44;
    font-size: .72rem;
    font-weight: 700;
}

.overview-search,
.overview-company-form {
    position: relative;
    min-width: 0;
}

.overview-search {
    width: clamp(190px, 17vw, 265px);
}

.overview-search svg {
    position: absolute;
    top: 50%;
    left: .78rem;
    color: #8794a8;
    transform: translateY(-50%);
    pointer-events: none;
}

.overview-search input,
.overview-company-form select {
    width: 100%;
    min-height: 44px;
    border: 1px solid #d7deea;
    border-radius: 7px;
    background: #fff;
    color: #17243c;
    font: inherit;
    font-size: .82rem;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.overview-search input {
    padding: 0 .85rem 0 2.35rem;
}

.overview-company-form {
    width: clamp(160px, 14vw, 220px);
}

.overview-company-form select {
    padding: 0 2rem 0 .85rem;
}

.overview-search input:focus,
.overview-company-form select:focus {
    border-color: rgba(37, 99, 235, .68);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .11);
}

.overview-icon-button,
.overview-new-button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 7px;
    font: inherit;
    font-size: .82rem;
    font-weight: 750;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.overview-icon-button {
    position: relative;
    width: 44px;
    border: 1px solid #d7deea;
    background: #fff;
    color: #24324a;
}

.overview-icon-button b {
    position: absolute;
    top: -6px;
    right: -6px;
    display: grid;
    min-width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 9px;
    background: var(--overview-red);
    color: #fff;
    font-size: .6rem;
}

.overview-new-button {
    padding: 0 .95rem;
    background: #1f5fbe;
    color: #fff;
    box-shadow: 0 7px 18px rgba(37, 99, 235, .22);
}

.overview-icon-button:hover,
.overview-new-button:hover {
    transform: translateY(-1px);
}

.overview-icon-button:hover {
    border-color: #bfcae0;
    background: #f8fafc;
}

.overview-new-button:hover {
    background: #174f9f;
    color: #fff;
}

.invoice-index-page.overview-view .elogo-filter-panel {
    margin: 0 0 .2rem;
    border-top-color: var(--overview-blue);
    border-radius: 8px;
}

.overview-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .82rem;
}

.overview-kpi-card,
.overview-panel,
.overview-mini-card,
.overview-quick-panel {
    border: 1px solid var(--overview-border);
    border-radius: 8px;
    background: var(--overview-surface);
    box-shadow: 0 12px 30px rgba(15, 27, 51, .06);
}

.overview-kpi-card {
    position: relative;
    display: grid;
    min-height: 188px;
    gap: .2rem;
    overflow: hidden;
    padding: 1rem 1rem .8rem;
    color: var(--overview-ink);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.overview-kpi-card:hover {
    transform: translateY(-2px);
    border-color: #c8d4e6;
    box-shadow: 0 16px 36px rgba(15, 27, 51, .1);
}

.overview-kpi-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
}

.overview-kpi-icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: rgba(37, 99, 235, .11);
    color: var(--overview-blue);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .08);
}

.overview-kpi-icon svg { width: 22px; height: 22px; }
.overview-kpi-label { color: #2e3b54; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.overview-kpi-card > strong { margin-top: .38rem; color: #0d1730; font-size: 1.9rem; font-weight: 850; line-height: 1; font-variant-numeric: tabular-nums; }
.overview-kpi-card > small { color: #6d7b91; font-size: .72rem; font-weight: 650; }
.overview-kpi-card > b { color: #17243c; font-size: .82rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.overview-kpi-card > em { justify-self: end; color: #128a48; font-size: .68rem; font-style: normal; font-weight: 750; }
.overview-kpi-card > em.down { color: var(--overview-red); }
.overview-kpi-card.warning .overview-kpi-icon { background: rgba(245, 158, 11, .12); color: var(--overview-amber); }
.overview-kpi-card.success .overview-kpi-icon { background: rgba(22, 163, 74, .12); color: var(--overview-green); }
.overview-kpi-card.danger .overview-kpi-icon { background: rgba(239, 68, 68, .12); color: var(--overview-red); }
.overview-kpi-card.violet .overview-kpi-icon { background: rgba(124, 58, 237, .12); color: var(--overview-violet); }

.overview-sparkline {
    display: flex;
    height: 34px;
    align-items: end;
    gap: .28rem;
    margin-top: .35rem;
}

.overview-sparkline span {
    width: 100%;
    min-width: 5px;
    border-radius: 5px 5px 1px 1px;
    background: currentColor;
    color: var(--overview-blue);
    opacity: .8;
}

.overview-kpi-card.warning .overview-sparkline span { color: var(--overview-amber); }
.overview-kpi-card.success .overview-sparkline span { color: var(--overview-green); }
.overview-kpi-card.danger .overview-sparkline span { color: var(--overview-red); }
.overview-kpi-card.violet .overview-sparkline span { color: var(--overview-violet); }

.overview-main-grid,
.overview-secondary-grid {
    display: grid;
    gap: .82rem;
}

.overview-main-grid {
    grid-template-columns: minmax(380px, 1.35fr) minmax(300px, .95fr) minmax(320px, .95fr);
}

.overview-secondary-grid {
    grid-template-columns: minmax(340px, 1.05fr) minmax(360px, 1.05fr) minmax(320px, .95fr);
}

.overview-panel {
    min-width: 0;
    overflow: hidden;
}

.overview-panel-head {
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    padding: .85rem 1rem .55rem;
}

.overview-panel-head h2,
.overview-quick-panel h2 {
    margin: 0;
    color: var(--overview-ink);
    font-size: .9rem;
    font-weight: 850;
    letter-spacing: 0;
}

.overview-panel-head span,
.overview-panel-head a {
    color: #2563eb;
    font-size: .72rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.overview-panel-head a:hover { text-decoration: underline; }

.overview-line-wrap {
    position: relative;
    padding: .2rem 1rem 1rem;
}

.overview-line-chart {
    display: block;
    width: 100%;
    height: 240px;
    overflow: visible;
}

.overview-line-chart path {
    fill: none;
    stroke: #e6ebf3;
    stroke-width: 1;
}

.overview-line-chart polyline {
    fill: none;
    stroke: var(--overview-blue);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}

.overview-line-chart circle {
    fill: #fff;
    stroke: var(--overview-blue);
    stroke-width: 4;
}

.overview-line-labels {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .4rem;
    margin-top: -.35rem;
}

.overview-line-labels span {
    display: grid;
    gap: .2rem;
    color: #748197;
    font-size: .7rem;
    text-align: center;
}

.overview-line-labels b {
    color: #1a2540;
    font-size: .72rem;
    font-weight: 800;
}

.overview-line-labels small {
    color: #748197;
    font-size: .68rem;
}

.overview-donut-layout {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    padding: .9rem 1rem 1.2rem;
}

.overview-donut {
    display: grid;
    width: 168px;
    height: 168px;
    place-items: center;
    border-radius: 50%;
    background: var(--donut);
}



.overview-donut span,
.overview-donut small {
    grid-area: 1 / 1;
    z-index: 1;
}

.overview-donut span {
    align-self: center;
    margin-top: -.45rem;
    color: #0f1b33;
    font-size: 1.45rem;
    font-weight: 850;
}

.overview-donut small {
    align-self: center;
    margin-top: 2.25rem;
    color: #526077;
    font-size: .78rem;
    font-weight: 650;
}

.overview-donut::after {
    content: '';
    grid-area: 1 / 1;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px #e5ebf4;
}

.overview-donut-legend {
    display: grid;
    gap: .7rem;
}

.overview-donut-legend a {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    align-items: center;
    gap: .58rem;
    color: #1d2a44;
    font-size: .78rem;
    font-weight: 800;
    text-decoration: none;
}

.overview-donut-legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.overview-donut-legend small {
    display: block;
    margin-top: .14rem;
    color: #68768c;
    font-size: .72rem;
    font-weight: 650;
}

.overview-invoice-feed,
.overview-action-feed,
.overview-company-bars {
    display: grid;
    padding: .2rem 1rem 1rem;
}

.overview-feed-row,
.overview-action-row {
    display: grid;
    align-items: center;
    min-width: 0;
    color: var(--overview-ink);
    text-decoration: none;
}

.overview-feed-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: .7rem;
    min-height: 58px;
    border-bottom: 1px solid #edf1f6;
}

.overview-feed-row:last-child,
.overview-action-row:last-child { border-bottom: 0; }

.overview-feed-row:hover,
.overview-action-row:hover { background: #f8fbff; }

.overview-feed-avatar {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 6px;
    background: #2563eb;
    color: #fff;
    font-size: .68rem;
    font-weight: 850;
}

.overview-feed-row:nth-child(2n) .overview-feed-avatar { background: #16a34a; }
.overview-feed-row:nth-child(3n) .overview-feed-avatar { background: #7c3aed; }
.overview-feed-main,
.overview-feed-side { display: grid; min-width: 0; gap: .16rem; }
.overview-feed-main strong,
.overview-action-row strong { overflow: hidden; color: #17243c; font-size: .8rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.overview-feed-main small,
.overview-feed-side small,
.overview-action-row em { overflow: hidden; color: #6d7b91; font-size: .72rem; font-style: normal; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.overview-feed-side { text-align: right; }
.overview-feed-side b { color: #14223b; font-size: .8rem; font-weight: 850; font-variant-numeric: tabular-nums; white-space: nowrap; }

.overview-company-bars {
    gap: .55rem;
}

.overview-company-bar {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(120px, 1.6fr) auto;
    align-items: center;
    gap: .65rem;
    min-height: 28px;
}

.overview-company-bar span,
.overview-company-bar b {
    overflow: hidden;
    color: #22304a;
    font-size: .75rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-company-bar div {
    height: 10px;
    overflow: hidden;
    border-radius: 6px;
    background: #eef2f7;
}

.overview-company-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.overview-action-feed { gap: 0; }
.overview-action-row {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    grid-template-areas: 'icon title time' 'icon note time';
    gap: .12rem .58rem;
    min-height: 58px;
    border-bottom: 1px solid #edf1f6;
}

.overview-action-row > span {
    grid-area: icon;
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 50%;
    background: #e8f1ff;
    color: var(--overview-blue);
}

.overview-action-row > span svg { width: 14px; height: 14px; }
.overview-action-row strong { grid-area: title; }
.overview-action-row strong small { display: block; margin-top: .12rem; color: #536176; font-size: .7rem; font-weight: 700; }
.overview-action-row em { grid-area: note; }
.overview-action-row b { grid-area: time; color: #6f7d92; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.overview-action-row.success > span { background: #dcfce7; color: var(--overview-green); }
.overview-action-row.danger > span { background: #fee2e2; color: var(--overview-red); }
.overview-action-row.warning > span { background: #fef3c7; color: #d97706; }

.overview-mini-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .82rem;
}

.overview-mini-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: .15rem .65rem;
    min-height: 80px;
    padding: .85rem 1rem;
}

.overview-mini-card svg {
    grid-row: 1 / span 3;
    width: 28px;
    height: 28px;
    color: var(--overview-blue);
}

.overview-mini-card span {
    color: #637188;
    font-size: .72rem;
    font-weight: 700;
}

.overview-mini-card strong {
    overflow: hidden;
    color: #10213d;
    font-size: 1.05rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-mini-card small {
    justify-self: end;
    color: #14924e;
    font-size: .7rem;
    font-weight: 750;
    white-space: nowrap;
}

.overview-mini-card.success svg { color: var(--overview-green); }
.overview-mini-card.primary svg { color: var(--overview-blue); }
.overview-mini-card.violet svg { color: var(--overview-violet); }

.overview-quick-panel {
    display: grid;
    gap: .75rem;
    padding: .9rem 1rem 1rem;
}

.overview-quick-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .75rem;
}

.overview-quick-action {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-width: 0;
    padding: .6rem .7rem;
    border: 1px solid #dfe6f1;
    border-radius: 7px;
    background: #fff;
    color: #14223b;
    text-decoration: none;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.overview-quick-action:hover {
    transform: translateY(-1px);
    border-color: #c6d4e7;
    background: #f8fbff;
}

.overview-quick-action span {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 7px;
    background: #edf4ff;
    color: var(--overview-blue);
}

.overview-quick-action svg { width: 18px; height: 18px; }
.overview-quick-action strong { overflow: hidden; font-size: .78rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.overview-empty { padding: 1rem 0; color: #6d7b91; font-size: .8rem; }

@media (max-width: 1380px) {
    .overview-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .overview-main-grid,
    .overview-secondary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .overview-list-panel,
    .overview-log-panel { grid-column: 1 / -1; }
    .overview-quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
    .overview-topbar { align-items: flex-start; flex-direction: column; }
    .overview-toolbar { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
    .overview-search { flex: 1 1 260px; width: auto; }
    .overview-company-form { flex: 0 1 220px; width: auto; }
    .overview-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .invoice-index-page.overview-view .dashboard-container { padding: .85rem .75rem 5.5rem; }
    .overview-kpi-grid,
    .overview-main-grid,
    .overview-secondary-grid,
    .overview-mini-grid { grid-template-columns: 1fr; }
    .overview-donut-layout { grid-template-columns: 1fr; justify-items: center; }
    .overview-donut-legend { width: 100%; }
    .overview-company-bar { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
    .overview-company-bar b { justify-self: start; }
    .overview-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .overview-toolbar { display: grid; grid-template-columns: 1fr auto; }
    .overview-updated,
    .overview-search,
    .overview-company-form,
    .overview-new-button { grid-column: 1 / -1; width: 100%; }
    .overview-new-button { justify-content: center; }
    .overview-kpi-card { min-height: 172px; }
    .overview-feed-row { grid-template-columns: 36px minmax(0, 1fr); }
    .overview-feed-side { grid-column: 2; justify-self: start; text-align: left; }
    .overview-action-row { grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: 'icon title' 'icon note' 'icon time'; }
    .overview-action-row b { justify-self: start; }
    .overview-quick-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .overview-kpi-card,
    .overview-icon-button,
    .overview-new-button,
    .overview-quick-action {
        transition-duration: .01ms;
    }
}
/* ==================== FINANCE ANALYTICS UI REFRESH - ALL PAGES ==================== */
:root {
    --finance-primary: #1e3a5f;
    --finance-primary-2: #2563eb;
    --finance-accent: #059669;
    --finance-warning: #f59e0b;
    --finance-danger: #dc2626;
    --finance-bg: #f8fafc;
    --finance-surface: #ffffff;
    --finance-muted: #f1f5f9;
    --finance-line: #e4e7eb;
    --finance-line-soft: #edf2f7;
    --finance-text: #0f172a;
    --finance-text-2: #475569;
    --finance-text-3: #64748b;
    --finance-shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
    --finance-shadow-sm: 0 8px 22px rgba(15, 23, 42, .07);
    --finance-shadow-md: 0 18px 44px rgba(15, 23, 42, .10);
    --finance-radius: 8px;
    --finance-radius-sm: 6px;
}

html {
    scroll-behavior: smooth;
}

.dashboard-page,
.login-page {
    color: var(--finance-text);
    font-family: "Segoe UI", "Fira Sans", Arial, sans-serif;
    letter-spacing: 0;
}

.dashboard-page {
    min-height: 100vh;
    background:
        linear-gradient(180deg, #f8fbff 0, #f3f7fc 270px, var(--finance-bg) 100%),
        radial-gradient(circle at top right, rgba(37, 99, 235, .10), transparent 340px);
}

.dashboard-page *,
.login-page * {
    letter-spacing: 0;
}

.dashboard-page a,
.dashboard-page button,
.dashboard-page .btn,
.dashboard-page select,
.dashboard-page input[type="checkbox"],
.dashboard-page input[type="radio"],
.dashboard-page [role="button"],
.login-page a,
.login-page button {
    cursor: pointer;
}

.dashboard-page .header {
    min-height: 58px;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    background: rgba(255, 255, 255, .88) !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
    backdrop-filter: blur(16px);
}

.dashboard-page .header-content {
    min-height: 58px;
}

.dashboard-page .header .logo,
.dashboard-page .header .nav-link,
.dashboard-page .header .user-name {
    color: var(--finance-text) !important;
}

.dashboard-page .header .nav-link {
    min-height: 38px;
    border-radius: var(--finance-radius-sm);
    color: var(--finance-text-2) !important;
    font-size: .78rem;
    font-weight: 750;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.dashboard-page .header .nav-link:hover,
.dashboard-page .header .nav-link.active {
    background: #eff6ff !important;
    color: var(--finance-primary-2) !important;
    box-shadow: inset 0 0 0 1px #dbeafe;
}

.dashboard-page .header .btn-outline {
    min-height: 38px;
    border-color: #cbd5e1 !important;
    border-radius: var(--finance-radius-sm);
    background: #fff !important;
    color: var(--finance-primary) !important;
}

.dashboard-page .header .btn-outline:hover {
    border-color: #93c5fd !important;
    color: var(--finance-primary-2) !important;
}

.dashboard-page .erp-sidebar {
    width: var(--erp-sidebar, 230px);
    border-right: 1px solid rgba(255, 255, 255, .08);
    background:
        linear-gradient(180deg, #081424 0%, #0d1b2f 48%, #111827 100%) !important;
    box-shadow: 18px 0 40px rgba(15, 23, 42, .16);
}

.dashboard-page .erp-sidebar-brand,
.dashboard-page .tenant-sidebar-brand {
    min-height: 76px;
    padding: 0 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(135deg, rgba(30, 58, 95, .92), rgba(15, 23, 42, .98)) !important;
}

.dashboard-page .tenant-sidebar-logo {
    width: 40px;
    height: 40px;
    border-radius: var(--finance-radius-sm);
    background: rgba(255, 255, 255, .10);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.dashboard-page .erp-sidebar-brand strong,
.dashboard-page .erp-sidebar-footer strong {
    color: #f8fafc;
    font-size: .82rem;
    font-weight: 800;
}

.dashboard-page .erp-sidebar-brand small,
.dashboard-page .erp-sidebar-footer small {
    color: #94a3b8;
    font-size: .65rem;
    font-weight: 650;
    text-transform: none;
}

.dashboard-page .erp-menu {
    gap: 4px;
    padding: .75rem .65rem;
}

.dashboard-page .erp-menu-item {
    min-height: 44px;
    gap: .72rem;
    padding: .62rem .72rem;
    border-left: 0 !important;
    border-radius: var(--finance-radius);
    color: #cbd5e1;
    font-size: .78rem;
    font-weight: 720;
    transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.dashboard-page .erp-menu-item svg {
    width: 18px;
    height: 18px;
    color: #8aa0bb;
    stroke-width: 1.9;
}

.dashboard-page .erp-menu-item:hover {
    transform: translateX(1px);
    background: rgba(255, 255, 255, .065) !important;
    color: #ffffff;
}

.dashboard-page .erp-menu-item.active {
    background: linear-gradient(90deg, #1457d9 0%, #0e48b7 100%) !important;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(20, 87, 217, .28) !important;
}

.dashboard-page .erp-menu-item.active::after {
    display: none !important;
}

.dashboard-page .erp-menu-item.active svg,
.dashboard-page .erp-menu-item:hover svg {
    color: #93c5fd !important;
}

.dashboard-page .erp-menu-item.active svg {
    color: #ffffff !important;
}

.dashboard-page .erp-menu-item b {
    min-width: 24px;
    padding: .16rem .42rem;
    border-radius: 999px;
    background: #2563eb !important;
    color: #fff;
    font-size: .64rem;
    font-variant-numeric: tabular-nums;
}

.dashboard-page .erp-submenu {
    margin: .15rem 0 .2rem 2.4rem;
}

.dashboard-page .erp-submenu-item {
    border-radius: var(--finance-radius-sm);
    color: #9fb1c8;
    font-size: .72rem;
}

.dashboard-page .erp-submenu-item:hover,
.dashboard-page .erp-submenu-item.active {
    background: rgba(255, 255, 255, .055);
    color: #fff;
}

.dashboard-page .erp-sidebar-settings {
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: rgba(15, 23, 42, .44) !important;
}

.dashboard-page .erp-sidebar-footer,
.dashboard-page .erp-user-trigger {
    background: rgba(8, 20, 36, .72) !important;
}

.dashboard-page .erp-user-avatar,
.dashboard-page .erp-user-popup-avatar {
    background: #2563eb !important;
}

.dashboard-page .erp-user-popup {
    border-color: rgba(148, 163, 184, .22);
    border-radius: var(--finance-radius);
    background: #111827;
}

.dashboard-page .dashboard-container,
.dashboard-page .container {
    max-width: none;
    padding: 1.25rem 1.35rem 1.6rem;
}

.dashboard-page .page-header,
.dashboard-page .corporate-page-header,
.dashboard-page .detail-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.15rem !important;
    padding: .2rem 0 .95rem;
    border-bottom: 1px solid rgba(203, 213, 225, .72);
}

.dashboard-page .page-title,
.dashboard-page .corporate-page-header .page-title,
.dashboard-page .detail-page-header .page-title {
    margin: 0;
    color: var(--finance-text);
    font-size: clamp(1.45rem, 1.1rem + .7vw, 2.05rem);
    font-weight: 850;
    line-height: 1.14;
}

.dashboard-page .corporate-page-header .page-title::before {
    display: none !important;
}

.dashboard-page .page-subtitle,
.dashboard-page .corporate-page-header .page-subtitle {
    margin-top: .38rem;
    color: var(--finance-text-3);
    font-size: .86rem;
    font-weight: 600;
}

.dashboard-page .detail-page-header > div:last-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .55rem;
}

.dashboard-page .table-container,
.dashboard-page .form-card,
.dashboard-page .detail-card,
.dashboard-page .action-panel,
.dashboard-page .report-panel,
.dashboard-page .template-card,
.dashboard-page .template-info-card,
.dashboard-page .company-management-card,
.dashboard-page .logo-json-panel,
.dashboard-page .modal-content,
.dashboard-page .modal,
.dashboard-page .card {
    border: 1px solid var(--finance-line) !important;
    border-radius: var(--finance-radius) !important;
    background: var(--finance-surface) !important;
    box-shadow: var(--finance-shadow-sm) !important;
}

.dashboard-page .table-container,
.dashboard-page .form-card,
.dashboard-page .detail-card,
.dashboard-page .report-panel,
.dashboard-page .company-management-card,
.dashboard-page .logo-json-panel {
    overflow: hidden;
}

.dashboard-page .table-header,
.dashboard-page .detail-card-header,
.dashboard-page .form-card > h2,
.dashboard-page .form-card > h3 {
    border-bottom: 1px solid var(--finance-line-soft);
    background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
    color: var(--finance-text);
}

.dashboard-page .table-header,
.dashboard-page .detail-card-header {
    padding: .9rem 1rem !important;
}

.dashboard-page .table-header h2,
.dashboard-page .detail-card-title,
.dashboard-page .action-panel-title {
    margin: 0;
    color: var(--finance-text);
    font-size: .96rem;
    font-weight: 850;
    line-height: 1.25;
}

.dashboard-page .detail-card-body,
.dashboard-page .form-card {
    padding: 1rem;
}

.dashboard-page .stats-grid,
.dashboard-page .overview-mini-grid {
    gap: .9rem !important;
}

.dashboard-page .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
}

.dashboard-page .stat-card {
    position: relative;
    min-height: 104px;
    overflow: hidden;
    padding: 1rem 1.1rem !important;
    border: 1px solid var(--finance-line) !important;
    border-radius: var(--finance-radius) !important;
    background: #fff !important;
    box-shadow: var(--finance-shadow-xs) !important;
}

.dashboard-page .stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.dashboard-page .stat-card.success::before {
    background: linear-gradient(90deg, #059669, #34d399);
}

.dashboard-page .stat-card.warning::before {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.dashboard-page .stat-card.danger::before {
    background: linear-gradient(90deg, #dc2626, #fb7185);
}

.dashboard-page .stat-card.info::before {
    background: linear-gradient(90deg, #2563eb, #38bdf8);
}

.dashboard-page .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--finance-shadow-md) !important;
}

.dashboard-page .stat-value {
    color: var(--finance-text);
    font-size: clamp(1.45rem, 1rem + .95vw, 2rem);
    font-weight: 850;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.dashboard-page .stat-label,
.dashboard-page .stat-card small {
    color: var(--finance-text-3);
    font-size: .72rem;
    font-weight: 750;
}

.dashboard-page table,
.dashboard-page .dashboard-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.dashboard-page th,
.dashboard-page .dashboard-table th {
    padding: .78rem .85rem !important;
    border-bottom: 1px solid var(--finance-line) !important;
    background: #f5f8fc !important;
    color: #64748b !important;
    font-size: .7rem !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    line-height: 1.25;
    text-transform: uppercase;
}

.dashboard-page td,
.dashboard-page .dashboard-table td {
    padding: .78rem .85rem !important;
    border-bottom: 1px solid var(--finance-line-soft) !important;
    color: #1f2937 !important;
    font-size: .78rem !important;
    line-height: 1.42;
    vertical-align: middle;
}

.dashboard-page tbody tr:last-child td {
    border-bottom: 0 !important;
}

.dashboard-page tbody tr:hover td {
    background: #f8fbff !important;
}

.dashboard-page .dashboard-table .invoice-no,
.dashboard-page .invoice-no,
.dashboard-page .amount,
.dashboard-page .money,
.dashboard-page td[data-label*="Tutar"],
.dashboard-page td[data-label*="Fatura No"] {
    color: var(--finance-text) !important;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.dashboard-page .status-badge,
.dashboard-page .badge,
.dashboard-page .invoice-source-badge {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .24rem .58rem !important;
    border: 1px solid transparent;
    border-radius: 999px !important;
    font-size: .68rem !important;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.dashboard-page .status-badge.success,
.dashboard-page .badge.success {
    border-color: #bbf7d0;
    background: #ecfdf5 !important;
    color: #047857 !important;
}

.dashboard-page .status-badge.warning,
.dashboard-page .badge.warning {
    border-color: #fde68a;
    background: #fffbeb !important;
    color: #b45309 !important;
}

.dashboard-page .status-badge.danger,
.dashboard-page .badge.danger {
    border-color: #fecaca;
    background: #fef2f2 !important;
    color: #b91c1c !important;
}

.dashboard-page .status-badge.info,
.dashboard-page .badge.info {
    border-color: #bfdbfe;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

.dashboard-page .btn,
.login-page .btn,
.dashboard-page button,
.dashboard-page input[type="submit"],
.dashboard-page input[type="button"] {
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: var(--finance-radius-sm) !important;
    font-size: .78rem;
    font-weight: 800;
    transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.dashboard-page .btn:hover,
.login-page .btn:hover,
.dashboard-page button:hover {
    transform: translateY(-1px);
}

.dashboard-page .btn-primary,
.login-page .btn-primary,
.dashboard-page button.btn-primary,
.dashboard-page input[type="submit"] {
    border-color: #2563eb !important;
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .18) !important;
}

.dashboard-page .btn-primary:hover,
.login-page .btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
}

.dashboard-page .btn-secondary,
.dashboard-page .btn-outline {
    border-color: #cbd5e1 !important;
    background: #ffffff !important;
    color: var(--finance-text-2) !important;
    box-shadow: none !important;
}

.dashboard-page .btn-secondary:hover,
.dashboard-page .btn-outline:hover {
    border-color: #93c5fd !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

.dashboard-page .btn-danger {
    border-color: #dc2626 !important;
    background: #dc2626 !important;
    color: #fff !important;
}

.dashboard-page .btn-success {
    border-color: #059669 !important;
    background: #059669 !important;
    color: #fff !important;
}

.dashboard-page .form-group {
    margin-bottom: 1rem;
}

.dashboard-page .form-label,
.dashboard-page label {
    color: #334155;
    font-size: .75rem;
    font-weight: 800;
}

.dashboard-page .form-control,
.dashboard-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.dashboard-page select,
.dashboard-page textarea,
.login-page .form-control,
.login-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    min-height: 42px;
    border: 1px solid #cbd5e1 !important;
    border-radius: var(--finance-radius-sm) !important;
    background: #ffffff !important;
    color: var(--finance-text) !important;
    font-size: .86rem;
    box-shadow: none !important;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.dashboard-page textarea {
    min-height: 96px;
}

.dashboard-page .form-control:focus,
.dashboard-page input:focus,
.dashboard-page select:focus,
.dashboard-page textarea:focus,
.login-page .form-control:focus,
.login-page input:focus {
    border-color: #2563eb !important;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .16) !important;
}

.dashboard-page input[type="checkbox"],
.dashboard-page input[type="radio"] {
    min-width: 18px;
    min-height: 18px;
    accent-color: #2563eb;
}

.dashboard-page .detail-page-header {
    padding-bottom: 1rem;
}

.dashboard-page .detail-card + .detail-card,
.dashboard-page .action-panel + .action-panel {
    margin-top: 1rem !important;
}

.dashboard-page .action-panel {
    padding: 1rem !important;
}

.dashboard-page .decision-panel {
    border-color: #bfdbfe !important;
    box-shadow: 0 16px 38px rgba(37, 99, 235, .12) !important;
}

.dashboard-page .invoice-lines-card .detail-card-header {
    background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
}

.dashboard-page .invoice-lines-card .detail-card-title::before {
    background: #2563eb !important;
}

.dashboard-page .modal-overlay {
    backdrop-filter: blur(10px);
}

.dashboard-page .modal-content,
.dashboard-page .modal {
    overflow: hidden;
}

.dashboard-page .alert,
.dashboard-page .message,
.dashboard-page .toast {
    border-radius: var(--finance-radius) !important;
    border: 1px solid var(--finance-line);
    box-shadow: var(--finance-shadow-xs);
}

.dashboard-page .invoice-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.dashboard-page .invoice-page-link {
    display: inline-flex;
    min-height: 34px;
    min-width: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe3ef;
    border-radius: var(--finance-radius-sm);
    background: #fff;
    color: var(--finance-text-2);
    font-size: .76rem;
    font-weight: 800;
    text-decoration: none;
}

.dashboard-page .invoice-page-link.active {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}

.dashboard-page .invoice-page-link.disabled {
    opacity: .45;
    pointer-events: none;
}

.login-page {
    min-height: 100vh;
    background:
        linear-gradient(135deg, rgba(30, 58, 95, .94), rgba(15, 23, 42, .96)),
        linear-gradient(180deg, #f8fafc, #e2e8f0);
}

.login-page .login-container,
.login-page .login-card {
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--finance-radius) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 24px 70px rgba(2, 6, 23, .34) !important;
}

.login-page .logo,
.login-page h1,
.login-page h2 {
    color: var(--finance-text);
}

.login-page .subtitle,
.login-page p {
    color: var(--finance-text-3);
}

@media (max-width: 1180px) {
    .dashboard-page .dashboard-container,
.dashboard-page .container {
        padding: 1rem 1rem 5.5rem;
    }
}

@media (max-width: 820px) {
    .dashboard-page .page-header,
.dashboard-page .corporate-page-header,
.dashboard-page .detail-page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-page .detail-page-header > div:last-child {
        justify-content: flex-start;
    }

    .dashboard-page .table-container {
        overflow-x: auto;
    }

    .dashboard-page th,
    .dashboard-page .dashboard-table th,
    .dashboard-page td,
    .dashboard-page .dashboard-table td {
        padding: .72rem .75rem !important;
    }

    .dashboard-page .stats-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .dashboard-page *,
    .login-page * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* Finance refresh modal overlay correction for admin pages using .modal as the backdrop. */
.dashboard-page .modal.show {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(15, 23, 42, .58) !important;
    box-shadow: none !important;
    backdrop-filter: blur(10px);
}

.dashboard-page .modal.show .modal-content {
    width: min(560px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    border: 1px solid var(--finance-line) !important;
    border-radius: var(--finance-radius) !important;
    background: #fff !important;
    box-shadow: 0 24px 70px rgba(2, 6, 23, .28) !important;
}
/* Finance refresh admin legacy icon cleanup. */
.dashboard-page .admin-sidebar,
.dashboard-page .admin-content {
    border: 1px solid var(--finance-line) !important;
    border-radius: var(--finance-radius) !important;
    background: #fff !important;
    box-shadow: var(--finance-shadow-sm) !important;
}

.dashboard-page .admin-sidebar {
    padding: 1rem !important;
}

.dashboard-page .sidebar-title {
    color: var(--finance-text-3) !important;
    font-size: .68rem !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
}

.dashboard-page .sidebar-menu a {
    min-height: 42px;
    border-radius: var(--finance-radius-sm) !important;
    color: var(--finance-text-2) !important;
    font-size: .78rem;
    font-weight: 800;
}

.dashboard-page .sidebar-menu a:hover {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

.dashboard-page .sidebar-menu a.active {
    background: linear-gradient(135deg, #2563eb, #1e40af) !important;
    color: #fff !important;
}

.dashboard-page .sidebar-menu .icon {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #cbd5e1;
    font-size: 0;
}

.dashboard-page .sidebar-menu a.active .icon {
    background: #fff;
}

.dashboard-page .upload-area,
.dashboard-page .add-template-card,
.dashboard-page .empty-state {
    border: 1px dashed #cbd5e1 !important;
    border-radius: var(--finance-radius) !important;
    background: #f8fbff !important;
}

.dashboard-page .add-template-card:hover,
.dashboard-page .upload-area:hover {
    border-color: #93c5fd !important;
    background: #eff6ff !important;
}

.dashboard-page .upload-icon,
.dashboard-page .empty-state-icon,
.dashboard-page .add-template-icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    margin: 0 auto .65rem;
    border-radius: var(--finance-radius);
    background: #eff6ff;
    color: #2563eb;
    font-size: 0 !important;
    font-weight: 850;
}

.dashboard-page .add-template-icon::before {
    content: "+";
    font-size: 1.45rem;
    line-height: 1;
}

.dashboard-page .upload-icon::before {
    content: "CSV";
    font-size: .78rem;
    letter-spacing: 0;
}

.dashboard-page .empty-state-icon::before {
    content: "";
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 5px;
    box-shadow: inset 0 -5px 0 rgba(37, 99, 235, .16);
}

.dashboard-page .action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.dashboard-page .btn-sm,
.dashboard-page .btn-action,
.dashboard-page .btn-icon {
    width: auto !important;
    min-width: 34px;
    min-height: 32px;
    height: auto !important;
    padding: .35rem .58rem !important;
    border-radius: var(--finance-radius-sm) !important;
    font-size: .72rem !important;
    font-weight: 850 !important;
    line-height: 1.2;
}

.dashboard-page .btn-action {
    border: 1px solid #cbd5e1 !important;
    background: #fff !important;
    color: var(--finance-text-2) !important;
}

.dashboard-page .btn-action:hover {
    border-color: #93c5fd !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

.dashboard-page .btn-action.delete:hover {
    border-color: #fecaca !important;
    background: #fef2f2 !important;
    color: #b91c1c !important;
}
/* ==================== OVERVIEW APPROVER PERFORMANCE PANEL ==================== */
.overview-line-labels em {
    overflow: hidden;
    color: #2563eb;
    font-size: .68rem;
    font-style: normal;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-approver-list {
    display: grid;
    gap: .55rem;
    padding: .2rem 1rem 1rem;
}

.overview-approver-total {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .7rem;
    min-height: 42px;
    padding: .55rem .72rem;
    border: 1px solid #dbeafe;
    border-radius: 7px;
    background: #eff6ff;
}

.overview-approver-total span {
    color: #475569;
    font-size: .72rem;
    font-weight: 800;
}

.overview-approver-total strong,
.overview-approver-total b {
    color: #0f172a;
    font-size: .78rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.overview-approver-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas:
        "avatar main money"
        "avatar bars bars";
    align-items: center;
    gap: .32rem .65rem;
    min-height: 58px;
    padding: .45rem 0;
    border-bottom: 1px solid #edf1f6;
    color: var(--overview-ink);
    text-decoration: none;
}

.overview-approver-row:last-child {
    border-bottom: 0;
}

.overview-approver-row:hover {
    background: #f8fbff;
}

.overview-approver-avatar {
    grid-area: avatar;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 7px;
    background: #2563eb;
    color: #fff;
    font-size: .66rem;
    font-weight: 900;
}

.overview-approver-row:nth-child(2n) .overview-approver-avatar { background: #16a34a; }
.overview-approver-row:nth-child(3n) .overview-approver-avatar { background: #7c3aed; }
.overview-approver-row:nth-child(4n) .overview-approver-avatar { background: #f59e0b; }

.overview-approver-main {
    grid-area: main;
    display: grid;
    min-width: 0;
    gap: .12rem;
}

.overview-approver-main strong {
    overflow: hidden;
    color: #17243c;
    font-size: .8rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-approver-main small,
.overview-approver-money small {
    overflow: hidden;
    color: #64748b;
    font-size: .7rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-approver-money {
    grid-area: money;
    display: grid;
    gap: .12rem;
    justify-items: end;
    min-width: 88px;
}

.overview-approver-money b {
    color: #0f172a;
    font-size: .78rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.overview-approver-bars {
    grid-area: bars;
    display: grid;
    gap: .22rem;
}

.overview-approver-bars i {
    display: block;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, #22c55e, #86efac);
}

.overview-approver-bars i.amount {
    height: 4px;
    background: linear-gradient(90deg, #2563eb, #93c5fd);
}

@media (max-width: 560px) {
    .overview-line-labels {
        grid-template-columns: repeat(3, minmax(72px, 1fr));
        overflow-x: auto;
    }

    .overview-approver-total,
    .overview-approver-row {
        grid-template-columns: 32px minmax(0, 1fr);
        grid-template-areas:
            "avatar main"
            "avatar money"
            "avatar bars";
    }

    .overview-approver-total {
        display: grid;
        grid-template-areas: none;
        grid-template-columns: 1fr;
        align-items: start;
    }

    .overview-approver-money {
        justify-items: start;
    }
}
/* ==================== REFERENCE FOM DASHBOARD REDESIGN ==================== */
.invoice-index-page {
    --ref-sidebar: 240px;
    --ref-bg: #f4f7fb;
    --ref-card: #ffffff;
    --ref-ink: #071936;
    --ref-muted: #66748c;
    --ref-line: #dce5f1;
    --ref-line-soft: #edf2f8;
    --ref-blue: #1457d9;
    --ref-blue-2: #1f6bff;
    --ref-navy: #061a33;
    --ref-navy-2: #08284d;
    --ref-green: #16b56f;
    --ref-orange: #ff9700;
    --ref-red: #ef334d;
    --ref-purple: #8b5cf6;
    --ref-cyan: #06b6d4;
    --ref-shadow: 0 10px 30px rgba(15, 35, 65, .08);
    --ref-shadow-soft: 0 6px 18px rgba(15, 35, 65, .06);
    min-height: 100vh;
    background: var(--ref-bg) !important;
    color: var(--ref-ink);
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 0;
}

.invoice-index-page .dashboard-container,
.invoice-index-page.dashboard-page .dashboard-container,
.invoice-index-page.dashboard-page .container {
    width: calc(100% - var(--ref-sidebar));
    max-width: none !important;
    margin-left: var(--ref-sidebar) !important;
    padding: 22px 28px 26px !important;
}

.invoice-index-page .erp-sidebar {
    width: var(--ref-sidebar) !important;
    background: linear-gradient(180deg, #06192f 0%, #082443 56%, #061728 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: 18px 0 40px rgba(6, 25, 47, .20) !important;
}

.invoice-index-page .erp-sidebar-brand,
.invoice-index-page .tenant-sidebar-brand {
    min-height: 96px !important;
    gap: 12px !important;
    padding: 20px 18px !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
}

.invoice-index-page .tenant-sidebar-logo {
    width: 44px !important;
    height: 44px !important;
    border-radius: 7px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.invoice-index-page .erp-sidebar-brand strong {
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1.18 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

.invoice-index-page .erp-sidebar-brand small {
    display: none !important;
}

.invoice-index-page .erp-menu {
    gap: 6px !important;
    padding: 14px 12px !important;
}

.invoice-index-page .erp-menu-item {
    min-height: 45px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    color: #e7f0ff !important;
    font-size: 13px !important;
    font-weight: 780 !important;
    text-decoration: none !important;
}

.invoice-index-page .erp-menu-item svg {
    width: 19px !important;
    height: 19px !important;
    color: #b7c9e6 !important;
}

.invoice-index-page .erp-menu-item:hover {
    background: rgba(255, 255, 255, .075) !important;
    color: #fff !important;
    transform: none !important;
}

.invoice-index-page .erp-menu-item.active {
    background: linear-gradient(90deg, #1457d9 0%, #0e48b7 100%) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(20, 87, 217, .28) !important;
}

.invoice-index-page .erp-menu-item.active svg {
    color: #fff !important;
}

.dashboard-page .erp-menu-item b {
    min-width: 32px !important;
    height: 24px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    background: #ef334d !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 24px !important;
}

.dashboard-page .erp-menu-item[href*="atama_bekleyen"] b { background: #ef334d !important; }
.dashboard-page .erp-menu-item[href*="onay_bekliyor"] b { background: #ff9700 !important; }
.dashboard-page .erp-menu-item[href*="onaylandi"] b { background: #16b56f !important; }
.dashboard-page .erp-menu-item[href*="logo_gonderildi"] b { background: #1457d9 !important; }
.dashboard-page .erp-menu-item[href*="reddedildi"] b { background: #ef334d !important; }

.invoice-index-page .erp-sidebar-settings {
    padding: 10px 12px 14px !important;
    border-top: 1px solid rgba(255, 255, 255, .10) !important;
    background: transparent !important;
}

.invoice-index-page .erp-sidebar-footer,
.invoice-index-page .erp-user-trigger {
    min-height: 58px !important;
    margin-top: 10px !important;
    border-radius: 10px !important;
    background: rgba(4, 18, 35, .48) !important;
}

.invoice-index-page .erp-user-avatar,
.invoice-index-page .erp-user-popup-avatar {
    background: #1457d9 !important;
}

.invoice-index-page .overview-console {
    display: grid;
    gap: 14px;
    max-width: none !important;
    margin: 0 !important;
}

.invoice-index-page .overview-topbar,
.invoice-index-page .list-page-topbar {
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) auto;
    align-items: start !important;
    gap: 18px !important;
    min-height: 72px;
    margin: -22px -28px 18px !important;
    padding: 20px 28px 16px !important;
    border-bottom: 1px solid var(--ref-line) !important;
    background: #fff !important;
    box-shadow: 0 1px 0 rgba(7, 25, 54, .03) !important;
}

.invoice-index-page .overview-title-group h1,
.invoice-index-page .list-page-title-group .page-title {
    margin: 0 !important;
    color: var(--ref-ink) !important;
    font-size: 28px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

.invoice-index-page .overview-title-group p,
.invoice-index-page .list-page-title-group .page-subtitle {
    margin: 7px 0 0 !important;
    color: #52627c !important;
    font-size: 14px !important;
    font-weight: 650 !important;
}

.invoice-index-page .list-back-link {
    display: inline-flex !important;
    margin-bottom: 6px !important;
    color: #1457d9 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    text-decoration: none !important;
}

.invoice-index-page .overview-toolbar,
.invoice-index-page .list-page-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

.invoice-index-page .overview-updated {
    display: grid !important;
    grid-template-columns: 22px auto;
    grid-template-areas: "icon label" "icon value";
    align-items: center !important;
    min-width: 136px;
    color: #213453 !important;
    font-size: 12px !important;
    font-weight: 760 !important;
}

.invoice-index-page .overview-updated svg {
    grid-area: icon;
    width: 22px;
    height: 22px;
    color: #8ca0bc;
}

.invoice-index-page .overview-updated span { grid-area: label; color: #7a8ba5; line-height: 1.1; }
.invoice-index-page .overview-updated strong { grid-area: value; color: var(--ref-ink); line-height: 1.12; }

.invoice-index-page .overview-search,
.invoice-index-page .overview-company-form {
    height: 44px !important;
    border: 1px solid #d7e1ef !important;
    border-radius: 7px !important;
    background: #fff !important;
    box-shadow: none !important;
}

.invoice-index-page .overview-search {
    display: flex !important;
    align-items: center;
    gap: 9px;
    width: 260px;
    padding: 0 12px !important;
}

.invoice-index-page .overview-search svg {
    width: 18px;
    height: 18px;
    color: #8091ac;
}

.invoice-index-page .overview-search input,
.invoice-index-page .overview-company-form select {
    min-height: 0 !important;
    height: 100% !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ref-ink) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    outline: none !important;
    box-shadow: none !important;
}

.invoice-index-page .overview-company-form {
    min-width: 190px;
    padding: 0 10px !important;
}

.invoice-index-page .overview-icon-button,
.invoice-index-page .overview-new-button,
.invoice-index-page .list-action-button,
.invoice-index-page .list-apply-button {
    height: 44px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.invoice-index-page .overview-icon-button {
    width: 44px !important;
    border: 1px solid #d7e1ef !important;
    background: #fff !important;
    color: #173257 !important;
}

.invoice-index-page .overview-new-button,
.invoice-index-page .list-apply-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 18px !important;
    border: 1px solid #0f48c6 !important;
    background: linear-gradient(180deg, #1d62e8 0%, #0f48c6 100%) !important;
    color: #fff !important;
    box-shadow: 0 10px 20px rgba(20, 87, 217, .22) !important;
    text-decoration: none !important;
}

.invoice-index-page .overview-new-button svg,
.invoice-index-page .list-action-button svg,
.invoice-index-page .list-apply-button svg {
    width: 17px;
    height: 17px;
}

.invoice-index-page .overview-kpi-grid,
.invoice-index-page .list-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 0 0 12px !important;
}

.invoice-index-page .overview-kpi-card,
.invoice-index-page .list-kpi-card,
.invoice-index-page .overview-mini-card,
.invoice-index-page .overview-panel,
.invoice-index-page .overview-quick-panel,
.invoice-index-page .table-container {
    border: 1px solid var(--ref-line) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: var(--ref-shadow-soft) !important;
}

.invoice-index-page .overview-kpi-card,
.invoice-index-page .list-kpi-card {
    position: relative;
    display: grid !important;
    min-height: 174px !important;
    padding: 22px 18px 16px !important;
    overflow: hidden;
    color: var(--ref-ink) !important;
    text-decoration: none !important;
}

.invoice-index-page .overview-kpi-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.invoice-index-page .overview-kpi-card.warning::after,
.invoice-index-page .list-kpi-card.warning::after { box-shadow: inset 0 0 0 1px rgba(255,151,0,.10); }
.invoice-index-page .overview-kpi-card.success::after,
.invoice-index-page .list-kpi-card.success::after { box-shadow: inset 0 0 0 1px rgba(22,181,111,.10); }
.invoice-index-page .overview-kpi-card.danger::after,
.invoice-index-page .list-kpi-card.danger::after { box-shadow: inset 0 0 0 1px rgba(239,51,77,.10); }

.invoice-index-page .overview-kpi-head {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center !important;
    gap: 14px !important;
}

.invoice-index-page .overview-kpi-icon,
.invoice-index-page .list-kpi-icon,
.invoice-index-page .overview-mini-card > svg {
    display: grid !important;
    width: 46px !important;
    height: 46px !important;
    place-items: center !important;
    border-radius: 50% !important;
    color: #fff !important;
    box-shadow: 0 12px 24px rgba(20, 87, 217, .20) !important;
}

.invoice-index-page .overview-kpi-icon svg,
.invoice-index-page .list-kpi-icon svg {
    width: 25px !important;
    height: 25px !important;
}

.invoice-index-page .overview-kpi-card.warning .overview-kpi-icon,
.invoice-index-page .list-kpi-card.warning .list-kpi-icon { background: linear-gradient(135deg, #ffb13b, #ff8a00) !important; }
.invoice-index-page .overview-kpi-card.success .overview-kpi-icon,
.invoice-index-page .list-kpi-card.success .list-kpi-icon { background: linear-gradient(135deg, #45d58b, #10a65e) !important; }
.invoice-index-page .overview-kpi-card.danger .overview-kpi-icon,
.invoice-index-page .list-kpi-card.danger .list-kpi-icon { background: linear-gradient(135deg, #ff6b76, #ef334d) !important; }
.invoice-index-page .overview-kpi-card.primary .overview-kpi-icon,
.invoice-index-page .list-kpi-card.primary .list-kpi-icon { background: linear-gradient(135deg, #4b86f6, #1457d9) !important; }
.invoice-index-page .overview-kpi-card.violet .overview-kpi-icon,
.invoice-index-page .list-kpi-card.violet .list-kpi-icon { background: linear-gradient(135deg, #a783ff, #7c3aed) !important; }
.invoice-index-page .list-kpi-card.cyan .list-kpi-icon { background: linear-gradient(135deg, #20d6ee, #06a7d3) !important; }

.invoice-index-page .overview-kpi-label,
.invoice-index-page .list-kpi-content > span {
    color: #25395d !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.invoice-index-page .overview-kpi-card strong,
.invoice-index-page .list-kpi-card strong {
    margin-top: 10px !important;
    color: var(--ref-ink) !important;
    font-size: 29px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    font-variant-numeric: tabular-nums;
}

.invoice-index-page .list-kpi-card strong {
    font-size: 24px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-index-page .overview-kpi-card small,
.invoice-index-page .list-kpi-card small {
    margin-top: 8px !important;
    color: #60708a !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

.invoice-index-page .overview-kpi-card b,
.invoice-index-page .list-kpi-card b {
    color: var(--ref-ink) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    font-variant-numeric: tabular-nums;
}

.invoice-index-page .overview-sparkline {
    align-items: end !important;
    height: 36px !important;
    margin-top: 10px !important;
    gap: 6px !important;
}

.invoice-index-page .overview-sparkline span {
    width: 100% !important;
    min-height: 4px !important;
    border-radius: 4px 4px 0 0 !important;
}

.invoice-index-page .overview-kpi-card.warning .overview-sparkline span { background: #ff9700 !important; }
.invoice-index-page .overview-kpi-card.success .overview-sparkline span { background: #16b56f !important; }
.invoice-index-page .overview-kpi-card.danger .overview-sparkline span { background: #ef334d !important; }
.invoice-index-page .overview-kpi-card.primary .overview-sparkline span { background: #1f6bff !important; }
.invoice-index-page .overview-kpi-card.violet .overview-sparkline span { background: #8b5cf6 !important; }

.invoice-index-page .overview-kpi-card em {
    justify-self: end;
    color: var(--ref-green) !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 900 !important;
}

.invoice-index-page .overview-kpi-card em.down { color: var(--ref-red) !important; }

.invoice-index-page .overview-mini-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: -2px 0 0 !important;
}

.invoice-index-page .overview-mini-card {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-areas: "icon label" "icon value" "icon sub";
    align-items: center;
    min-height: 86px !important;
    padding: 16px 18px !important;
}

.invoice-index-page .overview-mini-card > svg { grid-area: icon; padding: 11px; background: #eaf2ff !important; color: #1457d9 !important; box-shadow: none !important; }
.invoice-index-page .overview-mini-card.success > svg { background: #e9fbf2 !important; color: #16b56f !important; }
.invoice-index-page .overview-mini-card.violet > svg { background: #f3efff !important; color: #8b5cf6 !important; }
.invoice-index-page .overview-mini-card span { grid-area: label; color: #66748c !important; font-size: 12px !important; font-weight: 800 !important; }
.invoice-index-page .overview-mini-card strong { grid-area: value; color: var(--ref-ink) !important; font-size: 20px !important; font-weight: 950 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invoice-index-page .overview-mini-card small { grid-area: sub; color: var(--ref-green) !important; font-size: 12px !important; font-weight: 850 !important; }

.invoice-index-page .overview-main-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .76fr) minmax(330px, .92fr) !important;
    gap: 14px !important;
}

.invoice-index-page .overview-secondary-grid {
    display: grid !important;
    grid-template-columns: minmax(330px, .95fr) minmax(360px, 1.05fr) minmax(340px, .95fr) !important;
    gap: 14px !important;
}

.invoice-index-page .overview-panel {
    overflow: hidden !important;
}

.invoice-index-page .overview-panel-head {
    min-height: 42px !important;
    padding: 16px 18px 10px !important;
    border-bottom: 0 !important;
    background: #fff !important;
}

.invoice-index-page .overview-panel-head h2,
.invoice-index-page .overview-quick-panel h2 {
    color: var(--ref-ink) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

.invoice-index-page .overview-line-wrap,
.invoice-index-page .overview-donut-layout,
.invoice-index-page .overview-company-bars,
.invoice-index-page .overview-action-feed {
    padding: 0 18px 18px !important;
}

.invoice-index-page .overview-line-chart polyline {
    stroke: #1f6bff !important;
    stroke-width: 4 !important;
}

.invoice-index-page .overview-line-chart circle {
    fill: #fff !important;
    stroke: #1f6bff !important;
    stroke-width: 4 !important;
}

.invoice-index-page .overview-donut {
    background: var(--donut) !important;
}

.invoice-index-page .overview-quick-panel {
    padding: 16px 18px !important;
}

.invoice-index-page .overview-quick-grid {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(120px, 1fr)) !important;
    gap: 12px !important;
}

.invoice-index-page .overview-quick-action {
    min-height: 70px !important;
    border: 1px solid #dce5f1 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--ref-ink) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.invoice-index-page.list-view .report-grid,
.invoice-index-page.list-view .tab-strip {
    display: none !important;
}

.invoice-index-page .list-kpi-card {
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    min-height: 138px !important;
}

.invoice-index-page .list-kpi-content {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.invoice-index-page .reference-filterbar {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.invoice-index-page .reference-filter-field,
.invoice-index-page .reference-date-trigger {
    min-width: 190px;
    height: 44px !important;
    border: 1px solid #d7e1ef !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: var(--ref-ink) !important;
    box-shadow: var(--ref-shadow-soft) !important;
}

.invoice-index-page .reference-filter-field.small { min-width: 150px; }
.invoice-index-page .reference-filter-spacer { flex: 1 1 auto; }

.invoice-index-page .reference-filter-field select,
.invoice-index-page .reference-filter-field .form-control {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ref-ink) !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    box-shadow: none !important;
}

.invoice-index-page .reference-date-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 780 !important;
}

.invoice-index-page .list-action-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 14px !important;
    border: 1px solid #d7e1ef !important;
    background: #fff !important;
    color: var(--ref-ink) !important;
    box-shadow: var(--ref-shadow-soft) !important;
    white-space: nowrap;
}

.invoice-index-page .table-container {
    overflow: hidden !important;
    margin-top: 0 !important;
}

.invoice-index-page .table-header {
    min-height: 0 !important;
    padding: 16px 18px !important;
    border-bottom: 1px solid var(--ref-line-soft) !important;
    background: #fff !important;
}

.invoice-index-page .table-title {
    color: var(--ref-ink) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

.invoice-index-page .reference-invoice-table {
    width: 100% !important;
    min-width: 1320px;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.invoice-index-page .reference-invoice-table th {
    height: 48px !important;
    padding: 0 14px !important;
    border-bottom: 1px solid var(--ref-line) !important;
    background: #f6f9fd !important;
    color: #657590 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

.invoice-index-page .reference-invoice-table td {
    height: 58px !important;
    padding: 0 14px !important;
    border-bottom: 1px solid var(--ref-line-soft) !important;
    background: #fff !important;
    color: #12213c !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    vertical-align: middle !important;
}

.invoice-index-page .reference-invoice-table tbody tr:hover td {
    background: #f8fbff !important;
}

.invoice-index-page .invoice-select-column,
.invoice-index-page .invoice-select-cell {
    width: 44px !important;
    text-align: center !important;
}

.invoice-index-page .invoice-company-cell {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 135px;
}

.invoice-index-page .company-chip-badge,
.invoice-index-page .approver-cell span {
    display: inline-grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    border-radius: 7px;
    background: linear-gradient(135deg, #1f6bff, #1457d9);
    color: #fff;
    font-size: 10px;
    font-weight: 950;
}

.invoice-index-page .reference-invoice-table tbody tr:nth-child(3n) .company-chip-badge { background: linear-gradient(135deg, #21c274, #0ea565); }
.invoice-index-page .reference-invoice-table tbody tr:nth-child(4n) .company-chip-badge { background: linear-gradient(135deg, #9b5cff, #7138d6); }
.invoice-index-page .reference-invoice-table tbody tr:nth-child(5n) .company-chip-badge { background: linear-gradient(135deg, #ff9b4a, #f97316); }

.invoice-index-page .invoice-company-cell strong,
.invoice-index-page .invoice-no-link {
    color: #071936 !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

.invoice-index-page .invoice-number-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 175px;
}

.invoice-index-page .invoice-icon-button,
.invoice-index-page .invoice-copy-button,
.invoice-index-page .invoice-menu-button {
    display: inline-grid !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    place-items: center !important;
    border: 1px solid #dce5f1 !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: #6f809a !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.invoice-index-page .invoice-icon-button svg,
.invoice-index-page .invoice-copy-button svg {
    width: 15px;
    height: 15px;
}

.invoice-index-page .invoice-supplier-cell {
    min-width: 260px;
    max-width: 360px;
    color: #273a5c !important;
}

.invoice-index-page .invoice-date-cell,
.invoice-index-page .muted-cell {
    color: #30415f !important;
    font-weight: 760 !important;
}

.invoice-index-page .amount {
    color: var(--ref-ink) !important;
    font-weight: 950 !important;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.invoice-index-page .wait-cell {
    color: #ef334d !important;
    font-weight: 950 !important;
    white-space: nowrap;
}

.invoice-index-page .due-pill {
    display: inline-flex;
    margin-left: 6px;
    color: #16a765;
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}

.invoice-index-page .due-pill.warning { color: #ff9700; }
.invoice-index-page .due-pill.danger { color: #ef334d; }
.invoice-index-page .due-pill.neutral { color: #8a98ad; }

.invoice-index-page .approver-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 145px;
    white-space: nowrap;
}

.invoice-index-page .approver-cell span {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    background: #eef2ff;
    color: #6d3eea;
}

.invoice-index-page .status-badge.success,
.invoice-index-page .status-badge.status-approved {
    border-color: #bdebd3 !important;
    background: #e9fbf2 !important;
    color: #08945a !important;
}

.invoice-index-page .status-badge.warning,
.invoice-index-page .status-badge.status-waiting,
.invoice-index-page .status-badge.status-pending {
    border-color: #ffe0a3 !important;
    background: #fff4df !important;
    color: #c46b00 !important;
}

.invoice-index-page .status-badge.danger,
.invoice-index-page .status-badge.status-rejected {
    border-color: #ffc7cf !important;
    background: #fff0f2 !important;
    color: #d72f46 !important;
}

.invoice-index-page .success-text,
.invoice-index-page .muted-cell small {
    display: block;
    margin-top: 3px;
    color: #16a765 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

.invoice-index-page .quick-assign-select {
    min-width: 140px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.invoice-index-page .invoice-list-footer {
    min-height: 70px;
    padding: 18px 24px !important;
    border-top: 1px solid var(--ref-line-soft);
    background: #fff;
}

.invoice-index-page .invoice-page-link {
    min-width: 34px !important;
    height: 34px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
}

.invoice-index-page .invoice-page-link.active {
    background: #1457d9 !important;
    color: #fff !important;
}

.invoice-index-page .invoice-date-filter-panel {
    right: 28px !important;
    top: 84px !important;
    width: min(980px, calc(100vw - var(--ref-sidebar) - 56px)) !important;
    border-radius: 8px !important;
    border: 1px solid #d7e1ef !important;
    background: #fff !important;
    box-shadow: 0 20px 50px rgba(7, 25, 54, .14) !important;
}

@media (max-width: 1480px) {
    .invoice-index-page .overview-kpi-grid,
    .invoice-index-page .list-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .invoice-index-page .overview-main-grid,
    .invoice-index-page .overview-secondary-grid { grid-template-columns: 1fr 1fr !important; }
    .invoice-index-page .overview-list-panel,
    .invoice-index-page .overview-log-panel { grid-column: span 2; }
    .invoice-index-page .overview-quick-grid { grid-template-columns: repeat(4, minmax(130px, 1fr)) !important; }
}

@media (max-width: 1020px) {
    .invoice-index-page .dashboard-container,
    .invoice-index-page.dashboard-page .dashboard-container,
    .invoice-index-page.dashboard-page .container {
        width: 100%;
        margin-left: 0 !important;
        padding: 16px 14px 84px !important;
    }
    .invoice-index-page .erp-sidebar { display: none !important; }
    .invoice-index-page .overview-topbar,
    .invoice-index-page .list-page-topbar {
        grid-template-columns: 1fr !important;
        margin: -16px -14px 14px !important;
        padding: 16px 14px !important;
    }
    .invoice-index-page .overview-toolbar,
    .invoice-index-page .list-page-actions,
    .invoice-index-page .reference-filterbar { flex-wrap: wrap !important; justify-content: flex-start !important; }
    .invoice-index-page .overview-search { width: min(100%, 320px); }
    .invoice-index-page .overview-kpi-grid,
    .invoice-index-page .list-kpi-grid,
    .invoice-index-page .overview-mini-grid,
    .invoice-index-page .overview-main-grid,
    .invoice-index-page .overview-secondary-grid { grid-template-columns: 1fr !important; }
    .invoice-index-page .overview-list-panel,
    .invoice-index-page .overview-log-panel { grid-column: auto; }
    .invoice-index-page .table-container { overflow-x: auto !important; }
}
/* ==================== REFERENCE TABLE ALIGNMENT FIX ==================== */
.invoice-index-page .reference-date-trigger svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
}

.invoice-index-page .table-container {
    overflow-x: auto !important;
    overflow-y: visible !important;
}

.invoice-index-page .reference-invoice-table {
    table-layout: fixed !important;
    min-width: 1500px !important;
}

.invoice-index-page .reference-invoice-table td.invoice-company-cell,
.invoice-index-page .reference-invoice-table td.invoice-number-cell,
.invoice-index-page .reference-invoice-table td.approver-cell {
    display: table-cell !important;
    align-items: normal !important;
    gap: 0 !important;
    vertical-align: middle !important;
}

.invoice-index-page .reference-invoice-table td.invoice-company-cell,
.invoice-index-page .reference-invoice-table td.invoice-number-cell,
.invoice-index-page .reference-invoice-table td.invoice-date-cell,
.invoice-index-page .reference-invoice-table td.wait-cell,
.invoice-index-page .reference-invoice-table td.invoice-menu-cell {
    white-space: nowrap !important;
}

.invoice-index-page .reference-invoice-table td.invoice-supplier-cell {
    white-space: normal !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
}

.invoice-index-page .reference-invoice-table .company-chip-badge,
.invoice-index-page .reference-invoice-table .approver-cell span,
.invoice-index-page .reference-invoice-table .invoice-icon-button,
.invoice-index-page .reference-invoice-table .invoice-copy-button,
.invoice-index-page .reference-invoice-table .invoice-menu-button,
.invoice-index-page .reference-invoice-table .invoice-no-link,
.invoice-index-page .reference-invoice-table .invoice-company-cell strong {
    vertical-align: middle !important;
}

.invoice-index-page .reference-invoice-table .company-chip-badge,
.invoice-index-page .reference-invoice-table .approver-cell span {
    display: inline-grid !important;
    margin-right: 8px !important;
}

.invoice-index-page .reference-invoice-table .invoice-company-cell strong,
.invoice-index-page .reference-invoice-table .invoice-no-link {
    display: inline-block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.invoice-index-page .reference-invoice-table .invoice-company-cell strong {
    max-width: 104px !important;
}

.invoice-index-page .reference-invoice-table .invoice-no-link {
    max-width: 132px !important;
}

.invoice-index-page .reference-invoice-table .invoice-icon-button,
.invoice-index-page .reference-invoice-table .invoice-copy-button {
    margin-right: 6px !important;
}

.invoice-index-page .reference-invoice-table .invoice-menu-button {
    margin: 0 auto !important;
}

.invoice-index-page .reference-invoice-table .quick-assign-select {
    width: 138px !important;
}

/* Grup kapsamı filtresi ve CFO durumu */
.group-scope-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-inline: auto 12px;
    padding: 4px;
    border: 1px solid #dbe3ee;
    border-radius: 10px;
    background: #f8fafc;
    white-space: nowrap;
}
.group-scope-label {
    padding: 0 8px;
    color: #475569;
    font-size: .72rem;
    font-weight: 700;
}
.group-scope-button {
    display: inline-flex;
    min-width: 96px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #334155;
    font-size: .78rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.group-scope-button:hover {
    border-color: #94a3b8;
    background: #fff;
    color: #0f172a;
}
.group-scope-button.active {
    border-color: #1e3a5f;
    background: #1e3a5f;
    color: #fff;
    box-shadow: 0 3px 10px rgba(30, 58, 95, .18);
}
.group-scope-button:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .32);
    outline-offset: 2px;
}
.status-badge.status-cfo-waiting {
    border-color: #c4b5fd;
    background: #f5f3ff;
    color: #5b21b6;
}
@media (max-width: 1180px) {
    .group-scope-toggle {
        order: 3;
        width: 100%;
        margin: 8px 0 0;
    }
}
@media (max-width: 520px) {
    .group-scope-label { display: none; }
    .group-scope-button { min-width: 0; flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .group-scope-button { transition: none; }
}
/* Manuel e-Arşiv aktarımı */
.import-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, .7fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 20px;
}
.import-card {
    border: 1px solid #dbe3ee;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .05);
    padding: 24px;
}
.import-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.import-card h2 { margin: 0 0 6px; color: #0f172a; font-size: 1rem; }
.import-card p { margin: 0; color: #64748b; font-size: .82rem; line-height: 1.55; }
.import-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.import-form-grid .full-width { grid-column: 1 / -1; }
.import-form-grid small { display: block; margin-top: 6px; color: #64748b; line-height: 1.4; }
.import-file-input { min-height: 46px; padding: 8px; }
.import-file-input::file-selector-button {
    min-height: 30px;
    margin-right: 10px;
    border: 0;
    border-radius: 6px;
    background: #eaf0f7;
    color: #1e3a5f;
    font-weight: 700;
    cursor: pointer;
}
.import-rules {
    display: grid;
    gap: 6px;
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
    color: #1e3a5f;
    font-size: .8rem;
}
.import-rules code { width: fit-content; padding: 5px 8px; border-radius: 6px; background: #fff; color: #0f172a; }
.import-submit { min-height: 46px; }
.import-submit:disabled { cursor: wait; opacity: .58; }
.import-guide ol { display: grid; gap: 0; margin: 14px 0 0; padding: 0; list-style: none; }
.import-guide li { display: grid; gap: 3px; padding: 11px 0; border-bottom: 1px solid #eef2f7; }
.import-guide li:last-child { border-bottom: 0; }
.import-guide li strong { color: #1e293b; font-size: .82rem; }
.import-guide li span { color: #64748b; font-size: .74rem; }
.import-result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.import-result-card { display: flex; min-height: 86px; align-items: center; justify-content: space-between; padding: 16px 20px; border: 1px solid #dbe3ee; border-radius: 10px; background: #fff; }
.import-result-card span { color: #64748b; font-size: .78rem; font-weight: 700; }
.import-result-card strong { font-size: 1.5rem; }
.import-result-card.success strong { color: #047857; }
.import-result-card.warning strong { color: #b45309; }
.import-result-card.danger strong { color: #b91c1c; }
.import-message-details { margin: 0 0 16px; border: 1px solid #fed7aa; border-radius: 10px; background: #fff7ed; padding: 12px 16px; }
.import-message-details summary { min-height: 32px; color: #9a3412; font-weight: 800; cursor: pointer; }
.import-message-details ul { max-height: 260px; overflow: auto; margin: 8px 0 0; padding-left: 20px; color: #7c2d12; font-size: .8rem; }
.import-recent-table { margin-top: 20px; }
@media (max-width: 980px) {
    .import-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .import-form-grid, .import-result-grid { grid-template-columns: 1fr; }
    .import-form-grid .full-width { grid-column: auto; }
    .import-card { padding: 18px; }
}
/* Tüm fatura ekranlarında kalıcı grup kapsamı filtresi ve CFO hazırlık uyarısı */
.group-scope-toggle-global {
    position: fixed;
    top: 10px;
    right: clamp(340px, 27vw, 555px);
    z-index: 1300;
    margin: 0;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .10);
}
.erp-cfo-readiness {
    display: grid;
    gap: 5px;
    margin: 10px 10px 0;
    padding: 10px;
    border: 1px solid rgba(251, 191, 36, .45);
    border-radius: 8px;
    background: rgba(146, 64, 14, .22);
    color: #fde68a;
    font-size: .68rem;
    line-height: 1.35;
}
.erp-cfo-readiness strong { color: #fef3c7; font-size: .72rem; }
.erp-cfo-readiness a { color: #fff; font-weight: 800; text-decoration: underline; }
.erp-cfo-readiness small { color: #fde68a; font-size: .64rem; }
@media (max-width: 1180px) {
    .group-scope-toggle-global {
        right: 14px;
        top: calc(var(--erp-topbar, 56px) + 10px);
    }
}
@media (max-width: 768px) {
    .group-scope-toggle-global {
        top: calc(var(--erp-topbar, 56px) + 8px);
        right: 8px;
        left: 8px;
        width: auto;
    }
}
/* Inline invoice group scope placement */
.invoice-index-page .overview-toolbar,
.invoice-index-page .list-page-actions {
    flex-wrap: wrap;
}
.invoice-index-page .overview-toolbar .group-scope-toggle,
.invoice-index-page .list-page-actions .group-scope-toggle {
    flex: 0 0 auto;
    gap: 3px;
    margin: 0;
    padding: 3px;
    border-radius: 8px;
    background: #f4f7fb;
    box-shadow: none;
}
.invoice-index-page .overview-toolbar .group-scope-label,
.invoice-index-page .list-page-actions .group-scope-label {
    padding: 0 5px;
    font-size: 10px;
}
.invoice-index-page .overview-toolbar .group-scope-button,
.invoice-index-page .list-page-actions .group-scope-button {
    min-width: 68px;
    min-height: 36px;
    padding: 0 9px;
    border-radius: 6px;
    font-size: 11px;
}
@media (max-width: 1600px) {
    .invoice-index-page .overview-toolbar .group-scope-label,
    .invoice-index-page .list-page-actions .group-scope-label {
        display: none;
    }
}
/* Invoice list column widths after currency/responsible column cleanup */
.invoice-index-page .reference-table-atama_bekleyen { min-width: 1320px !important; }
.invoice-index-page .reference-table-atama_bekleyen :is(th,td):nth-child(1) { width: 38px !important; }
.invoice-index-page .reference-table-atama_bekleyen :is(th,td):nth-child(2) { width: 120px !important; }
.invoice-index-page .reference-table-atama_bekleyen :is(th,td):nth-child(3) { width: 180px !important; }
.invoice-index-page .reference-table-atama_bekleyen :is(th,td):nth-child(4) { width: 250px !important; }
.invoice-index-page .reference-table-atama_bekleyen :is(th,td):nth-child(5) { width: 115px !important; }
.invoice-index-page .reference-table-atama_bekleyen :is(th,td):nth-child(6) { width: 105px !important; }
.invoice-index-page .reference-table-atama_bekleyen :is(th,td):nth-child(7) { width: 110px !important; }
.invoice-index-page .reference-table-atama_bekleyen :is(th,td):nth-child(8) { width: 90px !important; }
.invoice-index-page .reference-table-atama_bekleyen :is(th,td):nth-child(9) { width: 100px !important; }
.invoice-index-page .reference-table-atama_bekleyen :is(th,td):nth-child(10) { width: 150px !important; }
.invoice-index-page .reference-table-atama_bekleyen :is(th,td):nth-child(11) { width: 56px !important; }

.invoice-index-page .reference-table-onay_bekliyor { min-width: 1400px !important; }
.invoice-index-page .reference-table-onay_bekliyor :is(th,td):nth-child(1) { width: 38px !important; }
.invoice-index-page .reference-table-onay_bekliyor :is(th,td):nth-child(2) { width: 120px !important; }
.invoice-index-page .reference-table-onay_bekliyor :is(th,td):nth-child(3) { width: 180px !important; }
.invoice-index-page .reference-table-onay_bekliyor :is(th,td):nth-child(4) { width: 240px !important; }
.invoice-index-page .reference-table-onay_bekliyor :is(th,td):nth-child(5) { width: 115px !important; }
.invoice-index-page .reference-table-onay_bekliyor :is(th,td):nth-child(6) { width: 105px !important; }
.invoice-index-page .reference-table-onay_bekliyor :is(th,td):nth-child(7) { width: 110px !important; }
.invoice-index-page .reference-table-onay_bekliyor :is(th,td):nth-child(8) { width: 90px !important; }
.invoice-index-page .reference-table-onay_bekliyor :is(th,td):nth-child(9) { width: 100px !important; }
.invoice-index-page .reference-table-onay_bekliyor :is(th,td):nth-child(10) { width: 135px !important; }
.invoice-index-page .reference-table-onay_bekliyor :is(th,td):nth-child(11) { width: 105px !important; }
.invoice-index-page .reference-table-onay_bekliyor :is(th,td):nth-child(12) { width: 56px !important; }

.invoice-index-page .reference-table-cfo_onay_bekliyor { min-width: 1320px !important; }
.invoice-index-page .reference-table-cfo_onay_bekliyor :is(th,td):nth-child(1) { width: 38px !important; }
.invoice-index-page .reference-table-cfo_onay_bekliyor :is(th,td):nth-child(2) { width: 120px !important; }
.invoice-index-page .reference-table-cfo_onay_bekliyor :is(th,td):nth-child(3) { width: 180px !important; }
.invoice-index-page .reference-table-cfo_onay_bekliyor :is(th,td):nth-child(4) { width: 260px !important; }
.invoice-index-page .reference-table-cfo_onay_bekliyor :is(th,td):nth-child(5) { width: 105px !important; }
.invoice-index-page .reference-table-cfo_onay_bekliyor :is(th,td):nth-child(6) { width: 110px !important; }
.invoice-index-page .reference-table-cfo_onay_bekliyor :is(th,td):nth-child(7) { width: 90px !important; }
.invoice-index-page .reference-table-cfo_onay_bekliyor :is(th,td):nth-child(8) { width: 115px !important; }
.invoice-index-page .reference-table-cfo_onay_bekliyor :is(th,td):nth-child(9) { width: 140px !important; }
.invoice-index-page .reference-table-cfo_onay_bekliyor :is(th,td):nth-child(10) { width: 105px !important; }
.invoice-index-page .reference-table-cfo_onay_bekliyor :is(th,td):nth-child(11) { width: 56px !important; }

.invoice-index-page .reference-table-onaylandi { min-width: 1305px !important; }
.invoice-index-page .reference-table-onaylandi :is(th,td):nth-child(1) { width: 38px !important; }
.invoice-index-page .reference-table-onaylandi :is(th,td):nth-child(2) { width: 120px !important; }
.invoice-index-page .reference-table-onaylandi :is(th,td):nth-child(3) { width: 180px !important; }
.invoice-index-page .reference-table-onaylandi :is(th,td):nth-child(4) { width: 280px !important; }
.invoice-index-page .reference-table-onaylandi :is(th,td):nth-child(5) { width: 105px !important; }
.invoice-index-page .reference-table-onaylandi :is(th,td):nth-child(6) { width: 90px !important; }
.invoice-index-page .reference-table-onaylandi :is(th,td):nth-child(7) { width: 125px !important; }
.invoice-index-page .reference-table-onaylandi :is(th,td):nth-child(8) { width: 140px !important; }
.invoice-index-page .reference-table-onaylandi :is(th,td):nth-child(9) { width: 170px !important; }
.invoice-index-page .reference-table-onaylandi :is(th,td):nth-child(10) { width: 56px !important; }

.invoice-index-page :is(.reference-table-logo_gonderildi,.reference-table-reddedildi) { min-width: 1460px !important; }
.invoice-index-page :is(.reference-table-logo_gonderildi,.reference-table-reddedildi) :is(th,td):nth-child(1) { width: 38px !important; }
.invoice-index-page :is(.reference-table-logo_gonderildi,.reference-table-reddedildi) :is(th,td):nth-child(2) { width: 120px !important; }
.invoice-index-page :is(.reference-table-logo_gonderildi,.reference-table-reddedildi) :is(th,td):nth-child(3) { width: 180px !important; }
.invoice-index-page :is(.reference-table-logo_gonderildi,.reference-table-reddedildi) :is(th,td):nth-child(4) { width: 250px !important; }
.invoice-index-page :is(.reference-table-logo_gonderildi,.reference-table-reddedildi) :is(th,td):nth-child(5) { width: 105px !important; }
.invoice-index-page :is(.reference-table-logo_gonderildi,.reference-table-reddedildi) :is(th,td):nth-child(6) { width: 110px !important; }
.invoice-index-page :is(.reference-table-logo_gonderildi,.reference-table-reddedildi) :is(th,td):nth-child(7) { width: 90px !important; }
.invoice-index-page :is(.reference-table-logo_gonderildi,.reference-table-reddedildi) :is(th,td):nth-child(8) { width: 130px !important; }
.invoice-index-page :is(.reference-table-logo_gonderildi,.reference-table-reddedildi) :is(th,td):nth-child(9) { width: 130px !important; }
.invoice-index-page :is(.reference-table-logo_gonderildi,.reference-table-reddedildi) :is(th,td):nth-child(10) { width: 100px !important; }
.invoice-index-page :is(.reference-table-logo_gonderildi,.reference-table-reddedildi) :is(th,td):nth-child(11) { width: 150px !important; }
.invoice-index-page :is(.reference-table-logo_gonderildi,.reference-table-reddedildi) :is(th,td):nth-child(12) { width: 56px !important; }
/* Compact invoice lists and clean detail shell */
.invoice-index-page .overview-search {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}
.invoice-index-page .overview-search:focus-within {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
}
.invoice-index-page .overview-search svg {
    position: static !important;
    flex: 0 0 18px;
    transform: none !important;
}
.invoice-index-page .overview-search input[type="search"] {
    min-width: 0;
    padding: 0 !important;
    appearance: none;
}
.invoice-index-page .reference-invoice-table th {
    height: 44px !important;
    padding: 0 9px !important;
    font-size: 10px !important;
}
.invoice-index-page .reference-invoice-table td {
    height: 54px !important;
    padding: 0 9px !important;
    font-size: 11.5px !important;
}
.invoice-index-page .reference-invoice-table .quick-assign-select {
    width: 126px !important;
    min-width: 126px !important;
    font-size: 11px !important;
}
.detail-page-shell { --erp-topbar: 0px; }
.detail-page-shell .erp-sidebar {
    top: 0 !important;
    height: 100vh !important;
}
.detail-page-shell .dashboard-container,
.detail-page-shell.dashboard-page .dashboard-container,
.detail-page-shell.dashboard-page .container {
    padding-top: 20px !important;
}
.sortable-header{cursor:pointer;user-select:none;white-space:nowrap}
.sortable-header:hover{background:rgba(37,99,235,.07);color:#1456c2}
.sort-indicator{display:inline-block;min-width:12px;color:#2563eb;font-size:10px;font-weight:800}