/* Material Design 3.0 Styles for Tavola */

/* Base Material Design Variables */
:root {
    --md-corner-radius: 16px;
    --md-corner-radius-small: 12px;
    --md-corner-radius-large: 20px;
    --md-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    --md-shadow-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    --md-shadow-3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    --md-elevation-1: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    --md-elevation-2: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
    --md-elevation-3: 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
}

/* Cards Material Design */
.stat-card,
.dashboard-section,
.card,
.reservation-item,
.table-modal .modal-content,
.activity-card {
    border-radius: var(--md-corner-radius) !important;
    border: none !important;
    box-shadow: var(--md-elevation-1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.stat-card:hover,
.dashboard-section:hover,
.card:hover,
.activity-card:hover {
    box-shadow: var(--md-elevation-2) !important;
    transform: translateY(-2px) !important;
}

/* Buttons Material Design */
.service-btn,
.date-nav-btn,
.nav-item,
.control-btn,
.btn-primary,
.btn-secondary,
.btn-icon,
.section-action,
.quick-action-btn {
    border-radius: var(--md-corner-radius-small) !important;
    border: none !important;
    box-shadow: var(--md-elevation-1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Button Hover States */
.service-btn:hover,
.date-nav-btn:hover,
.nav-item:hover,
.control-btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-icon:hover,
.section-action:hover,
.quick-action-btn:hover {
    box-shadow: var(--md-elevation-2) !important;
    transform: translateY(-1px) !important;
}

/* Button Active/Pressed States */
.service-btn:active,
.date-nav-btn:active,
.nav-item:active,
.control-btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-icon:active,
.section-action:active,
.quick-action-btn:active {
    box-shadow: var(--md-elevation-1) !important;
    transform: translateY(0) !important;
}

/* Button Focus States */
.service-btn:focus,
.date-nav-btn:focus,
.nav-item:focus,
.control-btn:focus,
.btn-primary:focus,
.btn-secondary:focus,
.btn-icon:focus,
.section-action:focus,
.quick-action-btn:focus {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
    box-shadow: var(--md-elevation-2) !important;
}

/* Ripple Effect for Material Design */
.service-btn::before,
.date-nav-btn::before,
.nav-item::before,
.control-btn::before,
.btn-primary::before,
.btn-secondary::before,
.btn-icon::before,
.section-action::before,
.quick-action-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
    z-index: 0;
}

.service-btn:active::before,
.date-nav-btn:active::before,
.nav-item:active::before,
.control-btn:active::before,
.btn-primary:active::before,
.btn-secondary:active::before,
.btn-icon:active::before,
.section-action:active::before,
.quick-action-btn:active::before {
    width: 300px;
    height: 300px;
}

/* Form Elements Material Design */
.form-input,
.input-field,
.search-input {
    border-radius: var(--md-corner-radius-small) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--md-elevation-1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.form-input:focus,
.input-field:focus,
.search-input:focus {
    box-shadow: var(--md-elevation-2) !important;
    transform: translateY(-1px) !important;
}

/* Tables Material Design */
.table {
    border-radius: var(--md-corner-radius-small) !important;
    box-shadow: var(--md-elevation-1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.table:hover {
    box-shadow: var(--md-elevation-2) !important;
}

/* Panels Material Design */
.reservations-panel,
.sidebar,
.floor-plan-main {
    border-radius: 0 !important;
}

.date-info {
    border-radius: var(--md-corner-radius) !important;
    box-shadow: var(--md-elevation-1) !important;
    border: none !important;
}

/* Modal Material Design */
.modal-content {
    border-radius: var(--md-corner-radius-large) !important;
    box-shadow: var(--md-elevation-3) !important;
    border: none !important;
}

/* FAB Material Design */
.fab {
    border-radius: 50% !important;
    box-shadow: var(--md-elevation-2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.fab:hover {
    box-shadow: var(--md-elevation-3) !important;
}

/* Status Items Material Design */
.status-item {
    border-radius: var(--md-corner-radius) !important;
    box-shadow: var(--md-elevation-1) !important;
    border: none !important;
}

.status-item:hover {
    box-shadow: var(--md-elevation-2) !important;
    transform: translateY(-2px) !important;
}

/* Reservation Categories Material Design */
.category-header {
    border-radius: var(--md-corner-radius-small) var(--md-corner-radius-small) 0 0 !important;
}

/* Navigation Items Active State */
.nav-item.active {
    box-shadow: var(--md-elevation-2) !important;
    background: var(--primary) !important;
    color: white !important;
}

/* Service Buttons Active State */
.service-btn.active {
    box-shadow: var(--md-elevation-2) !important;
    background: var(--primary) !important;
    color: white !important;
}

/* Control Buttons Active State */
.control-btn.active {
    box-shadow: var(--md-elevation-2) !important;
    background: var(--primary) !important;
    color: white !important;
}

/* Disabled States */
.service-btn:disabled,
.date-nav-btn:disabled,
.nav-item:disabled,
.control-btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-icon:disabled {
    opacity: 0.38 !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed !important;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    :root {
        --md-corner-radius: 14px;
        --md-corner-radius-small: 10px;
        --md-corner-radius-large: 18px;
    }
}