:root{--primary-color: #007aff;--primary-color-hover: #0056b3;--sidebar-bg: #ffffff;--sidebar-text: #333333;--sidebar-text-muted: #6b7280;--sidebar-text-hover: var(--primary-color);--sidebar-active-bg: #f0f7ff;--main-bg: #f8f8f8;--card-bg: #ffffff;--border-color: #e5e7eb;--text-color: #1f2937;--text-muted: #6b7280;--success-bg: #f0fdf4;--success-icon: #22c55e;--success-text: #15803d;--success-border: #bbf7d0;--danger-bg: #fef2f2;--danger-icon: #ef4444;--danger-text: #b91c1c;--danger-border: #fecaca;--danger-color-hover: #dc2626;--warning-bg: #fffbeb;--warning-icon: #f59e0b;--warning-text: #b45309;--warning-border: #fde68a;--info-bg: #eff6ff;--info-icon: #3b82f6;--info-text: #1d4ed8;--info-border: #bfdbfe;--row-selected-bg: var(--info-bg);--shadow: 0 4px 6px -1px rgb(0 0 0 / .05), 0 2px 4px -2px rgb(0 0 0 / .05);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .07), 0 4px 6px -2px rgb(0 0 0 / .05);--sidebar-width: 250px;--sidebar-width-collapsed: 80px;--header-height: 70px;--bottom-bar-height: 60px;--transition-speed: .3s}@keyframes slideInUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideDownAndFadeIn{0%{transform:translateY(-5px);opacity:0}to{transform:translateY(0);opacity:1}}*{box-sizing:border-box;margin:0;padding:0}body,html{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";background-color:var(--main-bg);color:var(--text-color);height:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root,.app-container{height:100%}.app-container{display:flex;flex-direction:column;height:100%}.sidebar{display:none}.main-content{flex:1;overflow-y:auto;padding:1.5rem 1rem var(--bottom-bar-height, 1rem)}.card h3{margin-bottom:1.5rem;font-size:1.25rem;font-weight:600}.header{padding:0 1rem;height:var(--header-height);background-color:var(--card-bg);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10;flex-shrink:0}.header-left{flex:1 1 0%;min-width:0;display:flex;align-items:center}.user-menu{display:flex;align-items:center;gap:.5rem;background-color:transparent;border:none;padding:.5rem;border-radius:50%;cursor:pointer;transition:background-color .2s}.user-menu:hover{background-color:var(--main-bg)}.user-avatar{width:36px;height:36px;border-radius:50%;background-color:var(--text-color);color:var(--card-bg);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700}.user-info,.dropdown-arrow{display:none}.user-menu-container{position:relative}.user-menu-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:220px;background:var(--card-bg);border:1px solid var(--border-color);border-radius:.75rem;box-shadow:var(--shadow-lg);z-index:100;overflow:hidden;animation:slideDownAndFadeIn .2s ease-out forwards}.user-menu-dropdown ul{list-style:none}.user-menu-dropdown li a,.user-menu-dropdown .logout-btn{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;color:var(--text-color);text-decoration:none;font-weight:500;transition:background-color .2s;background:none;border:none;width:100%;text-align:left;cursor:pointer;font-size:.95rem}.user-menu-dropdown li a:hover,.user-menu-dropdown .logout-btn:hover{background-color:var(--main-bg)}.user-menu-dropdown .logout-btn{color:var(--danger-icon)}.user-menu-dropdown li.separator{height:1px;background-color:var(--border-color);margin:.5rem 0}.bottom-tab-bar{position:fixed;bottom:0;left:0;right:0;height:calc(var(--bottom-bar-height) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background-color:var(--card-bg);border-top:1px solid var(--border-color);display:flex;justify-content:space-around;box-shadow:0 -2px 10px #0000000d;z-index:1000}.tab-item{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-grow:1;text-decoration:none;color:var(--text-muted);font-size:.75rem;font-weight:500;gap:4px;transition:color .2s ease}.tab-item.active{color:var(--primary-color)}.tab-item i{font-size:1.25rem}.breadcrumb{list-style:none;display:flex;align-items:center;justify-content:center;flex-grow:1;font-size:1.25rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.breadcrumb-item,.breadcrumb-separator{display:none}.breadcrumb-item:last-child{display:list-item}.breadcrumb-item:last-child span,.breadcrumb-item:last-child a{color:var(--text-color);text-decoration:none;pointer-events:none}@media (min-width: 769px){.app-container{display:grid;grid-template-areas:"header header" "sidebar main";grid-template-rows:var(--header-height) 1fr;grid-template-columns:var(--sidebar-width) 1fr;height:100vh;transition:grid-template-columns var(--transition-speed) ease}.app-container.sidebar-collapsed{grid-template-columns:var(--sidebar-width-collapsed) 1fr}.sidebar{display:flex;flex-direction:column;grid-area:sidebar;background-color:var(--sidebar-bg);border-right:1px solid var(--border-color);transition:width var(--transition-speed) ease;z-index:100;overflow-x:hidden;height:100%}.header{grid-area:header;position:static;box-shadow:none;padding:0 2rem}.header-left{flex:initial}.main-content{grid-area:main;overflow-y:auto;padding:2rem}.bottom-tab-bar{display:none}.user-info,.dropdown-arrow{display:grid}.user-menu{border-radius:.5rem;padding:.5rem}.breadcrumb{justify-content:flex-start;font-size:1.1rem;font-weight:600}.breadcrumb-item{display:list-item}.breadcrumb-item a{color:var(--text-muted);text-decoration:none;transition:color .2s;pointer-events:auto}.breadcrumb-item a:hover{color:var(--primary-color)}.breadcrumb-item.active span,.breadcrumb-item.active a{color:var(--text-color);pointer-events:none}.breadcrumb-separator{display:list-item;color:var(--text-muted);font-size:.7rem;margin:0 .5rem}.sidebar-header{display:flex;align-items:center;gap:.75rem;font-size:1.5rem;font-weight:700;color:var(--text-color);overflow:hidden;flex-shrink:0;padding:1rem 1.5rem;height:var(--header-height);border-bottom:1px solid var(--border-color)}.sidebar-header .fa-shield-halved{color:var(--primary-color);font-size:1.75rem}.sidebar-header h2{white-space:nowrap;opacity:1;transition:opacity .2s ease;font-size:1.25rem}.sidebar nav{flex-grow:1;overflow-y:auto;padding:1rem}.sidebar nav ul{list-style-type:none}.sidebar nav li{margin-bottom:.25rem}.nav-category-item{font-size:.75rem;font-weight:600;text-transform:uppercase;color:var(--text-muted);padding:1rem .5rem .25rem;letter-spacing:.05em}.nav-link{display:flex;align-items:center;gap:1rem;padding:.75rem;border-radius:.5rem;text-decoration:none;color:var(--sidebar-text);font-weight:500;transition:background-color .2s,color .2s;white-space:nowrap;position:relative;cursor:pointer}.nav-link .fa-fw{width:1.25em;font-size:1.1rem;color:var(--sidebar-text-muted)}.nav-link:hover{background-color:var(--sidebar-active-bg);color:var(--sidebar-text-hover)}.nav-link:hover .fa-fw{color:var(--sidebar-text-hover)}.nav-link.active{background-color:var(--sidebar-active-bg);color:var(--primary-color);font-weight:600}.nav-link.active .fa-fw{color:var(--primary-color)}.nav-link .fa-chevron-right{margin-left:auto;font-size:.8rem;transition:transform .2s ease}.nav-link.submenu-open .fa-chevron-right{transform:rotate(90deg)}.submenu-links{list-style:none;padding-left:calc(1rem + 1.25em);margin-top:.25rem}.submenu-links .nav-link{padding:.6rem .75rem}.sidebar-footer{flex-shrink:0;padding:1rem;border-top:1px solid var(--border-color)}.sidebar-collapse-toggle{background:var(--sidebar-active-bg);border:none;color:var(--text-muted);border-radius:.5rem;width:100%;padding:.75rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s,color .2s}.sidebar-collapse-toggle:hover{background-color:var(--primary-color);color:#fff}.sidebar-collapse-toggle i{transition:transform var(--transition-speed) ease}.sidebar-collapsed .sidebar-header h2,.sidebar-collapsed .sidebar nav span,.sidebar-collapsed .nav-category-item{display:none}.sidebar-collapsed .sidebar-header{justify-content:center;padding:1rem 0}.sidebar-collapsed .nav-link{justify-content:center;gap:0}.sidebar-collapsed .sidebar-collapse-toggle i{transform:rotate(180deg)}.sidebar-collapsed .submenu-links,.sidebar-collapsed .fa-chevron-right{display:none}}.card{background-color:var(--card-bg);border-radius:1rem;padding:1rem;box-shadow:var(--shadow);border:1px solid var(--border-color)}@media (min-width: 769px){.card{padding:1.5rem}}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.card-header{display:flex;align-items:center;gap:.75rem;color:var(--text-muted);font-weight:500;margin-bottom:.5rem}.card-icon{font-size:1.25rem}.card-value{font-size:2.25rem;font-weight:700;min-height:2.25rem}.card-change{margin-top:.5rem;font-size:.875rem}.positive{color:#10b981}.negative{color:var(--danger-icon)}.chart-card{grid-column:1 / -1}.chart-container{height:350px;position:relative}.table-toolbar{display:flex;flex-direction:column;align-items:stretch;gap:1rem;margin-bottom:1.5rem}.toolbar-left-actions{display:flex;flex-direction:column;align-items:stretch;gap:1rem;width:100%}.search-container{position:relative;flex-grow:1}.search-container .fa-magnifying-glass{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--text-muted)}.table-search-input{width:100%;padding:.75rem .75rem .75rem 2.5rem;border:1px solid var(--border-color);border-radius:.5rem;font-size:1rem;background-color:var(--main-bg);color:var(--text-color);font-family:inherit;-webkit-appearance:none}.table-search-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #007aff33;background-color:#fff}.bulk-actions{display:flex;align-items:center;gap:.5rem}.bulk-actions-count{font-weight:500;color:var(--text-muted);font-size:.875rem;flex-grow:1}.table-container{overflow-x:auto}.table-container thead{display:none}.table-container table{width:100%;border-collapse:separate;border-spacing:0 1rem}.table-container tr{display:block;background:#fff;border-radius:.75rem;border:1px solid var(--border-color)}.table-container td{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px dashed var(--border-color)}.table-container td:last-child{border-bottom:none}.table-container td:before{content:attr(data-label);font-weight:600;text-align:left;color:var(--text-muted)}.table-container td:first-child:before{content:none}.table-container tbody tr.selected{box-shadow:0 0 0 2px var(--primary-color);border-color:var(--primary-color)}.table-container input[type=checkbox]{width:1.25rem;height:1.25rem}@media (min-width: 769px){.table-toolbar{flex-direction:row;align-items:center}.toolbar-left-actions{flex-direction:row}.table-container thead{display:table-header-group}.table-container table{border-spacing:0}.table-container tr{display:table-row;background:transparent;border:none;border-radius:0}.table-container td{display:table-cell;text-align:left;vertical-align:middle;padding:1rem;border-bottom:1px solid var(--border-color)}.table-container td:before{content:none}.table-container tbody tr:hover{background-color:var(--main-bg)}.table-container tbody tr.selected{background-color:var(--row-selected-bg)}.table-container th{font-weight:600;color:var(--text-muted);font-size:.875rem;text-transform:uppercase;background-color:transparent;padding:1rem}.table-container th:first-child,.table-container td:first-child{padding-right:.5rem;width:1%;text-align:center}}.status-badge{padding:.25rem .75rem;border-radius:9999px;font-weight:500;font-size:.8rem}.status-active{background-color:var(--success-bg);color:var(--success-text)}.status-inactive{background-color:#f3f4f6;color:var(--text-muted)}.table-actions{display:flex;gap:.5rem;justify-content:flex-end}.action-btn{background:none;border:none;cursor:pointer;padding:.5rem;border-radius:999px;font-size:.875rem;transition:background-color .2s,color .2s;line-height:1}.action-btn .fa-solid{margin-right:.5rem}.action-btn.edit{color:var(--primary-color)}.action-btn.edit:hover{background-color:#007aff1a}.action-btn.delete{color:var(--danger-icon)}.action-btn.delete:hover{background-color:#ef44441a}.action-btn span{display:none}@media (min-width: 769px){.action-btn span{display:inline}}.filter-container{position:relative;flex-shrink:0}.filter-container .button .fa-solid{margin-right:.5rem}.filter-badge{display:inline-flex;align-items:center;justify-content:center;margin-left:.5rem;background-color:var(--primary-color);color:#fff;font-size:.75rem;font-weight:700;height:20px;width:20px;border-radius:50%}.advanced-filter-popover{position:absolute;top:calc(100% + 8px);right:0;width:320px;background:var(--card-bg);border:1px solid var(--border-color);border-radius:.75rem;box-shadow:var(--shadow-lg);z-index:100;padding:1.25rem;display:flex;flex-direction:column;gap:1rem}@media (max-width: 480px){.advanced-filter-popover{width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;border-radius:0}}.filter-section h4{font-size:.875rem;font-weight:600;color:var(--text-color);margin-bottom:.75rem}.filter-options{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.filter-footer{border-top:1px solid var(--border-color);padding-top:1rem;margin-top:.5rem;display:flex;justify-content:flex-end;gap:.75rem}.menu-view-list{list-style:none}.menu-view-list .nav-category-item{padding:1.5rem 1rem .5rem;font-size:.875rem;font-weight:600;text-transform:uppercase;color:var(--text-muted)}.menu-view-list a{display:flex;align-items:center;gap:1rem;padding:1rem;text-decoration:none;color:var(--text-color);font-weight:500;font-size:1.1rem;border-bottom:1px solid var(--border-color)}.menu-view-list a:hover{background-color:var(--main-bg)}.menu-view-list a .fa-fw{font-size:1.2rem;color:var(--text-muted)}.menu-view-list li:last-child a{border-bottom:none}.menu-view-list a .fa-chevron-right{margin-left:auto;color:var(--text-muted)}.form-container form{display:flex;flex-direction:column;gap:1.5rem}.form-row{display:grid;grid-template-columns:1fr;gap:1.5rem}@media (min-width: 769px){.form-row{grid-template-columns:1fr 1fr}}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-weight:500;color:var(--text-color)}.form-group input,.form-group select,.form-group textarea{width:100%;padding:.85rem;border:1px solid var(--border-color);border-radius:.5rem;background-color:var(--main-bg);font-family:inherit;font-size:1rem;color:var(--text-color);transition:border-color .2s,box-shadow .2s;-webkit-appearance:none}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #007aff33;background-color:#fff}.form-checkbox{flex-direction:row;align-items:center;display:flex;gap:.75rem}.form-checkbox input{width:1.25rem;height:1.25rem;flex-shrink:0}.form-actions{margin-top:1rem;display:flex;justify-content:flex-end;gap:.75rem}.list-container ul{list-style:none}.list-item{display:flex;gap:1rem;padding:1rem 0;align-items:flex-start}.list-item:not(:last-child){border-bottom:1px solid var(--border-color)}.list-icon{color:var(--primary-color);font-size:1.25rem;margin-top:.25rem}.list-item-content p{margin:0}.list-item-timestamp{font-size:.875rem;color:var(--text-muted);margin-top:.25rem;display:block}.button{font-weight:600;border:1px solid transparent;padding:.75rem 1.5rem;border-radius:.5rem;font-size:1rem;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;justify-content:center}.button-primary{background-color:var(--primary-color);color:#fff}.button-primary:hover{background-color:var(--primary-color-hover);transform:translateY(-1px)}.button-secondary{background-color:var(--main-bg);color:var(--text-color);border-color:var(--border-color)}.button-secondary:hover{border-color:#ccc;background-color:#fff}.button-danger{background-color:var(--danger-icon);color:#fff}.button-danger:hover{background-color:var(--danger-color-hover)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#1e293b99;display:flex;justify-content:center;align-items:center;z-index:2000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{background-color:var(--card-bg);border-radius:.75rem;box-shadow:var(--shadow-lg);width:90%;max-width:500px;overflow:hidden}.modal-header{padding:1.5rem;border-bottom:1px solid var(--border-color)}.modal-header h3{font-size:1.25rem;font-weight:600;margin:0}.modal-body{padding:1.5rem}.modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--border-color);display:flex;justify-content:flex-end;gap:.75rem}.alert-container{position:fixed;top:1.5rem;right:1.5rem;z-index:9999;display:flex;flex-direction:column;gap:1rem;max-width:380px;width:100%}.alert{display:flex;align-items:flex-start;padding:1rem;border-radius:.75rem;box-shadow:var(--shadow);border:1px solid transparent;animation:slideInRight .3s ease-out forwards}.alert.fade-out{animation:fadeOut .3s ease-in forwards}.alert-icon{font-size:1.25rem;margin-right:1rem;flex-shrink:0}.alert-content{flex-grow:1;font-weight:500}.alert-close{background:none;border:none;color:inherit;opacity:.7;cursor:pointer;font-size:1.25rem;margin-left:1rem;padding:0;line-height:1}.alert-close:hover{opacity:1}.alert-success{background-color:var(--success-bg);color:var(--success-text);border-color:var(--success-border)}.alert-success .alert-icon{color:var(--success-icon)}.alert-danger{background-color:var(--danger-bg);color:var(--danger-text);border-color:var(--danger-border)}.alert-danger .alert-icon{color:var(--danger-icon)}.alert-warning{background-color:var(--warning-bg);color:var(--warning-text);border-color:var(--warning-border)}.alert-warning .alert-icon{color:var(--warning-icon)}.alert-info{background-color:var(--info-bg);color:var(--info-text);border-color:var(--info-border)}.alert-info .alert-icon{color:var(--info-icon)}.placeholder{border:2px dashed var(--border-color);border-radius:1rem;padding:4rem 2rem;text-align:center;color:var(--text-muted);background-color:transparent}.placeholder h2{font-size:1.5rem;margin-bottom:.5rem}@keyframes shimmer{to{transform:translate(100%)}}.skeleton-loader{display:inline-block;height:2.25rem;width:120px;background-color:#f0f0f0;border-radius:.25rem;position:relative;overflow:hidden}.skeleton-loader:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,#f0f0f0,#e0e0e0,#f0f0f0);transform:translate(-100%);animation:shimmer 1.5s infinite}