*{ box-sizing:border-box;-webkit-tap-highlight-color:transparent} body{ overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}  .sidebar{ width:100px !important;position:fixed;top:0;left:0;height:100vh;background:linear-gradient(180deg, #2c3e50 0%, #34495e 100%);color:white;overflow-y:auto;z-index:1000;transform:translateX(-100%);transition:transform 0.3s ease;box-shadow:2px 0 15px rgba(0,0,0,0.3)} .sidebar.show{ transform:translateX(0) !important} .sidebar .logo{ padding:10px 5px !important;text-align:center;border-bottom:1px solid rgba(255,255,255,0.1);background:rgba(0,0,0,0.2)} .sidebar .logo h4{ font-size:0.7rem !important;margin:0;line-height:1.2;word-break:break-word} .sidebar .nav{ padding:0} .sidebar .nav-link{ color:rgba(255,255,255,0.8);padding:12px 5px !important;transition:all 0.3s;border-left:3px solid transparent;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;text-align:center !important;font-size:10px !important;gap:4px;position:relative;min-height:60px} .sidebar .nav-link:hover{ background:rgba(255,255,255,0.1);color:white;border-left-color:#3498db} .sidebar .nav-link.active{ background:rgba(52, 152, 219, 0.2);color:white;border-left-color:#3498db} .sidebar .nav-link i{ width:100% !important;margin-right:0 !important;font-size:20px !important;margin-bottom:4px} .sidebar .badge{ font-size:8px !important;padding:2px 4px !important;position:absolute;top:8px;right:8px;min-width:16px} .sidebar hr{ border-color:rgba(255,255,255,0.1);margin:10px 0}  .main-content{ margin-left:0 !important;padding:10px !important;padding-top:70px !important;min-height:100vh;background:#ecf0f1;transition:margin-left 0.3s}  .mobile-menu-btn{ display:flex !important;position:fixed;top:12px;left:12px;z-index:1001;background:#2c3e50;color:white;border:none;padding:12px 14px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,0.3);min-height:44px;min-width:44px;align-items:center;justify-content:center} .mobile-menu-btn i{ font-size:18px}  .topbar{ background:white;padding:10px 12px !important;margin:-10px -10px 15px !important;box-shadow:0 2px 8px rgba(0,0,0,0.08);border-radius:0 !important} .topbar h5{ font-size:1rem !important;margin-bottom:8px !important} .topbar .d-flex{ flex-direction:column !important;align-items:flex-start !important;gap:8px} .topbar form{ width:100% !important;margin:0 !important} .topbar form .d-flex{ flex-direction:row !important} .topbar form input{ width:100% !important;font-size:14px !important;padding:8px 10px !important;min-height:40px !important} .topbar form button{ min-width:44px !important;min-height:40px !important;padding:8px 12px !important} .topbar > div > div:last-child{ width:100%;display:flex;justify-content:space-between;align-items:center;font-size:12px !important;flex-wrap:wrap;gap:5px}  .d-flex.justify-content-between.align-items-center.mb-4, .d-flex.justify-content-between.align-items-center{ flex-direction:column !important;align-items:flex-start !important;gap:10px} .d-flex.justify-content-between.align-items-center h2{ font-size:1.3rem !important;margin-bottom:0 !important} .d-flex.justify-content-between.align-items-center > div, .d-flex.justify-content-between.align-items-center > a{ width:100% !important}  .card{ margin-bottom:12px !important;border:none;border-radius:8px !important;box-shadow:0 2px 8px rgba(0,0,0,0.08)} .card-header{ padding:12px !important;background:#f8f9fa;border-bottom:1px solid #dee2e6} .card-header h5{ font-size:0.95rem !important;margin:0} .card-body{ padding:12px !important}  .stat-card{ background:white;border-radius:8px !important;padding:12px !important;box-shadow:0 2px 8px rgba(0,0,0,0.08);margin-bottom:12px !important} .stat-card h3{ font-size:1.3rem !important;margin-bottom:5px} .stat-card h6{ font-size:0.8rem !important;margin:0} .stat-card .icon{ font-size:1.5rem !important;opacity:0.3}  .mb-3{ margin-bottom:0.8rem !important} .form-label{ font-size:13px !important;font-weight:600;margin-bottom:4px !important;display:block} .form-control, .form-select{ font-size:14px !important;padding:10px 12px !important;min-height:44px !important;border-radius:6px !important;border:1px solid #ced4da;width:100%} .form-control:focus, .form-select:focus{ border-color:#3498db;box-shadow:0 0 0 0.2rem rgba(52, 152, 219, 0.25)} textarea.form-control{ min-height:100px !important;resize:vertical} .form-check{ padding-left:2rem !important;min-height:44px;display:flex;align-items:center} .form-check-input{ width:20px !important;height:20px !important;margin-left:-2rem !important;margin-top:0 !important} .form-check-label{ font-size:13px !important;padding-left:8px} input[type="file"]{ font-size:13px !important;padding:8px !important} input[type="datetime-local"], input[type="date"], input[type="time"]{ font-size:14px !important}  .btn{ font-size:14px !important;padding:10px 16px !important;min-height:44px !important;border-radius:6px !important;border:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:all 0.3s} .btn-sm{ font-size:12px !important;padding:8px 12px !important;min-height:38px !important} .btn-lg{ font-size:16px !important;padding:12px 20px !important;min-height:50px !important} .btn i{ font-size:14px}  .d-flex.justify-content-between > div{ display:flex;flex-direction:column;gap:8px;width:100%} .d-flex.justify-content-between .btn{ width:100% !important;margin:0 !important}  .table-responsive{ border:none !important;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:15px} .table{ font-size:12px !important;min-width:600px;margin-bottom:0} .table th, .table td{ padding:8px 6px !important;white-space:nowrap;vertical-align:middle} .table th{ font-size:11px !important;background:#f8f9fa;position:sticky;top:0;z-index:1;font-weight:600} .table-actions{ display:flex;gap:4px;flex-wrap:nowrap} .table-actions .btn{ padding:6px 10px !important;font-size:11px !important;min-height:34px !important;white-space:nowrap} .table-actions .btn i{ font-size:12px}  [data-editor="custom"] + div{ border:1px solid #ddd;border-radius:6px !important;overflow:hidden}  [data-editor="custom"] + div > div:first-child{ background:#f8f9fa;padding:6px 4px !important;border-bottom:1px solid #ddd;display:flex !important;gap:3px !important;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap !important}  [data-editor="custom"] + div > div:first-child::-webkit-scrollbar{ height:4px} [data-editor="custom"] + div > div:first-child::-webkit-scrollbar-thumb{ background:#ccc;border-radius:2px}  [data-editor="custom"] + div button, [data-editor="custom"] + div select, [data-editor="custom"] + div input[type="color"]{ padding:8px 10px !important;font-size:13px !important;min-height:38px !important;flex-shrink:0;border:1px solid #ccc;background:white;border-radius:4px;cursor:pointer} [data-editor="custom"] + div button:active{ background:#e9ecef}  [data-editor="custom"] + div .heading-select{ min-width:90px !important;font-size:12px !important}  [data-editor="custom"] + div > div[contenteditable]{ min-height:250px !important;padding:12px !important;font-size:15px !important;line-height:1.6 !important;outline:none;overflow-y:auto}  [data-editor="custom"] + div .word-count{ font-size:10px !important;padding:4px 6px !important;white-space:nowrap;color:#666}  [data-editor="custom"] + div[style*="position:fixed"]{ padding:10px !important} [data-editor="custom"] + div[style*="position:fixed"] > div:first-child{ position:sticky;top:0;z-index:10;background:#f8f9fa} [data-editor="custom"] + div[style*="position:fixed"] > div[contenteditable]{ min-height:calc(100vh - 120px) !important}  .alert{ font-size:13px !important;padding:10px 12px !important;margin-bottom:12px !important;border-radius:6px !important} .alert .btn-close{ padding:8px !important}  .badge{ font-size:11px !important;padding:4px 8px !important;border-radius:4px}  .pagination{ font-size:13px !important;flex-wrap:wrap;justify-content:center;gap:4px} .pagination .page-link{ padding:8px 12px !important;min-height:38px !important;min-width:38px !important;border-radius:4px !important}  .pagination .page-item:not(.active):not(.disabled):not(:first-child):not(:last-child):not(:nth-child(2)):not(:nth-last-child(2)){ display:none}  #image-preview img, #preview-img{ max-width:100% !important;max-height:200px !important;object-fit:contain;border-radius:6px}  .row{ margin-left:-8px;margin-right:-8px} .row > *{ padding-left:8px;padding-right:8px} .col-lg-8, .col-lg-4, .col-md-6, .col-md-4, .col-md-3, .col-sm-6{ width:100% !important;max-width:100% !important;flex:0 0 100% !important}  .modal-dialog{ margin:10px !important;max-width:calc(100% - 20px) !important} .modal-content{ border-radius:8px !important} .modal-header{ padding:12px !important} .modal-body{ padding:12px !important} .modal-footer{ padding:12px !important;flex-direction:column;gap:8px} .modal-footer .btn{ width:100% !important}  button, a, .btn, .nav-link, .form-check-input, select, input[type="file"], input[type="color"], .table-actions a, .table-actions button{ -webkit-tap-highlight-color:rgba(0,0,0,0.1)}  ::-webkit-scrollbar{ width:6px;height:6px} ::-webkit-scrollbar-track{ background:#f1f1f1} ::-webkit-scrollbar-thumb{ background:#888;border-radius:3px} ::-webkit-scrollbar-thumb:hover{ background:#555}  @media (min-width:768px){ .sidebar{ width:250px !important;transform:translateX(0) !important} .sidebar .logo{ padding:20px !important;text-align:left} .sidebar .logo h4{ font-size:1.3rem !important} .sidebar .nav-link{ padding:12px 20px !important;flex-direction:row !important;text-align:left !important;font-size:1rem !important;min-height:auto} .sidebar .nav-link i{ width:20px !important;margin-right:10px !important;margin-bottom:0 !important;font-size:1rem !important} .sidebar .badge{ position:static;font-size:0.75rem !important;padding:3px 6px !important} .main-content{ margin-left:250px !important;padding:20px !important} .mobile-menu-btn{ display:none !important} .topbar{ padding:15px 20px !important;margin:-20px -20px 20px !important;border-radius:8px !important} .topbar .d-flex{ flex-direction:row !important;align-items:center !important} .topbar form{ width:auto !important} .topbar form input{ width:250px !important} .d-flex.justify-content-between.align-items-center{ flex-direction:row !important;align-items:center !important} .d-flex.justify-content-between.align-items-center > div, .d-flex.justify-content-between.align-items-center > a{ width:auto !important} .d-flex.justify-content-between .btn{ width:auto !important} .col-md-6{ width:50% !important;flex:0 0 50% !important} .col-md-4{ width:33.333% !important;flex:0 0 33.333% !important} .col-md-3{ width:25% !important;flex:0 0 25% !important}}  @media (min-width:1024px){ .col-lg-8{ width:66.666% !important;flex:0 0 66.666% !important} .col-lg-4{ width:33.333% !important;flex:0 0 33.333% !important} .stat-card{ padding:20px !important} .card-body{ padding:20px !important}}  @media (max-width:768px) and (orientation:landscape){ .main-content{ padding-top:60px !important} [data-editor="custom"] + div > div[contenteditable]{ min-height:180px !important}}  @media print{ .sidebar, .topbar, .mobile-menu-btn, .table-actions, .btn, [data-editor="custom"] + div > div:first-child{ display:none !important} .main-content{ margin-left:0 !important;padding:0 !important} .card{ box-shadow:none !important;border:1px solid #ddd !important;page-break-inside:avoid}}  @media (prefers-reduced-motion:reduce){ *{ animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}  @media (prefers-contrast:high){ .btn, .form-control, .form-select, .card{ border-width:2px !important}}