@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap");@tailwind base;@tailwind components;@tailwind utilities;@layer base{:root{--navy:#0f1f3d;--navy-mid:#1a3260;--navy-light:#234080;--accent:#3b82f6;--accent-hover:#2563eb;--accent-light:#eff6ff;--success:#10b981;--warning:#f59e0b;--danger:#ef4444;--surface:#f8fafc;--border:#e2e8f0;--border-dark:#cbd5e1;--text-primary:#0f172a;--text-secondary:#64748b;--text-muted:#94a3b8;--sidebar-w:224px;--radius:10px;--shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);--shadow-md:0 4px 16px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.04);--shadow-lg:0 8px 32px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.06)}*{box-sizing:border-box}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:DM Sans,Hiragino Sans,Yu Gothic UI,sans-serif;background-color:var(--surface);color:var(--text-primary);font-size:14px;line-height:1.6}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-dark);border-radius:99px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}}@layer components{.btn-primary{@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold text-white
           disabled:opacity-40 disabled:cursor-not-allowed select-none;background:var(--accent);box-shadow:0 1px 3px rgba(59,130,246,.3),inset 0 1px 0 hsla(0,0%,100%,.1);transition:background .15s,transform .1s,box-shadow .15s}.btn-primary:hover:not(:disabled){background:var(--accent-hover);box-shadow:0 2px 8px rgba(59,130,246,.4);transform:translateY(-1px)}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-secondary{@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-sm font-medium select-none;color:var(--text-primary);background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:background .15s,border-color .15s,transform .1s}.btn-secondary:hover{background:var(--surface);border-color:var(--border-dark);transform:translateY(-1px)}.btn-secondary:active{transform:translateY(0)}.btn-danger{@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold text-white select-none;background:var(--danger);box-shadow:0 1px 3px rgba(239,68,68,.3);transition:background .15s,transform .1s}.btn-danger:hover{background:#dc2626;transform:translateY(-1px)}.btn-success{@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold text-white select-none;background:var(--success);box-shadow:0 1px 3px rgba(16,185,129,.3);transition:background .15s,transform .1s}.btn-success:hover{background:#059669;transform:translateY(-1px)}.card{border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem 1.5rem;box-shadow:var(--shadow-sm)}.card,.input{background:#fff}.input{@apply w-full text-sm rounded-lg px-3 py-2.5 outline-none transition-all;border:1.5px solid var(--border);color:var(--text-primary);font-family:inherit}.input::placeholder{color:var(--text-muted)}.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.12)}.input:hover:not(:focus){border-color:var(--border-dark)}.badge{@apply inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold tracking-wide}.badge:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7}.badge-pending{@apply badge;background:#fef3c7;color:#92400e}.badge-approved{@apply badge;background:#d1fae5;color:#065f46}.badge-rejected{@apply badge;background:#fee2e2;color:#991b1b}.badge-draft{@apply badge;background:#f1f5f9;color:#475569}.badge-completed{@apply badge;background:#dbeafe;color:#1e40af}.badge-issued{@apply badge;background:#e0e7ff;color:#3730a3}.badge-sent{@apply badge;background:#f3e8ff;color:#6b21a8}.badge-paid{@apply badge;background:#d1fae5;color:#065f46}.badge-overdue{@apply badge;background:#fee2e2;color:#991b1b}.table-container{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}.table-container table{@apply w-full text-sm;border-collapse:collapse}.table-container thead tr{background:var(--navy)}.table-container thead th{@apply px-4 py-3 text-left text-xs font-semibold tracking-wider;color:hsla(0,0%,100%,.75);border-bottom:1px solid hsla(0,0%,100%,.08)}.table-container thead th:first-child{padding-left:1.25rem}.table-container tbody tr{border-bottom:1px solid var(--border);transition:background .1s}.table-container tbody tr:last-child{border-bottom:none}.table-container tbody tr:hover{background:var(--accent-light)}.table-container tbody td{@apply px-4 py-3;color:var(--text-primary)}.table-container tbody td:first-child{padding-left:1.25rem}.table-container tfoot tr{background:var(--surface);border-top:2px solid var(--border)}.page-header,.table-container tfoot td{@apply flex items-center justify-between flex-wrap gap-3 mb-5}.page-title{@apply text-xl font-bold tracking-tight;color:var(--text-primary)}.section-title{@apply text-sm font-semibold uppercase tracking-widest mb-3;color:var(--text-muted)}.stat-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden}.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.stat-card:after{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--radius) var(--radius) 0 0}.stat-card.blue:after{background:var(--accent)}.stat-card.green:after{background:var(--success)}.stat-card.orange:after{background:var(--warning)}.stat-card.red:after{background:var(--danger)}.stat-card.purple:after{background:#8b5cf6}.modal-overlay{@apply fixed inset-0 z-50 flex items-center justify-center p-4;background:rgba(15,31,61,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .15s ease}.modal-box{background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);width:100%;max-width:480px;animation:slideUp .2s ease}.modal-header{@apply flex items-center justify-between px-6 py-4;border-bottom:1px solid var(--border)}.modal-body{@apply px-6 py-5 space-y-4}.modal-footer{@apply flex gap-3 px-6 py-4;border-top:1px solid var(--border);background:var(--surface);border-radius:0 0 14px 14px}.form-label{@apply block text-xs font-semibold uppercase tracking-wide mb-1.5;color:var(--text-secondary)}.alert{@apply flex items-start gap-3 px-4 py-3 rounded-lg text-sm;border:1px solid}.alert-info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}.alert-warn{background:#fffbeb;border-color:#fde68a;color:#92400e}.alert-success{background:#f0fdf4;border-color:#bbf7d0;color:#065f46}.alert-danger{background:#fff1f2;border-color:#fecdd3;color:#881337}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.4}}@keyframes bell-ring{0%{transform:rotate(0deg)}5%{transform:rotate(18deg)}10%{transform:rotate(-16deg)}15%{transform:rotate(14deg)}20%{transform:rotate(-12deg)}25%{transform:rotate(10deg)}30%{transform:rotate(-8deg)}35%{transform:rotate(6deg)}40%{transform:rotate(0deg)}to{transform:rotate(0deg)}}.bell-ringing{animation:bell-ring 1.4s ease-in-out infinite;transform-origin:top center;color:#fbbf24!important;filter:drop-shadow(0 0 6px rgba(251,191,36,.7))}.animate-slide-in{animation:slideIn .2s ease both}.animate-fade-in{animation:fadeIn .25s ease both}.stagger>*{animation:slideIn .2s ease both}.stagger>:first-child{animation-delay:0ms}.stagger>:nth-child(2){animation-delay:50ms}.stagger>:nth-child(3){animation-delay:.1s}.stagger>:nth-child(4){animation-delay:.15s}.stagger>:nth-child(5){animation-delay:.2s}.stagger>:nth-child(6){animation-delay:.25s}.font-mono{font-family:DM Mono,Fira Code,monospace}.tabular{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}