/** * Eagle Booking Tourist Tax - Admin Styles * * Styles for the tourist tax admin interface * * 🤖 Generated with Claude Code (https://claude.ai/code) */ /* Admin page layout */ .eb-admin-content { max-width: 1200px; } .eb-admin-section { background: #fff; padding: 20px; margin: 20px 0; border: 1px solid #ccd0d4; box-shadow: 0 1px 1px rgba(0,0,0,.04); border-radius: 4px; } .eb-admin-section h2 { margin-top: 0; padding-bottom: 10px; border-bottom: 1px solid #eee; color: #23282d; } /* Statistics grid */ .eb-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 20px; } .eb-stat-box { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); padding: 25px 20px; text-align: center; border-radius: 8px; border: 1px solid #dee2e6; transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; overflow: hidden; } .eb-stat-box:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .eb-stat-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #007cba, #2196f3); } .eb-stat-box h3 { margin: 0 0 10px; font-size: 2.2em; font-weight: 700; color: #2271b1; line-height: 1; } .eb-stat-box p { margin: 0; color: #666; font-size: 14px; font-weight: 500; } /* Status indicators */ .eb-status-active { color: #00a32a; font-weight: 600; font-size: 14px; } .eb-status-active::before { content: '●'; margin-right: 5px; } /* Form table styling */ .form-table th { font-weight: 600; color: #23282d; } .form-table td { color: #3c434a; } /* Bookings table styling */ .wp-list-table.eb-bookings-table { margin-top: 15px; } .wp-list-table.eb-bookings-table th { background: #f1f1f1; font-weight: 600; } .wp-list-table.eb-bookings-table td { vertical-align: middle; } .wp-list-table.eb-bookings-table td a { font-weight: 600; color: #2271b1; text-decoration: none; } .wp-list-table.eb-bookings-table td a:hover { color: #135e96; } /* Empty state */ .eb-empty-state { text-align: center; padding: 40px 20px; color: #666; } .eb-empty-state i { font-size: 48px; color: #ccc; margin-bottom: 15px; display: block; } /* Responsive design */ @media (max-width: 782px) { .eb-stats-grid { grid-template-columns: 1fr; gap: 15px; } .eb-stat-box { padding: 20px 15px; } .eb-stat-box h3 { font-size: 1.8em; } .eb-admin-section { padding: 15px; margin: 15px 0; } } @media (max-width: 600px) { .eb-admin-content { margin: 0 -20px; } .eb-admin-section { margin: 10px; border-radius: 0; } .wp-list-table { font-size: 14px; } .wp-list-table th, .wp-list-table td { padding: 8px 4px; } } /* WordPress admin integration */ .toplevel_page_eb_bookings .eb-admin-section, .eagle-booking_page_eb-tourist-tax .eb-admin-section { background: #fff; } /* Print styles */ @media print { .eb-admin-section { border: 1px solid #000; box-shadow: none; page-break-inside: avoid; } .eb-stat-box { border: 1px solid #000; background: #fff; } .eb-stat-box::before { display: none; } .wp-list-table { border-collapse: collapse; } .wp-list-table th, .wp-list-table td { border: 1px solid #000; } } /* Loading states */ .eb-loading { opacity: 0.6; pointer-events: none; position: relative; } .eb-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid #f3f3f3; border-top: 2px solid #2271b1; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Success/error messages */ .eb-message { padding: 12px 15px; margin: 15px 0; border-radius: 4px; font-weight: 500; } .eb-message.success { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; } .eb-message.error { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; } .eb-message.warning { background: #fff3cd; border: 1px solid #ffeaa7; color: #856404; }