#root{min-height:100vh;display:flex;flex-direction:column}.top-bar{background-color:#fff;border-bottom:1px solid var(--color-border);padding:1rem;position:sticky;top:0;z-index:40;box-shadow:var(--shadow-sm)}.top-bar-content{display:flex;align-items:center;justify-content:space-between;max-width:100%;margin:0 auto}.top-bar-left{display:flex;align-items:center;gap:.5rem}.top-bar-logo{font-size:1.5rem;font-weight:700;color:var(--color-primary)}.top-bar-title{font-size:1rem;color:var(--color-text-secondary)}.bottom-nav{position:fixed;bottom:0;left:0;right:0;background-color:#fff;border-top:1px solid var(--color-border);padding:.5rem 0;display:flex;justify-content:space-around;align-items:center;z-index:50;box-shadow:0 -1px 3px #0000001a}.bottom-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem;gap:.25rem;text-decoration:none;color:var(--color-text-secondary);font-size:.75rem;transition:all var(--transition-fast);cursor:pointer}.bottom-nav-item:hover{color:var(--color-primary)}.bottom-nav-item.active{color:var(--color-primary);background-color:var(--color-primary-light);border-radius:.5rem .5rem 0 0}.bottom-nav-icon{font-size:1.5rem}.bottom-nav-label{font-weight:500}.main-content{flex:1;overflow-y:auto;padding-bottom:80px}.page-container{max-width:100%;margin:0 auto;padding:1rem}.page-header{margin-bottom:1.5rem}.page-title{font-size:1.5rem;font-weight:600;color:var(--color-primary);margin-bottom:.5rem}.page-subtitle{font-size:.875rem;color:var(--color-text-secondary)}.hero{background:var(--color-primary);color:#fff;padding:2rem 1rem;border-radius:var(--radius-lg);margin-bottom:2rem;text-align:center}.hero-title{font-size:2rem;font-weight:700;margin-bottom:.5rem}.hero-subtitle{font-size:1rem;opacity:.9}.grid{display:grid;gap:1rem}.grid-2{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.grid-3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.form-group{margin-bottom:1.5rem}.form-label{display:block;font-weight:500;color:var(--color-text);margin-bottom:.5rem;font-size:.95rem}.form-control{width:100%;padding:.75rem;border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:1rem;transition:all var(--transition-fast)}.form-control:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #eaf1f7}.form-control:disabled{background-color:var(--color-bg-secondary);cursor:not-allowed;opacity:.6}.form-error{color:var(--color-danger);font-size:.875rem;margin-top:.25rem}.form-help{color:var(--color-text-muted);font-size:.875rem;margin-top:.25rem}.button-group{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1rem}.button-group-full{flex-direction:column}.button-group-full button{width:100%}.list-item{padding:1rem;border-bottom:1px solid var(--color-border);transition:background-color var(--transition-fast)}.list-item:last-child{border-bottom:none}.list-item:hover{background-color:var(--color-bg-secondary)}.list-item-title{font-weight:600;color:var(--color-text);margin-bottom:.25rem}.list-item-subtitle{font-size:.875rem;color:var(--color-text-secondary)}.list-item-meta{font-size:.75rem;color:var(--color-text-muted);margin-top:.5rem}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal{background-color:#fff;border-radius:var(--radius-lg);padding:2rem;max-width:90vw;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg)}.modal-header{font-size:1.5rem;font-weight:600;color:var(--color-text);margin-bottom:1rem}.modal-body{margin-bottom:1rem}.modal-footer{display:flex;gap:1rem;justify-content:flex-end;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--color-border)}.skeleton{background:linear-gradient(90deg,var(--color-border) 25%,var(--color-bg-secondary) 50%,var(--color-border) 75%);background-size:200% 100%;animation:loading 1.5s infinite}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-text{height:1rem;width:100%;border-radius:var(--radius-md);margin-bottom:.5rem}.skeleton-title{height:1.5rem;width:60%;border-radius:var(--radius-md);margin-bottom:1rem}.skeleton-card{height:200px;border-radius:var(--radius-lg);margin-bottom:1rem}.toast{position:fixed;bottom:100px;right:1rem;left:auto;background-color:#fff;padding:1rem;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:200;max-width:400px;animation:slideIn .3s ease-in-out}.toast-success{border-left:4px solid var(--color-success)}.toast-error{border-left:4px solid var(--color-danger)}.toast-warning{border-left:4px solid var(--color-warning)}.toast-info{border-left:4px solid var(--color-info)}@keyframes slideIn{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}.empty-state{text-align:center;padding:3rem 1rem;color:var(--color-text-secondary)}.empty-state-icon{font-size:3rem;margin-bottom:1rem;opacity:.5}.empty-state-title{font-weight:600;margin-bottom:.5rem;color:var(--color-text)}.empty-state-subtitle{font-size:.875rem;margin-bottom:1.5rem}.status-badge{display:inline-block;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.status-active{background-color:var(--color-success-light);color:var(--color-success)}.status-pending{background-color:var(--color-warning-light);color:var(--color-warning)}.status-resolved{background-color:var(--color-info-light);color:var(--color-info)}.status-inactive{background-color:var(--color-border);color:var(--color-text-secondary)}@media(max-width:640px){.page-container{padding:.75rem}.modal{max-width:95vw;padding:1.5rem}.button-group{flex-direction:column}.button-group button{width:100%}.grid-2,.grid-3{grid-template-columns:1fr}.hero{padding:1.5rem 1rem}.hero-title{font-size:1.5rem}}@media(max-width:480px){.top-bar{padding:.75rem}.bottom-nav-label{font-size:.65rem}.bottom-nav-icon,.page-title{font-size:1.25rem}.modal{max-width:100vw;max-height:100vh;border-radius:0;padding:1rem}}:root{--color-primary: #1E3A5F;--color-primary-dark: #16314F;--color-primary-light: #EAF1F7;--color-accent: #1E3A5F;--color-accent-light: #EAF1F7;--color-success: #3F6B3A;--color-success-light: #ECF1EA;--color-danger: #C0392B;--color-danger-light: #FBECEA;--color-warning: #8C6614;--color-warning-light: #FBF3E2;--color-info: #1E3A5F;--color-info-light: #EAF1F7;--color-text: #1F1C19;--color-text-secondary: #5C544B;--color-text-muted: #8E867A;--color-text-light: #8E867A;--color-bg: #FAF8F4;--color-bg-secondary: #F0EDE7;--color-card: #FFFFFF;--color-border: #E1DDD4;--color-border-light: #F0EDE7;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .2s cubic-bezier(.4, 0, .2, 1);--transition-slow: .35s cubic-bezier(.4, 0, .2, 1)}html[lang=ar] body,html[lang=ar] input,html[lang=ar] textarea,html[lang=ar] select,html[lang=ar] button{font-family:SF Arabic,Noto Naskh Arabic,Geeza Pro,Tahoma,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}html[lang=ar] body{line-height:1.6}html[lang=ar]{--ar-line-min: 1.5}html[lang=ar] [style*="font-weight: 600"],html[lang=ar] [style*="font-weight:600"],html[lang=ar] [style*="fontWeight: 600"]{font-weight:700!important}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;background-color:var(--color-bg);color:var(--color-text);font-size:1rem;line-height:1.5}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.2;margin-top:var(--spacing-lg);margin-bottom:var(--spacing-md);color:var(--color-text)}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.25rem}h4{font-size:1.125rem}p{margin-bottom:var(--spacing-md);color:var(--color-text-secondary)}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-dark)}input,textarea,select{font-family:inherit;font-size:1rem;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #eaf1f7}input:disabled,textarea:disabled,select:disabled{background-color:var(--color-bg-secondary);cursor:not-allowed;opacity:.6}label{display:block;font-weight:500;margin-bottom:var(--spacing-sm);color:var(--color-text)}button{font-family:inherit;font-size:1rem;font-weight:500;padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}button:active{transform:scale(.98)}button:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background-color:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-dark)}.btn-secondary{background-color:var(--color-bg-secondary);color:var(--color-text)}.btn-secondary:hover:not(:disabled){background-color:var(--color-border)}.btn-danger{background-color:var(--color-danger);color:#fff}.btn-danger:hover:not(:disabled){background-color:#c0392b}.btn-outline{background-color:transparent;border:2px solid var(--color-primary);color:var(--color-primary)}.btn-outline:hover:not(:disabled){background-color:var(--color-primary-light)}.card{background-color:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-sm);transition:all var(--transition-fast)}.card:hover{box-shadow:var(--shadow-md)}.badge{display:inline-block;padding:var(--spacing-xs) var(--spacing-md);border-radius:9999px;font-size:.875rem;font-weight:500}.badge-success{background-color:var(--color-success-light);color:var(--color-success)}.badge-danger{background-color:var(--color-danger-light);color:var(--color-danger)}.badge-warning{background-color:var(--color-warning-light);color:var(--color-warning)}.badge-info{background-color:var(--color-info-light);color:var(--color-info)}.badge-primary{background-color:var(--color-primary-light);color:var(--color-primary)}.alert{padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);margin-bottom:var(--spacing-lg)}.alert-success{background-color:var(--color-success-light);color:var(--color-success);border:1px solid var(--color-success)}.alert-danger{background-color:var(--color-danger-light);color:var(--color-danger);border:1px solid var(--color-danger)}.alert-warning{background-color:var(--color-warning-light);color:var(--color-warning);border:1px solid var(--color-warning)}.alert-info{background-color:var(--color-info-light);color:var(--color-info);border:1px solid var(--color-info)}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:var(--spacing-sm)}.gap-4{gap:var(--spacing-md)}.mb-2{margin-bottom:var(--spacing-sm)}.mb-4{margin-bottom:var(--spacing-md)}.mb-6{margin-bottom:var(--spacing-lg)}.mt-2{margin-top:var(--spacing-sm)}.mt-4{margin-top:var(--spacing-md)}.mt-6{margin-top:var(--spacing-lg)}.p-2{padding:var(--spacing-sm)}.p-4{padding:var(--spacing-md)}.p-6{padding:var(--spacing-lg)}.rounded{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.shadow{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.w-full{width:100%}.max-w-md{max-width:28rem}.max-w-lg{max-width:32rem}.max-w-2xl{max-width:42rem}.min-h-screen{min-height:100vh}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.spinner{border:4px solid var(--color-border);border-top:4px solid var(--color-primary);border-radius:50%;width:2rem;height:2rem;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:640px){body{font-size:.95rem}h1{font-size:1.5rem}h2{font-size:1.25rem}.card{padding:var(--spacing-md)}}@media print{body{background-color:#fff}.no-print{display:none}}