:root{--bg-primary: #FAFAFA;--bg-secondary: #FFFFFF;--bg-hover: #F5F5F5;--text-primary: #0A0A0A;--text-secondary: #666666;--text-tertiary: #999999;--accent-primary: #0A3D3E;--accent-hover: #0D5556;--accent-light: rgba(10, 61, 62, .08);--status-success: #2D5016;--status-warning: #8B6914;--status-error: #8B1E1E;--status-info: #1E4A8B;--status-success-bg: rgba(45, 80, 22, .06);--status-warning-bg: rgba(139, 105, 20, .06);--status-error-bg: rgba(139, 30, 30, .06);--status-info-bg: rgba(30, 74, 139, .06);--note-yellow: #F59E0B;--note-green: #10B981;--note-purple: #8B5CF6;--note-blue: #3B82F6;--border-subtle: rgba(0, 0, 0, .06);--border-medium: rgba(0, 0, 0, .1);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 4px 12px rgba(0, 0, 0, .06);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .08);--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--space-3xl: 64px;--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-mono: "SF Mono", Monaco, "Cascadia Code", monospace;--text-xs: 11px;--text-sm: 12px;--text-base: 14px;--text-md: 15px;--text-lg: 16px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 28px;--text-4xl: 32px;--weight-normal: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .2s cubic-bezier(.4, 0, .2, 1);--transition-slow: .3s cubic-bezier(.4, 0, .2, 1);--sidebar-width: 240px;--topbar-height: 64px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--radius-full: 9999px;--z-sidebar: 1000;--z-mobile-overlay: 999;--z-modal: 2000;--z-mobile-header: 100;--mobile-header-height: 56px;--touch-target-min: 44px}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{font-family:var(--font-body);font-size:var(--text-md);line-height:1.6;color:var(--text-primary);background:var(--bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}.hidden{display:none!important}.fade-in{animation:fadeIn var(--transition-slow) ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.btn-primary{background:var(--accent-primary)!important;color:#fff!important;border:none!important;padding:10px 20px!important;border-radius:var(--radius-md)!important;font-size:var(--text-base)!important;font-weight:var(--weight-medium)!important;cursor:pointer!important;transition:all var(--transition-fast)!important;font-family:var(--font-body)!important;display:inline-block!important;visibility:visible!important;opacity:1!important}.btn-primary:hover{background:var(--accent-hover)!important;transform:translateY(-1px)!important;box-shadow:var(--shadow-md)!important}.btn-primary:active{transform:translateY(0)!important}.btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-medium);padding:10px 20px;border-radius:var(--radius-md);font-size:var(--text-base);font-weight:var(--weight-medium);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-body)}.btn-secondary:hover{background:var(--bg-hover);border-color:var(--accent-primary)}input[type=text],input[type=email],input[type=password],textarea{width:100%;padding:10px 16px;border:1px solid var(--border-medium);border-radius:var(--radius-md);font-size:var(--text-base);font-family:var(--font-body);transition:all var(--transition-fast);background:var(--bg-secondary);color:var(--text-primary)}input:focus,textarea:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-light)}a{color:var(--accent-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--accent-hover)}.status-badge{display:inline-block;padding:4px 10px;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:var(--weight-medium)}.status-new{background:var(--status-info-bg);color:var(--status-info)}.status-processing{background:var(--status-warning-bg);color:var(--status-warning)}.status-paid{background:var(--status-success-bg);color:var(--status-success)}.status-overdue{background:var(--status-error-bg);color:var(--status-error)}@media(max-width:767px){body{font-size:var(--text-base)}.btn-primary,.btn-secondary{min-height:var(--touch-target-min);padding:12px 24px;font-size:var(--text-base)}input[type=text],input[type=email],input[type=password],textarea{min-height:var(--touch-target-min);padding:12px 16px;font-size:16px}.status-badge{padding:6px 12px;font-size:var(--text-sm)}}@media(min-width:768px)and (max-width:1023px){.btn-primary,.btn-secondary{padding:10px 20px}.table-header{padding:var(--space-md)}}@media(max-width:767px){.table-header{flex-direction:column;align-items:flex-start;gap:var(--space-sm);padding:var(--space-md)}}.mobile-menu-toggle{display:none;position:fixed;top:var(--space-md);left:var(--space-md);z-index:calc(var(--z-sidebar) + 1);background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);width:var(--touch-target-min);height:var(--touch-target-min);align-items:center;justify-content:center;cursor:pointer;color:var(--text-primary);box-shadow:var(--shadow-sm);transition:all var(--transition-fast)}.mobile-menu-toggle:hover{background:var(--bg-hover);box-shadow:var(--shadow-md)}.mobile-menu-toggle:active{transform:scale(.95)}.mobile-overlay{display:none;position:fixed;inset:0;background:#00000080;z-index:var(--z-mobile-overlay);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.sidebar{width:var(--sidebar-width);background:var(--bg-secondary);border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;position:fixed;height:100vh;left:0;top:0;z-index:var(--z-sidebar);transition:transform var(--transition-base)}.sidebar-header{padding:var(--space-xl) var(--space-lg);border-bottom:1px solid var(--border-subtle)}.logo{font-size:13px;font-weight:var(--weight-semibold);letter-spacing:.3px;color:var(--text-primary);text-transform:uppercase}.company{font-size:var(--text-sm);color:var(--text-tertiary);margin-top:var(--space-xs);font-weight:var(--weight-normal)}.nav{flex:1;padding:var(--space-lg) 0}.nav-item{display:flex;align-items:center;padding:10px var(--space-lg);margin:0 var(--space-sm);border-radius:var(--radius-md);color:var(--text-secondary);text-decoration:none;font-size:var(--text-base);font-weight:var(--weight-medium);transition:all var(--transition-fast);cursor:pointer}.nav-item:hover{background:var(--bg-hover);color:var(--text-primary)}.nav-item.active{background:var(--accent-light);color:var(--accent-primary)}.nav-icon{width:18px;height:18px;margin-right:var(--space-sm);opacity:.6}.nav-item.active .nav-icon{opacity:1}.sidebar-footer{padding:var(--space-lg);border-top:1px solid var(--border-subtle)}.user-info{display:flex;align-items:center;gap:var(--space-sm)}.user-avatar{width:32px;height:32px;border-radius:var(--radius-full);background:var(--accent-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:var(--weight-semibold);flex-shrink:0}.user-details{flex:1;min-width:0}.user-name{font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--text-primary)}.user-role{font-size:var(--text-sm);color:var(--text-tertiary)}.logout-btn{background:none;border:none;color:var(--text-tertiary);cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);transition:all var(--transition-fast);flex-shrink:0}.logout-btn:hover{background:var(--bg-hover);color:var(--status-error)}@media(max-width:767px){.mobile-menu-toggle{display:flex}.mobile-overlay{display:block}.sidebar{transform:translate(-100%);box-shadow:var(--shadow-lg)}.sidebar.mobile-open{transform:translate(0)}}@media(min-width:768px)and (max-width:1023px){.sidebar{width:200px}:root{--sidebar-width: 200px}}.app{display:flex;min-height:100vh}.main{flex:1;margin-left:var(--sidebar-width);padding:var(--space-2xl);max-width:1600px;transition:margin-left var(--transition-base)}.page-header{margin-bottom:var(--space-2xl)}.page-title{font-size:var(--text-3xl);font-weight:var(--weight-semibold);letter-spacing:-.5px;color:var(--text-primary);margin-bottom:var(--space-xs)}.page-subtitle{font-size:var(--text-base);color:var(--text-secondary)}@media(max-width:767px){.main{margin-left:0;padding:var(--space-lg);padding-top:calc(var(--mobile-header-height) + var(--space-lg))}.page-header{margin-bottom:var(--space-lg)}.page-title{font-size:var(--text-2xl)}.page-subtitle{font-size:var(--text-sm)}}@media(min-width:768px)and (max-width:1023px){.main{margin-left:200px;padding:var(--space-xl)}}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-primary);padding:var(--space-lg)}.login-container{width:100%;max-width:440px;background:var(--bg-secondary);border-radius:var(--radius-xl);border:1px solid var(--border-subtle);box-shadow:var(--shadow-lg);padding:var(--space-2xl)}.login-header{text-align:center;margin-bottom:var(--space-2xl);padding-bottom:var(--space-xl);border-bottom:1px solid var(--border-subtle)}.login-logo{font-size:var(--text-2xl);font-weight:var(--weight-semibold);letter-spacing:.3px;color:var(--accent-primary);text-transform:uppercase;margin-bottom:var(--space-xs)}.login-subtitle{font-size:var(--text-base);color:var(--text-tertiary);font-weight:var(--weight-normal)}.login-tabs{display:flex;gap:var(--space-sm);margin-bottom:var(--space-xl);background:var(--bg-primary);border-radius:var(--radius-lg);padding:var(--space-xs)}.tab{flex:1;padding:12px var(--space-md);border:none;background:transparent;border-radius:var(--radius-md);font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-body)}.tab:hover{color:var(--text-primary)}.tab.active{background:var(--bg-secondary);color:var(--accent-primary);box-shadow:var(--shadow-sm)}.login-error{padding:var(--space-md);background:var(--status-error-bg);border:1px solid var(--status-error);border-radius:var(--radius-md);color:var(--status-error);font-size:var(--text-sm);margin-bottom:var(--space-lg);animation:shake .3s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.login-form{display:flex;flex-direction:column;gap:var(--space-lg)}.form-group label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-primary)}.form-group input{padding:12px var(--space-md);border:1px solid var(--border-medium);border-radius:var(--radius-md);font-size:var(--text-base);font-family:var(--font-body);color:var(--text-primary);background:var(--bg-primary);transition:all var(--transition-fast)}.form-group input:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-light)}.form-group input::placeholder{color:var(--text-tertiary)}.form-hint{font-size:var(--text-xs);color:var(--text-tertiary);margin-top:-4px}.btn-block{width:100%;margin-top:var(--space-md)}.btn-block:disabled{opacity:.6;cursor:not-allowed}.demo-credentials{margin-top:var(--space-xl);padding:var(--space-md);background:var(--status-info-bg);border:1px solid var(--status-info);border-radius:var(--radius-md);font-size:var(--text-sm)}.demo-title{font-weight:var(--weight-semibold);color:var(--status-info);margin-bottom:var(--space-xs)}.demo-info{color:var(--text-secondary);line-height:1.6;margin:0}@media(max-width:767px){.login-page{padding:var(--space-md);align-items:flex-start;padding-top:var(--space-2xl)}.login-container{padding:var(--space-xl)}.login-header{margin-bottom:var(--space-xl);padding-bottom:var(--space-lg)}.login-logo{font-size:var(--text-xl)}.tab{padding:10px var(--space-sm);font-size:var(--text-sm)}.form-group input{min-height:var(--touch-target-min);font-size:16px}.btn-block{min-height:var(--touch-target-min);font-size:var(--text-base)}.demo-credentials{font-size:var(--text-xs)}}@media(min-width:768px)and (max-width:1023px){.login-container{max-width:480px}}@media(min-width:1024px){.login-container{max-width:500px;padding:var(--space-3xl)}}.view{width:100%}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-lg);margin-bottom:var(--space-2xl)}.stat-card{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-lg);transition:all var(--transition-base)}.stat-card:hover{border-color:var(--border-medium);box-shadow:var(--shadow-sm)}.stat-label{font-size:13px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px;font-weight:var(--weight-medium);margin-bottom:var(--space-sm)}.stat-value{font-size:var(--text-4xl);font-weight:var(--weight-semibold);color:var(--text-primary);margin-bottom:var(--space-xs)}.stat-change{font-size:13px;color:var(--text-secondary)}.stat-change.positive{color:var(--status-success)}.charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:var(--space-lg);margin-bottom:var(--space-2xl)}.chart-card{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-lg);transition:all var(--transition-base)}.chart-card:hover{border-color:var(--border-medium);box-shadow:var(--shadow-sm)}.chart-title{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text-primary);margin-bottom:var(--space-md)}table{width:100%;border-collapse:collapse}thead{background:var(--bg-primary)}th{text-align:left;padding:12px var(--space-lg);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px}tbody tr{border-top:1px solid var(--border-subtle);transition:background var(--transition-fast)}tbody tr:hover{background:var(--bg-hover)}td{padding:16px var(--space-lg);font-size:var(--text-base)}.due-invoices-widget{background:linear-gradient(135deg,#fff5f5,#fef2f2);border:2px solid #fecaca;border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-2xl);box-shadow:0 4px 12px #ef44441a}.widget-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)}.widget-title{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:#991b1b;margin:0}.invoice-count-badge{background:#dc2626;color:#fff;padding:4px 12px;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--weight-semibold)}.due-invoices-list{display:flex;flex-direction:column;gap:var(--space-sm)}.due-invoice-item{background:#fff;border-radius:var(--radius-md);padding:var(--space-md);display:flex;justify-content:space-between;align-items:center;transition:all var(--transition-fast);border-left:4px solid transparent}.due-invoice-item.urgency-today{border-left-color:#dc2626;background:#fef2f2}.due-invoice-item.urgency-high{border-left-color:#f59e0b;background:#fffbeb}.due-invoice-item.urgency-medium{border-left-color:#eab308}.due-invoice-item.urgency-low{border-left-color:#10b981}.due-invoice-item:hover{transform:translate(4px);box-shadow:0 2px 8px #0000001a}.due-invoice-main{flex:1}.due-invoice-supplier{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text-primary);margin-bottom:var(--space-xs)}.due-invoice-number{font-size:var(--text-sm);color:var(--text-secondary);font-family:var(--font-mono)}.due-invoice-details{text-align:right}.due-invoice-amount{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text-primary);font-family:var(--font-mono);margin-bottom:var(--space-xs)}.due-invoice-date{font-size:var(--text-sm);font-weight:var(--weight-medium)}.due-invoice-date.urgency-today{color:#dc2626}.due-invoice-date.urgency-high{color:#f59e0b}.due-invoice-date.urgency-medium{color:#eab308}.due-invoice-date.urgency-low{color:#10b981}@media(max-width:767px){.stats-grid{grid-template-columns:1fr;gap:var(--space-md);margin-bottom:var(--space-xl)}.stat-card{padding:var(--space-md)}.stat-value{font-size:var(--text-3xl)}.charts-grid{grid-template-columns:1fr;gap:var(--space-md);margin-bottom:var(--space-xl)}.chart-card{padding:var(--space-md)}.chart-title{font-size:var(--text-sm)}.table-container{overflow-x:auto}.table-header{padding:var(--space-md);flex-direction:column;align-items:flex-start;gap:var(--space-sm)}table{min-width:600px}th,td{padding:12px var(--space-md);font-size:var(--text-sm)}th{font-size:var(--text-xs)}.due-invoices-widget{padding:var(--space-md);margin-bottom:var(--space-xl)}.widget-title{font-size:var(--text-base)}.due-invoice-item{flex-direction:column;align-items:flex-start;gap:var(--space-sm)}.due-invoice-details{text-align:left;width:100%;display:flex;justify-content:space-between;align-items:center}}@media(min-width:768px)and (max-width:1023px){.stats-grid{grid-template-columns:repeat(2,1fr)}.charts-grid{grid-template-columns:1fr}th,td{padding:14px var(--space-md);font-size:var(--text-sm)}}.sidebar-overlay{position:fixed;inset:0;background:#0000004d;z-index:calc(var(--z-sidebar) - 1);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:fadeIn var(--transition-fast)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.invoice-detail-sidebar{position:fixed;top:0;right:0;width:480px;height:100vh;background:var(--bg-secondary);box-shadow:-4px 0 24px #0000001a;z-index:var(--z-sidebar);display:flex;flex-direction:column;animation:slideInRight var(--transition-base)}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-xl);border-bottom:1px solid var(--border-subtle);background:var(--bg-primary)}.sidebar-header h2{font-size:var(--text-xl);font-weight:var(--weight-semibold);color:var(--text-primary);margin:0}.close-btn{background:none;border:none;color:var(--text-tertiary);cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);transition:all var(--transition-fast)}.close-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.sidebar-content{flex:1;overflow-y:auto;padding:var(--space-xl)}.sidebar-content .loading,.sidebar-content .error{text-align:center;padding:var(--space-2xl);color:var(--text-secondary)}.sidebar-content .error{color:var(--status-error)}.info-section{margin-bottom:var(--space-2xl)}.info-group{margin-bottom:var(--space-lg)}.info-group label{display:block;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-xs)}.info-value{font-size:var(--text-base);color:var(--text-primary);font-weight:var(--weight-medium)}.info-value.invoice-number{font-family:var(--font-mono);font-size:var(--text-lg)}.info-value.amount{font-family:var(--font-mono);font-size:var(--text-xl);font-weight:var(--weight-semibold);color:var(--accent-primary)}.status-actions{margin-bottom:var(--space-2xl);padding:var(--space-lg);background:var(--bg-primary);border-radius:var(--radius-lg)}.status-actions h3{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text-primary);margin-bottom:var(--space-md)}.status-buttons{display:flex;flex-direction:column;gap:var(--space-sm)}.status-btn{padding:12px var(--space-md);border:1px solid var(--border-medium);background:var(--bg-secondary);border-radius:var(--radius-md);font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--text-primary);cursor:pointer;transition:all var(--transition-fast);text-align:left;font-family:var(--font-body)}.status-btn:hover:not(:disabled){background:var(--bg-hover);border-color:var(--accent-primary)}.status-btn.active{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary)}.status-btn:disabled{opacity:.5;cursor:not-allowed}.items-section{margin-bottom:var(--space-2xl)}.items-section h3{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text-primary);margin-bottom:var(--space-md)}.items-list{display:flex;flex-direction:column;gap:var(--space-sm)}.item-card{padding:var(--space-md);background:var(--bg-primary);border-radius:var(--radius-md);border:1px solid var(--border-subtle)}.item-description{font-size:var(--text-base);color:var(--text-primary);font-weight:var(--weight-medium);margin-bottom:var(--space-xs)}.item-details{display:flex;justify-content:space-between;align-items:center;font-size:var(--text-sm);color:var(--text-secondary)}.item-quantity{font-family:var(--font-mono)}.item-total{font-family:var(--font-mono);font-weight:var(--weight-semibold);color:var(--text-primary)}.pdf-viewer-section{margin-bottom:var(--space-2xl)}.pdf-toggle-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);width:100%;padding:var(--space-md);min-height:44px;background:var(--bg-primary);border:1px solid var(--border-medium);border-radius:var(--radius-md);font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--text-primary);cursor:pointer;transition:all var(--transition-fast)}.pdf-toggle-btn:hover{background:var(--bg-hover);border-color:var(--accent-primary);transform:translateY(-1px);box-shadow:0 2px 8px #0000000d}.pdf-toggle-btn svg{flex-shrink:0}.pdf-viewer-container{margin-top:var(--space-md);border-radius:var(--radius-md);overflow:hidden;background:var(--bg-primary);border:1px solid var(--border-subtle);box-shadow:0 2px 8px #0000000d;position:relative}.pdf-viewer-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm) var(--space-md);background:linear-gradient(135deg,#667eea,#764ba2);border-bottom:1px solid rgba(255,255,255,.1)}.pdf-viewer-header:before{content:"PDF Vorschau";color:#fff;font-size:var(--text-sm);font-weight:var(--weight-semibold)}.pdf-fullscreen-btn{background:#fff3;border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer;padding:var(--space-sm) var(--space-md);display:flex;align-items:center;gap:var(--space-xs);justify-content:center;border-radius:var(--radius-md);transition:all var(--transition-fast);font-size:var(--text-sm);font-weight:var(--weight-medium)}.pdf-fullscreen-btn:after{content:"Fullscreen";font-size:var(--text-sm)}.pdf-fullscreen-btn:hover{background:#ffffff4d;border-color:#ffffff80;transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.pdf-viewer{width:100%;height:800px;border:none;display:block;transition:all var(--transition-base);background:#f5f5f5}.pdf-viewer.fullscreen{position:fixed;inset:60px 0 0;width:100vw;height:calc(100vh - 60px);z-index:calc(var(--z-sidebar) + 11);border-radius:0}.pdf-fullscreen-overlay{position:fixed;inset:0;background:#000000f2;z-index:calc(var(--z-sidebar) + 10);cursor:pointer;animation:fadeIn var(--transition-fast)}.pdf-viewer.fullscreen+.pdf-viewer-header{position:fixed;top:0;left:0;right:0;z-index:calc(var(--z-sidebar) + 12);border-radius:0}.metadata-section{padding-top:var(--space-lg);border-top:1px solid var(--border-subtle)}.metadata-item{display:flex;justify-content:space-between;padding:var(--space-sm) 0;font-size:var(--text-sm)}.metadata-label{color:var(--text-tertiary)}.metadata-value{color:var(--text-secondary);font-family:var(--font-mono)}@media(max-width:767px){.invoice-detail-sidebar{width:100%;left:0;right:0}.sidebar-header,.sidebar-content{padding:var(--space-lg)}.status-actions{padding:var(--space-md)}.status-btn{min-height:var(--touch-target-min);padding:12px var(--space-md)}.close-btn{min-width:var(--touch-target-min);min-height:var(--touch-target-min)}}@media(min-width:768px)and (max-width:1023px){.invoice-detail-sidebar{width:400px}}.invoice-actions{display:flex;flex-direction:column;gap:var(--space-md);padding:var(--space-lg) 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}.action-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md);min-height:44px;border:1px solid var(--border-medium);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.action-btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.download-btn{background:var(--primary);color:#fff;border-color:var(--primary)}.download-btn:hover{background:var(--primary-dark)}.delete-btn{background:#fff;color:#dc2626;border-color:#dc2626}.delete-btn:hover{background:#fef2f2}.delete-confirm{padding:var(--space-md);background:#fef2f2;border:1px solid #dc2626;border-radius:var(--radius-md)}.delete-confirm p{margin:0 0 var(--space-sm);color:#dc2626;font-weight:500;text-align:center}.delete-confirm-buttons{display:flex;gap:var(--space-sm)}.delete-confirm-buttons button{flex:1;padding:var(--space-sm) var(--space-md);border:none;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:500;cursor:pointer;min-height:40px}.confirm-yes{background:#dc2626;color:#fff}.confirm-yes:hover{background:#b91c1c}.confirm-no{background:#fff;color:#6b7280;border:1px solid var(--border-medium)}.confirm-no:hover{background:#f9fafb}@media(max-width:767px){.invoice-actions{padding:var(--space-md) 0}.action-btn{padding:var(--space-sm) var(--space-md)}.pdf-viewer:not(.fullscreen){height:400px}.pdf-toggle-btn{font-size:var(--text-sm)}}@media(min-width:768px)and (max-width:1023px){.pdf-viewer:not(.fullscreen){height:500px}}@media(min-width:1024px){.pdf-viewer:not(.fullscreen){height:700px}}.due-date-display{display:flex;align-items:center;gap:var(--space-sm)}.due-date-edit-btn{background:none;border:none;color:var(--text-tertiary);cursor:pointer;padding:var(--space-xs);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:all var(--transition-fast)}.due-date-edit-btn:hover{background:var(--bg-hover);color:var(--accent-primary)}.due-date-edit{display:flex;flex-direction:column;gap:var(--space-sm)}.due-date-input{padding:var(--space-sm) var(--space-md);border:1px solid var(--border-medium);border-radius:var(--radius-md);font-size:var(--text-base);font-family:var(--font-body);color:var(--text-primary);background:var(--bg-primary);transition:all var(--transition-fast)}.due-date-input:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px #667eea1a}.due-date-input:disabled{opacity:.5;cursor:not-allowed}.due-date-actions{display:flex;gap:var(--space-sm)}.due-date-save-btn,.due-date-cancel-btn{flex:1;padding:var(--space-sm) var(--space-md);border:none;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:var(--weight-medium);cursor:pointer;transition:all var(--transition-fast);min-height:36px}.due-date-save-btn{background:var(--accent-primary);color:#fff}.due-date-save-btn:hover:not(:disabled){background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 2px 8px #667eea4d}.due-date-save-btn:disabled{opacity:.5;cursor:not-allowed}.due-date-cancel-btn{background:var(--bg-primary);color:var(--text-secondary);border:1px solid var(--border-medium)}.due-date-cancel-btn:hover:not(:disabled){background:var(--bg-hover);border-color:var(--border-strong)}.due-date-cancel-btn:disabled{opacity:.5;cursor:not-allowed}.table-container{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden}.invoice-number{font-family:var(--font-mono);font-size:13px;color:var(--text-primary);font-weight:var(--weight-medium)}.supplier{color:var(--text-primary);font-weight:var(--weight-medium)}.amount{font-family:var(--font-mono);font-size:var(--text-base);font-weight:var(--weight-semibold)}.modal{background:var(--bg-secondary);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:600px;width:90%;max-height:90vh;overflow:auto}.modal-close:disabled{opacity:.5;cursor:not-allowed}.modal-body{padding:var(--space-lg)}input[type=file]{display:block;width:100%;padding:var(--space-md);border:2px dashed var(--border-medium);border-radius:var(--radius-md);background:var(--bg-primary);cursor:pointer;transition:all var(--transition-fast)}input[type=file]:hover{border-color:var(--accent-primary);background:var(--accent-light)}input[type=file]:disabled{opacity:.5;cursor:not-allowed}.uploading{text-align:center;padding:var(--space-xl)}.uploading p{color:var(--text-secondary);margin-top:var(--space-md)}.spinner{width:40px;height:40px;margin:0 auto;border:3px solid var(--border-subtle);border-top-color:var(--accent-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:767px){.filters{padding:var(--space-md);overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}.filter-btn{flex-shrink:0;white-space:nowrap;min-height:var(--touch-target-min);padding:10px 16px}.modal{width:95%;max-height:85vh;margin:var(--space-md)}.modal-header,.modal-body{padding:var(--space-md)}input[type=file]{padding:var(--space-lg);font-size:var(--text-base)}}@media(min-width:768px)and (max-width:1023px){.modal{width:85%}}.table-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-lg);border-bottom:1px solid var(--border-subtle)}.table-title{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--text-primary)}.filters{display:flex;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--border-subtle)}.filter-btn{padding:6px 12px;border:1px solid var(--border-medium);background:var(--bg-primary);border-radius:var(--radius-md);font-size:13px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-body)}.filter-btn:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.filter-btn.active{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary)}.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-lg);padding:var(--space-lg)}.note-card{border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-sm);transition:all var(--transition-fast);cursor:pointer;position:relative;min-height:180px;display:flex;flex-direction:column}.note-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.note-card.yellow{background:#fff9c4;border:1px solid #FFF59D}.note-card.green{background:#c8e6c9;border:1px solid #A5D6A7}.note-card.purple{background:#e1bee7;border:1px solid #CE93D8}.note-card.blue{background:#bbdefb;border:1px solid #90CAF9}.note-card.red{background:#ffcdd2;border:1px solid #EF9A9A}.note-card.orange{background:#ffe0b2;border:1px solid #FFCC80}.note-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-md)}.note-title{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text-primary);word-wrap:break-word;flex:1}.note-team-badge{background:#0000001a;padding:2px 8px;border-radius:var(--radius-sm);font-size:11px;font-weight:var(--weight-medium);color:var(--text-primary);margin-left:var(--space-sm);white-space:nowrap}.note-content{font-size:14px;color:var(--text-secondary);line-height:1.5;margin-bottom:var(--space-md);flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.note-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.note-tags{display:flex;gap:var(--space-xs);flex-wrap:wrap;flex:1}.note-tag{background:#0000001a;padding:2px 8px;border-radius:var(--radius-sm);font-size:11px;color:var(--text-secondary)}.note-date{font-size:11px;color:var(--text-tertiary);margin-left:var(--space-sm)}.empty-state{text-align:center;padding:var(--space-3xl)}.empty-state p{color:var(--text-secondary);margin-bottom:var(--space-lg)}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal{background:var(--bg-secondary);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:600px;width:90%;max-height:80vh;overflow-y:auto;display:flex;flex-direction:column}.form-label{display:block;margin-bottom:var(--space-xs);font-size:13px;font-weight:var(--weight-medium);color:var(--text-primary)}.form-textarea{min-height:120px;resize:vertical}.color-picker{display:flex;gap:var(--space-sm);margin-top:var(--space-xs)}.color-option{width:40px;height:40px;border-radius:var(--radius-md);border:2px solid transparent;cursor:pointer;transition:all var(--transition-fast)}.color-option:hover{transform:scale(1.1)}.color-option.selected{border-color:var(--text-primary);box-shadow:0 0 0 2px var(--bg-secondary)}.color-option.yellow{background:#fff9c4}.color-option.green{background:#c8e6c9}.color-option.purple{background:#e1bee7}.color-option.blue{background:#bbdefb}.checkbox-group{display:flex;align-items:center;gap:var(--space-sm)}.checkbox-group input[type=checkbox]{width:18px;height:18px;cursor:pointer}.checkbox-group label{font-size:14px;color:var(--text-primary);cursor:pointer}.tags-input-wrapper{display:flex;flex-wrap:wrap;gap:var(--space-xs);padding:var(--space-sm);border:1px solid var(--border-medium);border-radius:var(--radius-md);background:var(--bg-primary)}.tag-item{display:flex;align-items:center;gap:var(--space-xs);background:var(--accent-light);padding:4px 8px;border-radius:var(--radius-sm);font-size:12px;color:var(--text-primary)}.tag-remove{background:none;border:none;color:var(--text-tertiary);cursor:pointer;font-size:16px;line-height:1;padding:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.tag-remove:hover{color:var(--text-primary)}.tags-input{flex:1;min-width:120px;border:none;background:transparent;font-size:14px;color:var(--text-primary);padding:4px}.tags-input:focus{outline:none}.modal-actions{display:flex;gap:var(--space-sm);justify-content:flex-end;padding:var(--space-lg);border-top:1px solid var(--border-subtle);flex-shrink:0}.btn-secondary{padding:var(--space-sm) var(--space-lg);border:1px solid var(--border-medium);background:var(--bg-primary);color:var(--text-primary);border-radius:var(--radius-md);font-size:14px;font-weight:var(--weight-medium);cursor:pointer;transition:all var(--transition-fast)}.btn-secondary:hover{background:var(--bg-hover)}@media(max-width:767px){.filters{padding:var(--space-md);overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}.filter-btn{flex-shrink:0;white-space:nowrap;min-height:var(--touch-target-min);padding:10px 16px}.notes-grid{grid-template-columns:1fr;gap:var(--space-md);padding:var(--space-md)}.note-card{padding:var(--space-md);min-height:160px}.modal{width:95%;max-height:85vh;margin:var(--space-md)}.modal-header,.modal-body{padding:var(--space-md)}.form-input,.form-textarea{padding:12px var(--space-md);font-size:var(--text-base)}.color-option{width:var(--touch-target-min);height:var(--touch-target-min)}.modal-actions{flex-direction:column-reverse;padding:var(--space-md)}.modal-actions button{width:100%;min-height:var(--touch-target-min)}}@media(min-width:768px)and (max-width:1023px){.notes-grid{grid-template-columns:repeat(2,1fr)}.modal{width:85%}}.task-card{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-md);cursor:pointer;transition:all var(--transition-fast);min-height:120px;display:flex;flex-direction:column;gap:var(--space-sm)}.task-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border-medium)}.task-priority{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.5px;width:fit-content}.priority-low{background:#d1fae5;color:#065f46}.priority-medium{background:#fed7aa;color:#92400e}.priority-high{background:#fee2e2;color:#991b1b}.task-title{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text-primary);margin:0;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.task-description{font-size:var(--text-sm);color:var(--text-secondary);margin:0;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.task-footer{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);padding-top:var(--space-sm);border-top:1px solid var(--border-subtle)}.task-assignee{display:flex;align-items:center;gap:var(--space-xs);flex:1;min-width:0}.task-avatar{width:24px;height:24px;border-radius:var(--radius-full);background:var(--accent-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:var(--weight-semibold);flex-shrink:0}.task-assignee-name{font-size:var(--text-xs);color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.task-due-date{display:flex;align-items:center;gap:4px;font-size:var(--text-xs);color:var(--text-tertiary);white-space:nowrap}.task-due-date svg{flex-shrink:0}@media(max-width:767px){.task-card{padding:var(--space-sm);min-height:100px}.task-title{font-size:var(--text-sm)}.task-description{font-size:var(--text-xs)}.task-footer{flex-wrap:wrap}}.task-column{background:var(--bg-primary);border-radius:var(--radius-lg);display:flex;flex-direction:column;min-width:280px;max-width:350px;flex:1}.column-header{padding:var(--space-md);border-bottom:1px solid var(--border-subtle)}.column-title{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text-primary)}.column-title svg{color:var(--text-tertiary)}.column-count{margin-left:auto;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-tertiary);background:var(--bg-secondary);padding:2px 8px;border-radius:var(--radius-full)}.column-content{flex:1;padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-md);max-height:calc(100vh - 280px);overflow-y:auto;overflow-x:hidden}.column-content::-webkit-scrollbar{width:6px}.column-content::-webkit-scrollbar-track{background:transparent}.column-content::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:var(--radius-full)}.column-content::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}.column-empty{text-align:center;padding:var(--space-2xl) var(--space-md);color:var(--text-tertiary);font-size:var(--text-sm)}.column-empty p{margin:0}.column-add-btn{background:transparent;border:1px dashed var(--border-medium);border-radius:var(--radius-md);padding:var(--space-sm);color:var(--text-tertiary);font-size:var(--text-sm);font-weight:var(--weight-medium);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-body);text-align:center}.column-add-btn:hover{border-color:var(--accent-primary);color:var(--accent-primary);background:var(--accent-light)}@media(max-width:767px){.task-column{min-width:100%;max-width:100%}.column-content{max-height:none;overflow-y:visible}.column-header{padding:var(--space-sm) var(--space-md)}.column-content{padding:var(--space-sm) var(--space-md);gap:var(--space-sm)}}.modal-overlay{position:fixed;inset:0;background:#00000080;z-index:var(--z-modal);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-secondary);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:600px;width:90%;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;z-index:calc(var(--z-modal) + 1)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-lg);border-bottom:1px solid var(--border-subtle)}.modal-header h3{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--text-primary)}.modal-close{background:none;border:none;font-size:28px;line-height:1;color:var(--text-tertiary);cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:all var(--transition-fast)}.modal-close:hover{background:var(--bg-hover);color:var(--text-primary)}.modal-body{flex:1;overflow-y:auto;padding:var(--space-lg)}.form-group{margin-bottom:var(--space-lg)}.form-group label{display:block;margin-bottom:var(--space-xs);font-size:13px;font-weight:var(--weight-medium);color:var(--text-primary)}.form-input,.form-textarea{width:100%;padding:var(--space-sm) var(--space-md);border:1px solid var(--border-medium);border-radius:var(--radius-md);font-size:14px;font-family:var(--font-body);color:var(--text-primary);background:var(--bg-primary);transition:all var(--transition-fast)}.form-input:focus,.form-textarea:focus{outline:none;border-color:var(--accent-primary)}.form-textarea{min-height:100px;resize:vertical}.form-hint{display:block;margin-top:var(--space-xs);font-size:var(--text-xs);color:var(--text-tertiary)}.btn-delete{padding:var(--space-sm) var(--space-lg);border:1px solid var(--status-error);background:var(--status-error);color:#fff;border-radius:var(--radius-md);font-size:14px;font-weight:var(--weight-medium);cursor:pointer;transition:all var(--transition-fast)}.btn-delete:hover{background:#c62828}.btn-delete:disabled{opacity:.5;cursor:not-allowed}.task-modal{max-width:600px}.priority-buttons{display:flex;gap:var(--space-sm)}.priority-btn{flex:1;padding:10px var(--space-md);border:1px solid var(--border-medium);background:var(--bg-secondary);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--weight-medium);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-body)}.priority-btn:hover{border-color:var(--accent-primary)}.priority-btn.priority-low.active{background:#d1fae5;border-color:#065f46;color:#065f46}.priority-btn.priority-medium.active{background:#fed7aa;border-color:#92400e;color:#92400e}.priority-btn.priority-high.active{background:#fee2e2;border-color:#991b1b;color:#991b1b}.status-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm)}.status-btn{padding:10px var(--space-md);border:1px solid var(--border-medium);background:var(--bg-secondary);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--weight-medium);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-body)}.status-btn:hover{border-color:var(--accent-primary)}.status-btn.status-todo.active{background:#dbeafe;border-color:#1e40af;color:#1e40af}.status-btn.status-in-progress.active{background:#fef3c7;border-color:#92400e;color:#92400e}.status-btn.status-done.active{background:#d1fae5;border-color:#065f46;color:#065f46}.status-btn.status-cancelled.active{background:#f3f4f6;border-color:#6b7280;color:#6b7280}.form-select{width:100%;padding:10px var(--space-md);border:1px solid var(--border-medium);border-radius:var(--radius-md);font-size:var(--text-base);font-family:var(--font-body);color:var(--text-primary);background:var(--bg-primary);transition:all var(--transition-fast);cursor:pointer}.form-select:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-light)}.modal-actions{display:flex;justify-content:space-between;align-items:center;padding:var(--space-lg);border-top:1px solid var(--border-subtle)}.modal-actions-left{flex:1}.modal-actions-right{display:flex;gap:var(--space-sm)}.delete-confirm{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-sm);color:var(--text-secondary)}.btn-delete-confirm{padding:var(--space-sm) var(--space-md);border:1px solid var(--status-error);background:var(--status-error);color:#fff;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--weight-medium);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-body)}.btn-delete-confirm:hover{background:#c62828}.btn-delete-confirm:disabled{opacity:.5;cursor:not-allowed}@media(max-width:767px){.priority-buttons{flex-direction:column}.priority-btn{min-height:var(--touch-target-min)}.status-buttons{grid-template-columns:1fr}.status-btn{min-height:var(--touch-target-min)}.form-select{min-height:var(--touch-target-min);font-size:16px}.modal-actions{flex-direction:column;gap:var(--space-md);align-items:stretch}.modal-actions-left{order:2}.modal-actions-right{order:1;flex-direction:column-reverse}.modal-actions-right button{width:100%;min-height:var(--touch-target-min)}.delete-confirm{flex-direction:column;align-items:stretch}.btn-delete-confirm,.delete-confirm .btn-secondary{width:100%;min-height:var(--touch-target-min)}}.btn-primary{background:var(--accent-primary);color:#fff;border:none;padding:10px 20px;border-radius:var(--radius-md);font-size:var(--text-base);font-weight:var(--weight-medium);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-body)}.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.page-header-content{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-lg)}.tasks-toolbar{display:flex;gap:var(--space-md);align-items:center;margin-bottom:var(--space-xl)}.search-box{flex:1;max-width:400px;position:relative;display:flex;align-items:center}.search-box svg{position:absolute;left:var(--space-md);color:var(--text-tertiary);pointer-events:none}.search-input{width:100%;padding:10px var(--space-md);padding-left:40px;padding-right:40px;border:1px solid var(--border-medium);border-radius:var(--radius-md);font-size:var(--text-base);font-family:var(--font-body);color:var(--text-primary);background:var(--bg-secondary);transition:all var(--transition-fast)}.search-input:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-light)}.search-input::placeholder{color:var(--text-tertiary)}.search-clear{position:absolute;right:var(--space-sm);background:none;border:none;font-size:24px;line-height:1;color:var(--text-tertiary);cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);transition:all var(--transition-fast)}.search-clear:hover{background:var(--bg-hover);color:var(--text-primary)}.tasks-kanban{display:flex;gap:var(--space-lg);align-items:flex-start;overflow-x:auto;padding-bottom:var(--space-md)}.tasks-kanban::-webkit-scrollbar{height:8px}.tasks-kanban::-webkit-scrollbar-track{background:var(--bg-primary)}.tasks-kanban::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:var(--radius-full)}.tasks-kanban::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}.loading,.error{text-align:center;padding:var(--space-2xl);color:var(--text-secondary);background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg)}.error{color:var(--status-error);border-color:var(--status-error-bg)}@media(max-width:767px){.page-header-content{flex-direction:column;align-items:flex-start;gap:var(--space-md)}.page-header-content button{width:100%;min-height:var(--touch-target-min)}.search-box{max-width:100%}.search-input{min-height:var(--touch-target-min);font-size:16px}.tasks-kanban{flex-direction:column;gap:var(--space-xl);overflow-x:visible}.task-column{min-width:100%}}@media(min-width:768px)and (max-width:1023px){.tasks-kanban{gap:var(--space-md)}.task-column{min-width:240px}}@media(min-width:1400px){.tasks-kanban{gap:var(--space-xl)}.task-column{max-width:400px}}.chat-container{display:flex;flex-direction:column;height:calc(100vh - var(--mobile-header-height) - var(--space-2xl));max-height:calc(100vh - var(--mobile-header-height) - var(--space-2xl));background:var(--bg-primary)}.chat-header{padding:var(--space-xl) var(--space-xl) var(--space-md);border-bottom:1px solid var(--border-subtle);background:var(--bg-primary);flex-shrink:0}.chat-header-content{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md)}.chat-header h1{font-size:var(--text-2xl);font-weight:600;color:var(--text-primary);margin:0 0 var(--space-xs)}.chat-subtitle{font-size:var(--text-sm);color:var(--text-secondary);margin:0}.mention-hint{background:var(--primary-light);color:var(--primary);padding:2px 6px;border-radius:var(--radius-sm);font-weight:500}.clear-chat-btn{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);background:transparent;border:1px solid var(--border-medium);border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.clear-chat-btn:hover{background:#fef2f2;border-color:#dc2626;color:#dc2626}.chat-messages{flex:1;overflow-y:auto;padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-md)}.loading-state,.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-tertiary);text-align:center}.empty-state p{margin:var(--space-xs) 0}.message-group{display:flex;flex-direction:column;gap:var(--space-sm)}.date-separator{text-align:center;font-size:var(--text-xs);color:var(--text-tertiary);margin:var(--space-md) 0;position:relative}.date-separator:before,.date-separator:after{content:"";position:absolute;top:50%;width:40%;height:1px;background:var(--border-subtle)}.date-separator:before{left:0}.date-separator:after{right:0}.message{display:flex;flex-direction:column;gap:var(--space-xs);padding:var(--space-md);border-radius:var(--radius-lg);max-width:70%;word-wrap:break-word;overflow-wrap:break-word}.message-user{align-self:flex-end;background:var(--primary);color:#fff}.message-ai{align-self:flex-start;background:var(--bg-secondary);border:1px solid var(--border-subtle);color:var(--text-primary)}.message-header{display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);font-size:var(--text-xs)}.message-sender{font-weight:600;display:flex;align-items:center;gap:4px}.message-user .message-sender{color:#ffffffe6}.message-ai .message-sender{color:var(--text-primary)}.claude-icon{font-size:14px}.message-header-actions{display:flex;align-items:center;gap:var(--space-xs)}.message-time{font-size:var(--text-xs);opacity:.7}.delete-message-btn{display:none;padding:4px;background:transparent;border:none;color:currentColor;cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast);opacity:.6}.message:hover .delete-message-btn{display:flex;align-items:center;justify-content:center}.delete-message-btn:hover{opacity:1;background:#dc26261a;color:#dc2626}.message-user .delete-message-btn:hover{background:#fff3;color:#fff}.message-content{font-size:var(--text-sm);line-height:1.5;white-space:pre-wrap}.chat-input-container{flex-shrink:0;padding:var(--space-lg);border-top:1px solid var(--border-subtle);background:var(--bg-primary)}.chat-input-wrapper{display:flex;gap:var(--space-sm);align-items:flex-end}.chat-input{flex:1;padding:var(--space-md);border:1px solid var(--border-medium);border-radius:var(--radius-md);font-size:var(--text-base);font-family:var(--font-body);color:var(--text-primary);background:var(--bg-secondary);resize:none;min-height:44px;max-height:120px;transition:all var(--transition-fast)}.chat-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}.chat-input:disabled{opacity:.6;cursor:not-allowed}.chat-send-button{min-width:44px;min-height:44px;padding:var(--space-md);background:var(--primary);color:#fff;border:none;border-radius:var(--radius-md);font-size:20px;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center}.chat-send-button:hover:not(:disabled){background:var(--primary-dark);transform:translateY(-1px)}.chat-send-button:active:not(:disabled){transform:translateY(0)}.chat-send-button:disabled{opacity:.5;cursor:not-allowed}.chat-hint{margin-top:var(--space-sm);font-size:var(--text-xs);color:var(--text-tertiary);text-align:center}.chat-hint kbd{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:2px 6px;font-family:var(--font-mono);font-size:10px}@media(max-width:767px){.chat-container{height:calc(100vh - var(--mobile-header-height));max-height:calc(100vh - var(--mobile-header-height))}.chat-header{padding:var(--space-md)}.chat-header h1{font-size:var(--text-xl)}.chat-subtitle{font-size:var(--text-xs)}.chat-messages{padding:var(--space-md)}.message{max-width:85%;padding:var(--space-sm) var(--space-md)}.chat-input-container{padding:var(--space-md)}.chat-input{font-size:var(--text-sm)}.chat-hint{font-size:11px}}@media(min-width:768px)and (max-width:1024px){.message{max-width:80%}}@media(min-width:1025px){.chat-container{height:calc(100vh - 100px);max-height:calc(100vh - 100px)}.message{max-width:60%}}.thinking-indicator{opacity:.9;animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:.9;transform:translateY(0)}}.thinking-animation{display:flex;align-items:center;gap:var(--space-xs);font-style:italic;color:var(--text-secondary)}.thinking-dots{display:inline-flex;gap:2px}.thinking-dots span{animation:blink 1.4s infinite;font-weight:700;font-size:18px}.thinking-dots span:nth-child(2){animation-delay:.2s}.thinking-dots span:nth-child(3){animation-delay:.4s}@keyframes blink{0%,20%,to{opacity:.3}50%{opacity:1}}.thinking-text{font-size:var(--text-sm)}.btn-danger{background:#dc2626;color:#fff;border:none}.btn-danger:hover{background:#b91c1c}.settings-container{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-2xl)}.settings-section{background:var(--bg-primary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-xl)}.section-title{font-size:var(--text-xl);font-weight:600;color:var(--text-primary);margin:0 0 var(--space-sm)}.section-description{font-size:var(--text-sm);color:var(--text-secondary);margin:0 0 var(--space-lg)}.settings-form{display:flex;flex-direction:column;gap:var(--space-lg)}.form-group{display:flex;flex-direction:column;gap:var(--space-xs)}.form-group label{font-size:var(--text-sm);font-weight:500;color:var(--text-primary)}.form-input{padding:var(--space-md);border:1px solid var(--border-medium);border-radius:var(--radius-md);font-size:var(--text-base);font-family:var(--font-body);color:var(--text-primary);background:var(--bg-secondary);transition:all var(--transition-fast)}.form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}.form-input:disabled{opacity:.6;cursor:not-allowed;background:var(--bg-tertiary)}.form-hint{font-size:var(--text-xs);color:var(--text-tertiary);margin:0}.form-actions{display:flex;gap:var(--space-md);margin-top:var(--space-md)}.btn-primary,.btn-secondary,.btn-danger{padding:var(--space-md) var(--space-xl);border:none;border-radius:var(--radius-md);font-size:var(--text-base);font-weight:500;cursor:pointer;transition:all var(--transition-fast);min-height:44px}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--primary-dark);transform:translateY(-1px)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-medium)}.btn-secondary:hover:not(:disabled){background:var(--bg-tertiary);border-color:var(--border-strong)}.btn-danger{background:var(--status-error);color:#fff}.btn-danger:hover:not(:disabled){background:#dc2626;transform:translateY(-1px)}.danger-zone{border-color:var(--status-error-light);background:#ef444408}.danger-zone .section-title{color:var(--status-error)}.loading,.error{display:flex;align-items:center;justify-content:center;padding:var(--space-2xl);color:var(--text-tertiary)}.error{color:var(--status-error)}@media(max-width:767px){.settings-container{gap:var(--space-lg)}.settings-section{padding:var(--space-lg)}.section-title{font-size:var(--text-lg)}.form-actions{flex-direction:column}.btn-primary,.btn-secondary,.btn-danger{width:100%}}@media(min-width:768px)and (max-width:1024px){.settings-container{max-width:700px}}