/** * Core Styles - Shared across all modules * Load this in before any other CSS * * CSS Variables expected (set by PHP): * --primary: Primary theme color */ /* ===== FOUC Prevention ===== */ body { opacity: 0; transition: opacity 0.15s ease-in; } body.loaded { opacity: 1; } /* Fallback: show content after 500ms even if JS fails */ @keyframes fouc-fallback { to { opacity: 1; } } body { animation: fouc-fallback 0s 0.5s forwards; } /* ===== CSS Variables Defaults ===== */ :root { --ab-primary: var(--primary, #667eea); --ab-primary-light: var(--primary-light, rgba(102, 126, 234, 0.15)); --ab-success: #28a745; --ab-warning: #ffc107; --ab-danger: #dc3545; --ab-text: #333; --ab-text-muted: #666; --ab-border: #ddd; --ab-bg-light: #f8f9fa; --ab-radius: 8px; --ab-radius-sm: 6px; --ab-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } /* ===== Tabs ===== */ .ab-tabs { display: flex; gap: 5px; margin-bottom: 20px; flex-wrap: wrap; } .ab-tabs.ab-tabs-sidebar { flex-direction: column; margin-bottom: 0; flex-wrap: nowrap; gap: 0; } .ab-tab { padding: 10px 20px; background: #f5f5f5; border-radius: var(--ab-radius); text-decoration: none; color: #666; font-weight: 500; transition: all 0.2s; } .ab-tab:hover { background: #eee; } .ab-tab.active { background: var(--ab-primary); color: #fff; } .ab-subtabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--ab-border); padding-bottom: 10px; } .ab-subtab { padding: 8px 16px; background: transparent; border: 1px solid var(--ab-border); border-radius: var(--ab-radius-sm); text-decoration: none; color: var(--ab-text-muted); font-size: 13px; } .ab-subtab.active { background: var(--ab-primary); color: #fff; border-color: var(--ab-primary); } /* ===== Cards ===== */ .ab-card { background: var(--ab-bg-light); border-radius: 10px; padding: 20px; margin-bottom: 15px; } .ab-card h3 { margin: 0 0 15px; font-size: 16px; display: flex; align-items: center; gap: 10px; } .ab-settings-card { background: #fff; border-radius: 10px; padding: 20px; margin-bottom: 15px; border: 1px solid #eee; } .ab-settings-card h4 { margin: 0 0 15px; font-size: 15px; color: #333; display: flex; align-items: center; gap: 8px; } /* ===== Stats ===== */ .ab-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 15px; margin-bottom: 20px; } .ab-stat { background: #fff; padding: 15px; border-radius: var(--ab-radius); text-align: center; box-shadow: var(--ab-shadow); } .ab-stat-val, .ab-stat-value { display: block; font-size: 24px; font-weight: 700; color: var(--ab-primary); } .ab-stat-lbl, .ab-stat-label { font-size: 12px; color: var(--ab-text-muted); margin-top: 5px; } .ab-stats-row { display: flex; gap: 20px; flex-wrap: wrap; } /* ===== Lists & Items ===== */ .ab-list { display: flex; flex-direction: column; gap: 10px; } .ab-item { display: flex; align-items: center; gap: 15px; padding: 12px 15px; background: #fff; border-radius: var(--ab-radius); border: 1px solid #eee; } .ab-item-main { flex: 1; min-width: 0; } .ab-item-main strong { display: block; margin-bottom: 3px; } .ab-item-main small { color: var(--ab-text-muted); } .ab-item-date { font-size: 12px; color: var(--ab-text-muted); white-space: nowrap; } .ab-item-actions { display: flex; gap: 5px; } /* ===== Badges ===== */ .ab-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; background: #eee; color: #666; } .ab-badge.new, .ab-badge.pending { background: #fff3cd; color: #856404; } .ab-badge.confirmed, .ab-badge.active, .ab-badge.paid { background: #d4edda; color: #155724; } .ab-badge.done { background: #e2e3e5; color: #383d41; } .ab-badge.cancelled, .ab-badge.expired { background: #f8d7da; color: #721c24; } /* ===== Buttons ===== */ .ab-btn { padding: 10px 20px; background: var(--ab-primary); color: #fff; border: none; border-radius: var(--ab-radius); cursor: pointer; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 14px; transition: opacity 0.2s; } .ab-btn:hover { opacity: 0.9; } .ab-btn-sm { padding: 6px 12px; font-size: 12px; } .ab-btn-icon { width: 32px; height: 32px; border: none; border-radius: var(--ab-radius-sm); cursor: pointer; background: #f0f0f0; display: inline-flex; align-items: center; justify-content: center; } .ab-btn-icon.green { background: #d4edda; color: #155724; } .ab-btn-icon.red { background: #f8d7da; color: #721c24; } .ab-btn-outline { background: #fff; border: 1px solid var(--ab-border); color: var(--ab-text); } .ab-btn-primary, .ab-btn.primary { background: var(--ab-primary); color: white; } .ab-btn.danger { background: #dc3545; color: white; } .ab-btn.danger:hover { background: #c82333; } /* ===== Forms ===== */ .ab-inline-form { display: inline; } .ab-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; align-items: end; } .ab-form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 0; } .ab-form-group label { display: block; font-size: 13px; font-weight: 500; color: #555; } .ab-form-group small { display: block; margin-top: 5px; color: #888; font-size: 12px; } .ab-form-group.full-width { grid-column: 1 / -1; } .ab-input { padding: 10px 12px; border: 1px solid var(--ab-border); border-radius: var(--ab-radius-sm); font-size: 14px; } .ab-input:focus { outline: none; border-color: var(--ab-primary); } .ab-field { margin-bottom: 15px; } .ab-field label { display: block; font-size: 13px; font-weight: 500; color: #555; margin-bottom: 5px; } .ab-field input, .ab-field select, .ab-field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--ab-border); border-radius: var(--ab-radius-sm); font-size: 14px; box-sizing: border-box; } /* ===== Filters ===== */ .ab-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; } .ab-filters input, .ab-filters select { padding: 8px 12px; border: 1px solid var(--ab-border); border-radius: var(--ab-radius-sm); font-size: 14px; } /* ===== Toggle Switch ===== */ .ab-toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; } .ab-toggle input { display: none; } .ab-toggle-slider { width: 50px; height: 26px; background: #ddd; border-radius: 13px; position: relative; transition: all 0.3s; } .ab-toggle-slider::after { content: ""; position: absolute; width: 22px; height: 22px; background: white; border-radius: 50%; top: 2px; left: 2px; transition: all 0.3s; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .ab-toggle input:checked + .ab-toggle-slider { background: var(--ab-primary); } .ab-toggle input:checked + .ab-toggle-slider::after { left: 26px; } .ab-toggle-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; font-weight: 500; } .ab-toggle-label input { width: 18px; height: 18px; } /* ===== Messages/Alerts ===== */ .ab-msg, .ab-alert { padding: 12px 15px; border-radius: var(--ab-radius); margin-bottom: 15px; display: flex; align-items: center; gap: 10px; } .ab-msg.success, .ab-alert.success { background: #d4edda; color: #155724; } .ab-msg.error, .ab-alert.error { background: #f8d7da; color: #721c24; } .ab-msg.warning, .ab-alert.warning { background: #fff3cd; color: #856404; } /* ===== Tables ===== */ .ab-table-wrap { overflow-x: auto; } .ab-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--ab-radius); overflow: hidden; } .ab-table th, .ab-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #eee; font-size: smaller; } .ab-table th { background: var(--ab-bg-light); font-weight: 600; color: #555; cursor: pointer; user-select: none; white-space: nowrap; } .ab-table th:hover { background: #eef0f2; } .ab-table th .sort-icon { margin-left: 4px; opacity: 0.4; font-size: 10px; } .ab-table th.sort-asc .sort-icon, .ab-table th.sort-desc .sort-icon { opacity: 1; } .ab-table tr:hover { background: #fafafa; } .ab-table .ab-actions { white-space: nowrap; } /* ===== Modals ===== */ .ab-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 9999; align-items: center; justify-content: center; padding: 15px; } .ab-modal.open { display: flex; } .ab-modal-box, .ab-modal-content { background: #fff; border-radius: 12px; width: 100%; max-width: 500px; max-height: 90vh; overflow: auto; } .ab-modal-head { padding: 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; } .ab-modal-head h3 { margin: 0; } .ab-modal-head button { background: none; border: none; font-size: 24px; cursor: pointer; color: #888; } .ab-modal-body { padding: 20px; } .ab-modal-foot, .ab-modal-actions { padding: 15px 20px; border-top: 1px solid #eee; display: flex; justify-content: flex-end; gap: 10px; } /* ===== Empty State ===== */ .ab-empty { text-align: center; padding: 40px 20px; color: #888; } .ab-empty i { font-size: 36px; color: #ddd; margin-bottom: 10px; display: block; } /* ===== Status Badge ===== */ .ab-status-badge { padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; } .ab-status-badge.green { background: #d4edda; color: #155724; } .ab-status-badge.gray { background: #e9ecef; color: #6c757d; } /* ===== Responsive ===== */ @media (max-width: 768px) { .ab-tabs { gap: 8px; } .ab-tab { padding: 8px 12px; font-size: 13px; } .ab-stats { grid-template-columns: repeat(2, 1fr); } .ab-form-grid { grid-template-columns: 1fr; } .ab-item { flex-direction: column; align-items: flex-start; } .ab-item-actions { width: 100%; margin-top: 10px; } .ab-modal { padding: 10px; } .ab-modal-box, .ab-modal-content { max-height: 95vh; } .ab-btn { padding: 8px 16px; } /* ===== App Settings Mobile Styles ===== */ /* Module tabs - sticky at top, full width */ .as-wrapper { display: block !important; padding-bottom: 80px; /* Space for bottom tabs */ } .as-sidebar { position: sticky !important; top: 0; z-index: auto; border-radius: 0 !important; margin: -20px -15px 15px -15px; width: calc(100% + 30px); box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; } .as-sidebar-header { display: none; } .as-nav { display: flex; overflow-x: auto; padding: 10px; gap: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .as-nav::-webkit-scrollbar { display: none; } .as-nav-item { flex-shrink: 0; padding: 10px 16px; font-size: 13px; white-space: nowrap; margin-bottom: 0; } .as-main { border-radius: 12px; padding: 7px 2px; min-height: auto; } /* Sub-tabs within modules - sticky at bottom */ .ab-tabs { position: fixed !important; bottom: 0; left: 0; right: 0; z-index: 8; background: #fff; padding: 10px 15px; padding-left: 15px !important; margin: 0 !important; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); justify-content: flex-start; gap: 6px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .ab-tabs::-webkit-scrollbar { display: none; } .ab-tab { flex-shrink: 0; padding: 10px 14px; font-size: 12px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; gap: 4px; } .ab-tab i { font-size: 16px; } /* Hide text on very small screens, show only icons */ @media (max-width: 480px) { .ab-tab { padding: 10px 12px; } } /* Tables - mobile friendly */ .ab-table-wrap { margin: 0; padding: 0 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .ab-table { min-width: 600px; } .ab-table th, .ab-table td { padding: 10px 12px; font-size: 12px; } /* Card-style table for mobile */ .ab-table.mobile-cards { min-width: auto; display: block; } .ab-table.mobile-cards thead { display: none; } .ab-table.mobile-cards tbody { display: block; } .ab-table.mobile-cards tr { display: block; background: #fff; border: 1px solid #eee; border-radius: 10px; margin-bottom: 10px; padding: 12px; } .ab-table.mobile-cards td { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; } .ab-table.mobile-cards td:last-child { border-bottom: none; } .ab-table.mobile-cards td::before { content: attr(data-label); font-weight: 600; color: #666; margin-right: 10px; } .ab-table.mobile-cards .ab-actions { justify-content: flex-end; } /* Adjust forms for mobile */ .ab-section { margin-bottom: 20px; } .ab-section-title { font-size: 16px; } /* Stats grid */ .ab-stats { grid-template-columns: 1fr 1fr; gap: 10px; } .ab-stat { padding: 15px; } .ab-stat h3 { font-size: 24px; } /* Sub-tabs within settings content - also bottom sticky */ .ab-subtabs { position: fixed !important; bottom: 60px; /* Above main tabs */ left: 0; right: 0; z-index: 98; background: #f8f9fa; padding: 8px 15px; margin: 0 !important; box-shadow: 0 -1px 5px rgba(0,0,0,0.05); display: flex; justify-content: center; gap: 5px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .as-wrapper.has-subtabs { padding-bottom: 140px; /* Space for both tab bars */ } }