@import "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap";
@import "https://fonts.googleapis.com/icon?family=Material+Icons";
:root{--primary:#80cbc4;--primary-light:#b2dfdb;--primary-dark:#4db6ac;--accent:#7c4dff;--sidebar-bg:#e8f5f3;--sidebar-active:#b2dfdb;--sidebar-text:#37474f;--sidebar-active-text:#00695c;--header-gradient-start:#b2ebf2;--header-gradient-end:#e0f7fa;--page-bg:#d5e5e2;--card-bg:#fff;--card-shadow:0 2px 8px #00000014;--table-header-bg:#607d8b;--table-header-text:#fff;--table-row-alt:#f5f5f5;--table-border:#e0e0e0;--danger:#e53935;--success:#43a047;--fab-bg:#80cbc4;--fab-hover:#4db6ac;--text-primary:#212121;--text-secondary:#757575;--border-radius:8px;--sidebar-width:260px;--header-height:80px}*{box-sizing:border-box;margin:0;padding:0}html,body{color:var(--text-primary);background:var(--page-bg);height:100%;font-family:Roboto,sans-serif;font-size:14px;overflow:hidden}a{color:inherit;text-decoration:none}.app-layout{height:100vh;display:flex;overflow:hidden}.app-header{top:0;left:var(--sidebar-width);height:var(--header-height);background:linear-gradient(135deg,var(--header-gradient-start),var(--header-gradient-end));z-index:100;border-bottom:1px solid #0000000d;justify-content:space-between;align-items:center;padding:0 24px;display:flex;position:fixed;right:0}.header-logo img{object-fit:contain;height:56px}.header-profile{cursor:pointer;align-items:center;gap:12px;display:flex}.header-profile .material-icons{color:var(--sidebar-text);font-size:32px}.header-profile-wrapper{position:relative}.profile-dropdown{z-index:500;background:#fff;border-radius:12px;min-width:260px;animation:.2s dropdownFadeIn;position:absolute;top:calc(100% + 8px);right:0;overflow:hidden;box-shadow:0 8px 32px #00000026}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.dropdown-header{background:linear-gradient(135deg,#e0f7fa,#b2dfdb);align-items:center;gap:12px;padding:16px 20px;display:flex}.dropdown-name{color:var(--text-primary);font-size:15px;font-weight:500}.dropdown-role{color:var(--text-secondary);text-transform:capitalize;font-size:12px}.dropdown-divider{background:#e0e0e0;height:1px}.dropdown-item{cursor:pointer;color:var(--text-primary);align-items:center;gap:12px;padding:14px 20px;font-size:14px;transition:background .15s;display:flex}.dropdown-item:hover{background:#f5f5f5}.dropdown-item .material-icons{color:var(--text-secondary);font-size:20px}.dropdown-item:last-child:hover{background:#ffebee}.dropdown-item:last-child .material-icons,.dropdown-item:last-child{color:var(--danger)}.profile-field{background:#f9fafb;border-radius:8px;padding:12px 16px}.profile-field label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:11px;font-weight:500;display:block}.profile-field div{color:var(--text-primary);font-size:15px;font-weight:500}.app-sidebar{width:var(--sidebar-width);background:var(--sidebar-bg);z-index:200;border-right:1px solid #0000000f;flex-direction:column;display:flex;position:fixed;top:0;bottom:0;left:0;overflow-y:auto}.sidebar-greeting{border-bottom:1px solid #0000000f;padding:20px 24px}.sidebar-greeting h3{color:var(--text-primary);font-size:18px;font-weight:500}.sidebar-greeting span{color:var(--text-secondary);font-size:13px}.sidebar-nav{flex:1;padding:8px 0}.nav-item{color:var(--sidebar-text);cursor:pointer;border-left:4px solid #0000;align-items:center;gap:12px;padding:12px 24px;font-size:14px;font-weight:400;transition:all .15s;display:flex}.nav-item:hover{background:#0000000a}.nav-item.active{background:var(--sidebar-active);color:var(--sidebar-active-text);border-left-color:var(--primary-dark);font-weight:500}.nav-item .material-icons{text-align:center;width:24px;font-size:20px}.nav-item.sub-item{padding-left:60px;font-size:13px}.nav-group-header{color:var(--sidebar-text);cursor:pointer;border-left:4px solid #0000;justify-content:space-between;align-items:center;gap:12px;padding:12px 24px;font-size:14px;transition:background .15s;display:flex}.nav-group-header:hover{background:#0000000a}.nav-group-header .material-icons.arrow{font-size:18px;transition:transform .2s}.nav-group-header .material-icons.arrow.open{transform:rotate(180deg)}.nav-group-children{max-height:0;transition:max-height .25s;overflow:hidden}.nav-group-children.open{max-height:300px}.app-main{margin-left:var(--sidebar-width);margin-top:var(--header-height);height:calc(100vh - var(--header-height));background:var(--page-bg);flex:1;padding:24px;overflow-y:auto}.card{background:var(--card-bg);border-radius:var(--border-radius);box-shadow:var(--card-shadow);margin-bottom:24px;padding:24px}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px;display:flex}.page-header h2{color:var(--text-primary);font-size:20px;font-weight:500}.page-header .listing-count{color:var(--text-secondary);font-size:13px}.filters-row{flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:16px;display:flex}.filter-input,.filter-select{border:1px solid var(--table-border);background:#fff;border-radius:6px;outline:none;min-width:180px;padding:10px 14px;font-family:inherit;font-size:14px;transition:border-color .2s}.filter-input:focus,.filter-select:focus{border-color:var(--primary-dark)}.filter-input::placeholder{color:#bdbdbd}.fab-button{background:var(--fab-bg);color:#fff;cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:56px;height:56px;font-size:28px;transition:all .2s;display:flex;box-shadow:0 4px 12px #00000026}.fab-button:hover{background:var(--fab-hover);transform:scale(1.1);box-shadow:0 6px 16px #0003}.data-table{border-collapse:collapse;border-radius:6px;width:100%;overflow:hidden}.data-table thead th{background:var(--table-header-bg);color:var(--table-header-text);text-align:left;white-space:nowrap;padding:14px 16px;font-size:13px;font-weight:500}.data-table tbody tr{transition:background .1s}.data-table tbody tr:nth-child(2n){background:var(--table-row-alt)}.data-table tbody tr:hover{background:#e8f5e9}.data-table tbody td{border-bottom:1px solid var(--table-border);color:var(--text-primary);padding:12px 16px;font-size:13px}.data-table tbody td a{color:var(--primary-dark)}.action-btn{cursor:pointer;background:0 0;border:none;padding:4px;font-size:18px;transition:transform .15s}.action-btn:hover{transform:scale(1.2)}.action-btn.edit{color:var(--text-secondary)}.action-btn.delete{color:var(--danger)}.action-btn.view{color:var(--primary-dark)}.status-active{color:var(--success)}.status-inactive{color:var(--danger)}.dashboard-grid{grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:24px;display:grid}.stat-card{background:var(--card-bg);text-align:center;box-shadow:var(--card-shadow);border:1px solid #0000000a;border-radius:12px;padding:28px 24px}.stat-card h4{color:var(--text-secondary);margin-bottom:12px;font-size:14px;font-weight:400}.stat-card .stat-value{color:var(--accent);font-size:32px;font-weight:500}.stat-card .stat-label{color:var(--text-secondary);margin-top:4px;font-size:12px}.pagination{color:var(--text-secondary);justify-content:flex-end;align-items:center;gap:8px;padding:16px 0;font-size:13px;display:flex}.pagination select{border:1px solid var(--table-border);border-radius:4px;padding:4px 8px;font-size:13px}.pagination button{border:1px solid var(--table-border);cursor:pointer;background:#fff;border-radius:4px;padding:6px 12px;font-size:13px}.pagination button:hover:not(:disabled){background:var(--primary-light)}.pagination button:disabled{opacity:.4;cursor:not-allowed}.modal-overlay{z-index:1000;background:#0006;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.modal-content{background:#fff;border-radius:12px;width:600px;max-width:90vw;max-height:85vh;padding:32px;animation:.25s slideUp;overflow-y:auto;box-shadow:0 16px 48px #0003}.modal-content h3{color:var(--text-primary);margin-bottom:24px;font-size:18px;font-weight:500}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.form-group{margin-bottom:20px}.form-group label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;font-size:12px;font-weight:500;display:block}.form-group input,.form-group select,.form-group textarea{border:1px solid var(--table-border);border-radius:6px;outline:none;width:100%;padding:10px 14px;font-family:inherit;font-size:14px;transition:border-color .2s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary-dark)}.form-row{grid-template-columns:1fr 1fr;gap:16px;display:grid}.form-actions{justify-content:flex-end;gap:12px;margin-top:24px;display:flex}.btn{cursor:pointer;border:none;border-radius:6px;padding:10px 24px;font-size:14px;font-weight:500;transition:all .2s}.btn-primary{background:var(--primary-dark);color:#fff}.btn-primary:hover{background:#00897b}.btn-cancel{color:var(--danger);border:1px solid var(--danger);background:#fff}.btn-cancel:hover{background:#ffebee}.loading-spinner{justify-content:center;align-items:center;padding:48px;display:flex}.spinner{border:4px solid var(--table-border);border-top-color:var(--primary-dark);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.login-page{background:linear-gradient(135deg,#b2ebf2 0%,#e0f7fa 50%,#b2dfdb 100%);justify-content:center;align-items:center;min-height:100vh;display:flex}.login-card{text-align:center;background:#fff;border-radius:16px;width:420px;padding:48px 40px;box-shadow:0 8px 32px #0000001a}.login-card img{object-fit:contain;height:80px;margin-bottom:32px}.login-card h2{color:var(--text-primary);margin-bottom:24px;font-size:20px;font-weight:500}.login-card .form-group{text-align:left}.login-card .btn-primary{width:100%;padding:12px;font-size:16px}.toast{color:#fff;z-index:9999;border-radius:8px;padding:14px 24px;font-size:14px;animation:.3s slideInRight;position:fixed;top:24px;right:24px;box-shadow:0 4px 16px #00000026}.toast.success{background:var(--success)}.toast.error{background:var(--danger)}@keyframes slideInRight{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}@media (max-width:1200px){.dashboard-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.dashboard-grid{grid-template-columns:1fr}:root{--sidebar-width:0px}}