:root{--font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--bg-app:#f8fafc;--bg-sidebar:#0f172a;--bg-card:#fff;--primary:#4f46e5;--primary-hover:#4338ca;--primary-light:#eef2ff;--secondary:#06b6d4;--success:#10b981;--success-bg:#ecfdf5;--success-border:#a7f3d0;--success-text:#065f46;--warning:#f59e0b;--warning-bg:#fffbeb;--warning-border:#fde68a;--warning-text:#92400e;--danger:#ef4444;--danger-bg:#fef2f2;--danger-border:#fecaca;--danger-text:#991b1b;--text-dark:#0f172a;--text-muted:#64748b;--border:#e2e8f0;--border-focus:#4f46e5;--primary-50:#eef2ff;--primary-100:#e0e7ff;--primary-500:#6366f1;--primary-600:#4f46e5;--primary-700:#4338ca;--bg-surface:#fff;--bg-subtle:#f1f5f9;--border-color:#e2e8f0;--text-primary:#0f172a;--text-secondary:#475569;--text-light:#94a3b8;--shadow-xs:0 1px 2px 0 #0f172a0a;--shadow-sm:0 1px 3px 0 #0f172a0f, 0 1px 2px -1px #0f172a0a;--shadow-md:0 4px 6px -1px #0f172a12, 0 2px 4px -2px #0f172a0d;--shadow-lg:0 10px 15px -3px #0f172a14, 0 4px 6px -4px #0f172a0a;--shadow-card:0 1px 3px #0f172a0f, 0 1px 2px #0f172a0a;--shadow-card-hover:0 8px 16px -2px #0f172a14, 0 4px 6px -2px #0f172a0a;--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-full:9999px;--transition:all .18s cubic-bezier(.4, 0, .2, 1);--transition-fast:all .12s ease}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);color:#0f172a;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f8fafc;line-height:1.5}#root{flex-direction:column;min-height:100vh;display:flex}a{color:inherit;text-decoration:none}button,input,select,textarea{font-family:inherit;font-size:inherit}button{cursor:pointer;background:0 0;border:none}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:9999px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}.app-container{background-color:#f8fafc;min-height:100vh;display:flex}.sidebar-wrapper{color:#f8fafc;z-index:50;background-color:#0f172a;border-right:1px solid #ffffff14;flex-direction:column;flex-shrink:0;width:260px;transition:transform .25s cubic-bezier(.4,0,.2,1);display:flex}.app-sidebar{flex-direction:column;height:100vh;padding:1.25rem 1rem;display:flex;position:sticky;top:0}.sidebar-brand{border-bottom:1px solid #ffffff14;align-items:center;gap:.75rem;margin-bottom:1.25rem;padding:.25rem .5rem 1.25rem;display:flex}.brand-logo{color:#fff;border-radius:var(--radius-sm);background-color:#4f46e5;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;display:flex;box-shadow:0 4px 12px #4f46e559}.brand-text h2{color:#fff;letter-spacing:-.02em;margin:0;font-size:1.125rem;font-weight:700;line-height:1.2}.brand-text span{color:#94a3b8;letter-spacing:.05em;text-transform:uppercase;font-size:.6875rem;font-weight:600}.sidebar-section-title{color:#64748b;letter-spacing:.08em;text-transform:uppercase;padding:.75rem .6rem .35rem;font-size:.6875rem;font-weight:700}.sidebar-nav{flex-direction:column;flex:1;gap:.35rem;display:flex;overflow-y:auto}.nav-link{border-radius:var(--radius-sm);color:#94a3b8;transition:var(--transition);align-items:center;gap:.75rem;padding:.65rem .85rem;font-size:.875rem;font-weight:500;display:flex;position:relative}.nav-link:hover{color:#f8fafc;background-color:#ffffff0f}.nav-link-active{font-weight:600;box-shadow:0 2px 8px #4f46e559;color:#fff!important;background-color:#4f46e5!important}.nav-icon{color:inherit;flex-shrink:0;justify-content:center;align-items:center;display:flex}.nav-label{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.sidebar-footer{border-top:1px solid #ffffff14;flex-direction:column;gap:.65rem;padding-top:1rem;display:flex}.user-profile-chip{border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);background-color:#ffffff0a;border:1px solid #ffffff14;align-items:center;gap:.75rem;padding:.55rem .65rem;display:flex}.user-profile-chip:hover{background-color:#ffffff14;border-color:#ffffff26}.avatar-circle{border-radius:var(--radius-full);color:#fff;background-color:#4f46e5;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;font-size:.8125rem;font-weight:700;display:flex}.user-details{flex-direction:column;display:flex;overflow:hidden}.user-name{color:#f8fafc;white-space:nowrap;text-overflow:ellipsis;font-size:.8125rem;font-weight:600;overflow:hidden}.user-role{color:#94a3b8;white-space:nowrap;text-overflow:ellipsis;font-size:.6875rem;overflow:hidden}.logout-button{border-radius:var(--radius-sm);color:#94a3b8;transition:var(--transition);background-color:#0000;justify-content:center;align-items:center;gap:.5rem;padding:.55rem;font-size:.8125rem;font-weight:500;display:flex}.logout-button:hover{color:#ef4444;background-color:#ef44441f}.main-content-wrapper{flex-direction:column;flex:1;min-width:0;display:flex;overflow-x:hidden}.top-header{z-index:40;background-color:#fff;border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;padding:1rem 2rem;display:flex;position:sticky;top:0;box-shadow:0 1px 2px #0f172a0a}.header-left{align-items:center;gap:1rem;display:flex}.mobile-menu-toggle{border-radius:var(--radius-sm);color:#475569;padding:.4rem;display:none}.mobile-menu-toggle:hover{background-color:#f1f5f9}.page-title{color:#0f172a;letter-spacing:-.02em;font-size:1.25rem;font-weight:700;line-height:1.25}.page-subtitle{color:#64748b;margin-top:.15rem;font-size:.8125rem}.header-right{align-items:center;gap:.875rem;display:flex}.quick-apply-btn{color:#fff;border-radius:var(--radius-sm);transition:var(--transition);background-color:#4f46e5;align-items:center;gap:.45rem;padding:.5rem .9rem;font-size:.8125rem;font-weight:600;display:inline-flex;box-shadow:0 1px 3px #4f46e540}.quick-apply-btn:hover{background-color:#4338ca;transform:translateY(-1px);box-shadow:0 3px 8px #4f46e559}.header-user-badge{border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);background-color:#fff;border:1px solid #e2e8f0;align-items:center;gap:.65rem;padding:.35rem .65rem;display:flex}.header-user-badge:hover{background-color:#f8fafc;border-color:#cbd5e1}.user-initials{border-radius:var(--radius-full);color:#4f46e5;background-color:#eef2ff;justify-content:center;align-items:center;width:28px;height:28px;font-size:.75rem;font-weight:700;display:flex}.user-meta{flex-direction:column;display:flex}.user-name-header{color:#0f172a;font-size:.8125rem;font-weight:600;line-height:1.2}.user-badge-tag{color:#64748b;font-size:.6875rem}.page-content{flex:1;width:100%;max-width:1440px;margin:0 auto;padding:1.75rem 2rem 2.5rem}.toast-notification{z-index:100;border-radius:var(--radius-md);align-items:center;gap:.65rem;padding:.75rem 1.15rem;font-size:.875rem;font-weight:600;animation:.25s cubic-bezier(.4,0,.2,1) slideIn;display:flex;position:fixed;top:1.25rem;right:1.5rem;box-shadow:0 10px 15px -3px #0f172a1f}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.toast-success{color:#fff;background-color:#065f46;border:1px solid #10b981}.toast-warning{color:#fff;background-color:#92400e;border:1px solid #f59e0b}.toast-info{color:#fff;background-color:#1e40af;border:1px solid #3b82f6}.admin-page-container{flex-direction:column;gap:1.75rem;display:flex}.admin-header-row{border-bottom:1px solid #e2e8f0;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding-bottom:.75rem;display:flex}.admin-title{color:#0f172a;letter-spacing:-.02em;margin:0;font-size:1.35rem;font-weight:800}.admin-subtitle{color:#64748b;margin:.2rem 0 0;font-size:.8125rem}.section-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.875rem;display:flex}.section-header-compact{justify-content:space-between;align-items:center;margin-bottom:.875rem;display:flex}.section-title{color:#0f172a;align-items:center;gap:.5rem;margin:0;font-size:1rem;font-weight:700;display:flex}.section-title-sm{color:#0f172a;align-items:center;gap:.45rem;margin:0;font-size:.9375rem;font-weight:700;display:flex}.section-subtitle{color:#64748b;margin-top:.15rem;font-size:.75rem}.section-link{color:#4f46e5;transition:var(--transition);font-size:.8125rem;font-weight:600}.section-link:hover{color:#4338ca;text-decoration:underline}.admin-overview-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.875rem;display:grid}.superior-bento-grid{grid-template-columns:1.35fr repeat(3,1fr);align-items:stretch;gap:1rem;display:grid}.featured-away-card{color:#fff;border-radius:var(--radius-md);background:linear-gradient(145deg,#0f172a 0%,#1e293b 100%);border:1px solid #ffffff1a;flex-direction:column;grid-area:span 2/span 1;justify-content:space-between;padding:1.4rem;display:flex;position:relative;overflow:hidden;box-shadow:0 10px 20px -3px #0f172a2e,0 4px 6px -2px #0f172a14}.featured-away-card:after{content:"";pointer-events:none;background:radial-gradient(circle,#4f46e540 0%,#0000 70%);border-radius:50%;width:130px;height:130px;position:absolute;top:-40px;right:-40px}.featured-card-top{justify-content:space-between;align-items:center;display:flex}.featured-icon{border-radius:var(--radius-sm);color:#06b6d4;background-color:#06b6d426;border:1px solid #06b6d44d;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.featured-pill{border-radius:var(--radius-full);color:#e2e8f0;letter-spacing:.04em;text-transform:uppercase;background-color:#ffffff1f;padding:.25rem .65rem;font-size:.6875rem;font-weight:700}.featured-card-middle{margin:1.25rem 0 1rem}.featured-count-row{align-items:baseline;gap:.5rem;display:flex}.featured-count{color:#fff;letter-spacing:-.04em;font-size:3rem;font-weight:800;line-height:1}.featured-count-label{color:#94a3b8;font-size:.8125rem;font-weight:500}.featured-title{color:#fff;margin-top:.5rem;font-size:1.05rem;font-weight:700}.featured-subtitle{color:#94a3b8;margin-top:.15rem;font-size:.75rem}.featured-card-bottom{border-top:1px solid #ffffff14;flex-direction:column;gap:.5rem;padding-top:.85rem;display:flex}.featured-breakdown-row{flex-wrap:wrap;gap:.5rem;display:flex}.featured-chip{border-radius:var(--radius-xs);color:#cbd5e1;background-color:#ffffff14;align-items:center;gap:.35rem;padding:.2rem .55rem;font-size:.6875rem;font-weight:600;display:inline-flex}.insight-banner{border-radius:var(--radius-md);background-color:#eef2ff;border:1px solid #c7d2fe;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem;padding:.85rem 1.25rem;display:flex}.insight-content{align-items:center;gap:.75rem;display:flex}.insight-icon-container{border-radius:var(--radius-sm);color:#fff;background-color:#4f46e5;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;display:flex}.insight-text-wrapper{flex-direction:column;display:flex}.insight-heading{color:#4f46e5;text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:700}.insight-message{color:#0f172a;margin:0;font-size:.8125rem;font-weight:500}.insight-badge{border-radius:var(--radius-full);color:#fff;white-space:nowrap;background-color:#4f46e5;padding:.25rem .65rem;font-size:.6875rem;font-weight:700}.team-name-cell{align-items:center;gap:.6rem;display:flex}.team-dot{border-radius:var(--radius-full);flex-shrink:0;width:9px;height:9px;display:inline-block;box-shadow:0 0 0 2px #fffc}.count-badge{border-radius:var(--radius-full);justify-content:center;align-items:center;min-width:24px;padding:.15rem .5rem;font-size:.75rem;font-weight:700;display:inline-flex}.count-badge-zero{color:#94a3b8;background-color:#0000;font-weight:500}.count-badge-amber{color:#b45309;background-color:#fffbeb;border:1px solid #fde68a}.count-badge-blue{color:#4338ca;background-color:#eef2ff;border:1px solid #c7d2fe}.count-badge-green{color:#065f46;background-color:#ecfdf5;border:1px solid #a7f3d0}.count-badge-red{color:#991b1b;background-color:#fef2f2;border:1px solid #fecaca}.count-badge-teal{color:#0891b2;background-color:#ecfeff;border:1px solid #cffafe}@media (width<=1100px){.superior-bento-grid{grid-template-columns:repeat(2,1fr)}.featured-away-card{grid-area:span 1/span 2}}@media (width<=640px){.superior-bento-grid{grid-template-columns:1fr}.featured-away-card{grid-column:span 1}}.overview-card{border-radius:var(--radius-md);transition:var(--transition);background-color:#fff;border:1px solid #e2e8f0;flex-direction:column;gap:.75rem;padding:1.15rem;display:flex;position:relative;overflow:hidden;box-shadow:0 1px 3px #0f172a0d,0 1px 2px #0f172a08}.overview-card:hover{border-color:#cbd5e1;transform:translateY(-2px);box-shadow:0 8px 16px -2px #0f172a14,0 4px 6px -2px #0f172a0a}.overview-card-header{justify-content:space-between;align-items:center;display:flex}.overview-icon{border-radius:var(--radius-full);flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;font-size:1rem;display:flex}.icon-teal{color:#06b6d4;background-color:#ecfeff;border:1px solid #cffafe}.icon-cyan{color:#0891b2;background-color:#ecfeff;border:1px solid #cffafe}.icon-amber{color:#f59e0b;background-color:#fffbeb;border:1px solid #fde68a}.icon-blue{color:#4f46e5;background-color:#eef2ff;border:1px solid #e0e7ff}.icon-green{color:#10b981;background-color:#ecfdf5;border:1px solid #a7f3d0}.icon-red{color:#ef4444;background-color:#fef2f2;border:1px solid #fecaca}.icon-purple{color:#7e22ce;background-color:#faf5ff;border:1px solid #e9d5ff}.overview-count{color:#0f172a;letter-spacing:-.03em;font-size:1.75rem;font-weight:800;line-height:1}.overview-card-body{flex-direction:column;gap:.15rem;display:flex}.overview-title{color:#0f172a;margin:0;font-size:.8125rem;font-weight:700;line-height:1.25}.overview-subtitle{color:#64748b;margin:0;font-size:.6875rem}.counter-pill{border-radius:var(--radius-full);color:#475569;letter-spacing:.02em;background-color:#f1f5f9;border:1px solid #e2e8f0;padding:.2rem .55rem;font-size:.6875rem;font-weight:700}.pill-amber{color:#92400e;background-color:#fffbeb;border-color:#fde68a}.pill-blue{color:#4338ca;background-color:#eef2ff;border-color:#c7d2fe}.pill-green{color:#065f46;background-color:#ecfdf5;border-color:#a7f3d0}.table-card{border-radius:var(--radius-md);background-color:#fff;border:1px solid #e2e8f0;overflow:hidden;box-shadow:0 1px 3px #0f172a0d,0 1px 2px #0f172a08}.table-responsive{width:100%;overflow-x:auto}.custom-table{border-collapse:collapse;text-align:left;width:100%;font-size:.8125rem}.custom-table th{color:#64748b;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;background-color:#f8fafc;border-bottom:1px solid #e2e8f0;padding:.85rem 1rem;font-size:.6875rem;font-weight:700}.custom-table td{color:#475569;vertical-align:middle;border-bottom:1px solid #f1f5f9;padding:.85rem 1rem}.custom-table tr:last-child td{border-bottom:none}.custom-table tbody tr{transition:background-color .12s}.custom-table tbody tr:hover{background-color:#f8fafc}.cell-id{color:#4f46e5;border-radius:var(--radius-xs);background-color:#eef2ff;border:1px solid #e0e7ff;padding:.15rem .4rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.75rem;font-weight:600}.employee-info-cell{flex-direction:column;display:flex}.employee-name{color:#0f172a;font-size:.8125rem;font-weight:600}.employee-id-sub{color:#64748b;font-size:.6875rem}.pill-duration{color:#334155;border-radius:var(--radius-xs);background-color:#f1f5f9;border:1px solid #e2e8f0;margin-top:.2rem;padding:.12rem .45rem;font-size:.6875rem;font-weight:700;display:inline-block}.substitute-cell{color:#475569;font-size:.8125rem;font-weight:500}.table-truncate-text{-webkit-line-clamp:2;text-overflow:ellipsis;color:#64748b;word-break:break-word;-webkit-box-orient:vertical;max-width:220px;font-size:.75rem;line-height:1.4;display:-webkit-box;overflow:hidden}.reason-cell{white-space:nowrap;text-overflow:ellipsis;max-width:240px;overflow:hidden}.table-action-link{color:#4f46e5;border-radius:var(--radius-xs);transition:var(--transition);background-color:#eef2ff;border:1px solid #e0e7ff;padding:.25rem .55rem;font-size:.75rem;font-weight:600}.table-action-link:hover{color:#4338ca;background-color:#e0e7ff}.status-badge{border-radius:var(--radius-full);letter-spacing:.02em;white-space:nowrap;align-items:center;gap:.35rem;padding:.2rem .55rem;font-size:.6875rem;font-weight:700;display:inline-flex}.badge-approved{color:#065f46;background-color:#ecfdf5;border:1px solid #a7f3d0}.badge-admin-approval{color:#4338ca;background-color:#eef2ff;border:1px solid #c7d2fe}.badge-sub-approval{color:#92400e;background-color:#fffbeb;border:1px solid #fde68a}.badge-rejected{color:#991b1b;background-color:#fef2f2;border:1px solid #fecaca}.badge-default{color:#475569;background-color:#f1f5f9;border:1px solid #e2e8f0}.status-pill{border-radius:var(--radius-full);padding:.15rem .45rem;font-size:.6875rem;font-weight:700}.status-pill-pending{color:#92400e;background-color:#fffbeb;border:1px solid #fde68a}.status-pill-accepted{color:#065f46;background-color:#ecfdf5;border:1px solid #a7f3d0}.status-pill-rejected{color:#991b1b;background-color:#fef2f2;border:1px solid #fecaca}.primary-btn{color:#fff;border-radius:var(--radius-sm);transition:var(--transition);background-color:#4f46e5;justify-content:center;align-items:center;gap:.45rem;padding:.55rem 1rem;font-size:.8125rem;font-weight:600;display:inline-flex;box-shadow:0 1px 2px #4f46e540}.primary-btn:hover:not(:disabled){background-color:#4338ca;transform:translateY(-1px);box-shadow:0 4px 10px #4f46e559}.primary-btn:disabled{opacity:.55;cursor:not-allowed}.secondary-btn{color:#0f172a;border-radius:var(--radius-sm);transition:var(--transition);background-color:#fff;border:1px solid #e2e8f0;justify-content:center;align-items:center;gap:.45rem;padding:.5rem .85rem;font-size:.8125rem;font-weight:600;display:inline-flex;box-shadow:0 1px 2px #0f172a0a}.secondary-btn:hover{background-color:#f8fafc;border-color:#cbd5e1}.admin-action-buttons{align-items:center;gap:.35rem;display:flex}.admin-approve-btn,.accept-btn{color:#fff;border-radius:var(--radius-xs);transition:var(--transition);background-color:#10b981;align-items:center;gap:.25rem;padding:.35rem .75rem;font-size:.75rem;font-weight:600;display:inline-flex;box-shadow:0 1px 2px #10b98140}.admin-approve-btn:hover:not(:disabled),.accept-btn:hover:not(:disabled){background-color:#059669;transform:translateY(-1px)}.admin-approve-btn:disabled,.accept-btn:disabled{opacity:.5;cursor:not-allowed}.admin-reject-btn,.reject-btn{color:#ef4444;border-radius:var(--radius-xs);transition:var(--transition);background-color:#fff;border:1px solid #fecaca;align-items:center;gap:.25rem;padding:.35rem .75rem;font-size:.75rem;font-weight:600;display:inline-flex}.admin-reject-btn:hover:not(:disabled),.reject-btn:hover:not(:disabled){background-color:#fef2f2;border-color:#fca5a5}.table-controls-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.875rem;display:flex}.filter-tabs{border-radius:var(--radius-sm);background-color:#f1f5f9;border:1px solid #e2e8f0;align-items:center;gap:.25rem;padding:.25rem;display:flex}.filter-tab{color:#64748b;border-radius:var(--radius-xs);transition:var(--transition-fast);padding:.35rem .75rem;font-size:.75rem;font-weight:600}.filter-tab:hover{color:#0f172a}.tab-active{color:#4f46e5;background-color:#fff;box-shadow:0 1px 2px #0000000f}.controls-right{flex-wrap:wrap;align-items:center;gap:.65rem;display:flex}.search-input-wrapper{align-items:center;display:flex;position:relative}.search-icon{color:#94a3b8;pointer-events:none;position:absolute;left:.65rem}.search-input{border-radius:var(--radius-sm);color:#0f172a;width:260px;transition:var(--transition);background-color:#fff;border:1px solid #e2e8f0;outline:none;padding:.45rem 2rem;font-size:.8125rem}.search-input:focus{border-color:#4f46e5;box-shadow:0 0 0 3px #4f46e526}.search-clear{color:#64748b;cursor:pointer;position:absolute;right:.65rem}.form-page-container{max-width:1040px;margin:0 auto}.form-layout-grid{grid-template-columns:1fr 340px;align-items:start;gap:1.5rem;display:grid}.form-main-card{border-radius:var(--radius-md);background-color:#fff;border:1px solid #e2e8f0;padding:1.75rem;box-shadow:0 1px 3px #0f172a0d,0 1px 2px #0f172a08}.form-card-header{border-bottom:1px solid #e2e8f0;align-items:center;gap:.875rem;margin-bottom:1.5rem;padding-bottom:1.25rem;display:flex}.form-badge-icon{border-radius:var(--radius-sm);color:#4f46e5;background-color:#eef2ff;border:1px solid #e0e7ff;justify-content:center;align-items:center;width:42px;height:42px;font-size:1.25rem;display:flex}.form-title{color:#0f172a;margin:0;font-size:1.125rem;font-weight:700}.form-subtitle{color:#64748b;margin-top:.15rem;font-size:.75rem}.leave-form{flex-direction:column;gap:1.25rem;display:flex}.form-group{flex-direction:column;gap:.35rem;display:flex}.form-label{color:#0f172a;font-size:.8125rem;font-weight:600}.form-label.required:after{content:" *";color:#ef4444}.form-input,.form-select,.form-textarea{border-radius:var(--radius-sm);color:#0f172a;width:100%;transition:var(--transition);background-color:#fff;border:1px solid #e2e8f0;outline:none;padding:.55rem .8rem;font-size:.875rem}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:#4f46e5;box-shadow:0 0 0 3px #4f46e526}.form-textarea{resize:vertical;min-height:80px}.form-hint{color:#64748b;font-size:.6875rem}.form-row-2{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.duration-summary-pill{color:#065f46;border-radius:var(--radius-sm);background-color:#ecfdf5;border:1px solid #a7f3d0;align-items:center;gap:.5rem;padding:.45rem .85rem;font-size:.8125rem;font-weight:600;display:inline-flex}.form-actions{border-top:1px solid #e2e8f0;justify-content:flex-end;align-items:center;gap:.75rem;margin-top:.75rem;padding-top:1.25rem;display:flex}.form-side-info{flex-direction:column;gap:1rem;display:flex}.info-card{border-radius:var(--radius-md);background-color:#fff;border:1px solid #e2e8f0;padding:1.25rem;box-shadow:0 1px 3px #0f172a0d,0 1px 2px #0f172a08}.info-card h3{color:#0f172a;margin-bottom:.75rem;font-size:.875rem;font-weight:700}.policy-list{color:#475569;flex-direction:column;gap:.65rem;font-size:.75rem;list-style:none;display:flex}.policy-list li{padding-left:.85rem;line-height:1.4;position:relative}.policy-list li:before{content:"•";color:#4f46e5;font-weight:700;position:absolute;left:0}.info-card-highlight{color:#475569;background-color:#f8fafc;border-color:#e2e8f0;font-size:.75rem}.form-error-alert{border-radius:var(--radius-sm);color:#991b1b;background-color:#fef2f2;border:1px solid #fecaca;align-items:center;gap:.5rem;margin-bottom:1rem;padding:.75rem 1rem;font-size:.8125rem;display:flex}.dashboard-page{flex-direction:column;gap:1.75rem;display:flex}.dashboard-section{flex-direction:column;display:flex}.alert-card{border-radius:var(--radius-md);box-shadow:var(--shadow-sm);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.25rem;display:flex}.alert-warning{color:#92400e;background-color:#fffbeb;border:1px solid #fde68a}.alert-content{align-items:center;gap:.75rem;display:flex}.alert-action-btn{color:#92400e;border-radius:var(--radius-sm);transition:var(--transition);background-color:#fef3c7;border:1px solid #fcd34d;padding:.35rem .75rem;font-size:.8125rem;font-weight:700}.alert-action-btn:hover{background-color:#fde68a}.balance-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;display:grid}.balance-card{border-radius:var(--radius-md);transition:var(--transition);background-color:#fff;border:1px solid #e2e8f0;flex-direction:column;gap:.75rem;padding:1.25rem;display:flex;box-shadow:0 1px 3px #0f172a0d,0 1px 2px #0f172a08}.balance-card:hover{border-color:#cbd5e1;transform:translateY(-2px);box-shadow:0 8px 16px -2px #0f172a14,0 4px 6px -2px #0f172a0a}.balance-header{justify-content:space-between;align-items:center;display:flex}.balance-type{color:#0f172a;font-size:.8125rem;font-weight:700}.balance-icon{border-radius:var(--radius-xs);justify-content:center;align-items:center;width:32px;height:32px;font-size:1rem;display:flex}.icon-annual{color:#06b6d4;background-color:#ecfeff}.icon-sick{color:#ef4444;background-color:#fef2f2}.icon-casual{color:#f59e0b;background-color:#fffbeb}.icon-time{color:#4f46e5;background-color:#eef2ff}.balance-values{align-items:baseline;gap:.35rem;display:flex}.balance-available{color:#0f172a;letter-spacing:-.02em;font-size:1.75rem;font-weight:800;line-height:1}.balance-total{color:#64748b;font-size:.75rem}.progress-bar{border-radius:var(--radius-full);background-color:#f1f5f9;width:100%;height:6px;overflow:hidden}.progress-fill{border-radius:var(--radius-full);height:100%;transition:width .4s}.fill-annual{background-color:#06b6d4}.fill-sick{background-color:#ef4444}.fill-casual{background-color:#f59e0b}.fill-time{background-color:#4f46e5}.balance-caption{color:#64748b;font-size:.6875rem}.summary-banner{color:#fff;border-radius:var(--radius-md);background-color:#0f172a;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.25rem 1.75rem;display:flex;box-shadow:0 4px 6px -1px #0f172a1f}.summary-metric{flex-direction:column;display:flex}.metric-label{color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;font-size:.6875rem;font-weight:600}.metric-number{color:#fff;font-size:1.5rem;font-weight:800}.summary-divider{background-color:#ffffff1f;width:1px;height:36px}.substitute-page-container{flex-direction:column;gap:1.5rem;display:flex}.info-banner{border-radius:var(--radius-md);color:#312e81;background-color:#eef2ff;border:1px solid #c7d2fe;align-items:center;gap:1rem;padding:1.15rem 1.5rem;display:flex}.banner-icon{font-size:1.75rem}.banner-text h3{color:#0f172a;margin:0;font-size:.9375rem;font-weight:700}.banner-text p{color:#4338ca;margin-top:.2rem;font-size:.8125rem}.substitute-cards-grid{grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:1.25rem;display:grid}.substitute-card{border-radius:var(--radius-md);transition:var(--transition);background-color:#fff;border:1px solid #e2e8f0;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 1px 3px #0f172a0d,0 1px 2px #0f172a08}.substitute-card:hover{box-shadow:0 8px 16px -2px #0f172a14,0 4px 6px -2px #0f172a0a}.card-pending-duty{border-left:4px solid #f59e0b}.card-resolved-duty{border-left:4px solid #cbd5e1}.substitute-card-header{background-color:#f8fafc;border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;padding:1.15rem;display:flex}.requester-profile{align-items:center;gap:.75rem;display:flex}.requester-avatar{border-radius:var(--radius-full);color:#fff;background-color:#4f46e5;justify-content:center;align-items:center;width:36px;height:36px;font-size:.8125rem;font-weight:700;display:flex}.requester-name{color:#0f172a;margin:0;font-size:.875rem;font-weight:700}.requester-id{color:#64748b;font-size:.6875rem}.card-top-right{flex-direction:column;align-items:flex-end;gap:.35rem;display:flex}.leave-pill{color:#334155;border-radius:var(--radius-xs);background-color:#f1f5f9;border:1px solid #e2e8f0;padding:.15rem .45rem;font-size:.6875rem;font-weight:600}.substitute-card-body{flex-direction:column;flex:1;gap:.875rem;padding:1.15rem;display:flex}.detail-row{gap:.65rem;display:flex}.detail-title{text-transform:uppercase;color:#64748b;letter-spacing:.04em;font-size:.6875rem;display:block}.detail-value-highlight{color:#0f172a;font-size:.875rem;font-weight:600}.detail-text{color:#475569;margin-top:.15rem;font-size:.8125rem}.highlight-box{border-radius:var(--radius-sm);background-color:#f8fafc;border:1px solid #e2e8f0;padding:.75rem}.work-text{white-space:pre-wrap;color:#0f172a;font-size:.8125rem}.substitute-card-footer{background-color:#f8fafc;border-top:1px solid #e2e8f0;justify-content:space-between;align-items:center;padding:.85rem 1.15rem;display:flex}.applied-date-caption{color:#64748b;font-size:.6875rem}.action-buttons-group{align-items:center;gap:.45rem;display:flex}.note-accepted{color:#065f46;font-size:.75rem;font-weight:600}.note-rejected{color:#991b1b;font-size:.75rem;font-weight:600}.empty-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.65rem;padding:3rem 1.5rem;display:flex}.empty-icon{border-radius:var(--radius-full);color:#64748b;background-color:#f1f5f9;justify-content:center;align-items:center;width:48px;height:48px;margin-bottom:.25rem;font-size:1.5rem;display:flex}.empty-state h3{color:#0f172a;margin:0;font-size:.9375rem;font-weight:700}.empty-state p{color:#64748b;max-width:360px;margin:0;font-size:.8125rem}.empty-state-compact{text-align:center;color:#475569;flex-direction:column;align-items:center;gap:.45rem;padding:2.25rem 1.5rem;font-size:.8125rem;display:flex}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background-color:#0f172a99;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal-card{border-radius:var(--radius-lg);background-color:#fff;border:1px solid #e2e8f0;flex-direction:column;width:100%;max-width:580px;max-height:90vh;animation:.2s cubic-bezier(.4,0,.2,1) modalScale;display:flex;overflow:hidden;box-shadow:0 20px 25px -5px #0003,0 8px 10px -6px #0000001a}@keyframes modalScale{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.modal-header{background-color:#f8fafc;border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:flex-start;padding:1.25rem 1.5rem;display:flex}.modal-header h2{color:#0f172a;margin-top:.2rem;font-size:1.05rem;font-weight:700}.modal-close-btn{color:#64748b;border-radius:var(--radius-xs);transition:var(--transition-fast);padding:.25rem}.modal-close-btn:hover{color:#0f172a;background-color:#e2e8f0}.modal-body{flex-direction:column;gap:1rem;padding:1.5rem;display:flex;overflow-y:auto}.modal-detail-row{border-bottom:1px solid #f1f5f9;justify-content:space-between;align-items:center;padding-bottom:.75rem;display:flex}.modal-grid-2{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.modal-detail-item{flex-direction:column;gap:.25rem;display:flex}.detail-label{color:#64748b;text-transform:uppercase;letter-spacing:.05em;font-size:.6875rem;font-weight:700}.detail-value{color:#0f172a;font-size:.875rem}.detail-textbox{border-radius:var(--radius-sm);color:#334155;white-space:pre-wrap;word-break:break-word;background-color:#f8fafc;border:1px solid #e2e8f0;max-height:160px;padding:.75rem 1rem;font-size:.8125rem;line-height:1.5;overflow-y:auto}.admin-decision-box{border-radius:var(--radius-sm);margin-top:.25rem;padding:.85rem}.approval-box{background-color:#ecfdf5;border:1px solid #a7f3d0}.rejection-box{background-color:#fef2f2;border:1px solid #fecaca}.rejection-remarks-box{color:#991b1b;background-color:#fff;border-color:#fca5a5}.modal-footer{background-color:#f8fafc;border-top:1px solid #e2e8f0;justify-content:flex-end;align-items:center;gap:.65rem;padding:1rem 1.5rem;display:flex}.profile-page-container{flex-direction:column;gap:1.5rem;max-width:1040px;margin:0 auto;display:flex}.profile-hero-card{color:#fff;border-radius:var(--radius-lg);background-color:#0f172a;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.25rem;padding:1.75rem 2rem;display:flex;box-shadow:0 4px 6px -1px #0f172a1f}.profile-hero-content{align-items:center;gap:1.25rem;display:flex}.profile-avatar-large{border-radius:var(--radius-full);color:#fff;background-color:#4f46e5;flex-shrink:0;justify-content:center;align-items:center;width:64px;height:64px;font-size:1.5rem;font-weight:800;display:flex;box-shadow:0 4px 12px #0000004d}.profile-hero-text{flex-direction:column;gap:.2rem;display:flex}.profile-title-row{flex-wrap:wrap;align-items:center;gap:.65rem;display:flex}.profile-name{color:#fff;margin:0;font-size:1.35rem;font-weight:800}.profile-emp-badge{color:#94a3b8;border-radius:var(--radius-xs);background-color:#334155;padding:.15rem .45rem;font-size:.6875rem;font-weight:700}.profile-status-active{color:#10b981;font-size:.6875rem;font-weight:600}.profile-designation-dept{color:#cbd5e1;font-size:.875rem}.profile-contact-line{color:#94a3b8;font-size:.75rem}.profile-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.25rem;display:grid}.profile-card{border-radius:var(--radius-md);background-color:#fff;border:1px solid #e2e8f0;padding:1.25rem;box-shadow:0 1px 3px #0f172a0d,0 1px 2px #0f172a08}.profile-card-header{border-bottom:1px solid #e2e8f0;align-items:center;gap:.65rem;margin-bottom:1rem;padding-bottom:.85rem;display:flex}.profile-card-header h3{color:#0f172a;margin:0;font-size:.9375rem;font-weight:700}.profile-info-list{flex-direction:column;gap:.75rem;display:flex}.profile-info-row{border-bottom:1px dashed #f1f5f9;justify-content:space-between;align-items:center;padding-bottom:.55rem;font-size:.8125rem;display:flex}.profile-info-row:last-child{border-bottom:none;padding-bottom:0}.info-label{color:#64748b}.info-value{color:#0f172a;text-align:right;font-weight:500}.login-container{background-color:#0f172a;justify-content:center;align-items:center;min-height:100vh;padding:1.5rem;display:flex}.login-card{border-radius:var(--radius-lg);background-color:#fff;border:1px solid #ffffff1a;width:100%;max-width:500px;overflow:hidden;box-shadow:0 25px 50px -12px #0006}.login-header{text-align:center;background-color:#f8fafc;border-bottom:1px solid #e2e8f0;padding:2rem 2rem 1.25rem}.login-brand-icon{border-radius:var(--radius-md);color:#fff;background-color:#4f46e5;justify-content:center;align-items:center;width:52px;height:52px;margin:0 auto .875rem;display:flex;box-shadow:0 8px 16px #4f46e54d}.login-header h2{color:#0f172a;letter-spacing:-.02em;margin:0;font-size:1.35rem;font-weight:800}.login-header p{color:#64748b;margin-top:.25rem;font-size:.8125rem}.login-btn{width:100%;padding:.75rem;font-size:.9375rem}.font-semibold{font-weight:600}.font-bold{font-weight:700}.text-green{color:#10b981}.text-amber{color:#f59e0b}.text-blue{color:#4f46e5}.text-teal{color:#06b6d4}.text-red{color:#ef4444}.text-muted{color:#64748b}.text-sm{font-size:.75rem}@media (width<=900px){.form-layout-grid,.substitute-cards-grid{grid-template-columns:1fr}}@media (width<=768px){.sidebar-wrapper{position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}.sidebar-wrapper.mobile-open{transform:translate(0)}.mobile-overlay{z-index:45;background-color:#0f172a99;position:fixed;inset:0}.mobile-menu-toggle{display:flex}.top-header{padding:.85rem 1rem}.page-content{padding:1.25rem 1rem 2rem}.admin-overview-grid{grid-template-columns:repeat(2,1fr)}}.calendar-grid-container{flex-direction:column;gap:.5rem;display:flex}.calendar-weekday-header{text-align:center;border-bottom:1px solid #e2e8f0;grid-template-columns:repeat(7,1fr);gap:.5rem;padding-bottom:.5rem;display:grid}.calendar-weekday-cell{color:#64748b;text-transform:uppercase;letter-spacing:.05em;padding:.25rem 0;font-size:.75rem;font-weight:700}.calendar-days-grid{grid-template-columns:repeat(7,1fr);gap:.5rem;display:grid}.calendar-day-cell{border-radius:var(--radius-sm);cursor:pointer;min-height:96px;transition:var(--transition-fast);background-color:#fff;border:1px solid #e2e8f0;flex-direction:column;justify-content:space-between;padding:.5rem;display:flex;position:relative}.calendar-day-cell:hover:not(.cell-empty){border-color:#cbd5e1;transform:translateY(-1px);box-shadow:0 4px 6px -1px #0f172a0f}.cell-empty{cursor:default;background-color:#f8fafc;border-color:#f1f5f9}.cell-today{background-color:#ecfeff;border:1.5px solid #06b6d4}.cell-selected{background-color:#eef2ff!important;border:2px solid #4f46e5!important;box-shadow:0 0 0 3px #4f46e526!important}.day-cell-top{justify-content:space-between;align-items:center;display:flex}.day-number{color:#0f172a;font-size:.875rem;font-weight:700}.day-number-today{color:#0891b2}.today-chip{border-radius:var(--radius-full);color:#fff;text-transform:uppercase;background-color:#06b6d4;padding:.1rem .35rem;font-size:.625rem;font-weight:700}.day-cell-badges{flex-direction:column;gap:.2rem;margin-top:.35rem;display:flex}.cal-badge{border-radius:4px;align-items:center;gap:.2rem;width:fit-content;padding:.12rem .4rem;font-size:.6875rem;font-weight:600;display:inline-flex}.badge-leave{color:#92400e;background-color:#fef3c7;border:1px solid #fde68a}.badge-time{color:#0369a1;background-color:#e0f2fe;border:1px solid #bae6fd}.badge-away{color:#4f46e5;background-color:#eef2ff;border:1px solid #c7d2fe;font-weight:700}.substitute-selector-container,.substitute-search-box{width:100%;position:relative}.substitute-input-wrapper{align-items:center;display:flex;position:relative}.substitute-search-icon{color:#94a3b8;pointer-events:none;position:absolute;left:.85rem}.substitute-search-input{border-radius:var(--radius-sm,6px);color:#0f172a;width:100%;transition:var(--transition,all .2s ease);background-color:#fff;border:1px solid #e2e8f0;outline:none;padding:.6rem 2.25rem .6rem 2.4rem;font-size:.875rem}.substitute-search-input:focus{border-color:#4f46e5;box-shadow:0 0 0 3px #4f46e526}.substitute-chevron-icon{color:#94a3b8;pointer-events:none;transition:transform .2s;position:absolute;right:.85rem}.substitute-chevron-icon.open{transform:rotate(180deg)}.substitute-dropdown-menu{border-radius:var(--radius-md,8px);z-index:50;background:#fff;border:1px solid #e2e8f0;max-height:240px;padding:.35rem 0;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow:hidden auto;box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000000d}.substitute-dropdown-menu::-webkit-scrollbar{width:6px}.substitute-dropdown-menu::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.substitute-option-row{cursor:pointer;align-items:center;gap:.75rem;padding:.6rem .9rem;transition:background-color .15s;display:flex}.substitute-option-row:hover{background-color:#f8fafc}.substitute-option-row.active{background-color:#eef2ff}.substitute-avatar{color:#4338ca;background:#e0e7ff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;font-size:.75rem;font-weight:700;display:flex}.substitute-option-info{flex-direction:column;flex:1;gap:.15rem;min-width:0;display:flex}.substitute-option-name{color:#0f172a;white-space:nowrap;text-overflow:ellipsis;font-size:.875rem;font-weight:600;overflow:hidden}.substitute-option-meta{color:#64748b;white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;overflow:hidden}.substitute-empty-state{text-align:center;color:#64748b;padding:1.25rem 1rem;font-size:.875rem}.substitute-selected-card{border-radius:var(--radius-sm,6px);background-color:#f8fafc;border:1px solid #cbd5e1;align-items:center;gap:.75rem;padding:.55rem .85rem;transition:border-color .2s;display:flex}.substitute-selected-card:hover{border-color:#94a3b8}.substitute-selected-avatar{color:#4338ca;background:#e0e7ff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:.8125rem;font-weight:700;display:flex}.substitute-selected-info{flex-direction:column;flex:1;gap:.15rem;min-width:0;display:flex}.substitute-selected-name{color:#0f172a;white-space:nowrap;text-overflow:ellipsis;font-size:.875rem;font-weight:700;overflow:hidden}.substitute-selected-meta{color:#64748b;white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;overflow:hidden}.substitute-clear-btn{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;transition:background-color .15s,color .15s;display:inline-flex}.substitute-clear-btn:hover{color:#ef4444;background-color:#fee2e2}.editable-role-select{cursor:pointer;letter-spacing:.01em;border:1px solid #0000;border-radius:9999px;outline:none;padding:.22rem .55rem;font-size:.725rem;font-weight:700;transition:all .15s}.editable-role-select.role-employee{color:#0369a1;background-color:#e0f2fe;border-color:#bae6fd}.editable-role-select.role-employee:hover,.editable-role-select.role-employee:focus{background-color:#bae6fd;border-color:#7dd3fc}.editable-role-select.role-team-lead{color:#7e22ce;background-color:#f3e8ff;border-color:#e9d5ff}.editable-role-select.role-team-lead:hover,.editable-role-select.role-team-lead:focus{background-color:#e9d5ff;border-color:#d8b4fe}.calendar-total-leave-box{border-radius:var(--radius-md,8px);background:linear-gradient(135deg,#f0fdf4 0%,#ecfdf5 100%);border:1.5px solid #a7f3d0;justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding:.9rem 1.25rem;display:flex;box-shadow:0 1px 3px #10b98114}.total-leave-label{color:#065f46;font-size:.95rem;font-weight:700}.total-leave-count{color:#047857;text-align:center;background:#fff;border:1.5px solid #6ee7b7;border-radius:9999px;justify-content:center;align-items:center;min-width:44px;padding:.2rem .85rem;font-size:1.4rem;font-weight:800;display:inline-flex}.calendar-table-scroll-wrapper{border-radius:var(--radius-md,8px);background:#fff;border:1px solid #e2e8f0;max-height:380px;position:relative;overflow-y:auto;box-shadow:0 1px 2px #0000000d}.calendar-records-table{border-collapse:collapse;width:100%;font-size:.85rem}.calendar-records-table thead th{z-index:2;color:#475569;text-align:left;white-space:nowrap;background-color:#f8fafc;border-bottom:2px solid #e2e8f0;padding:.75rem 1rem;font-weight:700;position:sticky;top:0}.calendar-records-table tbody td{color:#1e293b;vertical-align:middle;border-bottom:1px solid #f1f5f9;padding:.75rem 1rem}.calendar-records-table tbody tr:hover{background-color:#f8fafc}.calendar-records-empty{text-align:center;color:#64748b;border-radius:var(--radius-md,8px);background:#f8fafc;border:1px dashed #cbd5e1;padding:2.5rem 1.5rem;font-size:.9rem}.record-pill-leave{color:#4f46e5;background-color:#eef2ff;border:1px solid #c7d2fe;border-radius:9999px;padding:.2rem .65rem;font-size:.75rem;font-weight:700;display:inline-block}.record-pill-time{color:#059669;background-color:#f0fdf4;border:1px solid #a7f3d0;border-radius:9999px;padding:.2rem .65rem;font-size:.75rem;font-weight:700;display:inline-block}.record-detail-subtext{color:#64748b;margin-top:.15rem;font-size:.72rem}.user-action-buttons-vertical,.team-action-buttons-vertical{flex-direction:column;gap:.35rem;width:100%;min-width:130px;max-width:155px;display:flex}.user-action-buttons-vertical .action-btn-vertical,.team-action-buttons-vertical .action-btn-vertical{border-radius:var(--radius-xs,4px);text-align:left;white-space:nowrap;box-sizing:border-box;justify-content:flex-start;align-items:center;gap:.4rem;width:100%;padding:.28rem .6rem;font-size:.75rem;font-weight:600;transition:all .15s;display:inline-flex}.user-action-buttons-vertical .action-btn-vertical svg,.team-action-buttons-vertical .action-btn-vertical svg{flex-shrink:0}