:root{--primary-color: #2c5282;--secondary-color: #2d3748;--background-color: #f7fafc;--sidebar-width: 260px;--header-height: 64px}body{margin:0;padding:0;font-family:Inter,sans-serif;background-color:var(--background-color)}.app-layout{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-width);background-color:#fff;border-right:1px solid #e2e8f0;position:fixed;height:100vh;left:0;top:0;z-index:50;display:flex;flex-direction:column;transition:transform .3s ease}.sidebar-brand{padding:2rem 1.5rem;display:flex;align-items:center;gap:12px}.brand-logo{width:32px;height:32px;background:var(--primary-color);color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem}.brand-name{font-size:1.1rem;font-weight:600;color:var(--secondary-color)}.sidebar-nav{flex:1;padding:1rem .75rem}.nav-item{display:flex;align-items:center;gap:12px;padding:.75rem 1rem;color:#718096;text-decoration:none;border-radius:8px;margin-bottom:.25rem;transition:all .2s}.nav-item:hover{background-color:#edf2f7;color:var(--primary-color)}.nav-item.active{background-color:#ebf8ff;color:var(--primary-color);font-weight:500}.sidebar-footer{padding:1rem .75rem;border-top:1px solid #e2e8f0}.logout{color:#e53e3e}.logout:hover{background-color:#fff5f5;color:#c53030}.main-content{flex:1;margin-left:var(--sidebar-width);padding:2rem;width:calc(100% - var(--sidebar-width))}.menu-toggle{display:none;position:fixed;top:1rem;right:1rem;z-index:60;background:#fff;border:1px solid #e2e8f0;padding:.5rem;border-radius:8px;cursor:pointer;box-shadow:0 2px 4px #0000001a}@media (max-width: 768px){.sidebar{transform:translate(-100%);box-shadow:2px 0 10px #0000001a}.sidebar.open{transform:translate(0)}.main-content{margin-left:0;width:100%;padding:4rem 1rem 1rem}.menu-toggle{display:block}.overlay-backdrop{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:40}.sidebar.open+.overlay-backdrop{display:block}}.cari-table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:2rem;background:#fff;border-radius:12px;box-shadow:0 2px 4px #0000000d}@media (max-width: 768px){.cari-table{min-width:800px}.invoice-header,.quote-header{flex-direction:column;align-items:flex-start;gap:1rem}.form-header-row{grid-template-columns:1fr!important}.dashboard-section{padding:0!important}.invoice-type-tabs{flex-wrap:wrap}}