/* Kovara Theme - CSS Custom Properties * These properties can be overridden at runtime per institution * by setting inline styles on the element. */ :root { /* Primary color palette (Deep Teal - default) */ --color-primary-50: #ECFDF5; --color-primary-100: #D1FAE5; --color-primary-200: #A7F3D0; --color-primary-300: #6EE7B7; --color-primary-400: #34D399; --color-primary-500: #0F766E; --color-primary-600: #0D6B63; --color-primary-700: #0A5A53; --color-primary-800: #074D47; --color-primary-900: #042F2E; /* Semantic colors */ --color-success: #10B981; --color-success-light: #ECFDF5; --color-success-dark: #065F46; --color-warning: #F59E0B; --color-warning-light: #FFFBEB; --color-warning-dark: #92400E; --color-danger: #F43F5E; --color-danger-light: #FFF1F2; --color-danger-dark: #9F1239; --color-info: #0EA5E9; --color-info-light: #F0F9FF; --color-info-dark: #075985; } /* Primary button styles */ .btn-primary { background-color: var(--color-primary-500); color: white; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; gap: 0.5rem; transition: background-color 150ms ease-in-out; cursor: pointer; border: none; } /* When btn-primary is not hidden, use inline-flex display */ .btn-primary:not(.hidden) { display: inline-flex; align-items: center; justify-content: center; } .btn-primary:hover, a.btn-primary:hover { background-color: var(--color-primary-600); color: white; } .btn-primary:focus { outline: 2px solid var(--color-primary-500); outline-offset: 2px; } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } /* Secondary button styles */ .btn-secondary { background-color: white; color: #334155; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; gap: 0.5rem; transition: background-color 150ms ease-in-out; cursor: pointer; border: 1px solid #E2E8F0; } /* When btn-secondary is not hidden, use inline-flex display */ .btn-secondary:not(.hidden) { display: inline-flex; align-items: center; justify-content: center; } .btn-secondary:hover { background-color: #F8FAFC; } .btn-secondary:focus { outline: 2px solid var(--color-primary-500); outline-offset: 2px; } /* Danger button styles */ .btn-danger { background-color: var(--color-danger); color: white; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: background-color 150ms ease-in-out; cursor: pointer; border: none; } .btn-danger:hover, a.btn-danger:hover { background-color: var(--color-danger-dark); color: white; } /* Link styles */ a { color: var(--color-primary-500); } a:hover { color: var(--color-primary-600); } /* Sidebar active state */ .sidebar-active { background-color: rgba(51, 65, 85, 0.5); border-left: 2px solid var(--color-primary-500); } /* Focus ring for accessibility */ .focus-ring:focus { outline: 2px solid var(--color-primary-500); outline-offset: 2px; } /* Skip to content link for accessibility */ .skip-to-content { position: absolute; left: -9999px; z-index: 9999; padding: 1rem; background-color: var(--color-primary-500); color: white; text-decoration: none; } .skip-to-content:focus { left: 0; } /* Financial amount colors */ .amount-positive { color: var(--color-success); font-weight: 600; } .amount-negative { color: var(--color-danger); font-weight: 600; } .amount-pending { color: var(--color-warning-dark); font-weight: 600; } /* Card styles */ .card { background-color: white; border-radius: 0.75rem; border: 1px solid #E2E8F0; padding: 1.25rem; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04); } .card:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05); } /* Status badge base */ .badge { display: inline-flex; align-items: center; padding: 0.25rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; box-shadow: inset 0 0 0 1px currentColor; } .badge-active, .badge-approved { background-color: #ECFDF5; color: #065F46; } .badge-pending { background-color: #FFFBEB; color: #92400E; } .badge-rejected, .badge-closed, .badge-overdue { background-color: #FFF1F2; color: #9F1239; } .badge-info, .badge-disbursed { background-color: #F0F9FF; color: #075985; } .badge-neutral, .badge-withdrawn { background-color: #F8FAFC; color: #475569; } /* Monospace text for account numbers */ .font-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } /* Table styles */ .table-header { background-color: #F8FAFC; font-size: 0.75rem; font-weight: 500; color: #64748B; text-transform: uppercase; letter-spacing: 0.05em; } .table-row-stripe:nth-child(even) { background-color: #F8FAFC; } /* Form input focus states using primary color */ input:focus, select:focus, textarea:focus { border-color: var(--color-primary-500); box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15); } /* Checkbox styles */ input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 1rem; height: 1rem; border: 1.5px solid #CBD5E1; border-radius: 0.25rem; background-color: white; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; vertical-align: middle; transition: all 150ms ease-in-out; } input[type="checkbox"]:hover { border-color: var(--color-primary-500); } input[type="checkbox"]:focus { outline: none; border-color: var(--color-primary-500); box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15); } input[type="checkbox"]:checked { background-color: var(--color-primary-500); border-color: var(--color-primary-500); } input[type="checkbox"]:checked::after { content: ""; display: block; width: 0.375rem; height: 0.625rem; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-bottom: 2px; } input[type="checkbox"]:disabled { background-color: #F1F5F9; border-color: #E2E8F0; cursor: not-allowed; } input[type="checkbox"]:disabled:checked { background-color: #94A3B8; border-color: #94A3B8; } /* Logo text fallback */ .logo-text { font-size: 1.125rem; font-weight: 700; color: white; }