:root{--navy: #001744;--navy-light: #0a2a5e;--grey: #D9DADB;--grey-light: #f5f6f8;--orange: #ED7F00;--orange-hover: #d97200;--blue-light: #B9C3D9;--white: #ffffff;--text: #001744;--text-secondary: #5a6577;--border: #e2e4e8;--success: #22c55e;--warning: #f59e0b;--danger: #ef4444;--shadow: 0 1px 3px rgba(0, 23, 68, .08);--shadow-lg: 0 4px 12px rgba(0, 23, 68, .12);--radius: 8px;--radius-sm: 4px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,Arial,sans-serif;background:var(--grey-light);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:var(--navy);color:#fff;gap:16px}.loading-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.2);border-top-color:var(--orange);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.app-layout{min-height:100vh;display:flex;flex-direction:column}.app-header{background:var(--navy);color:#fff;padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px #00000026}.header-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}.header-brand h1{font-size:18px;font-weight:700;letter-spacing:.5px}.header-brand span{font-size:13px;color:var(--blue-light);font-weight:400}.header-nav{display:flex;align-items:center;gap:4px}.header-nav a{color:var(--blue-light);text-decoration:none;padding:8px 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;transition:all .2s}.header-nav a:hover,.header-nav a.active{color:#fff;background:#ffffff1a}.header-user{display:flex;align-items:center;gap:12px}.header-user-name{font-size:13px;color:var(--blue-light)}.header-user-role{font-size:11px;background:var(--orange);color:#fff;padding:2px 8px;border-radius:10px;font-weight:600}.app-content{flex:1;padding:24px;max-width:1400px;margin:0 auto;width:100%}.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border)}.card-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.card-header h2{font-size:16px;font-weight:600}.card-body{padding:20px}.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;border:none;cursor:pointer;transition:all .2s;text-decoration:none;line-height:1.4}.btn-primary{background:var(--navy);color:#fff}.btn-primary:hover{background:var(--navy-light)}.btn-orange{background:var(--orange);color:#fff}.btn-orange:hover{background:var(--orange-hover)}.btn-outline{background:#fff;color:var(--navy);border:1px solid var(--border)}.btn-outline:hover{border-color:var(--navy);background:var(--grey-light)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:#dc2626}.btn-success{background:var(--success);color:#fff}.btn-sm{padding:5px 10px;font-size:12px}.btn-lg{padding:12px 24px;font-size:15px}.btn:disabled{opacity:.5;cursor:not-allowed}.form-group{margin-bottom:16px}.form-label{display:block;font-size:13px;font-weight:500;margin-bottom:4px;color:var(--text)}.form-label .required{color:var(--danger)}.form-input,.form-select,.form-textarea{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:14px;font-family:inherit;color:var(--text);background:#fff;transition:border-color .2s}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 2px #0017441a}.form-textarea{min-height:80px;resize:vertical}.form-hint{font-size:12px;color:var(--text-secondary);margin-top:4px}.table-wrapper{overflow-x:auto}table{width:100%;border-collapse:collapse}thead th{background:var(--grey-light);color:var(--text-secondary);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:10px 14px;text-align:left;border-bottom:2px solid var(--border);white-space:nowrap}tbody td{padding:12px 14px;font-size:13px;border-bottom:1px solid var(--border);vertical-align:middle}tbody tr{transition:background .15s;cursor:pointer}tbody tr:hover{background:#00174405}.badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600;white-space:nowrap}.badge-new{background:#e0f2fe;color:#0369a1}.badge-pending-secretary{background:#fef3c7;color:#92400e}.badge-pending-owner{background:#fce7f3;color:#9d174d}.badge-approved{background:#dcfce7;color:#166534}.badge-sent{background:#f0fdf4;color:#14532d}.badge-rejected{background:#fee2e2;color:#991b1b}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}.stat-card{background:#fff;border-radius:var(--radius);padding:20px;border:1px solid var(--border);box-shadow:var(--shadow)}.stat-card .stat-value{font-size:28px;font-weight:700;color:var(--navy)}.stat-card .stat-label{font-size:13px;color:var(--text-secondary);margin-top:4px}.stat-card.highlight{border-left:4px solid var(--orange)}.invoice-detail{display:grid;grid-template-columns:1fr 1fr;gap:24px}.invoice-pdf{grid-column:1}.invoice-info{grid-column:2}.info-section{margin-bottom:20px}.info-section h3{font-size:14px;font-weight:600;color:var(--text-secondary);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border)}.info-row{display:flex;justify-content:space-between;padding:6px 0;font-size:13px}.info-row .label{color:var(--text-secondary)}.info-row .value{font-weight:500;text-align:right}.pdf-viewer{background:#fff;border-radius:var(--radius);border:1px solid var(--border);overflow:hidden}.pdf-viewer iframe{width:100%;height:70vh;border:none}.signature-container{background:#fff;border-radius:var(--radius);border:2px dashed var(--border);padding:16px;text-align:center}.signature-container.active{border-color:var(--navy)}.signature-canvas{border:1px solid var(--border);border-radius:var(--radius-sm);touch-action:none;max-width:100%}.signature-actions{display:flex;gap:8px;margin-top:12px;justify-content:center}.email-toggle{cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--navy);font-size:13px;padding:6px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:#fff;transition:all .2s}.email-toggle:hover{background:var(--grey-light)}.email-body{margin-top:12px;padding:16px;background:var(--grey-light);border-radius:var(--radius-sm);font-size:13px;white-space:pre-wrap;max-height:300px;overflow-y:auto}.upload-zone{border:2px dashed var(--border);border-radius:var(--radius);padding:40px;text-align:center;cursor:pointer;transition:all .2s}.upload-zone:hover,.upload-zone.dragover{border-color:var(--navy);background:#00174405}.upload-zone p{color:var(--text-secondary);margin-top:8px;font-size:14px}.pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px}.pagination button{padding:6px 12px;border:1px solid var(--border);background:#fff;border-radius:var(--radius-sm);cursor:pointer;font-size:13px}.pagination button.active{background:var(--navy);color:#fff;border-color:var(--navy)}.pagination button:disabled{opacity:.4;cursor:not-allowed}.search-bar{position:relative}.search-bar input{padding-left:36px}.search-bar svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-secondary)}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--navy)}.login-card{background:#fff;border-radius:var(--radius);padding:40px;text-align:center;max-width:400px;width:90%;box-shadow:var(--shadow-lg)}.login-card h1{font-size:24px;font-weight:700;color:var(--navy);margin-bottom:8px}.login-card p{color:var(--text-secondary);margin-bottom:24px;font-size:14px}.login-btn{width:100%;padding:12px;font-size:15px;background:var(--navy);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;font-weight:600;transition:background .2s}.login-btn:hover{background:var(--navy-light)}@media (max-width: 1024px){.invoice-detail{grid-template-columns:1fr}.invoice-pdf{order:1}.invoice-info{order:2}}@media (max-width: 768px){.app-header{padding:0 12px;height:56px}.header-brand h1{font-size:15px}.header-brand span,.header-nav{display:none}.app-content{padding:12px}.stats-grid{grid-template-columns:repeat(2,1fr);gap:10px}.stat-card .stat-value{font-size:22px}table{font-size:12px}thead th,tbody td{padding:8px 10px}.btn-lg{padding:10px 18px;font-size:14px}.pdf-viewer iframe{height:50vh}}@media (max-width: 480px){.stats-grid{grid-template-columns:1fr}.header-user-name{display:none}}.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);padding:8px 0;z-index:100;box-shadow:0 -2px 8px #00000014}.mobile-nav-items{display:flex;justify-content:space-around}.mobile-nav-item{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--text-secondary);font-size:10px;padding:4px 8px}.mobile-nav-item.active{color:var(--navy)}.mobile-nav-item svg{width:22px;height:22px;margin-bottom:2px}@media (max-width: 768px){.mobile-nav{display:block}.app-content{padding-bottom:80px}}.toast{position:fixed;top:20px;right:20px;padding:12px 20px;border-radius:var(--radius-sm);color:#fff;font-size:14px;z-index:1000;animation:slideIn .3s ease;box-shadow:var(--shadow-lg)}.toast-success{background:var(--success)}.toast-error{background:var(--danger)}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}