/* ==========================================================================
   IDT POS — Quick Action Buttons CSS Patch
   Date: 2026-05-16
   
   Add this CSS to your existing theme to style the quick action buttons.
   This is an ADDITIONAL CSS file — add it AFTER idtpos-theme-v32.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   QUICK ACTION BUTTONS in Welcome Banner
   -------------------------------------------------------------------------- */
.idt-quick-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    color: #ffffff !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    height: 38px !important;
    white-space: nowrap !important;
}

.idt-quick-btn:hover,
.idt-quick-btn:focus {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.idt-quick-btn i {
    font-size: 14px !important;
}

/* Primary action: New Sale — Green prominent */
.idt-quick-btn-primary {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35) !important;
    font-weight: 600 !important;
}

.idt-quick-btn-primary:hover,
.idt-quick-btn-primary:focus {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* --------------------------------------------------------------------------
   RESPONSIVE — Hide button labels on smaller screens
   -------------------------------------------------------------------------- */

/* Tablet (991px - 1199px): Show icons + shorter labels */
@media screen and (max-width: 1199px) and (min-width: 992px) {
    .idt-quick-btn .idt-btn-label {
        display: none;
    }
    
    .idt-quick-btn {
        width: 38px;
        padding: 8px !important;
        justify-content: center !important;
    }
    
    .idt-quick-btn-primary .idt-btn-label {
        display: inline; /* Keep label for primary "New Sale" */
    }
    
    .idt-quick-btn-primary {
        width: auto;
    }
}

/* Mobile (< 768px): Stack buttons in a row, icons only for secondary */
@media screen and (max-width: 767px) {
    .idt-banner-right {
        width: 100%;
        justify-content: flex-start !important;
        gap: 6px !important;
    }
    
    .idt-quick-btn {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
    
    .idt-quick-btn:not(.idt-quick-btn-primary) .idt-btn-label {
        display: none;
    }
    
    .idt-quick-btn:not(.idt-quick-btn-primary) {
        width: 38px;
        padding: 8px !important;
        justify-content: center !important;
    }
    
    .idt-quick-btn-primary {
        flex: 1 1 auto;
        justify-content: center !important;
    }
}

/* Small mobile (< 480px) */
@media screen and (max-width: 480px) {
    .idt-banner-right {
        flex-wrap: wrap;
    }
    
    .idt-quick-btn {
        height: 34px !important;
    }
}