:root{ --color-primary:#4CAF50;--color-secondary:#2196F3;--color-accent:#FF9800;--color-text:#333333;--color-background:#FFFFFF; --color-success:#28a745;--color-danger:#dc3545;--color-warning:#ffc107;--color-info:#17a2b8; --color-gray-50:#f9fafb;--color-gray-100:#f3f4f6;--color-gray-200:#e5e7eb;--color-gray-300:#d1d5db;--color-gray-400:#9ca3af;--color-gray-500:#6b7280;--color-gray-600:#4b5563;--color-gray-700:#374151;--color-gray-800:#1f2937;--color-gray-900:#111827; --font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem; --spacing-1:0.25rem;--spacing-2:0.5rem;--spacing-3:0.75rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-8:2rem;--spacing-10:2.5rem;--spacing-12:3rem; --radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-full:9999px; --shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05);--shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05); --transition-fast:150ms ease;--transition-base:200ms ease;--transition-slow:300ms ease; --sidebar-width:260px;--sidebar-collapsed-width:70px;--topbar-height:60px} *,*::before,*::after{box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;font-family:var(--font-family);font-size:var(--font-size-base);line-height:1.5;color:var(--color-text);background-color:var(--color-gray-100)}h1,h2,h3,h4,h5,h6{margin:0 0 var(--spacing-4);font-weight:600;line-height:1.25}p{margin:0 0 var(--spacing-4)}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline} .guest-layout{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);padding:var(--spacing-4)}.guest-container{width:100%;max-width:440px}.guest-card{background:var(--color-background);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);overflow:hidden}.guest-header{text-align:center;padding:var(--spacing-8) var(--spacing-6) var(--spacing-4);background:var(--color-gray-50);border-bottom:1px solid var(--color-gray-200)}.guest-logo{max-height:60px;width:auto}.guest-title{font-size:var(--font-size-2xl);color:var(--color-primary);margin:0}.guest-subtitle{color:var(--color-gray-500);margin:var(--spacing-2) 0 0;font-size:var(--font-size-sm)}.guest-content{padding:var(--spacing-6)}.guest-footer{text-align:center;padding:var(--spacing-4) var(--spacing-6);background:var(--color-gray-50);border-top:1px solid var(--color-gray-200);font-size:var(--font-size-sm);color:var(--color-gray-500)}.guest-footer p{margin:0} .app-layout{min-height:100vh}.app-container{display:flex;min-height:100vh} .sidebar{width:var(--sidebar-width);background:var(--color-gray-800);color:white;display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:100;transition:width var(--transition-base)}.sidebar.collapsed{width:var(--sidebar-collapsed-width)}.sidebar-header{border-bottom:1px solid var(--color-gray-700);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:var(--topbar-height);text-align:center}.sidebar-header:not(.sidebar-header-logo){padding:var(--spacing-4)}.sidebar-logo{width:100%;height:auto;display:block}.sidebar-brand{font-size:var(--font-size-lg);font-weight:600;color:white;line-height:1.3}.sidebar-brand-sub{font-size:var(--font-size-xs);color:var(--color-gray-400);margin-top:var(--spacing-1)}.sidebar-nav{flex:1;overflow-y:auto;padding:var(--spacing-4) 0}.nav-list{list-style:none;margin:0;padding:0}.nav-section{padding:var(--spacing-4) var(--spacing-4) var(--spacing-2);font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:0.05em;color:var(--color-gray-400)}.nav-link{display:flex;align-items:center;padding:var(--spacing-3) var(--spacing-4);color:var(--color-gray-300);transition:all var(--transition-fast);text-decoration:none}.nav-link:hover{background:var(--color-gray-700);color:white;text-decoration:none}.nav-link.active{background:var(--color-primary);color:white}.nav-link i{width:24px;margin-right:var(--spacing-3);text-align:center}.nav-item-sub .nav-link-sub{padding-left:2.5rem;font-size:0.85em}.nav-form{margin:0}.nav-link-button{width:100%;background:none;border:none;cursor:pointer;font-family:inherit;font-size:inherit;text-align:left}.sidebar-footer{padding:var(--spacing-4);border-top:1px solid var(--color-gray-700)}.user-info{display:flex;align-items:center;margin-bottom:var(--spacing-3)}.user-avatar{font-size:2rem;color:var(--color-gray-400);margin-right:var(--spacing-3)}.user-details{overflow:hidden}.user-name{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-email{display:block;font-size:var(--font-size-xs);color:var(--color-gray-400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.logout-form{margin:0}.btn-logout{width:100%;justify-content:center} .main-content{flex:1;min-width:0;margin-left:var(--sidebar-width);transition:margin-left var(--transition-base)}.main-content.expanded{margin-left:var(--sidebar-collapsed-width)}.topbar{height:var(--topbar-height);background:var(--color-background);border-bottom:1px solid var(--color-gray-200);display:flex;align-items:center;padding:0 var(--spacing-6);position:sticky;top:0;z-index:50}.sidebar-toggle{background:none;border:none;padding:var(--spacing-2);cursor:pointer;color:var(--color-gray-600);font-size:var(--font-size-lg)}.topbar-title{flex:1;margin-left:var(--spacing-4);font-size:var(--font-size-lg);font-weight:600}.page-content{padding:var(--spacing-6)} .alert{display:flex;align-items:center;padding:var(--spacing-3) var(--spacing-4);border-radius:var(--radius-md);margin-bottom:var(--spacing-4);font-size:var(--font-size-sm)}.alert i{margin-right:var(--spacing-3);font-size:var(--font-size-lg)}.alert span{flex:1}.alert-close{background:none;border:none;padding:var(--spacing-1);cursor:pointer;opacity:0.5;transition:opacity var(--transition-fast)}.alert-close:hover{opacity:1}.alert-success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.alert-error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.alert-warning{background:#fff3cd;color:#856404;border:1px solid #ffeeba}.alert-info{background:#d1ecf1;color:#0c5460;border:1px solid #bee5eb} .auth-form{margin-top:var(--spacing-4)}.form-title{text-align:center;margin-bottom:var(--spacing-2);color:var(--color-gray-800)}.form-description{text-align:center;color:var(--color-gray-500);font-size:var(--font-size-sm);margin-bottom:var(--spacing-6)}.form-group{margin-bottom:var(--spacing-4)}.form-row{display:flex;gap:var(--spacing-4)}.form-group-half{flex:1}.form-label{display:block;margin-bottom:var(--spacing-2);font-weight:500;font-size:var(--font-size-sm);color:var(--color-gray-700)}.input-group{position:relative;display:flex;align-items:center}.input-icon{position:absolute;left:var(--spacing-3);color:var(--color-gray-400)}.form-input{width:100%;padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-base);line-height:1.5;border:1px solid var(--color-gray-300);border-radius:var(--radius-md);transition:all var(--transition-fast);background:var(--color-background)}.input-group .form-input{padding-left:2.5rem}.form-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(76,175,80,0.1)}.form-input.is-invalid{border-color:var(--color-danger)} .form-input[type="date"],.form-input[type="time"]{font-family:inherit;color:var(--color-text);-webkit-appearance:none;appearance:none}.form-input[type="date"]::-webkit-calendar-picker-indicator,.form-input[type="time"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0.6}.form-input[type="date"]::-webkit-calendar-picker-indicator:hover,.form-input[type="time"]::-webkit-calendar-picker-indicator:hover{opacity:1} .form-input-sm{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-sm);min-height:auto}.form-error{display:block;margin-top:var(--spacing-1);font-size:var(--font-size-sm);color:var(--color-danger)}.form-hint{display:block;margin-top:var(--spacing-1);font-size:var(--font-size-xs);color:var(--color-gray-500)}.form-checkbox{display:flex;align-items:center}.checkbox-label{display:flex;align-items:center;cursor:pointer}.checkbox-label input{margin-right:var(--spacing-2)}.checkbox-text{font-size:var(--font-size-sm);color:var(--color-gray-600)}.form-actions{margin-top:var(--spacing-6)}.form-links{text-align:center;margin-top:var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-gray-500)}.form-links .separator{margin:0 var(--spacing-2)}.form-links .link{color:var(--color-primary)} .btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-3) var(--spacing-5);font-size:var(--font-size-sm);font-weight:500;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);text-decoration:none}.btn i{margin-right:var(--spacing-2)}.btn-block{width:100%}.btn-primary{background:var(--color-primary);color:white}.btn-primary:hover{background:#43a047;text-decoration:none}.btn-secondary{background:var(--color-gray-200);color:var(--color-gray-700)}.btn-secondary:hover{background:var(--color-gray-300);text-decoration:none}.btn-success{background:var(--color-success);color:white}.btn-danger{background:var(--color-danger);color:white}.btn-warning{background:var(--color-warning);color:var(--color-gray-800)}.btn-sm{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}.btn-sm i{margin-right:0} .card{background:var(--color-background);border-radius:var(--radius-lg);box-shadow:var(--shadow)}.card-header{padding:var(--spacing-4) var(--spacing-6);border-bottom:1px solid var(--color-gray-200);background:var(--color-gray-50);border-radius:var(--radius-lg) var(--radius-lg) 0 0}.card-title{margin:0;font-size:var(--font-size-lg)}.card-body{padding:var(--spacing-6);border-radius:0 0 var(--radius-lg) var(--radius-lg)}.card-header-with-action{display:flex;justify-content:space-between;align-items:center} .card-tabs{display:flex;gap:0;padding:0 var(--spacing-6);background:var(--color-gray-50);border-bottom:1px solid var(--color-gray-200);overflow-x:auto}.card-tab{padding:var(--spacing-3) var(--spacing-4);border:none;background:none;color:var(--color-gray-600);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:color 0.15s,border-color 0.15s}.card-tab:hover{color:var(--color-primary)}.card-tab.active{color:var(--color-primary);border-bottom-color:var(--color-primary);font-weight:600}.section-subtitle{font-size:var(--font-size-sm);font-weight:600;color:var(--color-gray-600);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:var(--spacing-3)}.form-divider{border:none;border-top:1px solid var(--color-gray-200);margin:var(--spacing-6) 0}.mt-4{margin-top:var(--spacing-4)} .table,.data-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--color-gray-200);border-radius:var(--radius-md);overflow:hidden}.table th,.table td,.data-table th,.data-table td{padding:var(--spacing-3) var(--spacing-4);text-align:left;border-bottom:1px solid var(--color-gray-200);vertical-align:middle}.table th,.data-table th{font-weight:600;font-size:var(--font-size-xs);color:var(--color-gray-500);background:var(--color-gray-50);text-transform:uppercase;letter-spacing:0.04em;white-space:nowrap;border-bottom:2px solid var(--color-gray-200)}.table td,.data-table td{font-size:var(--font-size-sm);color:var(--color-gray-700)}.table tbody tr:last-child td,.data-table tbody tr:last-child td{border-bottom:none}.table tbody tr:hover,.data-table tbody tr:hover{background:var(--color-gray-50)}.data-table tbody tr:nth-child(even){background:var(--color-gray-50)}.data-table tbody tr:nth-child(even):hover{background:var(--color-gray-100)}.table .actions,.data-table .table-actions{white-space:nowrap;text-align:right}.table .actions form,.table-actions form{display:inline}.table-actions{white-space:nowrap;text-align:right}.table-actions .btn-group{display:inline-flex;gap:var(--spacing-1)}.inline-form{display:inline} .badge{display:inline-flex;align-items:center;padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs);font-weight:500;border-radius:var(--radius-full)}.badge-sm{padding:0 var(--spacing-1);font-size:0.65rem}.badge-primary{background:var(--color-primary);color:white}.badge-secondary{background:var(--color-gray-200);color:var(--color-gray-700)}.badge-success{background:#d4edda;color:#155724}.badge-danger{background:#f8d7da;color:#721c24}.badge-warning{background:#fff3cd;color:#856404} .welcome-card{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:white;padding:var(--spacing-8);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-6)}.welcome-title{font-size:var(--font-size-2xl);margin:0 0 var(--spacing-2)}.welcome-text{margin:0;opacity:0.9}.welcome-icon{font-size:4rem;opacity:0.3}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-4);margin-bottom:var(--spacing-6)}.stat-card{background:var(--color-background);padding:var(--spacing-5);border-radius:var(--radius-lg);box-shadow:var(--shadow);display:flex;align-items:center}.stat-icon{width:50px;height:50px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xl);color:white;margin-right:var(--spacing-4)}.stat-icon.bg-primary{background:var(--color-primary)}.stat-icon.bg-secondary{background:var(--color-secondary)}.stat-icon.bg-accent{background:var(--color-accent)}.stat-value{display:block;font-size:var(--font-size-2xl);font-weight:700;line-height:1}.stat-label{display:block;font-size:var(--font-size-sm);color:var(--color-gray-500);margin-top:var(--spacing-1)}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-4)}.info-item .info-label{display:block;font-size:var(--font-size-sm);color:var(--color-gray-500);margin-bottom:var(--spacing-1);font-weight:600}.info-item .info-value{display:block;font-size:var(--font-size-base)}.filter-bar{display:flex;flex-wrap:wrap;gap:var(--spacing-2)}.section{margin-bottom:var(--spacing-6)}.section-title{font-size:var(--font-size-lg);margin-bottom:var(--spacing-4)}.quick-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--spacing-4)}.action-card{background:var(--color-background);padding:var(--spacing-5);border-radius:var(--radius-lg);box-shadow:var(--shadow);text-align:center;text-decoration:none;color:var(--color-text);transition:all var(--transition-fast)}.action-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);text-decoration:none}.action-icon{font-size:var(--font-size-2xl);color:var(--color-primary);margin-bottom:var(--spacing-3)}.action-label{font-size:var(--font-size-sm);font-weight:500}.roles-list{display:flex;flex-wrap:wrap;gap:var(--spacing-2)} .profile-header{display:flex;align-items:center;background:var(--color-background);padding:var(--spacing-6);border-radius:var(--radius-lg);box-shadow:var(--shadow);margin-bottom:var(--spacing-6)}.profile-avatar{font-size:5rem;color:var(--color-gray-300);margin-right:var(--spacing-6)}.profile-info{flex:1}.profile-name{font-size:var(--font-size-2xl);margin:0 0 var(--spacing-1)}.profile-email{color:var(--color-gray-500);margin:0}.info-list{margin:0}.info-list dt{font-weight:500;color:var(--color-gray-500);font-size:var(--font-size-sm);margin-bottom:var(--spacing-1)}.info-list dd{margin:0 0 var(--spacing-4)}.profile-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-4)}.profile-address{font-style:normal;line-height:1.8} .phone-list{list-style:none;margin:0;padding:0}.phone-item{display:flex;align-items:center;padding:var(--spacing-3) 0;border-bottom:1px solid var(--color-gray-200)}.phone-item:last-child{border-bottom:none}.phone-type{min-width:120px;font-weight:500;color:var(--color-gray-600)}.phone-type i{margin-right:var(--spacing-2);color:var(--color-gray-400)}.phone-number{flex:1}.phone-primary{background:var(--color-gray-50);margin:0 calc(-1 * var(--spacing-4));padding-left:var(--spacing-4);padding-right:var(--spacing-4)}.phone-edit-list{margin-bottom:var(--spacing-6)}.subtitle{font-size:var(--font-size-base);font-weight:500;color:var(--color-gray-600);margin-bottom:var(--spacing-4)}.mb-4{margin-bottom:var(--spacing-4)} .form-group-quarter{flex:0 0 25%;max-width:25%}.form-group-third{flex:0 0 33.333%;max-width:33.333%}.form-group-two-third{flex:1}.form-group-three-quarter{flex:1} .form-checkbox{display:flex;align-items:center;cursor:pointer;font-size:var(--font-size-sm)}.form-checkbox input[type="checkbox"]{margin-right:var(--spacing-2);width:18px;height:18px;cursor:pointer} .color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--spacing-4)}.color-input-wrapper{display:flex;align-items:center;gap:var(--spacing-2)}.form-input-color{width:50px;height:40px;padding:2px;border:1px solid var(--color-gray-300);border-radius:var(--radius-md);cursor:pointer}.color-text-input{flex:1;font-family:monospace;text-transform:uppercase} .color-preview-grid{display:flex;flex-wrap:wrap;gap:var(--spacing-4)}.color-preview-item{display:flex;align-items:center;gap:var(--spacing-2)}.color-swatch{width:32px;height:32px;border-radius:var(--radius-md);flex-shrink:0}.color-label{font-weight:500;min-width:80px}.color-preview-item code{font-size:var(--font-size-sm);color:var(--color-gray-500)} .empty-state{text-align:center;padding:var(--spacing-12);color:var(--color-gray-400)}.empty-state i{font-size:4rem;margin-bottom:var(--spacing-4)} .text-success{color:var(--color-success)}.text-danger{color:var(--color-danger)}.text-warning{color:var(--color-warning)}.text-muted{color:var(--color-gray-500)}.page-header{margin-bottom:var(--spacing-6);display:flex;gap:var(--spacing-3);flex-wrap:wrap}.btn-group{display:flex;gap:var(--spacing-3);flex-wrap:wrap} .modal-backdrop{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:1000;opacity:0;transition:opacity var(--transition-base)}.modal-backdrop.visible{display:block;opacity:1}.modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:1001;padding:var(--spacing-4);overflow-y:auto;justify-content:center;align-items:center}.modal.visible{display:flex}.modal-dialog{background:white;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:450px;width:100%;transform:scale(0.9);opacity:0;transition:transform var(--transition-base),opacity var(--transition-base)}.modal.visible .modal-dialog{transform:scale(1);opacity:1}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-4) var(--spacing-6);border-bottom:1px solid var(--color-gray-200)}.modal-title{margin:0;font-size:var(--font-size-lg);font-weight:600;color:var(--color-gray-800)}.modal-close{background:none;border:none;font-size:var(--font-size-xl);color:var(--color-gray-400);cursor:pointer;padding:var(--spacing-1);line-height:1;transition:color var(--transition-fast)}.modal-close:hover{color:var(--color-gray-600)}.modal-body{padding:var(--spacing-6)}.modal-body p{margin:0;color:var(--color-gray-600);line-height:1.6}.modal-footer{display:flex;justify-content:flex-end;gap:var(--spacing-3);padding:var(--spacing-4) var(--spacing-6);border-top:1px solid var(--color-gray-200);background:var(--color-gray-50);border-radius:0 0 var(--radius-lg) var(--radius-lg)} .modal.modal-danger .modal-header{background:var(--color-danger);border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-bottom-color:var(--color-danger)}.modal.modal-danger .modal-title{color:white}.modal.modal-danger .modal-close{color:rgba(255,255,255,0.7)}.modal.modal-danger .modal-close:hover{color:white}.modal.modal-warning .modal-header{background:var(--color-warning);border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-bottom-color:var(--color-warning)}.modal.modal-warning .modal-title{color:var(--color-gray-800)} body.modal-open{overflow:hidden} .context-help{position:relative;display:inline-flex}.context-help-trigger{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;color:var(--color-gray-400);font-size:1rem;cursor:pointer;padding:0;transition:color 0.15s;vertical-align:middle;margin-left:0.35rem;flex-shrink:0;line-height:1}.context-help-trigger:hover,.context-help.open .context-help-trigger{color:var(--color-primary)}.context-help-content{display:none;position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);z-index:1000;background:white;border:1px solid var(--color-gray-200);border-radius:var(--radius-md);box-shadow:0 4px 12px rgba(0,0,0,0.1);padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-sm);font-weight:400;color:var(--color-gray-600);line-height:1.5;min-width:320px;max-width:480px;white-space:normal;text-transform:none;letter-spacing:normal}.context-help-content::before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid var(--color-gray-200)}.context-help-content::after{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid white}.context-help.open .context-help-content{display:block}.context-help-content a{color:var(--color-primary);text-decoration:underline}.context-help-content a:hover{color:var(--color-primary);text-decoration:none} .context-help-content.align-right{left:auto;right:0;transform:none}.context-help-content.align-right::before,.context-help-content.align-right::after{left:auto;right:12px;transform:none} .context-help-content.align-left{left:0;transform:none}.context-help-content.align-left::before,.context-help-content.align-left::after{left:12px;transform:none} .form-checkbox .context-help{margin-left:0.25rem}.form-checkbox .context-help .context-help-content{left:0;transform:none}.form-checkbox .context-help .context-help-content::before,.form-checkbox .context-help .context-help-content::after{left:12px;transform:none} .form-label .context-help .context-help-content{left:0;transform:none}.form-label .context-help .context-help-content::before,.form-label .context-help .context-help-content::after{left:12px;transform:none} @media (max-width:768px){.sidebar{transform:translateX(-100%);width:var(--sidebar-width);z-index:200}.sidebar.open{transform:translateX(0)}.main-content{margin-left:0}.form-row{flex-direction:column;gap:0}.profile-header{flex-direction:column;text-align:center}.profile-avatar{margin-right:0;margin-bottom:var(--spacing-4)}.profile-actions{margin-top:var(--spacing-4)}} .image-upload-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-6)}.image-upload-section{padding:var(--spacing-4);background:var(--color-gray-50);border-radius:var(--border-radius);border:1px solid var(--color-gray-200)}.image-upload-section h4{margin:0 0 var(--spacing-3) 0;font-size:var(--font-size-base);font-weight:600;color:var(--color-gray-700)}.image-preview-container{width:100%;height:150px;display:flex;align-items:center;justify-content:center;background:white;border:2px dashed var(--color-gray-300);border-radius:var(--border-radius);margin-bottom:var(--spacing-3);overflow:hidden}.image-preview-container.image-preview-wide{height:120px}.image-preview{max-width:100%;max-height:100%;object-fit:contain}.image-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--color-gray-400);gap:var(--spacing-2)}.image-placeholder i{font-size:2rem}.image-placeholder span{font-size:var(--font-size-sm)}.upload-form{margin-top:var(--spacing-3)}.upload-form .form-group{margin-bottom:var(--spacing-3)}.upload-form input[type="file"]{font-size:var(--font-size-sm)}.upload-actions{display:flex;gap:var(--spacing-2);flex-wrap:wrap}@media (max-width:768px){.image-upload-grid{grid-template-columns:1fr}} .pattern-code{background:var(--color-gray-100);padding:var(--spacing-1) var(--spacing-2);border-radius:var(--border-radius-sm);font-family:monospace;font-size:var(--font-size-sm);color:var(--color-gray-700)}.info-table{width:100%;border-collapse:collapse}.info-table th,.info-table td{padding:var(--spacing-2) var(--spacing-3);text-align:left;border-bottom:1px solid var(--color-gray-200)}.info-table th{background:var(--color-gray-50);font-weight:600}.info-table code{background:var(--color-gray-100);padding:var(--spacing-1) var(--spacing-2);border-radius:var(--border-radius-sm);font-size:var(--font-size-sm)}.table-row-highlight{background:var(--color-gray-50)}.table-row-highlight td{font-weight:500} .page-header{display:flex;gap:var(--spacing-2);flex-wrap:wrap;margin-bottom:var(--spacing-4)}.page-header-left{display:flex;gap:var(--spacing-2)}.page-header-right{display:flex;gap:var(--spacing-2);margin-left:auto} .member-nav-back{display:inline-flex;margin-bottom:var(--spacing-4)}.member-edit-layout{display:grid;grid-template-columns:200px 1fr;gap:var(--spacing-6);align-items:start}.member-edit-sidebar{display:flex;flex-direction:column;background:white;border-radius:var(--radius-lg);border:1px solid var(--color-gray-200);overflow:hidden;position:sticky;top:var(--spacing-4)}.member-edit-tab{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-3) var(--spacing-4);color:var(--color-gray-600);text-decoration:none;border-left:3px solid transparent;transition:all var(--transition-fast);font-size:var(--font-size-sm)}.member-edit-tab:hover{background:var(--color-gray-50);color:var(--color-primary);text-decoration:none}.member-edit-tab.active{background:var(--color-gray-50);color:var(--color-primary);border-left-color:var(--color-primary);font-weight:600}.member-edit-tab i{width:18px;text-align:center;font-size:var(--font-size-sm);flex-shrink:0}.member-edit-content{min-width:0} @media (max-width:768px){.member-edit-layout{grid-template-columns:1fr;gap:var(--spacing-4)}.member-edit-sidebar{flex-direction:row;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;position:static}.member-edit-sidebar::-webkit-scrollbar{display:none}.member-edit-tab{border-left:none;border-bottom:2px solid transparent;white-space:nowrap;padding:var(--spacing-2) var(--spacing-3);flex-direction:column;gap:var(--spacing-1);font-size:var(--font-size-xs);text-align:center}.member-edit-tab.active{border-left-color:transparent;border-bottom-color:var(--color-primary)}.member-edit-tab i{font-size:var(--font-size-base)}} .autocomplete-wrapper{position:relative}.autocomplete-wrapper .form-input.autocomplete-open{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:var(--color-gray-200);border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(76,175,80,0.1)}.search-results{display:none;position:absolute;left:0;right:0;top:100%;z-index:100;background:white;border:1px solid var(--color-primary);border-top:1px solid var(--color-gray-200);border-radius:0 0 var(--radius-md) var(--radius-md);max-height:240px;overflow-y:auto;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),3px 0 0 0 rgba(76,175,80,0.1) inset,-3px 0 0 0 rgba(76,175,80,0.1) inset,0 3px 0 0 rgba(76,175,80,0.1) inset}.search-result-item{padding:var(--spacing-3) var(--spacing-4);cursor:pointer;font-size:var(--font-size-sm);border-bottom:1px solid var(--color-gray-100);transition:background var(--transition-fast)}.search-result-item:hover{background:rgba(76,175,80,0.06)}.search-result-item:last-child{border-bottom:none}.search-result-item .text-muted{font-size:var(--font-size-xs)}.search-result-empty{color:var(--color-gray-500);cursor:default;font-style:italic}.search-result-empty:hover{background:none}.selected-user{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-3) var(--spacing-4);background:rgba(76,175,80,0.06);border:1px solid var(--color-primary);border-radius:var(--radius-md);font-size:var(--font-size-sm);margin-top:var(--spacing-2);color:var(--color-gray-800)}.selected-user span{flex:1}.inline-role-form{display:inline}.inline-role-form .form-input-sm{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs);min-width:120px}@media (max-width:768px){.page-header{flex-direction:column}.page-header-right{margin-left:0}} .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive .table,.table-responsive .data-table{border-radius:0;border-left:none;border-right:none} .sidebar-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:99;opacity:0;transition:opacity var(--transition-base)}.sidebar-overlay.active{display:block;opacity:1} @media (max-width:768px){ .page-content{padding:var(--spacing-3)}.card-header{padding:var(--spacing-3) var(--spacing-4)}.card-body{padding:var(--spacing-4)}.card-tabs{padding:0 var(--spacing-4)} .form-group-quarter,.form-group-third{flex:1 1 100%;max-width:100%}.form-group-half{flex:1 1 100%;max-width:100%} .btn-sm{padding:var(--spacing-2) var(--spacing-3);min-height:36px;min-width:36px;display:inline-flex;align-items:center;justify-content:center} .table th,.table td,.data-table th,.data-table td{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-xs)}.table th,.data-table th{white-space:normal} .profile-cards{grid-template-columns:1fr} .stats-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--spacing-3)} .stat-card{padding:var(--spacing-3)}.stat-icon{width:40px;height:40px;font-size:var(--font-size-base);margin-right:var(--spacing-3)}.stat-value{font-size:var(--font-size-lg)} .phone-type{min-width:80px} .inline-role-form .form-input-sm{min-width:100px} .welcome-card{flex-wrap:wrap} .card-title{font-size:var(--font-size-base)} .btn-group{display:inline-flex;flex-wrap:nowrap} .alert{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-xs)}} .product-image-area{text-align:center}.product-image-preview{margin-bottom:var(--spacing-3)}.product-image-img{max-width:100%;max-height:300px;border-radius:var(--radius-md);border:1px solid var(--color-gray-200);object-fit:contain}.product-image-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-8) var(--spacing-4);margin-bottom:var(--spacing-3);border:2px dashed var(--color-gray-300);border-radius:var(--radius-md);color:var(--color-gray-400)}.product-image-placeholder i{font-size:2.5rem;margin-bottom:var(--spacing-2)}.product-image-placeholder span{font-size:var(--font-size-sm)}.product-image-actions{display:flex;justify-content:center;gap:var(--spacing-2);margin-bottom:var(--spacing-2)}  .view-toggle{display:flex;gap:var(--spacing-1);margin-left:auto}.view-toggle-btn{padding:var(--spacing-2) var(--spacing-3);border:1px solid var(--color-gray-300);background:var(--color-background);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-sm);color:var(--color-gray-600);transition:all 0.15s ease;display:flex;align-items:center;gap:var(--spacing-2)}.view-toggle-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.view-toggle-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff} .order-accordion{border:1px solid var(--color-gray-200);border-radius:var(--radius-md);margin-bottom:var(--spacing-3)}.order-accordion-header{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-3) var(--spacing-4);background:var(--color-gray-50);cursor:pointer;user-select:none;transition:background 0.15s ease}.order-accordion-header:hover{background:var(--color-gray-100)}.order-accordion-chevron{transition:transform 0.2s ease;color:var(--color-gray-500);font-size:var(--font-size-sm)}.order-accordion.collapsed .order-accordion-chevron{transform:rotate(-90deg)}.order-accordion.collapsed .order-accordion-body{display:none}.order-accordion-stats{color:var(--color-gray-500);font-size:var(--font-size-sm);margin-left:auto}.order-accordion-body{padding:var(--spacing-3) var(--spacing-4);border-top:1px solid var(--color-gray-200)} .export-dropdown{position:relative;display:inline-block}.export-dropdown-btn{display:inline-flex;align-items:center;gap:0.3rem;padding:0.25rem 0.6rem;font-size:var(--font-size-sm);background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap}.export-dropdown-btn:hover{background:var(--color-primary-dark,#245624)}.export-dropdown-menu{display:none;position:absolute;top:100%;right:0;z-index:100;min-width:200px;max-height:70vh;overflow-y:auto;margin-top:2px;background:#fff;border:1px solid var(--color-gray-200);border-radius:var(--radius-md);box-shadow:0 4px 12px rgba(0,0,0,0.15)}.export-dropdown.open .export-dropdown-menu{display:block}.export-dropdown-menu a{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;font-size:var(--font-size-sm);color:var(--color-gray-700);text-decoration:none;white-space:nowrap}.export-dropdown-menu a:hover{background:var(--color-gray-50)}.export-dropdown-menu a i{width:1rem;text-align:center}.export-dropdown-divider{height:1px;margin:0.25rem 0;background:var(--color-gray-200)}.export-dropdown-section{padding:0.4rem 0.75rem 0.2rem;font-size:var(--font-size-xs,0.7rem);font-weight:600;color:var(--color-gray-500);text-transform:uppercase;letter-spacing:0.03em} .expandable-row{cursor:pointer;transition:background 0.1s ease}.expandable-row:hover{background:var(--color-gray-50)}.expandable-row.expanded{background:var(--color-gray-100);font-weight:600}.expand-icon{color:var(--color-gray-400);font-size:var(--font-size-sm);transition:transform 0.2s ease}.detail-row{background:var(--color-gray-50)} .member-order-row.expanded{background:var(--color-gray-100);font-weight:600}.detail-cell{padding:var(--spacing-2) var(--spacing-3) !important;font-size:var(--font-size-sm);color:var(--color-gray-600);border-top:none !important}.detail-indent{padding-left:var(--spacing-8) !important} .past-separator{display:flex;align-items:center;gap:var(--spacing-4);margin:var(--spacing-6) 0 var(--spacing-4);color:var(--color-gray-400);font-size:var(--font-size-sm)}.past-separator::before,.past-separator::after{content:'';flex:1;height:1px;background:var(--color-gray-300)} .show-more-btn{display:flex;align-items:center;justify-content:center;gap:var(--spacing-2);width:100%;padding:var(--spacing-2) var(--spacing-4);margin:var(--spacing-3) 0;background:white;color:var(--color-primary);border:1px dashed var(--color-gray-300);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:background 0.15s,border-color 0.15s}.show-more-btn:hover{background:var(--color-gray-50);border-color:var(--color-primary)}.show-more-btn i{font-size:0.75rem} .order-filter-form{display:flex;align-items:center;gap:var(--spacing-2);margin-bottom:var(--spacing-4)}.order-filter-label{font-size:var(--font-size-sm);font-weight:500;color:var(--color-gray-600);white-space:nowrap}.order-filter-select{padding:var(--spacing-1) var(--spacing-3);border:1px solid var(--color-gray-300);border-radius:var(--radius-sm);font-size:var(--font-size-sm);background:white;color:var(--color-text);cursor:pointer;min-width:180px}.order-filter-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(76,175,80,0.15)} .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--spacing-4)}.stat-item{text-align:center;padding:var(--spacing-4);background:var(--color-gray-50);border-radius:var(--radius-md)}.stat-item .stat-value{font-size:var(--font-size-2xl);font-weight:700;color:var(--color-primary);display:block}.stat-item .stat-label{font-size:var(--font-size-sm);color:var(--color-gray-500);display:block;margin-top:var(--spacing-1)} .toggle-switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--color-gray-300);transition:0.3s;border-radius:24px}.toggle-slider::before{content:"";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:0.3s;border-radius:50%}.toggle-switch input:checked + .toggle-slider{background-color:var(--color-primary)}.toggle-switch input:checked + .toggle-slider::before{transform:translateX(20px)}.toggle-switch input:disabled + .toggle-slider{opacity:0.5;cursor:not-allowed} .status-toggle-bar{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-3) var(--spacing-6);background:var(--color-gray-50);border-bottom:1px solid var(--color-gray-200)}.status-toggle-label{display:flex;align-items:center;gap:var(--spacing-3);cursor:pointer;margin:0;font-size:var(--font-size-base)}.status-toggle-text{font-weight:500;color:var(--color-text)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}