/*
 * Page-specific SPIC UI styles.
 *
 * Rules are scoped by the shared layout's body[data-page] attribute so this
 * globally loaded stylesheet cannot leak between views.
 */

/* Page styles are added below. */

/* webroot/vendors/vendor_setup.php */
body[data-page="vendors-vendor-setup"] ul#users i.fa-times{
		color: #c00;
		margin-left: 1em;
		cursor: pointer;
	}body[data-page="vendors-vendor-setup"] ul#users li{
		padding: 0.5em;
		border-bottom: 1px solid #ddd;
	}body[data-page="vendors-vendor-setup"] ul#users li span{
		width: 20em;
		display: inline-block;
	}body[data-page="vendors-vendor-setup"] ul#users li span[disabled]{
		color: #aaa;
	}

/* webroot/vendors/invoices.php */
body[data-page="vendors-invoices"] .fa-trash,body[data-page="vendors-invoices"] .fa-edit{
		cursor: pointer;
		margin-right: 0.5rem;
		padding: 0.25rem;
		border-radius: var(--spic-border-radius);
		transition: background-color 0.2s ease;
	}body[data-page="vendors-invoices"] .fa-trash:hover{
		background-color: var(--spic-danger);
		color: white;
	}body[data-page="vendors-invoices"] .fa-edit:hover{
		background-color: var(--spic-primary);
		color: white;
	}body[data-page="vendors-invoices"] i.l2{
		font-size: 80%;
		color: #888;
	}body[data-page="vendors-invoices"] ul.log{
		list-style:none;
		padding-left: 1em;
	}body[data-page="vendors-invoices"] q{
		color: #ccc;
		quotes: "“" "”" "‘" "’";
		font-family: 'Times New Roman', Times, serif;
	}body[data-page="vendors-invoices"] q:before{
		content:open-quote;
	}body[data-page="vendors-invoices"] q:after{
		content:close-quote;
	}body[data-page="vendors-invoices"] table[name=table-invoice] thead th:nth-child(6),body[data-page="vendors-invoices"] table[name=table-invoice] tbody td:nth-child(6){
		text-align: right;
	}body[data-page="vendors-invoices"] table td,body[data-page="vendors-invoices"] table th{
		font-size: 85%;
	}body[data-page="vendors-invoices"] table[name=table-invoice] tbody tr td:nth-child(5) span.desc{
		max-width:300px;
		display: block;
	}body[data-page="vendors-invoices"] #page-wrapper{
		padding: 1.5rem;
	}body[data-page="vendors-invoices"] /* Table row selection */
	.table tbody tr.selected{
		background-color: var(--spic-primary);
		color: white;
	}body[data-page="vendors-invoices"] .table tbody tr.selected td{
		border-color: var(--spic-primary-dark);
	}

/* webroot/vendors/invoices.new.po.php */
body[data-page="vendors-invoices-new-po"] address{
		white-space:pre;
	}

/* webroot/vendors/invoices.new.php */
body[data-page="vendors-invoices-new"] #page-wrapper{
		padding: 0.85rem;
	}body[data-page="vendors-invoices-new"] .page-title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 0.6rem;
	}body[data-page="vendors-invoices-new"] form#edit-invoice{
		padding: 0;
	}body[data-page="vendors-invoices-new"] form#edit-invoice .card-header{
		background: #f8fafc;
		border-bottom: 1px solid #e5e7eb;
		padding: 0.65rem 0.8rem 0.45rem;
	}body[data-page="vendors-invoices-new"] form#edit-invoice .card-body{
		padding: 0.7rem 0.8rem;
	}body[data-page="vendors-invoices-new"] form#edit-invoice .form-label{
		font-weight: 600;
		margin-bottom: 0.2rem;
		font-size: 0.83rem;
	}body[data-page="vendors-invoices-new"] form#edit-invoice .form-control,body[data-page="vendors-invoices-new"] form#edit-invoice .form-select{
		font-size: 0.88rem;
		padding-top: 0.32rem;
		padding-bottom: 0.32rem;
	}body[data-page="vendors-invoices-new"] form#edit-invoice .mb-3{
		margin-bottom: 0.55rem !important;
	}body[data-page="vendors-invoices-new"] .party-panel{
		background: #fbfcfd;
		border: 1px solid #e9edf2;
		border-radius: 0.5rem;
		padding: 0.55rem 0.65rem;
		margin-bottom: 0.55rem;
		height: 100%;
		display: flex;
		flex-direction: column;
	}body[data-page="vendors-invoices-new"] .party-panel .section-title{
		font-size: 0.74rem;
		font-weight: 700;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		color: #6b7280;
		margin: 0 0 0.25rem;
	}body[data-page="vendors-invoices-new"] #company_address,body[data-page="vendors-invoices-new"] #vendor_address{
		white-space: pre-wrap;
		background: transparent;
		border: 0;
		border-radius: 0;
		padding: 0.2rem 0;
		height: 5.1rem;
		overflow: auto;
		margin-bottom: 0.45rem;
		font-size: 0.84rem;
		line-height: 1.3;
	}

body[data-page="vendors-invoices-new"] div.saved,
body[data-page="vendors-invoices-new-po"] div.saved{
		display:none;
	}

body[data-page="vendors-invoices-new"] i.fa-check-circle,
body[data-page="vendors-invoices-new-po"] i.fa-check-circle{
		color: #0c0;
	}

/* webroot/vendors/invoices.ingest-upload.php */
body[data-page="vendors-invoices-ingest-upload"] .upload-zone{
		border: 2px dashed var(--spic-primary);
		border-radius: var(--spic-border-radius);
		padding: 3rem;
		text-align: center;
		background-color: #f8f9fa;
		cursor: pointer;
		transition: all 0.3s ease;
	}body[data-page="vendors-invoices-ingest-upload"] .upload-zone:hover{
		background-color: #e9ecef;
		border-color: var(--spic-primary-dark);
	}body[data-page="vendors-invoices-ingest-upload"] .upload-zone.dragover{
		background-color: #d1ecf1;
		border-color: #0c5460;
	}body[data-page="vendors-invoices-ingest-upload"] .file-preview{
		margin-top: 1rem;
		padding: 1rem;
		background-color: #fff;
		border: 1px solid #dee2e6;
		border-radius: var(--spic-border-radius);
	}body[data-page="vendors-invoices-ingest-upload"] .extraction-results{
		margin-top: 2rem;
	}body[data-page="vendors-invoices-ingest-upload"] .extraction-results .card{
		margin-bottom: 1rem;
	}

/* webroot/vendors/archive.php */
body[data-page="vendors-archive"] #page-inner{ color: var(--spic-text); }body[data-page="vendors-archive"] .archive-card{ background: var(--spic-surface); border: 1px solid var(--spic-border); border-radius: calc(var(--spic-radius) + 3px); box-shadow: var(--spic-shadow-sm); }body[data-page="vendors-archive"] .archive-filter-card{ margin-bottom: 1rem; padding: 1rem; }body[data-page="vendors-archive"] .archive-filter-heading{ align-items: center; display: flex; gap: 0.75rem; justify-content: space-between; margin-bottom: 0.85rem; }body[data-page="vendors-archive"] .archive-filter-heading h2{ font-size: 0.82rem; font-weight: 800; margin: 0; }body[data-page="vendors-archive"] .archive-filter-heading p{ color: var(--spic-text-muted); font-size: 0.7rem; margin: 0.2rem 0 0; }body[data-page="vendors-archive"] .archive-filter-grid{ display: grid; gap: 0.8rem; grid-template-columns: repeat(12, minmax(0, 1fr)); }body[data-page="vendors-archive"] .archive-filter{ grid-column: span 3; min-width: 0; }body[data-page="vendors-archive"] .archive-filter-wide{ grid-column: span 4; }body[data-page="vendors-archive"] .archive-filter-narrow{ grid-column: span 2; }body[data-page="vendors-archive"] .archive-filter label{ color: var(--spic-text-2); display: block; font-size: 0.67rem; font-weight: 750; margin-bottom: 0.3rem; }body[data-page="vendors-archive"] .archive-filter .form-control,body[data-page="vendors-archive"] .archive-filter .form-select{ border-color: var(--spic-border); font-size: 0.78rem; min-height: 2.35rem; }body[data-page="vendors-archive"] .archive-filter-actions{ align-items: center; border-top: 1px solid var(--spic-border); display: flex; gap: 0.55rem; justify-content: space-between; margin-top: 0.9rem; padding-top: 0.9rem; }body[data-page="vendors-archive"] .archive-date-shortcuts{ align-items: center; display: flex; flex-wrap: wrap; gap: 0.35rem; }body[data-page="vendors-archive"] .archive-date-shortcuts > span{ color: var(--spic-text-muted); font-size: 0.67rem; font-weight: 700; margin-right: 0.15rem; }body[data-page="vendors-archive"] .archive-date-shortcuts .btn{ border-color: var(--spic-border); color: var(--spic-text-2); font-size: 0.67rem; padding: 0.3rem 0.5rem; }body[data-page="vendors-archive"] .archive-search-actions{ display: flex; gap: 0.45rem; }body[data-page="vendors-archive"] .archive-search-actions .btn{ align-items: center; display: inline-flex; font-size: 0.72rem; font-weight: 750; gap: 0.4rem; min-height: 2.25rem; }body[data-page="vendors-archive"] .archive-results-body{ min-height: 15rem; }body[data-page="vendors-archive"] .archive-empty-icon{ align-items: center; background: var(--spic-primary-light); border-radius: 50%; color: var(--spic-primary); display: inline-flex; font-size: 1.05rem; height: 2.75rem; justify-content: center; margin-bottom: 0.8rem; width: 2.75rem; }body[data-page="vendors-archive"] .archive-results-hint{ white-space: nowrap; }body[data-page="vendors-archive"] .archive-result-alert{ border: 0; border-radius: 0; padding: 1rem; }body[data-page="vendors-archive"] .archive-results-table{ font-size: 0.72rem; width: 100% !important; }body[data-page="vendors-archive"] .archive-results-table thead th{ background: var(--spic-surface-2); border-bottom: 1px solid var(--spic-border); color: var(--spic-text-muted); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.035em; padding: 0.65rem 0.75rem; text-transform: uppercase; white-space: nowrap; }body[data-page="vendors-archive"] .archive-results-table tbody td{ border-color: var(--spic-border); padding: 0.68rem 0.75rem; vertical-align: middle; }body[data-page="vendors-archive"] .archive-results-table tbody tr{ cursor: pointer; }body[data-page="vendors-archive"] .archive-results-table tbody tr:hover td{ background: var(--spic-primary-light); }body[data-page="vendors-archive"] .archive-results-table tbody tr.selected td{ background: var(--spic-primary-light); }body[data-page="vendors-archive"] .archive-primary-cell{ color: var(--spic-text); display: block; font-weight: 800; white-space: nowrap; }body[data-page="vendors-archive"] .archive-primary-cell + small{ color: var(--spic-text-muted); display: block; margin-top: 0.1rem; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }body[data-page="vendors-archive"] .archive-description{ max-width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }body[data-page="vendors-archive"] .archive-reference{ font-family: var(--bs-font-monospace); max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }body[data-page="vendors-archive"] .archive-status{ border-radius: 999px; display: inline-flex; font-size: 0.59rem; font-weight: 800; padding: 0.22rem 0.45rem; white-space: nowrap; }body[data-page="vendors-archive"] .archive-status-success{ background: color-mix(in srgb, var(--spic-success) 13%, transparent); color: var(--spic-success); }body[data-page="vendors-archive"] .archive-status-danger{ background: color-mix(in srgb, var(--spic-danger) 12%, transparent); color: var(--spic-danger); }body[data-page="vendors-archive"] .archive-status-warning{ background: color-mix(in srgb, var(--spic-warning) 16%, transparent); color: #9a5d00; }body[data-page="vendors-archive"] .archive-status-neutral{ background: var(--spic-surface-2); color: var(--spic-text-muted); }body[data-page="vendors-archive"] .archive-results-body .dataTables_wrapper{ padding: 0.75rem 1rem 0.8rem; }body[data-page="vendors-archive"] .archive-results-body .dataTables_filter input,body[data-page="vendors-archive"] .archive-results-body .dataTables_length select{ border-color: var(--spic-border); font-size: 0.7rem; }body[data-page="vendors-archive"] .archive-results-body .dataTables_info,body[data-page="vendors-archive"] .archive-results-body .dataTables_paginate,body[data-page="vendors-archive"] .archive-results-body .dataTables_length,body[data-page="vendors-archive"] .archive-results-body .dataTables_filter{ color: var(--spic-text-muted); font-size: 0.68rem; }body[data-page="vendors-archive"] .select2-container{ width: 100% !important; }body[data-page="vendors-archive"] .select2-container .select2-selection--single{ border-color: var(--spic-border); border-radius: var(--bs-border-radius); height: 2.35rem; }body[data-page="vendors-archive"] .select2-container .select2-selection--single .select2-selection__rendered{ font-size: 0.78rem; line-height: 2.25rem; padding-left: 0.75rem; }body[data-page="vendors-archive"] .select2-container .select2-selection--single .select2-selection__arrow{ height: 2.25rem; }body[data-page="vendors-archive"] .select2-dropdown{ border-color: var(--spic-border); font-size: 0.76rem; }

        @media (max-width: 1199.98px) {body[data-page="vendors-archive"] .archive-filter{ grid-column: span 4; }body[data-page="vendors-archive"] .archive-filter-wide{ grid-column: span 6; }body[data-page="vendors-archive"] .archive-filter-narrow{ grid-column: span 3; }
        }
        @media (max-width: 767.98px) {body[data-page="vendors-archive"] .archive-filter,body[data-page="vendors-archive"] .archive-filter-wide,body[data-page="vendors-archive"] .archive-filter-narrow{ grid-column: 1 / -1; }body[data-page="vendors-archive"] .archive-filter-actions{ align-items: stretch; flex-direction: column; }body[data-page="vendors-archive"] .archive-search-actions{ display: grid; grid-template-columns: 1fr 1fr; width: 100%; }body[data-page="vendors-archive"] .archive-search-actions .btn{ justify-content: center; }body[data-page="vendors-archive"] .archive-results-hint{ white-space: normal; }
        }body[data-page="users-preferences"] .nav-tabs-vertical{
            border-right: 1px solid var(--spic-gray-200);
            border-bottom: none;
        }body[data-page="users-preferences"] .nav-tabs-vertical .nav-item{
            margin-bottom: 0.5rem;
        }body[data-page="users-preferences"] .nav-tabs-vertical .nav-link{
            border-radius: var(--spic-border-radius) 0 0 var(--spic-border-radius);
            border-right: none;
            padding: 0.75rem 1.25rem;
            text-align: left;
            width: 100%;
            border: 1px solid transparent;
            color: var(--spic-gray-600);
            background: transparent;
        }body[data-page="users-preferences"] .nav-tabs-vertical .nav-link:hover{
            background-color: var(--spic-gray-100);
            color: var(--spic-gray-800);
        }body[data-page="users-preferences"] .nav-tabs-vertical .nav-link.active{
            background-color: white;
            color: var(--spic-primary);
            border-color: var(--spic-gray-200);
            border-right: 1px solid white;
            margin-right: -1px;
        }body[data-page="users-preferences"] .tab-content{
            padding-left: 1.25rem;
        }body[data-page="users-preferences"] .preference-section{
            margin-bottom: 2rem;
            padding-bottom: 1.25rem;
            border-bottom: 1px solid var(--spic-gray-200);
        }body[data-page="users-preferences"] .preference-section:last-child{
            border-bottom: none;
        }body[data-page="users-preferences"] .badge-status{
            font-size: 0.75rem;
        }
        
        @media (max-width: 768px) {body[data-page="users-preferences"] .nav-tabs-vertical{
                border-right: none;
                border-bottom: 1px solid var(--spic-gray-200);
                display: flex;
                flex-direction: row;
                overflow-x: auto;
            }body[data-page="users-preferences"] .nav-tabs-vertical .nav-item{
                margin-right: 0.5rem;
                margin-bottom: 0;
                flex-shrink: 0;
            }body[data-page="users-preferences"] .nav-tabs-vertical .nav-link{
                border-radius: var(--spic-border-radius) var(--spic-border-radius) 0 0;
                border-right: 1px solid var(--spic-gray-200);
                border-bottom: none;
                white-space: nowrap;
            }body[data-page="users-preferences"] .nav-tabs-vertical .nav-link.active{
                border-bottom: 1px solid white;
                border-right: 1px solid var(--spic-gray-200);
                margin-right: 0;
                margin-bottom: -1px;
            }body[data-page="users-preferences"] .tab-content{
                padding-left: 0;
                padding-top: 1.25rem;
            }
        }

/* webroot/notifications.php */
body[data-page="notifications"] .notifications-header{
			align-items: flex-start;
			display: flex;
			flex-wrap: wrap;
			gap: 0.75rem;
			justify-content: space-between;
			margin-bottom: 1rem;
		}body[data-page="notifications"] .notifications-table-wrap{
			background: #fff;
			border: 1px solid var(--spic-gray-200);
			border-radius: var(--spic-border-radius);
			box-shadow: var(--spic-shadow-sm);
			overflow: hidden;
		}body[data-page="notifications"] table[name=table-notifications]{
			margin-bottom: 0;
		}body[data-page="notifications"] table[name=table-notifications] thead th{
			background: var(--spic-gray-100);
			border-bottom: 1px solid var(--spic-gray-200);
			color: var(--spic-gray-600);
			font-size: 0.75rem;
			letter-spacing: 0.03em;
			text-transform: uppercase;
			vertical-align: middle;
			white-space: nowrap;
		}body[data-page="notifications"] table[name=table-notifications] tbody td{
			vertical-align: top;
		}body[data-page="notifications"] .notification-select-cell{
			width: 56px;
		}body[data-page="notifications"] .notification-time-cell{
			text-align: right;
			white-space: nowrap;
			width: 120px;
		}body[data-page="notifications"] .notification-message{
			color: var(--spic-gray-700);
			line-height: 1.45;
			overflow-wrap: anywhere;
			white-space: normal;
		}body[data-page="notifications"] .notification-meta{
			color: var(--spic-gray-500);
			font-size: 0.8rem;
		}body[data-page="notifications"] .notification-actions .btn{
			white-space: nowrap;
		}body[data-page="notifications"] .notification-action-btn[disabled]{
			cursor: not-allowed;
			opacity: 0.55;
		}body[data-page="notifications"] tr.spic-notification-status-0,body[data-page="notifications"] tr.spic-notification-status-1{
			background-color: rgba(13, 110, 253, 0.04);
		}body[data-page="notifications"] tr.spic-notification-focus{
			outline: 2px solid rgba(13, 110, 253, 0.35);
			outline-offset: -2px;
		}body[data-page="notifications"] .notification-empty{
			color: var(--spic-gray-500);
			padding: 2rem 1rem;
			text-align: center;
		}
		@media (max-width: 767px) {body[data-page="notifications"] .notification-time-cell{
				width: 84px;
			}body[data-page="notifications"] table[name=table-notifications] tbody td{
				padding: 0.65rem 0.5rem;
			}body[data-page="notifications"] .notification-actions .btn{
				font-size: 0.8rem;
				padding: 0.3rem 0.55rem;
			}
		}

/* webroot/keys/oauth_clients.php */
body[data-page="keys-oauth-clients"] #oauth-client-form{
		background: #f8f9fa;
		border: 1px solid #dee2e6;
		border-radius: 8px;
		padding: 20px;
		margin-top: 20px;
	}body[data-page="keys-oauth-clients"] .checkbox-group{
		display: flex;
		flex-direction: column;
		gap: 8px;
	}body[data-page="keys-oauth-clients"] .checkbox-item{
		display: flex;
		align-items: center;
		gap: 8px;
	}body[data-page="keys-oauth-clients"] .checkbox-item label{
		margin: 0;
		font-weight: 500;
	}body[data-page="keys-oauth-clients"] .form-actions{
		border-top: 1px solid #dee2e6;
		margin-top: 18px;
		padding-top: 12px;
		text-align: right;
	}body[data-page="keys-oauth-clients"] .form-control.is-invalid,body[data-page="keys-oauth-clients"] .checkbox-group.is-invalid{
		border-color: #dc3545;
	}body[data-page="keys-oauth-clients"] .invalid-feedback{
		color: #dc3545;
		display: block;
		font-size: 0.875em;
		margin-top: 4px;
	}body[data-page="keys-oauth-clients"] #oauth-secret-once{
		background: #fff3cd;
		border: 1px solid #ffeeba;
		border-radius: 8px;
		padding: 14px;
		margin-top: 16px;
	}

/* webroot/keys/api_keys.php */
body[data-page="keys-api-keys"] :root{
        --ak-ink: #172234;
        --ak-muted: #64748b;
        --ak-border: #dfe6ee;
        --ak-soft: #f5f7fa;
        --ak-brand: #b96100;
        --ak-brand-dark: #8f4700;
        --ak-success: #18794e;
        --ak-danger: #c73232;
        --ak-warning: #9a6700;
        --ak-shadow: 0 12px 28px rgba(23, 34, 52, .08);
    }body[data-page="keys-api-keys"] body{ background: #f3f5f8; color: var(--ak-ink); }body[data-page="keys-api-keys"] #page-inner{ padding: 22px; }body[data-page="keys-api-keys"] .ak-shell{ max-width: 1500px; margin: 0 auto; }body[data-page="keys-api-keys"] .ak-hero{
        display: flex; align-items: center; justify-content: space-between; gap: 24px;
        padding: 24px 26px; border-radius: 14px; color: #fff;
        background: linear-gradient(125deg, #171f2d 0%, #29364a 62%, #70400d 100%);
        box-shadow: var(--ak-shadow); margin-bottom: 18px;
    }body[data-page="keys-api-keys"] .ak-eyebrow{ margin: 0 0 6px; color: #f4c98e; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }body[data-page="keys-api-keys"] .ak-hero h1{ margin: 0; color: #fff; font-size: 28px; font-weight: 700; }body[data-page="keys-api-keys"] .ak-hero p{ margin: 7px 0 0; max-width: 720px; color: #d7e0ec; }body[data-page="keys-api-keys"] .ak-create{ flex: 0 0 auto; padding: 11px 17px; border: 0; border-radius: 9px; background: #f08a12; color: #fff; font-weight: 700; }body[data-page="keys-api-keys"] .ak-create:hover,body[data-page="keys-api-keys"] .ak-create:focus{ background: #d87500; color: #fff; }body[data-page="keys-api-keys"] .ak-overview{ display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)) 2.2fr; gap: 12px; margin-bottom: 18px; }body[data-page="keys-api-keys"] .ak-stat,body[data-page="keys-api-keys"] .ak-lifecycle{ background: #fff; border: 1px solid var(--ak-border); border-radius: 12px; padding: 16px 18px; box-shadow: 0 4px 14px rgba(23, 34, 52, .04); }body[data-page="keys-api-keys"] .ak-stat{ cursor: pointer; text-align: left; transition: border-color .15s, transform .15s; }body[data-page="keys-api-keys"] .ak-stat:hover{ border-color: #c1ccd8; transform: translateY(-1px); }body[data-page="keys-api-keys"] .ak-stat small{ display: block; color: var(--ak-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }body[data-page="keys-api-keys"] .ak-stat strong{ display: block; margin-top: 4px; font-size: 26px; }body[data-page="keys-api-keys"] .ak-stat-published strong{ color: var(--ak-success); }body[data-page="keys-api-keys"] .ak-stat-draft strong{ color: var(--ak-warning); }body[data-page="keys-api-keys"] .ak-stat-revoked strong{ color: var(--ak-danger); }body[data-page="keys-api-keys"] .ak-lifecycle-title{ font-weight: 700; margin-bottom: 10px; }body[data-page="keys-api-keys"] .ak-life-steps{ display: flex; align-items: center; gap: 8px; color: var(--ak-muted); font-size: 13px; }body[data-page="keys-api-keys"] .ak-life-step{ padding: 5px 8px; border-radius: 7px; background: var(--ak-soft); color: #34445a; font-weight: 600; white-space: nowrap; }body[data-page="keys-api-keys"] .ak-life-arrow{ color: #9aa8b8; }body[data-page="keys-api-keys"] .ak-panel{ overflow: hidden; border: 1px solid var(--ak-border); border-radius: 14px; background: #fff; box-shadow: var(--ak-shadow); }body[data-page="keys-api-keys"] .ak-toolbar{ display: grid; grid-template-columns: minmax(260px, 1fr) 180px 240px auto; gap: 10px; align-items: center; padding: 15px; border-bottom: 1px solid var(--ak-border); }body[data-page="keys-api-keys"] .ak-input-wrap{ position: relative; }body[data-page="keys-api-keys"] .ak-input-wrap > i{ position: absolute; top: 50%; left: 13px; transform: translateY(-50%); color: #8492a6; }body[data-page="keys-api-keys"] .ak-input-wrap input{ padding-left: 38px; }body[data-page="keys-api-keys"] .ak-toolbar .form-control{ height: 40px; border: 1px solid #cfd8e3; border-radius: 8px; box-shadow: none; }body[data-page="keys-api-keys"] .ak-count{ color: var(--ak-muted); font-size: 13px; text-align: right; white-space: nowrap; }body[data-page="keys-api-keys"] .ak-table-wrap{ overflow-x: auto; }body[data-page="keys-api-keys"] .ak-table{ width: 100%; min-width: 1040px; margin: 0; border-collapse: separate; border-spacing: 0; }body[data-page="keys-api-keys"] .ak-table th{ position: sticky; top: 0; z-index: 1; padding: 11px 14px; border-bottom: 1px solid var(--ak-border); background: #f7f9fb; color: #66758a; font-size: 11px; letter-spacing: .07em; text-align: left; text-transform: uppercase; }body[data-page="keys-api-keys"] .ak-table td{ padding: 15px 14px; border-bottom: 1px solid #edf1f5; vertical-align: top; }body[data-page="keys-api-keys"] .ak-table tbody tr:last-child td{ border-bottom: 0; }body[data-page="keys-api-keys"] .ak-table tbody tr:hover{ background: #fcf8f3; }body[data-page="keys-api-keys"] .ak-title{ display: block; color: var(--ak-ink); font-weight: 700; line-height: 1.35; }body[data-page="keys-api-keys"] .ak-subtext{ display: block; margin-top: 3px; color: var(--ak-muted); font-size: 12px; line-height: 1.45; }body[data-page="keys-api-keys"] .ak-key-line{ display: flex; align-items: center; gap: 7px; }body[data-page="keys-api-keys"] .ak-key{ min-width: 168px; padding: 6px 8px; border: 1px solid #e0e6ed; border-radius: 6px; background: #f6f8fa; color: #334155; font: 600 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }body[data-page="keys-api-keys"] .ak-icon-btn{ width: 30px; height: 30px; padding: 0; border: 1px solid #d4dce6; border-radius: 7px; background: #fff; color: #526175; }body[data-page="keys-api-keys"] .ak-icon-btn:hover{ background: #f4f6f8; color: #172234; }body[data-page="keys-api-keys"] .ak-chips{ display: flex; flex-wrap: wrap; gap: 5px; max-width: 320px; }body[data-page="keys-api-keys"] .ak-chip{ display: inline-block; padding: 4px 7px; border-radius: 6px; background: #edf3fa; color: #3b536e; font-size: 11px; font-weight: 700; }body[data-page="keys-api-keys"] .ak-chip-prefix{ background: #eef7f2; color: #247052; }body[data-page="keys-api-keys"] .ak-chip-warning{ background: #fff4d6; color: #8a5a00; }body[data-page="keys-api-keys"] .ak-status{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }body[data-page="keys-api-keys"] .ak-status:before{ content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }body[data-page="keys-api-keys"] .ak-status-published{ background: #e7f6ed; color: var(--ak-success); }body[data-page="keys-api-keys"] .ak-status-draft{ background: #fff3d7; color: var(--ak-warning); }body[data-page="keys-api-keys"] .ak-status-revoked{ background: #fdeaea; color: var(--ak-danger); }body[data-page="keys-api-keys"] .ak-actions{ display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }body[data-page="keys-api-keys"] .ak-action{ padding: 6px 9px; border: 1px solid #cfd8e3; border-radius: 7px; background: #fff; color: #35465a; font-size: 12px; font-weight: 700; }body[data-page="keys-api-keys"] .ak-action:hover{ background: #f4f6f8; }body[data-page="keys-api-keys"] .ak-action-primary{ border-color: var(--ak-brand); background: var(--ak-brand); color: #fff; }body[data-page="keys-api-keys"] .ak-action-primary:hover{ background: var(--ak-brand-dark); color: #fff; }body[data-page="keys-api-keys"] .ak-action-danger{ color: var(--ak-danger); }body[data-page="keys-api-keys"] .ak-action:disabled{ cursor: wait; opacity: .6; }body[data-page="keys-api-keys"] .ak-empty{ padding: 42px 20px !important; color: var(--ak-muted); text-align: center; }body[data-page="keys-api-keys"] .ak-overlay{ display: none; position: fixed; inset: 0; z-index: 1050; background: rgba(12, 20, 31, .48); }body[data-page="keys-api-keys"] .ak-overlay.is-open{ display: block; }body[data-page="keys-api-keys"] .ak-drawer{ position: absolute; top: 0; right: 0; width: min(620px, 100%); height: 100%; overflow-y: auto; background: #fff; box-shadow: -18px 0 42px rgba(0,0,0,.16); }body[data-page="keys-api-keys"] .ak-drawer-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 22px 24px; border-bottom: 1px solid var(--ak-border); }body[data-page="keys-api-keys"] .ak-drawer-head h2{ margin: 0; font-size: 22px; }body[data-page="keys-api-keys"] .ak-drawer-head p{ margin: 5px 0 0; color: var(--ak-muted); }body[data-page="keys-api-keys"] .ak-close{ border: 0; background: transparent; color: #66758a; font-size: 24px; line-height: 1; }body[data-page="keys-api-keys"] .ak-form{ padding: 22px 24px 28px; }body[data-page="keys-api-keys"] .ak-section{ margin-bottom: 24px; }body[data-page="keys-api-keys"] .ak-section-title{ display: flex; align-items: center; gap: 9px; margin: 0 0 13px; font-size: 14px; font-weight: 800; }body[data-page="keys-api-keys"] .ak-section-number{ display: inline-grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #fff0dd; color: var(--ak-brand); font-size: 12px; }body[data-page="keys-api-keys"] .ak-form label{ display: block; margin-bottom: 6px; color: #334155; font-size: 13px; font-weight: 700; }body[data-page="keys-api-keys"] .ak-form .form-control{ height: 42px; border: 1px solid #cfd8e3; border-radius: 8px; box-shadow: none; }body[data-page="keys-api-keys"] .ak-form .form-group{ margin-bottom: 15px; }body[data-page="keys-api-keys"] .ak-form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }body[data-page="keys-api-keys"] .ak-help{ display: block; margin-top: 5px; color: var(--ak-muted); font-size: 12px; line-height: 1.45; }body[data-page="keys-api-keys"] .ak-permissions{ display: grid; gap: 8px; }body[data-page="keys-api-keys"] .ak-permission{ display: grid; grid-template-columns: 20px 1fr; gap: 9px; padding: 11px 12px; border: 1px solid var(--ak-border); border-radius: 9px; cursor: pointer; }body[data-page="keys-api-keys"] .ak-permission:hover{ background: #fafbfc; border-color: #c9d3de; }body[data-page="keys-api-keys"] .ak-permission input{ margin: 3px 0 0; }body[data-page="keys-api-keys"] .ak-permission strong{ display: block; color: #26364a; font-size: 13px; }body[data-page="keys-api-keys"] .ak-permission span{ display: block; margin-top: 2px; color: var(--ak-muted); font-size: 12px; font-weight: 400; }body[data-page="keys-api-keys"] .ak-prefix-box{ display: flex; flex-wrap: wrap; gap: 6px; min-height: 42px; padding: 7px; border: 1px solid #cfd8e3; border-radius: 8px; }body[data-page="keys-api-keys"] .ak-prefix-box:focus-within{ border-color: #d47a10; box-shadow: 0 0 0 3px rgba(212, 122, 16, .12); }body[data-page="keys-api-keys"] .ak-prefix-box input{ flex: 1; min-width: 120px; border: 0; outline: 0; text-transform: uppercase; }body[data-page="keys-api-keys"] .ak-prefix-pill{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; background: #eaf5ef; color: #23674d; font-size: 12px; font-weight: 800; }body[data-page="keys-api-keys"] .ak-prefix-remove{ border: 0; padding: 0; background: transparent; color: inherit; font-size: 15px; line-height: 1; }body[data-page="keys-api-keys"] .ak-form-error{ display: none; margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; background: #fdecec; color: #a52323; font-size: 13px; }body[data-page="keys-api-keys"] .ak-form-actions{ display: flex; justify-content: flex-end; gap: 9px; padding-top: 18px; border-top: 1px solid var(--ak-border); }body[data-page="keys-api-keys"] .ak-btn{ padding: 9px 14px; border: 1px solid #ccd5df; border-radius: 8px; background: #fff; color: #334155; font-weight: 700; }body[data-page="keys-api-keys"] .ak-btn-primary{ border-color: var(--ak-brand); background: var(--ak-brand); color: #fff; }body[data-page="keys-api-keys"] .ak-btn-primary:hover{ background: var(--ak-brand-dark); color: #fff; }body[data-page="keys-api-keys"] .ak-secret-card{ display: none; position: fixed; z-index: 1060; top: 50%; left: 50%; width: min(560px, calc(100% - 28px)); transform: translate(-50%, -50%); border-radius: 14px; background: #fff; box-shadow: 0 24px 70px rgba(0,0,0,.25); }body[data-page="keys-api-keys"] .ak-secret-card.is-open{ display: block; }body[data-page="keys-api-keys"] .ak-secret-body{ padding: 25px; }body[data-page="keys-api-keys"] .ak-secret-icon{ display: grid; width: 44px; height: 44px; place-items: center; margin-bottom: 14px; border-radius: 50%; background: #e7f6ed; color: var(--ak-success); font-size: 19px; }body[data-page="keys-api-keys"] .ak-secret-card h2{ margin: 0 0 7px; font-size: 22px; }body[data-page="keys-api-keys"] .ak-secret-card p{ color: var(--ak-muted); line-height: 1.5; }body[data-page="keys-api-keys"] .ak-secret-value{ display: flex; align-items: center; gap: 8px; margin: 16px 0; padding: 11px; border: 1px solid #d5dee8; border-radius: 9px; background: #f7f9fb; }body[data-page="keys-api-keys"] .ak-secret-value code{ flex: 1; overflow-wrap: anywhere; color: #26364a; font-size: 13px; }body[data-page="keys-api-keys"] .ak-secret-warning{ padding: 10px 12px; border-radius: 8px; background: #fff4d8; color: #755000; font-size: 12px; line-height: 1.5; }body[data-page="keys-api-keys"] .ak-secret-actions{ display: flex; justify-content: flex-end; gap: 8px; padding: 15px 25px; border-top: 1px solid var(--ak-border); }body[data-page="keys-api-keys"] .ak-toast{ display: none; position: fixed; z-index: 1100; right: 20px; bottom: 20px; max-width: 380px; padding: 12px 15px; border-radius: 9px; background: #172234; color: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.22); }body[data-page="keys-api-keys"] .ak-toast.is-error{ background: #a52323; }

    @media (max-width: 1050px) {body[data-page="keys-api-keys"] .ak-overview{ grid-template-columns: repeat(3, 1fr); }body[data-page="keys-api-keys"] .ak-lifecycle{ grid-column: 1 / -1; }body[data-page="keys-api-keys"] .ak-toolbar{ grid-template-columns: 1fr 1fr; }body[data-page="keys-api-keys"] .ak-count{ text-align: left; }
    }
    @media (max-width: 700px) {body[data-page="keys-api-keys"] #page-inner{ padding: 12px; }body[data-page="keys-api-keys"] .ak-hero{ align-items: stretch; flex-direction: column; padding: 20px; }body[data-page="keys-api-keys"] .ak-create{ width: 100%; }body[data-page="keys-api-keys"] .ak-overview{ grid-template-columns: 1fr; }body[data-page="keys-api-keys"] .ak-lifecycle{ grid-column: auto; }body[data-page="keys-api-keys"] .ak-life-steps{ align-items: flex-start; flex-direction: column; }body[data-page="keys-api-keys"] .ak-life-arrow{ transform: rotate(90deg); margin-left: 20px; }body[data-page="keys-api-keys"] .ak-toolbar,body[data-page="keys-api-keys"] .ak-form-grid{ grid-template-columns: 1fr; }body[data-page="keys-api-keys"] .ak-count{ text-align: left; }
    }

/* webroot/index.php */
body[data-page="index"] /* Chat page layout — integrates with spic-modern.css design system */

    #page-wrapper{
        padding: 0;
        overflow: hidden;
        height: calc(100vh - var(--spic-header-height));
        display: flex;
        flex-direction: column;
    }body[data-page="index"] #page-wrapper #page-inner{
        flex: 1;
        display: flex;
        overflow: hidden;
        height: 100%;
    }body[data-page="index"] .chat-shell{
        display: grid;
        grid-template-columns: 272px 1fr;
        flex: 1;
        overflow: hidden;
        height: 100%;
    }body[data-page="index"] /* ── Conversations Sidebar ── */

    .chat-sidebar{
        background: var(--spic-surface);
        border-right: 1px solid var(--spic-border);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }body[data-page="index"] .chat-sidebar-header{
        padding: 0.875rem 1rem;
        border-bottom: 1px solid var(--spic-border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        flex-shrink: 0;
    }body[data-page="index"] .chat-sidebar-header-title{
        font-size: 0.6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--spic-text-muted);
    }body[data-page="index"] .chat-sidebar-body{
        flex: 1;
        overflow-y: auto;
        padding: 0.5rem;
    }body[data-page="index"] .chat-conversation-item{
        padding: 0.625rem 0.75rem;
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.12s;
        margin-bottom: 1px;
        border-left: 2px solid transparent;
    }body[data-page="index"] .chat-conversation-item:hover{
        background: var(--spic-surface-2);
    }body[data-page="index"] .chat-conversation-item.active{
        background: var(--spic-primary-light);
        border-left-color: var(--spic-primary);
    }body[data-page="index"] .chat-conversation-item.active .chat-title{
        color: oklch(49% 0.14 58);
    }body[data-page="index"] .chat-title{
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--spic-text);
        line-height: 1.4;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }body[data-page="index"] .chat-meta{
        font-size: 0.6875rem;
        color: var(--spic-text-muted);
        margin-top: 2px;
        font-weight: 500;
    }body[data-page="index"] /* ── Main Chat Area ── */

    .chat-main{
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--spic-bg);
    }body[data-page="index"] .chat-main-header{
        padding: 0.875rem 1.25rem;
        border-bottom: 1px solid var(--spic-border);
        background: var(--spic-surface);
        display: flex;
        align-items: center;
        gap: 0.625rem;
        flex-shrink: 0;
    }body[data-page="index"] .chat-main-header-dot{
        width: 7px;
        height: 7px;
        background: var(--spic-success);
        border-radius: 50%;
        flex-shrink: 0;
        box-shadow: 0 0 0 2px oklch(54% 0.148 150 / 0.2);
    }body[data-page="index"] .chat-main-header-title{
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--spic-text);
        letter-spacing: -0.01em;
    }body[data-page="index"] /* ── Messages ── */

    .chat-messages{
        flex: 1;
        overflow-y: auto;
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.875rem;
    }body[data-page="index"] /* Empty state */
    .chat-empty{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem;
    }body[data-page="index"] .chat-empty-inner{
        text-align: center;
        max-width: 360px;
    }body[data-page="index"] .chat-empty-icon{
        font-size: 2.25rem;
        color: var(--spic-border-strong);
        margin-bottom: 1rem;
        line-height: 1;
    }body[data-page="index"] .chat-empty-title{
        font-size: 1.0625rem;
        font-weight: 700;
        color: var(--spic-text);
        margin-bottom: 0.5rem;
        letter-spacing: -0.01em;
    }body[data-page="index"] .chat-empty-desc{
        font-size: 0.875rem;
        color: var(--spic-text-muted);
        line-height: 1.65;
    }body[data-page="index"] .chat-message{
        max-width: 76%;
        padding: 0.75rem 1rem;
        line-height: 1.55;
        font-size: 0.9375rem;
        animation: msg-in 0.18s ease-out both;
    }

    @keyframes msg-in {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
    }body[data-page="index"] .chat-message.user{
        margin-left: auto;
        background: var(--spic-sidebar-bg);
        color: #fff;
        border-radius: 12px 12px 2px 12px;
        white-space: pre-wrap;
    }body[data-page="index"] .chat-message.assistant{
        margin-right: auto;
        background: var(--spic-surface);
        color: var(--spic-text);
        border: 1px solid var(--spic-border);
        border-radius: 2px 12px 12px 12px;
        box-shadow: var(--spic-shadow-sm);
    }body[data-page="index"] .chat-message.assistant ul,body[data-page="index"] .chat-message.assistant ol{
        margin: 8px 0 8px 20px;
        padding: 0;
    }body[data-page="index"] .chat-message.assistant p{
        margin: 0 0 8px 0;
    }body[data-page="index"] .chat-message.assistant p:last-child{ margin-bottom: 0; }body[data-page="index"] .chat-message.assistant a{
        color: var(--spic-primary);
        text-decoration: underline;
    }body[data-page="index"] /* ── Input Area ── */

    .chat-input-wrap{
        border-top: 1px solid var(--spic-border);
        padding: 0.875rem 1.25rem;
        background: var(--spic-surface);
        flex-shrink: 0;
    }body[data-page="index"] .chat-input-form{
        display: flex;
        align-items: flex-end;
        gap: 0.625rem;
    }body[data-page="index"] .chat-input{
        flex: 1;
        border: 1px solid var(--spic-border-strong);
        border-radius: 8px;
        min-height: 42px;
        max-height: 140px;
        padding: 0.625rem 0.875rem;
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
        font-size: 0.9375rem;
        resize: none;
        background: var(--spic-bg);
        color: var(--spic-text);
        transition: border-color 0.15s, box-shadow 0.15s;
        line-height: 1.5;
    }body[data-page="index"] .chat-input::placeholder{ color: var(--spic-text-muted); }body[data-page="index"] .chat-input:focus{
        border-color: var(--spic-primary);
        box-shadow: 0 0 0 3px oklch(69% 0.162 58 / 0.14);
        outline: none;
        background: var(--spic-surface);
    }body[data-page="index"] .chat-send-btn{
        background: oklch(14.5% 0.030 265);
        border: none;
        color: #fff;
        border-radius: 8px;
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.15s, transform 0.1s;
        flex-shrink: 0;
    }body[data-page="index"] .chat-send-btn:hover{ background: var(--spic-primary); }body[data-page="index"] .chat-send-btn:active{ transform: scale(0.95); }body[data-page="index"] .chat-send-btn:disabled{ opacity: 0.45; cursor: not-allowed; }body[data-page="index"] .chat-send-btn svg{ width: 16px; height: 16px; }body[data-page="index"] .chat-status{
        font-size: 0.75rem;
        color: var(--spic-text-muted);
        margin-top: 0.4rem;
        min-height: 16px;
        font-weight: 500;
    }body[data-page="index"] /* New chat button */
    #new-chat-btn{
        font-size: 0.75rem;
        font-weight: 600;
        padding: 0.25rem 0.625rem;
        border-radius: 5px;
        background: var(--spic-primary);
        border-color: var(--spic-primary);
        color: #fff;
        line-height: 1.4;
    }body[data-page="index"] #new-chat-btn:hover{
        background: var(--spic-primary-dark);
        border-color: var(--spic-primary-dark);
    }

    /* ── Responsive ── */

    @media (max-width: 900px) {body[data-page="index"] .chat-shell{
            grid-template-columns: 1fr;
            grid-template-rows: 220px 1fr;
        }body[data-page="index"] .chat-sidebar{ border-right: none; border-bottom: 1px solid var(--spic-border); }body[data-page="index"] .chat-main{ min-height: 0; }
    }

/* webroot/admin/workflows.php */
body[data-page="admin-workflows"] .workflow-summary-grid{
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 0.75rem;
            margin-bottom: 1rem;
        }body[data-page="admin-workflows"] .workflow-filter-card .card-body{ padding: 1rem; }body[data-page="admin-workflows"] .workflow-filter-grid{
            display: grid;
            grid-template-columns: minmax(15rem, 1.4fr) minmax(12rem, 1fr) minmax(13rem, 1fr) auto;
            gap: 0.75rem;
            align-items: end;
        }body[data-page="admin-workflows"] .workflow-page-size{ align-items: center; display: flex; gap: 0.45rem; }body[data-page="admin-workflows"] .workflow-page-size label{ color: var(--spic-text-muted); font-size: 0.75rem; white-space: nowrap; }body[data-page="admin-workflows"] .workflow-page-size .form-select{ font-size: 0.78rem; padding-bottom: 0.25rem; padding-top: 0.25rem; width: 5rem; }body[data-page="admin-workflows"] table[name="table-workflow"]{ margin-bottom: 0 !important; width: 100% !important; }body[data-page="admin-workflows"] table[name="table-workflow"] thead th{
            background: var(--spic-surface-2);
            border-bottom: 1px solid var(--spic-border) !important;
            color: var(--spic-text-muted);
            font-size: 0.7rem;
            letter-spacing: 0.045em;
            padding: 0.65rem 0.9rem;
            text-transform: uppercase;
        }body[data-page="admin-workflows"] table[name="table-workflow"] tbody tr[data-rowid]{ cursor: pointer; }body[data-page="admin-workflows"] table[name="table-workflow"] tbody tr[data-rowid] > td{
            border-color: var(--spic-border);
            padding: 0.8rem 0.9rem;
            vertical-align: middle;
        }body[data-page="admin-workflows"] table[name="table-workflow"] tbody tr[data-rowid]:hover > td{ background: var(--spic-primary-light); }body[data-page="admin-workflows"] table[name="table-workflow"] tbody tr.selected > td{
            background: var(--spic-primary-light) !important;
            box-shadow: inset 3px 0 0 var(--spic-primary);
        }body[data-page="admin-workflows"] .workflow-company-group td{
            background: var(--spic-sidebar-bg) !important;
            border: 0 !important;
            color: #fff;
            font-size: 0.82rem;
            font-weight: 750;
            padding: 0.62rem 0.9rem !important;
        }body[data-page="admin-workflows"] .workflow-company-group i{ color: var(--spic-primary); margin-right: 0.45rem; }body[data-page="admin-workflows"] .workflow-vendor-group td{
            background: var(--spic-surface-2) !important;
            border-bottom: 1px solid var(--spic-border) !important;
            color: var(--spic-text-2);
            font-size: 0.78rem;
            font-weight: 700;
            padding: 0.48rem 0.9rem 0.48rem 1.65rem !important;
        }body[data-page="admin-workflows"] .workflow-vendor-group i{ color: var(--spic-text-muted); margin-right: 0.45rem; }body[data-page="admin-workflows"] .workflow-group-count{
            background: var(--spic-surface);
            border: 1px solid var(--spic-border);
            border-radius: 999px;
            color: var(--spic-text-muted);
            font-size: 0.68rem;
            font-weight: 700;
            margin-left: 0.45rem;
            padding: 0.1rem 0.45rem;
        }body[data-page="admin-workflows"] .workflow-id{ color: var(--spic-text); font-size: 0.79rem; font-weight: 750; }body[data-page="admin-workflows"] .workflow-variant-badge{
            background: var(--spic-warning-bg);
            border: 1px solid color-mix(in oklch, var(--spic-warning) 35%, transparent);
            border-radius: 999px;
            color: oklch(47% 0.11 75);
            font-size: 0.64rem;
            font-weight: 750;
            padding: 0.08rem 0.42rem;
        }body[data-page="admin-workflows"] .workflow-remarks{
            color: var(--spic-text-2);
            font-size: 0.82rem;
            line-height: 1.35;
            max-width: 30rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }body[data-page="admin-workflows"] .workflow-scope{ color: var(--spic-text-muted); display: block; font-size: 0.69rem; margin-top: 0.3rem; }body[data-page="admin-workflows"] .workflow-scope i{ margin-right: 0.15rem; }body[data-page="admin-workflows"] .workflow-route{ align-items: center; display: flex; flex-wrap: wrap; gap: 0.25rem; max-width: 34rem; }body[data-page="admin-workflows"] .workflow-route-step{
            align-items: center;
            background: var(--spic-info-bg);
            border: 1px solid color-mix(in oklch, var(--spic-info) 20%, var(--spic-border));
            border-radius: 999px;
            color: var(--spic-text-2);
            display: inline-flex;
            font-size: 0.7rem;
            font-weight: 650;
            gap: 0.3rem;
            max-width: 9rem;
            padding: 0.18rem 0.45rem 0.18rem 0.25rem;
        }body[data-page="admin-workflows"] .workflow-route-number{
            align-items: center;
            background: var(--spic-info);
            border-radius: 50%;
            color: #fff;
            display: inline-flex;
            flex: 0 0 1.15rem;
            font-size: 0.62rem;
            height: 1.15rem;
            justify-content: center;
        }body[data-page="admin-workflows"] .workflow-route-name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }body[data-page="admin-workflows"] .workflow-route-arrow{ color: var(--spic-border-strong); font-size: 0.55rem; }body[data-page="admin-workflows"] .workflow-route-empty{ color: var(--spic-warning); font-size: 0.73rem; font-weight: 650; }body[data-page="admin-workflows"] .workflow-status-toggle{
            background: var(--spic-surface-2);
            border: 1px solid var(--spic-border);
            border-radius: 999px;
            display: inline-flex;
            padding: 0.16rem;
            white-space: nowrap;
        }body[data-page="admin-workflows"] .workflow-status-toggle .btn{
            border: 0;
            border-radius: 999px !important;
            color: var(--spic-text-muted);
            font-size: 0.67rem;
            font-weight: 750;
            line-height: 1.2;
            padding: 0.28rem 0.5rem;
        }body[data-page="admin-workflows"] .workflow-status-toggle[value="w1"] .e{
            background: var(--spic-success);
            color: #fff;
        }body[data-page="admin-workflows"] .workflow-status-toggle[value="w0"] .d{
            background: var(--spic-text-muted);
            color: #fff;
        }body[data-page="admin-workflows"] .workflow-actions{ display: flex; gap: 0.35rem; justify-content: flex-end; white-space: nowrap; }body[data-page="admin-workflows"] .workflow-actions .btn{ align-items: center; display: inline-flex; height: 2rem; justify-content: center; width: 2rem; }body[data-page="admin-workflows"] .workflow-table-footer{
            align-items: center;
            border-top: 1px solid var(--spic-border);
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            padding: 0.8rem 1rem;
        }body[data-page="admin-workflows"] .workflow-table-footer .dataTables_info{ color: var(--spic-text-muted) !important; font-size: 0.75rem; padding: 0 !important; }body[data-page="admin-workflows"] .workflow-table-footer .dataTables_paginate{ padding: 0 !important; }body[data-page="admin-workflows"] .workflow-table-footer .pagination{ margin: 0; }body[data-page="admin-workflows"] #workflow_detail > .card{ border: 0; box-shadow: none; margin: 0; }body[data-page="admin-workflows"] #workflow_detail > .card > .card-header{ background: var(--spic-surface); }

        @media (max-width: 1199.98px) {body[data-page="admin-workflows"] .workflow-summary-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }body[data-page="admin-workflows"] .workflow-filter-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 767.98px) {body[data-page="admin-workflows"] .workflow-summary-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }body[data-page="admin-workflows"] .workflow-filter-grid{ grid-template-columns: 1fr; }body[data-page="admin-workflows"] .workflow-table-footer{ align-items: flex-start; flex-direction: column; }body[data-page="admin-workflows"] .workflow-remarks{ max-width: 13rem; }
        }

/* webroot/admin/vendors.php */
body[data-page="admin-vendors"] table[name=table-vendor] td:last-child{ min-width: 18rem; }body[data-page="admin-vendors"] table[name=table-vendor] td:last-child .btn{
			margin: 0 0.125rem 0.25rem 0;
			white-space: nowrap;
		}body[data-page="admin-vendors"] table[name=table-vendor] tbody tr.selected,body[data-page="admin-vendors"] table[name=table-vendor] tbody tr.selected:hover{
			background: var(--spic-primary-light);
		}body[data-page="admin-vendors"] table[name=table-vendor] tbody tr.selected td{
			border-color: var(--spic-border);
			color: var(--spic-text);
		}body[data-page="admin-vendors"] table[name=table-vendor] tbody tr.selected a{ color: var(--spic-primary-dark); }

/* webroot/admin/vendor.ledger.php */
body[data-page="admin-vendor-ledger"] tr.disabled td{
			color: #aaa;
			font-style: italic;
		}body[data-page="admin-vendor-ledger"] table[name=table-vendor-ledger] tr.total td{
			border-top: 1px solid black;
			border-bottom: 3px double black;
		}body[data-page="admin-vendor-ledger"] table[name=table-vendor-ledger] tr.subtotal td{
			border-top: 1px solid black;
		}body[data-page="admin-vendor-ledger"] table[name=table-vendor-ledger] th:nth-child(5),body[data-page="admin-vendor-ledger"] table[name=table-vendor-ledger] th:nth-child(6),body[data-page="admin-vendor-ledger"] table[name=table-vendor-ledger] tr td:nth-child(5),body[data-page="admin-vendor-ledger"] table[name=table-vendor-ledger] tr td:nth-child(6){
			text-align: right;
		}

/* webroot/admin/companies.php */
body[data-page="admin-companies"] table[name=table-company] thead th:nth-child(4),body[data-page="admin-companies"] table[name=table-company] tbody td:nth-child(4){
			text-align: right;
		}body[data-page="admin-companies"] table[name=table-company] tbody td{
			white-space: nowrap;
			text-overflow: ellipsis;
		}