/* ═══════════════════════════════════════════════════════
   PRINT-THEMED LOADING OVERLAY
   Professional printer animation with CMYK colors
   ═══════════════════════════════════════════════════════ */
#printLoader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 24, 39, 0.92);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
#printLoader.active {
    opacity: 1;
    pointer-events: auto;
}
#printLoader.fade-out {
    opacity: 0;
}

.print-loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

/* Printer Machine */
.printer-machine {
    position: relative;
    width: 180px;
    height: 140px;
}

/* Printer body */
.printer-body {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 70px;
    background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
    border-radius: 12px 12px 8px 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Printer top cover */
.printer-top {
    position: absolute;
    bottom: 58px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 30px;
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
    border-radius: 6px 6px 0 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Paper input slot */
.printer-slot-in {
    position: absolute;
    bottom: 72px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background: #111827;
    border-radius: 2px;
}

/* Paper output slot */
.printer-slot-out {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 5px;
    background: #111827;
    border-radius: 2px;
    z-index: 3;
}

/* Printer LED indicator */
.printer-led {
    position: absolute;
    bottom: 50px;
    right: 24px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981, 0 0 16px rgba(16,185,129,0.4);
    animation: printerLedBlink 1.2s ease-in-out infinite;
}

@keyframes printerLedBlink {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px #10b981, 0 0 16px rgba(16,185,129,0.4); }
    50% { opacity: 0.4; box-shadow: 0 0 4px #10b981; }
}

/* Printer brand logo line */
.printer-brand {
    position: absolute;
    bottom: 42px;
    left: 24px;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #D98618, #f59e0b);
    border-radius: 2px;
}

/* Animated Paper coming out */
.print-paper {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 0;
    background: #ffffff;
    border-radius: 0 0 3px 3px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    animation: paperSlide 2.4s ease-in-out infinite;
    overflow: hidden;
    z-index: 2;
}

@keyframes paperSlide {
    0% { height: 0; opacity: 0; }
    10% { opacity: 1; }
    15%, 85% { height: 70px; }
    95% { height: 70px; opacity: 1; }
    100% { height: 80px; opacity: 0; }
}

/* CMYK color bars printing on paper */
.print-paper::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 10px;
    right: 10px;
    height: 6px;
    background: linear-gradient(90deg, 
        #00bcd4 0% 22%,    /* Cyan */
        transparent 22% 26%,
        #e91e63 26% 48%,   /* Magenta */
        transparent 48% 52%,
        #ffc107 52% 74%,   /* Yellow */
        transparent 74% 78%,
        #212121 78% 100%   /* Key/Black */
    );
    border-radius: 1px;
    animation: printBars 2.4s ease-in-out infinite;
}

.print-paper::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 10px;
    right: 10px;
    height: 40px;
    background: repeating-linear-gradient(
        0deg,
        #e5e7eb 0px, #e5e7eb 3px,
        transparent 3px, transparent 8px
    );
    animation: printLines 2.4s ease-in-out infinite;
    opacity: 0;
}

@keyframes printBars {
    0%, 14% { width: 0; opacity: 0; }
    20% { opacity: 1; }
    40%, 85% { width: calc(100% - 20px); opacity: 1; }
    100% { opacity: 0; }
}

@keyframes printLines {
    0%, 30% { opacity: 0; }
    45%, 85% { opacity: 0.6; }
    100% { opacity: 0; }
}

/* CMYK Ink Drops */
.cmyk-drops {
    display: flex;
    gap: 12px;
    align-items: center;
}

.cmyk-drop {
    width: 14px;
    height: 14px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    animation: inkDrop 1.6s ease-in-out infinite;
}

.cmyk-drop:nth-child(1) {
    background: #00bcd4; /* Cyan */
    box-shadow: 0 0 10px rgba(0,188,212,0.5);
    animation-delay: 0s;
}
.cmyk-drop:nth-child(2) {
    background: #e91e63; /* Magenta */
    box-shadow: 0 0 10px rgba(233,30,99,0.5);
    animation-delay: 0.2s;
}
.cmyk-drop:nth-child(3) {
    background: #ffc107; /* Yellow */
    box-shadow: 0 0 10px rgba(255,193,7,0.5);
    animation-delay: 0.4s;
}
.cmyk-drop:nth-child(4) {
    background: #212121; /* Key */
    box-shadow: 0 0 10px rgba(33,33,33,0.5);
    animation-delay: 0.6s;
}

@keyframes inkDrop {
    0%, 100% { transform: rotate(-45deg) scale(1); opacity: 0.5; }
    50% { transform: rotate(-45deg) scale(1.3); opacity: 1; }
}

/* Progress bar */
.print-progress {
    width: 200px;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    overflow: hidden;
}

.print-progress-bar {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #00bcd4, #e91e63, #ffc107, #D98618);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: printProgress 2s ease-in-out infinite;
}

@keyframes printProgress {
    0% { width: 0; background-position: 0% 0; }
    50% { width: 70%; background-position: 100% 0; }
    100% { width: 100%; background-position: 0% 0; }
}

/* Loading text */
.print-loader-text {
    color: rgba(255,255,255,0.8);
    font-family: 'Cairo', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.print-loader-subtext {
    color: rgba(255,255,255,0.4);
    font-family: 'Cairo', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
}

/* ═══════════════════════════════════════════════════════ */

/* Base Styles */
html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body { 
    font-family: 'Cairo', sans-serif; 
    background-color: #f3f4f6; 
}

.glass-panel { 
    background: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(10px); 
}

.hidden-section { 
    display: none !important; 
}

/* Scrollbar Styling */
.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f7fafc;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    scroll-behavior: smooth;
}

.scrollbar-thin::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: #f7fafc;
    border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* Mobile-optimized horizontal scrolling */
.mobile-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    position: relative;
}

.mobile-scroll::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.1) 0%, transparent 50%, rgba(0,0,0,0.1) 100%);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
}

.mobile-scroll.has-overflow::before {
    opacity: 1;
}

.mobile-scroll > * {
    scroll-snap-align: start;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

/* Debug mode for mobile scrolling */
@media (max-width: 768px) {
    .mobile-scroll.debug {
        border: 2px solid red !important;
        background: rgba(255, 0, 0, 0.1) !important;
    }
    
    .mobile-scroll.debug::after {
        content: '📱 TOUCH SCROLL';
        position: absolute;
        top: -20px;
        left: 0;
        background: red;
        color: white;
        font-size: 10px;
        padding: 2px 4px;
        border-radius: 2px;
        z-index: 1000;
    }
}

.mobile-scroll > * {
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* Touch feedback for mobile */
@media (max-width: 768px) {
    .mobile-scroll {
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        scrollbar-width: none;
    }
    
    .mobile-scroll::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
    
    /* Better touch targets for mobile */
    .mobile-scroll button {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
    }
    
    /* Fix all table scrolling on mobile */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        scrollbar-width: none;
    }
    
    .overflow-x-auto::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
    
    /* Ensure tables don't break layout */
    .overflow-x-auto table {
        min-width: 600px;
    }
    
    /* Make table cells readable on mobile */
    .overflow-x-auto th,
    .overflow-x-auto td {
        white-space: nowrap;
        padding: 8px;
        font-size: 14px;
    }
}

/* Animations */
.fade-in { 
    animation: fadeIn 0.6s ease-out; 
}

@keyframes fadeIn { 
    from { 
        opacity: 0; 
        transform: translateY(20px) scale(0.95); 
    } 
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    } 
}

@keyframes pulse {
    0%, 100% { 
        opacity: 0.1; 
        transform: scale(1); 
    }
    50% { 
        opacity: 0.2; 
        transform: scale(1.1); 
    }
}

.animate-pulse {
    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Login Page Background - Professional Animated Pattern */
.login-bg-base {
    background: #faf9f7; /* Soft off-white base */
}

.login-bg-pattern {
    position: relative;
}

/* Base gradient overlay for depth */
.login-bg-gradient {
    background: linear-gradient(135deg, 
        rgba(250, 249, 247, 0.95) 0%,
        rgba(245, 243, 240, 0.98) 50%,
        rgba(250, 249, 247, 0.95) 100%
    );
}

/* Subtle grid pattern - black/gray tones */
.login-grid-pattern {
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px),
        linear-gradient(rgba(50, 50, 50, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(50, 50, 50, 0.015) 1px, transparent 1px);
    background-size: 80px 80px, 80px 80px, 40px 40px, 40px 40px;
    background-position: 0 0, 0 0, 20px 20px, 20px 20px;
    animation: loginGridDrift 30s linear infinite;
}

@keyframes loginGridDrift {
    0% {
        background-position: 0 0, 0 0, 20px 20px, 20px 20px;
    }
    100% {
        background-position: 80px 80px, 80px 80px, 60px 60px, 60px 60px;
    }
}

/* Geometric squares - black/gray with low opacity */
.login-geometric-square {
    width: 120px;
    height: 120px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(30, 30, 30, 0.02);
    opacity: 0.4;
}

.login-geometric-square::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(50, 50, 50, 0.06);
}

/* Geometric rectangles - black/gray with low opacity */
.login-geometric-rect {
    width: 180px;
    height: 100px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(40, 40, 40, 0.015);
    opacity: 0.35;
}

.login-geometric-rect::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(60, 60, 60, 0.04);
}

/* Orange accent glow effects - subtle luxury feel */
.login-orange-glow {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(217, 134, 24, 0.12) 0%, rgba(217, 134, 24, 0.04) 40%, transparent 70%);
    filter: blur(40px);
    opacity: 0.6;
}

/* Floating animations - smooth and slow */
@keyframes loginFloat1 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.4;
    }
    33% {
        transform: translate(30px, -40px) rotate(5deg);
        opacity: 0.5;
    }
    66% {
        transform: translate(-20px, 30px) rotate(-3deg);
        opacity: 0.35;
    }
}

@keyframes loginFloat2 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.35;
    }
    50% {
        transform: translate(-35px, -25px) rotate(-5deg);
        opacity: 0.45;
    }
}

@keyframes loginFloat3 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.4;
    }
    40% {
        transform: translate(25px, 35px) rotate(4deg);
        opacity: 0.5;
    }
    80% {
        transform: translate(-30px, -20px) rotate(-4deg);
        opacity: 0.35;
    }
}

@keyframes loginFloat4 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: translate(40px, 30px) rotate(6deg);
        opacity: 0.4;
    }
}

@keyframes loginFloat5 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.35;
    }
    33% {
        transform: translate(-25px, 40px) rotate(-4deg);
        opacity: 0.45;
    }
    66% {
        transform: translate(30px, -25px) rotate(4deg);
        opacity: 0.3;
    }
}

@keyframes loginFloat6 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.35;
    }
    50% {
        transform: translate(35px, -30px) rotate(5deg);
        opacity: 0.4;
    }
}

@keyframes loginFloat7 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.3;
    }
    45% {
        transform: translate(-30px, 35px) rotate(-5deg);
        opacity: 0.4;
    }
}

/* Glow animations - subtle orange accent */
@keyframes loginGlow1 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(50px, -40px) scale(1.1);
        opacity: 0.7;
    }
}

@keyframes loginGlow2 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: translate(-60px, 50px) scale(1.15);
        opacity: 0.6;
    }
}

@keyframes loginGlow3 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.45;
    }
    50% {
        transform: translate(45px, 55px) scale(1.08);
        opacity: 0.65;
    }
}

/* Position and apply animations */
.login-float-1 {
    top: 15%;
    right: 10%;
    animation: loginFloat1 25s ease-in-out infinite;
}

.login-float-2 {
    top: 60%;
    left: 8%;
    animation: loginFloat2 28s ease-in-out infinite;
    animation-delay: -3s;
}

.login-float-3 {
    top: 25%;
    left: 20%;
    animation: loginFloat3 32s ease-in-out infinite;
    animation-delay: -8s;
}

.login-float-4 {
    bottom: 20%;
    right: 25%;
    animation: loginFloat4 30s ease-in-out infinite;
    animation-delay: -12s;
}

.login-float-5 {
    top: 10%;
    left: 50%;
    animation: loginFloat5 27s ease-in-out infinite;
    animation-delay: -5s;
}

.login-float-6 {
    bottom: 30%;
    left: 15%;
    animation: loginFloat6 29s ease-in-out infinite;
    animation-delay: -10s;
}

.login-float-7 {
    top: 45%;
    right: 30%;
    animation: loginFloat7 31s ease-in-out infinite;
    animation-delay: -15s;
}

.login-glow-1 {
    top: 20%;
    right: 15%;
    animation: loginGlow1 35s ease-in-out infinite;
}

.login-glow-2 {
    bottom: 25%;
    left: 20%;
    animation: loginGlow2 40s ease-in-out infinite;
    animation-delay: -10s;
}

.login-glow-3 {
    top: 50%;
    right: 40%;
    animation: loginGlow3 38s ease-in-out infinite;
    animation-delay: -18s;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* Dashboard Metric Cards - Interactive */
.dashboard-metric-card {
    position: relative;
    overflow: hidden;
}

.dashboard-metric-card:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 8px 16px -4px rgba(0, 0, 0, 0.15),
        0 4px 8px -2px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(217, 134, 24, 0.2),
        0 0 20px rgba(217, 134, 24, 0.1);
}

.dashboard-card-hint {
    transition: opacity 0.3s ease;
}

.dashboard-metric-card:hover .dashboard-card-hint {
    opacity: 1;
}

/* Orders - Modern Horizontal Card Layout */
#orders.orders-bleed {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

#orders .orders-list {
    max-width: 100%;
    display: block;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Order Card Container */
.order-card-container {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0.75rem;
    overflow-x: hidden;
    box-sizing: border-box;
}

.order-card-container.order-with-notification {
    border-left: 4px solid #ef4444;
    background: linear-gradient(to right, rgba(239, 68, 68, 0.05), transparent);
}

.delivered-notification-badge {
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

.order-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: #ffffff;
    border: 1px solid rgba(229, 231, 235, 1);
    border-radius: 0.75rem;
    padding: 0.875rem 1.25rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.order-card {
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.order-card:hover {
    box-shadow: 
        0 8px 16px -4px rgba(0, 0, 0, 0.15),
        0 4px 8px -2px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(217, 134, 24, 0.25),
        0 0 25px rgba(217, 134, 24, 0.12);
    transform: translateY(-3px) scale(1.01);
    border-color: rgba(217, 134, 24, 0.3);
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 250, 245, 0.5) 100%);
}

/* In Branch orders - Visual distinction */
.order-card-container:has(.order-status-branch-delivery) .order-card,
.order-card-container:has(.order-status-delivered) .order-card {
    border-left: 3px solid #14b8a6;
    background: linear-gradient(to right, rgba(240, 253, 250, 0.3) 0%, #ffffff 5%);
}

.order-card-container:has(.order-status-branch-delivery) .order-card:hover,
.order-card-container:has(.order-status-delivered) .order-card:hover {
    border-left-color: #0d9488;
}

/* Customer Received orders - Final completion state */
.order-card-container:has(.order-status-customer-received) .order-card {
    border-left: 3px solid #10b981;
    background: linear-gradient(to right, rgba(240, 253, 244, 0.4) 0%, #ffffff 5%);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

.order-card-container:has(.order-status-customer-received) .order-card:hover {
    border-left-color: #059669;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

/* Workflow Cards - Design and Production Sections */
.workflow-card {
    background: #ffffff;
    border: 1px solid rgba(229, 231, 235, 1);
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 0.75rem;
}

.workflow-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
    border-color: rgba(217, 134, 24, 0.2);
}

.workflow-card-design {
    border-left: 4px solid #3b82f6;
}

.workflow-card-production {
    border-left: 4px solid #8b5cf6;
}

.workflow-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(229, 231, 235, 1);
}

.workflow-card-title-section {
    flex: 1;
}

.workflow-order-number {
    font-size: 1.25rem;
    color: #D98618;
    font-weight: 800;
    margin-bottom: 0.25rem;
    letter-spacing: 0.5px;
}

.workflow-client-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
    margin: 0.25rem 0;
}

.workflow-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.workflow-status-design-badge {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.workflow-status-pending-badge {
    background: rgba(107, 114, 128, 0.1);
    color: #4b5563;
}

.workflow-status-production-badge {
    background: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
}

.workflow-status-production-received {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.workflow-card-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
    flex-shrink: 0;
}

.workflow-card-content {
    margin-bottom: 0.5rem;
}

.workflow-info-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.workflow-info-icon {
    font-size: 1rem;
    color: #9ca3af;
    width: 20px;
    text-align: center;
}

.workflow-info-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.workflow-info-label {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
}

.workflow-info-value {
    font-size: 0.875rem;
    color: #111827;
    font-weight: 600;
}

.workflow-specs-box {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

.workflow-specs-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.workflow-specs-content {
    font-size: 0.875rem;
    color: #4b5563;
    line-height: 1.6;
    white-space: pre-wrap;
}

.workflow-notes-box {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 0.5rem;
    padding: 0.75rem;
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.workflow-notes-box i {
    color: #d97706;
    font-size: 1.125rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.workflow-notes-box strong {
    display: block;
    font-size: 0.875rem;
    color: #92400e;
    margin-bottom: 0.25rem;
}

.workflow-notes-box p {
    font-size: 0.875rem;
    color: #78350f;
    margin: 0;
    line-height: 1.5;
}

.workflow-card-action {
    margin-top: 0.75rem;
}

.workflow-action-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    border-radius: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.workflow-action-btn i {
    font-size: 1.125rem;
}

.workflow-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.workflow-action-primary {
    background: linear-gradient(135deg, #D98618 0%, #b36b0f 100%);
    color: #ffffff;
}

.workflow-action-primary:hover {
    background: linear-gradient(135deg, #b36b0f 0%, #9a5a0c 100%);
    box-shadow: 0 4px 12px rgba(217, 134, 24, 0.4);
}

.workflow-action-production {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
}

.workflow-action-production:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

/* Empty State */
.workflow-empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: #9ca3af;
}

.workflow-empty-icon {
    font-size: 4rem;
    color: #d1d5db;
    margin-bottom: 1rem;
}

.workflow-empty-text {
    font-size: 1.125rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.workflow-empty-subtext {
    font-size: 0.875rem;
    color: #9ca3af;
}

/* Delivered orders - Completion state */
.order-card:has(.order-status-delivered) {
    border-left: 3px solid #10b981;
    background: linear-gradient(to right, #f0fdf4 0%, #ffffff 3%);
}

.order-card:has(.order-status-delivered):hover {
    border-left-color: #059669;
}

/* Left: Status Badge Section */
.order-status-section {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    max-width: 100%;
    box-sizing: border-box;
}

.order-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    color: #ffffff;
    min-width: 90px;
    max-width: 100%;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status Badge Colors */
.order-status-pending {
    background-color: #6b7280; /* gray */
}

.order-status-design {
    background-color: #3b82f6; /* blue */
}

.order-status-production {
    background-color: #8b5cf6; /* purple */
}

.order-status-branch {
    background-color: #14b8a6; /* teal */
}

.order-status-branch-delivery {
    background-color: #14b8a6; /* teal - in branch */
}

.order-status-customer-received {
    background-color: #10b981; /* green - customer received */
}

.order-status-delivered {
    background-color: #14b8a6; /* teal - legacy support, maps to in_branch */
}

.order-status-shipping-pending {
    background-color: #f97316; /* orange - awaiting shipping approval */
}

.order-status-shipping-assigned {
    background-color: #6366f1; /* indigo - assigned to shipping */
}

/* Center: Order Info Section (Inline) */
.order-info-section {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-width: 0;
    flex-wrap: wrap;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.order-info-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    max-width: 100%;
    flex-shrink: 1;
    box-sizing: border-box;
}

.order-info-icon {
    font-size: 0.875rem;
    color: #9ca3af;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

.order-info-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    flex-shrink: 1;
}

/* Right: Action Buttons Section (Horizontal) */
.order-actions-section {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
    min-width: auto;
    max-width: none;
}

.order-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    min-height: 36px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.order-action-btn i {
    font-size: 0.8125rem;
    flex-shrink: 0;
}

.order-action-btn span {
    flex: 0 1 auto;
    text-align: center;
}

.order-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.order-no-action {
    font-size: 0.75rem;
    color: #9ca3af;
    text-align: center;
    padding: 0.5rem;
    font-style: italic;
}

/* Workflow Action Button - Primary workflow actions */
.order-btn-workflow {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
}

.order-btn-workflow:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

/* Invoice Button - Trust and finalization */
.order-btn-invoice {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    color: #ffffff;
}

.order-btn-invoice:hover {
    background: linear-gradient(135deg, #D98618 0%, #b36b0f 100%);
    box-shadow: 0 4px 8px rgba(217, 134, 24, 0.3);
}

/* Secondary Invoice Button - For non-delivered orders */
.order-btn-invoice-secondary {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
}

.order-btn-invoice-secondary:hover {
    background: #e5e7eb;
    border-color: #d1d5db;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Deliver Button - Sales action for in_branch orders */
.order-btn-deliver {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
}

.order-btn-deliver:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

/* Delete Button - Admin only */
.order-btn-delete {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
}

.order-btn-delete:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

/* Collect Payment Button */
.order-btn-collect {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    color: #ffffff;
}

.order-btn-collect:hover {
    background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
    box-shadow: 0 4px 8px rgba(217, 119, 6, 0.3);
}

/* Disabled button state - instant visual feedback */
.order-action-btn:disabled,
.workflow-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    transform: scale(0.97);
}

/* Smooth transitions for all action buttons */
.order-action-btn,
.workflow-action-btn {
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}

/* Shipping Button */
.order-btn-shipping {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: #ffffff;
}

.order-btn-shipping:hover {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    box-shadow: 0 4px 8px rgba(249, 115, 22, 0.3);
}

/* Pagination */
#ordersPagination {
    margin-top: 1rem;
}

#ordersPagination button {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .order-info-section {
        gap: 1rem;
    }
    
    .order-info-item {
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    .order-card {
        flex-wrap: wrap;
        padding: 0.875rem 1rem;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .order-status-section {
        width: 100%;
        max-width: 100%;
        margin-bottom: 0.75rem;
    }
    
    .order-info-section {
        width: 100%;
        max-width: 100%;
        gap: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .order-info-item {
        flex: 1 1 calc(50% - 0.375rem);
        min-width: 0;
        max-width: 100%;
    }
    
    .order-actions-section {
        width: 100%;
        max-width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.5rem;
    }
    
    .order-action-btn {
        flex: 0 1 auto;
        min-width: auto;
        max-width: none;
    }
}

@media (max-width: 640px) {
    #orders.orders-bleed {
        width: 100%;
        max-width: 100%;
        padding: 0;
        overflow-x: hidden;
    }
    
    .order-card {
        padding: 0.75rem;
        gap: 0.75rem;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .order-info-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        max-width: 100%;
    }
    
    .order-info-item {
        width: 100%;
        flex: none;
        max-width: 100%;
    }
    
    .order-actions-section {
        flex-direction: row;
        flex-wrap: wrap;
        max-width: 100%;
        min-width: auto;
        width: 100%;
        justify-content: flex-start;
        gap: 0.5rem;
    }
    
    .order-action-btn {
        flex: 1 1 auto;
        min-width: calc(50% - 0.25rem);
        max-width: none;
    }
}

.login-container {
    animation: slideInUp 0.8s ease-out;
    box-shadow: 
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04),
        0 0 0 1px rgba(0, 0, 0, 0.05),
        0 0 0 0 rgba(217, 134, 24, 0);
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px);
}

.logo-wrapper {
    animation: scaleIn 1s ease-out 0.2s both;
}

/* Logo glow effect - Off-white theme */
.logo-glow {
    filter: drop-shadow(0 0 10px rgba(217, 134, 24, 0.3)) 
            drop-shadow(0 0 20px rgba(217, 134, 24, 0.15));
    transition: filter 0.3s ease;
}

.logo-glow:hover {
    filter: drop-shadow(0 0 15px rgba(217, 134, 24, 0.4)) 
            drop-shadow(0 0 30px rgba(217, 134, 24, 0.2));
}

.form-fields > div {
    animation: slideInUp 0.6s ease-out both;
}

.form-fields > div:nth-child(1) {
    animation-delay: 0.3s;
}

.form-fields > div:nth-child(2) {
    animation-delay: 0.4s;
}

.login-button {
    animation: slideInUp 0.6s ease-out 0.5s both;
}

/* Ensure login inputs are always focusable and clickable */
#loginForm input[type="text"],
#loginForm input[type="password"] {
    pointer-events: auto !important;
    position: relative;
    z-index: 20;
    cursor: text;
    -webkit-user-select: text;
    user-select: text;
}

#loginForm input[type="text"]:focus,
#loginForm input[type="password"]:focus {
    outline: none;
    cursor: text;
    box-shadow: 0 0 0 2px rgba(217, 134, 24, 0.2), 
                0 0 15px rgba(217, 134, 24, 0.1);
}

/* Responsive login page */
@media (max-width: 768px) {
    /* Login screen layout when visible — visibility controlled by #app-visibility style tag */
    #loginScreen:not(.hidden-section) {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        align-items: flex-start !important;
        justify-content: center !important;
        padding: 0.5rem 0 !important;
    }
    
    /* Ensure login container is visible and properly sized */
    #loginScreen > div.relative.z-10 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.5rem !important;
        margin: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #loginScreen .login-container {
        margin: 0.5rem !important;
        padding: 1.5rem !important;
        width: calc(100% - 1rem) !important;
        max-width: calc(100% - 1rem) !important;
        box-sizing: border-box !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure logo is visible */
    .logo-wrapper {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .logo-glow {
        filter: drop-shadow(0 0 10px rgba(217, 134, 24, 0.3)) 
                drop-shadow(0 0 20px rgba(217, 134, 24, 0.15));
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure form is visible */
    #loginForm {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }
    
    /* Ensure inputs are visible and properly sized */
    #loginForm input[type="text"],
    #loginForm input[type="password"] {
        font-size: 16px !important; /* Prevents zoom on iOS */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 0.875rem 2.5rem 0.875rem 0.875rem !important;
    }
    
    /* Ensure login button is visible and properly sized */
    #loginForm button.login-button,
    #loginForm button[type="submit"] {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 1rem !important;
        font-size: 1rem !important;
        margin-top: 1rem !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* Ensure credentials info is visible */
    #loginScreen .mt-10 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        margin-top: 1.5rem !important;
        padding-top: 1rem !important;
    }
    
    /* Reduce pattern complexity on mobile */
    .login-geometric-square,
    .login-geometric-rect {
        opacity: 0.25;
    }
    
    .login-orange-glow {
        width: 200px;
        height: 200px;
        filter: blur(30px);
    }
    
    .login-grid-pattern {
        background-size: 60px 60px, 60px 60px, 30px 30px, 30px 30px;
    }
    
    /* Ensure all text is readable */
    #loginScreen p,
    #loginScreen span,
    #loginScreen label {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Ensure overlay divs don't block input interaction */
#loginForm .relative.group > div.absolute.inset-0 {
    pointer-events: none !important;
}

/* Ensure icons don't block input clicks */
#loginForm .relative.group > i {
    pointer-events: none !important;
    z-index: 10;
}

/* Smooth transitions for interactive elements */
input, button, select {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Glass morphism effect */
.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Application UI Pattern and Glow System */
.app-main-content {
    position: relative;
}

/* Subtle background pattern overlay - Off-white theme */
.app-pattern-overlay {
    background: 
        /* Grid pattern - very subtle */
        linear-gradient(rgba(217, 134, 24, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(217, 134, 24, 0.02) 1px, transparent 1px),
        /* Dotted pattern - halftone */
        radial-gradient(circle, rgba(217, 134, 24, 0.015) 1px, transparent 1px);
    background-size: 50px 50px, 50px 50px, 30px 30px;
    background-position: 0 0, 0 0, 15px 15px;
    pointer-events: none;
    z-index: 0;
}

/* Card glow effect - soft shine - Off-white theme */
.app-card-glow {
    position: relative;
    box-shadow: 
        0 1px 3px 0 rgba(0, 0, 0, 0.1),
        0 1px 2px 0 rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(217, 134, 24, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-card-glow:hover {
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(217, 134, 24, 0.15),
        0 0 15px rgba(217, 134, 24, 0.08);
    transform: translateY(-1px);
}

/* Header glow effect - Off-white theme */
.app-header-glow {
    box-shadow: 
        0 1px 3px 0 rgba(0, 0, 0, 0.1),
        0 1px 2px 0 rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(217, 134, 24, 0.08);
}

/* Highlight glow for important elements - Off-white theme */
.highlight-glow {
    box-shadow: 
        0 2px 4px -1px rgba(0, 0, 0, 0.1),
        0 1px 2px -1px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(217, 134, 24, 0.2),
        0 0 20px rgba(217, 134, 24, 0.1);
}

.highlight-glow:hover {
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(217, 134, 24, 0.3),
        0 0 25px rgba(217, 134, 24, 0.15);
}

/* Active section glow */
section:not(.hidden-section) {
    animation: sectionGlow 0.5s ease-out;
}

@keyframes sectionGlow {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Navigation active state glow */
nav a:not(.hidden-section) {
    position: relative;
}

nav a:not(.hidden-section):hover {
    box-shadow: 0 0 15px rgba(217, 134, 24, 0.2);
}

/* Input and form element enhancements - Off-white theme */
#app input[type="text"],
#app input[type="date"],
#app input[type="number"],
#app input[type="tel"],
#app select,
#app textarea {
    background-color: #ffffff;
    border-color: rgba(209, 213, 219, 1);
    color: #111827;
}

#app input[type="text"]:focus,
#app input[type="date"]:focus,
#app input[type="number"]:focus,
#app input[type="tel"]:focus,
#app select:focus,
#app textarea:focus {
    border-color: rgba(217, 134, 24, 0.6);
    box-shadow: 
        0 0 0 3px rgba(217, 134, 24, 0.1),
        0 0 8px rgba(217, 134, 24, 0.08);
    background-color: #ffffff;
}

#app input[type="text"]::placeholder,
#app textarea::placeholder {
    color: rgba(107, 114, 128, 0.7);
}

/* Table enhancements - Off-white theme */
#app table thead {
    background: linear-gradient(135deg, rgba(249, 250, 251, 1), rgba(243, 244, 246, 1));
}

#app table tbody tr {
    border-color: rgba(229, 231, 235, 1);
    transition: background-color 0.2s ease;
}

#app table tbody tr:hover {
    background-color: rgba(249, 250, 251, 0.8);
}

/* Button enhancements */
#app button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#app button:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 0 15px rgba(217, 134, 24, 0.2);
}

/* Modal enhancements */
#app .fixed.inset-0[class*="Modal"] {
    backdrop-filter: blur(4px);
}

/* Scrollbar styling for off-white theme */
.app-main-content::-webkit-scrollbar-track {
    background: rgba(249, 250, 251, 0.8);
}

.app-main-content::-webkit-scrollbar-thumb {
    background: rgba(217, 134, 24, 0.4);
    border-radius: 4px;
}

.app-main-content::-webkit-scrollbar-thumb:hover {
    background: rgba(217, 134, 24, 0.6);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .app-card-glow {
        box-shadow: 
            0 2px 4px -1px rgba(0, 0, 0, 0.3),
            0 0 0 1px rgba(217, 134, 24, 0.05);
    }
    
    .app-card-glow:hover {
        box-shadow: 
            0 4px 6px -1px rgba(0, 0, 0, 0.4),
            0 0 0 1px rgba(217, 134, 24, 0.15),
            0 0 15px rgba(217, 134, 24, 0.1);
        transform: none;
    }
}

/* Compact orders list responsive */
@media (max-width: 1024px) {
    #ordersGrid .grid.grid-cols-12 {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
    
    #ordersGrid .col-span-2 {
        grid-column: span 2;
    }
    
    #ordersGrid .col-span-1 {
        grid-column: span 1;
    }
}

@media (max-width: 640px) {
    #ordersGrid .grid.grid-cols-12 {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    #ordersGrid .col-span-2,
    #ordersGrid .col-span-1 {
        grid-column: span 1;
        width: 100%;
    }
    
    #ordersGrid .flex.items-center {
        flex-wrap: wrap;
    }
}

/* Print Styles for Invoice */
@media print {
    body * {
        visibility: hidden;
    }
    #invoicePrintContent, #invoicePrintContent * {
        visibility: visible;
    }
    #invoicePrintContent {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 0;
        page-break-inside: avoid;
        page-break-after: avoid;
    }
    .no-print {
        display: none !important;
    }
    @page {
        margin: 0.5cm;
        size: A4 portrait;
    }
    .invoice-section {
        page-break-inside: avoid;
        page-break-after: avoid;
    }
    table {
        page-break-inside: avoid;
    }
    tr {
        page-break-inside: avoid;
    }
}

/* Final overflow protection for orders section */
#orders {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
}

#orders section {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Ensure search input and filter containers don't overflow */
#ordersSearch {
    max-width: 100%;
    box-sizing: border-box;
}

#orders .flex.flex-wrap {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

#orders .app-card-glow {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Ensure all order-related containers respect boundaries */
.order-card-container,
.order-card,
.order-info-section,
.order-info-item,
.order-actions-section,
.order-action-btn {
    max-width: 100%;
    box-sizing: border-box;
}

/* ============================================
   MOBILE RESPONSIVE STYLES (≤ 768px)
   Desktop layout (≥ 1024px) remains unchanged
   ============================================ */

/* Mobile Sidebar - Hidden by default, overlay drawer when open */
@media (max-width: 768px) {
    /* App layout when visible — display controlled by #app-visibility style tag */
    #app:not(.hidden-section) {
        width: 100% !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        overflow: hidden !important;
        position: relative !important;
        z-index: 1 !important;
    }

    main.app-main-content {
        height: 100dvh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y;
    }

    #app > main {
        height: 100dvh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y;
    }

    #dashboard,
    #orders {
        touch-action: pan-y;
    }
    
    /* App hidden state — display controlled by #app-visibility style tag */
    #app.hidden-section {
        pointer-events: none !important;
        z-index: -1 !important;
    }
    
    /* Sidebar - Hidden by default, shown as overlay when opened */
    #app > aside#sidebar {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        height: 100vh !important;
        width: 280px !important;
        max-width: 85vw !important;
        z-index: 50 !important;
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: flex !important;
        flex-direction: column !important;
        background: #0a0a0a !important;
    }
    
    #app > aside#sidebar.mobile-sidebar-open {
        right: 0 !important;
        display: flex !important;
    }
    
    /* Override Tailwind width class on mobile */
    #app > aside#sidebar.w-72 {
        width: 280px !important;
        max-width: 85vw !important;
    }
    
    /* Ensure main content is visible and takes full width */
    #app > main {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        position: relative !important;
        background: #faf9f7 !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    
    /* Ensure content wrapper is visible */
    #app > main > div {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure div.p-8 inside main is visible */
    #app > main > div.p-8 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem 0.75rem !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Sections: visible when not hidden, hidden when hidden */
    section:not(.hidden-section) {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.75rem !important;
        box-sizing: border-box !important;
    }

    section:not(.hidden-section) .grid {
        display: grid !important;
    }

    section:not(.hidden-section) table {
        display: table !important;
    }

    section:not(.hidden-section) .hidden-section {
        display: none !important;
    }
    /* Prevent body scroll when sidebar is open */
    body.mobile-sidebar-open {
        overflow: hidden !important;
        position: fixed;
        width: 100%;
    }
    
    /* Mobile sidebar overlay */
    .mobile-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 40;
        backdrop-filter: blur(2px);
        transition: opacity 0.3s ease, visibility 0.3s ease;
        opacity: 0;
        visibility: hidden;
    }
    
    .mobile-overlay.mobile-overlay-visible {
        display: block;
        opacity: 1;
        visibility: visible;
    }
    
    
    /* Sidebar content - Better spacing on mobile */
    .mobile-sidebar nav a {
        padding: 0.875rem 1rem !important;
        font-size: 0.95rem !important;
        min-height: 48px !important;
    }
    
    .mobile-sidebar nav i {
        font-size: 1.125rem !important;
        width: 24px !important;
    }
    
    /* Sidebar user info */
    .mobile-sidebar .p-6 {
        padding: 1rem !important;
    }
    
    /* Sidebar logo */
    .mobile-sidebar .h-24 {
        height: 80px !important;
        padding: 0.75rem !important;
    }
    
    .mobile-sidebar img {
        max-height: 50px !important;
    }
    
    
    /* Ensure header is visible */
    #app > main > header {
        display: flex !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }
    
    /* Ensure content area is visible */
    #app > main > .p-8,
    #app > main > div.p-8 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem 0.75rem !important;
        box-sizing: border-box !important;
        min-height: calc(100vh - 64px) !important;
    }
    
    /* Section padding - Consistent */
    section {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 1rem !important;
    }
    
    /* Ensure all child divs in main are visible */
    #app > main > div {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Header adjustments */
    header {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        display: flex !important;
        height: auto !important;
        min-height: 64px !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    header h2 {
        font-size: 1.125rem !important;
        padding-right: 0.5rem !important;
        border-right-width: 3px !important;
    }
    
    /* Header buttons */
    header button {
        padding: 0.5rem !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
    
    /* Prevent horizontal overflow */
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    #app {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* All sections - Full width, no overflow */
    section {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* Cards - Stack vertically, full width */
    .app-card-glow,
    .dashboard-metric-card,
    .workflow-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 1rem !important;
        padding: 1rem !important;
        box-sizing: border-box !important;
        border-radius: 0.75rem !important;
    }
    
    /* Dashboard metric cards - Better spacing */
    .dashboard-metric-card {
        padding: 1.25rem 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Card titles and content */
    .app-card-glow h3,
    .dashboard-metric-card h3 {
        font-size: 1.125rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Grids - Stack to single column */
    .grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Dashboard grids */
    .grid.grid-cols-1,
    .grid.grid-cols-2,
    .grid.grid-cols-3,
    .grid.grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
    
    /* Tables - Responsive, prevent overflow */
    table {
        width: 100% !important;
        max-width: 100% !important;
        display: table !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        font-size: 0.9rem !important;
        border-collapse: collapse;
    }
    
    table thead {
        display: table-header-group;
    }
    
    table tbody {
        display: table-row-group;
    }
    
    table tr {
        display: table-row;
    }
    
    table th,
    table td {
        display: table-cell;
        padding: 0.75rem 0.5rem !important;
        white-space: normal !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: none !important;
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
    }
    
    /* Make table cells stack on very small screens if needed */
    @media (max-width: 480px) {
        table th,
        table td {
            padding: 0.5rem 0.25rem !important;
            font-size: 0.8rem !important;
        }
    }
    
    /* For very small screens, make tables scrollable */
    .overflow-x-auto {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
        display: block !important;
    }
    
    /* Table wrapper - Better scrolling */
    .overflow-x-auto table {
        min-width: 600px; /* Minimum width for table content */
    }
    
    /* Table container with scroll indicator */
    .overflow-x-auto::after {
        content: '← اسحب للتمرير →';
        display: block;
        text-align: center;
        padding: 0.5rem;
        font-size: 0.75rem;
        color: #6b7280;
        background: #f3f4f6;
        border-radius: 0.5rem;
        margin-top: 0.5rem;
    }
    
    /* Forms - Full width */
    input[type="text"],
    input[type="date"],
    input[type="number"],
    input[type="tel"],
    input[type="email"],
    select,
    textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Buttons - Touch-friendly sizes */
    button {
        min-height: 44px !important; /* iOS touch target */
        min-width: 44px !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
        touch-action: manipulation; /* Prevent double-tap zoom */
    }
    
    /* Small buttons - Still touchable */
    button.text-sm,
    button.text-xs {
        min-height: 40px !important;
        min-width: 40px !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    /* Icon buttons */
    button i {
        font-size: 1rem !important;
    }
    
    /* Flex containers - Stack vertically */
    .flex {
        flex-wrap: wrap !important;
    }
    
    .flex.flex-row {
        flex-direction: column !important;
    }
    
    /* Spacing adjustments */
    .gap-2 { gap: 0.5rem !important; }
    .gap-3 { gap: 0.75rem !important; }
    .gap-4 { gap: 1rem !important; }
    .gap-6 { gap: 1.5rem !important; }
    
    /* Padding adjustments */
    .p-4 { padding: 1rem !important; }
    .p-6 { padding: 1rem !important; }
    .p-8 { padding: 1rem !important; }
    .px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .py-6 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    
    /* Text sizes - Readable on mobile */
    h1 { font-size: 1.5rem !important; line-height: 1.4 !important; }
    h2 { font-size: 1.25rem !important; line-height: 1.4 !important; }
    h3 { font-size: 1.125rem !important; line-height: 1.4 !important; }
    h4 { font-size: 1rem !important; line-height: 1.4 !important; }
    
    /* Body text - Larger for readability */
    body, p, span, div {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }
    
    /* Small text - Still readable */
    .text-xs { font-size: 0.8rem !important; }
    .text-sm { font-size: 0.875rem !important; }
    
    /* Charts - Responsive */
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Modals - Full screen on mobile */
    .fixed.inset-0 {
        padding: 0.5rem !important;
        align-items: flex-start !important;
        padding-top: 1rem !important;
    }
    
    /* Modal content - Scrollable */
    .fixed.inset-0 > div {
        max-height: 90vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        width: 95% !important;
        margin: 0 auto !important;
    }
    
    /* Order cards - Stack properly */
    .order-card {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .order-status-section,
    .order-info-section,
    .order-actions-section {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Filter buttons - Wrap properly */
    .flex.flex-wrap button {
        flex: 1 1 auto;
        min-width: calc(50% - 0.5rem);
        max-width: 100%;
    }
    
    /* Dashboard metric cards - Stack */
    .dashboard-metric-card {
        margin-bottom: 1rem !important;
    }
    
    /* Dashboard stats grid - Single column */
    #dashboard .grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Dashboard cards content */
    #dashboard .app-card-glow {
        margin-bottom: 1rem !important;
    }
    
    /* Dashboard filters - Stack */
    #dashboard .flex.flex-wrap {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    #dashboard select,
    #dashboard input {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Workflow cards - Full width */
    .workflow-card {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Attendance section - Responsive */
    #attendanceReview table,
    #attendanceReview .overflow-x-auto {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
    }
    
    /* Prevent any element from exceeding viewport */
    * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    /* Smooth scrolling */
    * {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Input fields - Prevent zoom on iOS */
    input[type="text"],
    input[type="number"],
    input[type="tel"],
    input[type="email"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 0.75rem !important;
        min-height: 44px !important;
    }
    
    /* Select dropdowns */
    select {
        background-size: 1.5rem 1.5rem !important;
        padding-right: 2.5rem !important;
    }
    
    /* Labels - Better spacing */
    label {
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
        font-weight: 600 !important;
    }
    
    /* Badges and status indicators */
    .order-status-badge,
    .status-badge,
    span[class*="badge"] {
        font-size: 0.8rem !important;
        padding: 0.375rem 0.75rem !important;
        white-space: nowrap !important;
    }
    
    /* Icons - Appropriate size */
    i.fas,
    i.far,
    i.fab {
        font-size: 1rem !important;
    }
    
    /* Spacing between elements */
    .space-y-6 > * + * {
        margin-top: 1rem !important;
    }
    
    .space-y-4 > * + * {
        margin-top: 0.75rem !important;
    }
    
    /* Modals - Better mobile experience */
    .swal2-popup {
        width: 90% !important;
        max-width: 500px !important;
        padding: 1.5rem !important;
        font-size: 0.95rem !important;
    }
    
    .swal2-title {
        font-size: 1.25rem !important;
    }
    
    .swal2-content {
        font-size: 0.9rem !important;
    }
    
    /* Swal2 inputs */
    .swal2-input,
    .swal2-select {
        font-size: 16px !important;
        padding: 0.75rem !important;
        min-height: 44px !important;
    }
    
    /* Workflow cards - Better mobile layout */
    .workflow-card {
        padding: 1rem !important;
    }
    
    .workflow-card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
    
    .workflow-card-content {
        padding: 0.75rem 0 !important;
    }
    
    .workflow-card-action {
        margin-top: 1rem !important;
    }
    
    .workflow-action-btn {
        width: 100% !important;
        min-height: 44px !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.95rem !important;
    }
    
    /* Order action buttons - Stack on mobile */
    .order-actions-section {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .order-action-btn {
        width: 100% !important;
        min-height: 44px !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
        justify-content: center !important;
    }
    
    /* Search and filter containers */
    .flex.items-center.gap-4 {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
    }
    
    /* Charts container */
    #productsChart,
    canvas {
        max-width: 100% !important;
        height: 250px !important;
    }
    
    /* Empty states */
    .workflow-empty-state,
    .empty-state {
        padding: 2rem 1rem !important;
    }
    
    .workflow-empty-text {
        font-size: 1rem !important;
    }
    
    .workflow-empty-subtext {
        font-size: 0.875rem !important;
    }
}

/* Tablet adjustments (769px - 1023px) */
@media (min-width: 769px) and (max-width: 1023px) {
    .mobile-sidebar {
        position: relative;
        right: 0;
    }
    
    .mobile-overlay {
        display: none !important;
    }
    
    /* Keep sidebar visible but adjust width */
    .mobile-sidebar {
        width: 240px;
    }
    
    /* Grids - 2 columns */
    .grid.grid-cols-3,
    .grid.grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Desktop (≥ 1024px) - Keep original layout */
@media (min-width: 1024px) {
    .mobile-sidebar {
        position: relative !important;
        right: 0 !important;
        width: 18rem !important; /* w-72 */
    }
    
    .mobile-overlay {
        display: none !important;
    }
    
    #mobileMenuBtn {
        display: none !important;
    }
    
    /* Restore original desktop styles */
    #app {
        flex-direction: row !important;
    }
    
    section {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}


/* ═══════════════════════════════════════════════════════
   PREMIUM PRO REDESIGN — Elegant & Professional
   ═══════════════════════════════════════════════════════ */

/* ── Body ── */
body {
    background: #f4f3ef !important;
}

/* ── Sidebar ── */
#sidebar {
    background: linear-gradient(175deg, #0d0d13 0%, #111119 45%, #0d0d13 100%) !important;
    border-left: 1px solid rgba(217, 134, 24, 0.1) !important;
    box-shadow: -2px 0 40px rgba(0,0,0,0.55) !important;
}

/* Logo area bottom glow line */
#sidebar > div:first-child {
    position: relative !important;
    background: rgba(0,0,0,0.35) !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
#sidebar > div:first-child::after {
    content: '';
    position: absolute;
    bottom: 0; left: 22%; right: 22%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(217,134,24,0.45), transparent);
}

/* User profile strip */
.sidebar-user-profile {
    background: linear-gradient(135deg, rgba(217,134,24,0.07) 0%, rgba(255,255,255,0.02) 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

/* User avatar circle */
.user-avatar-circle {
    background: linear-gradient(135deg, #D98618 0%, #b36b0f 100%) !important;
    box-shadow: 0 0 0 2px rgba(217,134,24,0.25), 0 3px 10px rgba(217,134,24,0.25) !important;
}

/* Sidebar nav */
#sidebar nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(217,134,24,0.14) transparent;
}
#sidebar nav::-webkit-scrollbar { width: 3px; }
#sidebar nav::-webkit-scrollbar-track { background: transparent; }
#sidebar nav::-webkit-scrollbar-thumb {
    background: rgba(217,134,24,0.14);
    border-radius: 2px;
}

/* Nav section labels */
.sidebar-section-label {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.18);
    padding: 2px 6px 4px;
    display: block;
}

/* Nav dividers */
.sidebar-divider {
    border-color: rgba(255,255,255,0.05) !important;
    margin: 8px 0 4px !important;
}

/* Nav items — base */
#sidebar nav a {
    position: relative !important;
    border-radius: 11px !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    color: rgba(195, 195, 215, 0.62) !important;
    border: 1px solid transparent !important;
}

/* Nav items — hover */
#sidebar nav a:hover {
    background: rgba(217, 134, 24, 0.1) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(217, 134, 24, 0.14) !important;
    transform: translateX(-2px) !important;
}
#sidebar nav a:hover i {
    color: #e8951c !important;
    filter: drop-shadow(0 0 5px rgba(217,134,24,0.38)) !important;
}

/* Nav items — active */
#sidebar nav a.nav-active {
    background: linear-gradient(135deg, rgba(217,134,24,0.17) 0%, rgba(217,134,24,0.06) 100%) !important;
    color: #fff !important;
    border-color: rgba(217,134,24,0.22) !important;
    box-shadow: 0 2px 14px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04) !important;
    transform: none !important;
}
#sidebar nav a.nav-active i {
    color: #D98618 !important;
    filter: drop-shadow(0 0 4px rgba(217,134,24,0.4)) !important;
}
#sidebar nav a.nav-active::after {
    content: '';
    position: absolute;
    right: 0; top: 22%; bottom: 22%;
    width: 3px;
    background: linear-gradient(180deg, #f59e0b, #D98618);
    border-radius: 2px 0 0 2px;
}

/* Logout button */
.sidebar-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    border-radius: 12px;
    color: rgba(239, 68, 68, 0.72);
    border: 1px solid rgba(239, 68, 68, 0.14);
    background: rgba(239, 68, 68, 0.06);
    font-weight: 700;
    font-size: 14px;
    font-family: 'Cairo', sans-serif;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-logout-btn:hover {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #fff !important;
    border-color: transparent !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 18px rgba(239,68,68,0.32) !important;
}

/* ── Main content area ── */
.app-main-content {
    background: linear-gradient(155deg, #f7f6f3 0%, #f3f2ee 55%, #f7f6f3 100%) !important;
}
.app-pattern-overlay {
    background-image: radial-gradient(rgba(0,0,0,0.022) 1px, transparent 1px) !important;
    background-size: 26px 26px !important;
}

/* ── Header ── */
.app-header-glow {
    background: rgba(255,255,255,0.97) !important;
    border-bottom: 1px solid rgba(0,0,0,0.055) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 2px 16px rgba(0,0,0,0.05) !important;
    backdrop-filter: blur(24px) !important;
}
#pageTitle {
    font-weight: 800 !important;
    letter-spacing: -0.25px !important;
    color: #0c0c14 !important;
    border-right-width: 3px !important;
    border-color: #D98618 !important;
}

/* Header Add Order button */
#btnAddOrderHeader {
    background: linear-gradient(135deg, #1a1a24 0%, #0e0e14 100%) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22) !important;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
}
#btnAddOrderHeader:hover {
    background: linear-gradient(135deg, #D98618 0%, #b36b0f 100%) !important;
    box-shadow: 0 4px 18px rgba(217,134,24,0.38) !important;
    transform: translateY(-1px) !important;
}

/* Header Quotation button */
#btnQuotationHeader {
    border-radius: 10px !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(59,130,246,0.18) !important;
    transition: all 0.2s ease !important;
}
#btnQuotationHeader:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(59,130,246,0.28) !important;
}

/* Branch switcher button */
#branchSwitcherBtn {
    border-radius: 10px !important;
    background: rgba(0,0,0,0.03) !important;
    border-color: rgba(0,0,0,0.09) !important;
    transition: all 0.2s ease !important;
}
#branchSwitcherBtn:hover {
    background: rgba(0,0,0,0.06) !important;
    border-color: rgba(217,134,24,0.25) !important;
}

/* ── Cards ── */
.app-card-glow {
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.05) !important;
    border-color: rgba(0,0,0,0.065) !important;
    transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.app-card-glow:hover {
    box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 8px 32px rgba(0,0,0,0.05) !important;
    border-color: rgba(217,134,24,0.14) !important;
}

/* ── Dashboard metric cards ── */
.dashboard-metric-card {
    border: 1px solid rgba(0,0,0,0.065) !important;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1) !important;
}
.dashboard-metric-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.06), 0 0 0 1px rgba(217,134,24,0.18) !important;
    border-color: rgba(217,134,24,0.22) !important;
}

/* ── Order cards ── */
.order-card {
    border: 1px solid rgba(0,0,0,0.065) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.03) !important;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1) !important;
}
.order-card:hover {
    box-shadow: 0 6px 22px rgba(0,0,0,0.09), 0 2px 8px rgba(0,0,0,0.05), 0 0 0 1px rgba(217,134,24,0.18) !important;
    transform: translateY(-2px) scale(1.003) !important;
    border-color: rgba(217,134,24,0.2) !important;
    background: linear-gradient(to left, rgba(255,252,245,0.6), #fff) !important;
}

/* ── Workflow cards ── */
.workflow-card {
    border: 1px solid rgba(0,0,0,0.07) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04) !important;
    transition: all 0.25s ease !important;
}
.workflow-card:hover {
    box-shadow: 0 5px 18px rgba(0,0,0,0.08) !important;
    border-color: rgba(217,134,24,0.16) !important;
    transform: translateY(-2px) !important;
}

/* ── Input & Select ── */
input[type="text"]:focus, input[type="password"]:focus,
input[type="number"]:focus, input[type="email"]:focus,
input[type="date"]:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 3px rgba(217,134,24,0.12) !important;
    border-color: #D98618 !important;
    outline: none !important;
}

/* ── Gold buttons global improvement ── */
button.bg-brandGold, a.bg-brandGold,
button[class*="bg-brandGold"]:not(#sidebar nav a) {
    box-shadow: 0 2px 10px rgba(217,134,24,0.28) !important;
    transition: all 0.2s ease !important;
}
button.bg-brandGold:hover, button[class*="bg-brandGold"]:hover:not(#sidebar nav a) {
    box-shadow: 0 4px 18px rgba(217,134,24,0.4) !important;
    transform: translateY(-1px) !important;
}

/* ── SweetAlert2 ── */
.swal2-popup {
    border-radius: 20px !important;
    font-family: 'Cairo', sans-serif !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.16) !important;
}
.swal2-confirm, .swal2-cancel {
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-family: 'Cairo', sans-serif !important;
    padding: 10px 24px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LOGIN PAGE — PREMIUM DARK PRINT STUDIO
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.login-left  { background: linear-gradient(150deg, #100e08 0%, #1c1508 55%, #0e0c07 100%); }
.login-right { background: linear-gradient(180deg, #0c0c12 0%, #13131e 100%); }

/* Fullscreen background + centered overlay card */
.login-art-bg {
    background: radial-gradient(1200px 700px at 65% 45%, rgba(217,134,24,0.08), transparent 60%),
                radial-gradient(900px 600px at 25% 55%, rgba(0,180,216,0.05), transparent 60%),
                linear-gradient(180deg, #0c0c10 0%, #07070b 100%);
}
.login-form-layer {
    z-index: 5;
}
.login-form-card {
    background: rgba(10, 10, 14, 0.62);
    border: 1px solid rgba(217,134,24,0.20);
    border-radius: 22px;
    box-shadow: 0 30px 110px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 34px 34px 26px 34px;
    position: relative;
    overflow: hidden;
}
.login-form-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 220px at 50% 0%, rgba(217,134,24,0.18), transparent 55%);
    pointer-events: none;
}
.login-form-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(217,134,24,0.9), transparent);
    pointer-events: none;
    opacity: 0.8;
}

/* Mobile fixes: prevent art from overlapping the form */
@media (max-width: 640px) {
    #loginScreen {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .login-right {
        min-height: 100vh;
        padding-top: 18px;
        padding-bottom: 18px;
    }
    .login-form-card {
        width: 100%;
        max-width: 460px;
        margin: 0 auto;
        padding: 22px 16px 16px 16px;
        border-radius: 18px;
    }
    .login-center-logo { margin-bottom: 10px; }
    .login-logo-img { height: 82px; }
    .login-welcome-title { font-size: 1.75rem; }
    .login-welcome-sub { font-size: 0.9rem; }

    /* Left art is hidden on mobile; keep scan line subtle if shown */
    .login-scan-line { opacity: 0.25; }
}

@media (max-width: 420px) {
    .login-form-card {
        padding: 26px 18px 18px 18px;
        border-radius: 18px;
    }
}

.login-halftone-bg {
    background-image: radial-gradient(circle, rgba(217,134,24,0.14) 1.2px, transparent 1.2px);
    background-size: 24px 24px;
}

/* Scan line */
.login-scan-line {
    position: absolute; left:0; right:0; height:2px;
    background: linear-gradient(90deg, transparent 0%, rgba(217,134,24,0.55) 40%, rgba(217,134,24,0.8) 50%, rgba(217,134,24,0.55) 60%, transparent 100%);
    animation: loginScan 5s ease-in-out infinite;
    pointer-events: none; z-index: 2;
}
@keyframes loginScan {
    0%   { top: -2px; opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 0.6; }
    100% { top: 100%; opacity: 0; }
}

/* SVG artwork animations */
@keyframes loginRoll     { to { transform: rotate(360deg); } }
@keyframes loginRollBack { to { transform: rotate(-360deg); } }
@keyframes loginFloat    {
    0%,100% { transform: translateY(0)    rotate(0deg); }
    50%     { transform: translateY(-14px) rotate(2deg); }
}
@keyframes loginFloatR   {
    0%,100% { transform: translateY(0)   rotate(0deg); }
    50%     { transform: translateY(14px) rotate(-2deg); }
}
@keyframes loginGlowPulse {
    0%,100% { filter: drop-shadow(0 0 10px rgba(217,134,24,0.5)); }
    50%     { filter: drop-shadow(0 0 28px rgba(217,134,24,0.9)) drop-shadow(0 0 50px rgba(217,134,24,0.3)); }
}
@keyframes loginFadeUp {
    from { opacity:0; transform: translateY(22px); }
    to   { opacity:1; transform: translateY(0); }
}
@keyframes loginPanelIn {
    from { opacity:0; transform: translateX(30px); }
    to   { opacity:1; transform: translateX(0); }
}

/* Brand title */
.login-brand-title {
    font-size: 3rem; font-weight: 900; line-height: 1;
    background: linear-gradient(135deg, #c47a10 0%, #f5c050 40%, #D98618 70%, #ffd97a 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    font-family: 'Cairo', sans-serif;
    animation: loginFadeUp 1s ease forwards;
}
.login-brand-sub {
    color: rgba(255,255,255,0.38); font-family: 'Cairo', sans-serif;
    font-size: 0.78rem; letter-spacing: 3px; text-transform: uppercase; margin-top: 8px;
    animation: loginFadeUp 1.2s ease forwards;
}
.login-brand-tagline {
    color: rgba(255,255,255,0.2); font-family: 'Cairo', sans-serif;
    font-size: 0.72rem; margin-top: 12px;
    animation: loginFadeUp 1.4s ease forwards;
}

/* CMYK swatch bar */
.login-swatch-bar {
    height: 5px; border-radius: 4px; overflow: hidden;
    background: linear-gradient(to right,
        #00b4d8 0% 24%, #e63946 25% 49%, #f8c02e 50% 74%, rgba(255,255,255,0.25) 75% 100%);
    opacity: 0.7;
}

/* Form panel animation */
.login-form-panel-inner {
    animation: loginPanelIn 0.7s cubic-bezier(0.34,1.1,0.64,1) forwards;
}

/* Welcome section */
.login-welcome-title {
    font-size: 2.05rem; font-weight: 800; color: #fff;
    font-family: 'Cairo', sans-serif; line-height: 1.2;
}
.login-welcome-sub {
    color: rgba(255,255,255,0.38); font-size: 0.92rem;
    font-family: 'Cairo', sans-serif; margin-top: 5px;
}

/* Input fields */
.login-input-wrap { position: relative; }
.login-input-wrap .login-input-icon {
    position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
    color: rgba(255,255,255,0.25); font-size: 13px; pointer-events: none;
    transition: color 0.25s;
}
.login-input-wrap:focus-within .login-input-icon { color: #D98618; }
.login-input {
    width: 100%; padding: 16px 46px 16px 16px;
    background: rgba(255,255,255,0.05);
    border: 1.5px solid rgba(255,255,255,0.09);
    border-radius: 12px; color: #fff;
    font-family: 'Cairo', sans-serif; font-size: 0.98rem;
    outline: none; transition: all 0.25s ease;
    direction: rtl;
}
.login-input:focus {
    border-color: #D98618;
    background: rgba(217,134,24,0.07);
    box-shadow: 0 0 0 4px rgba(217,134,24,0.12), 0 4px 16px rgba(0,0,0,0.3);
}
.login-input::placeholder { color: rgba(255,255,255,0.25); }

/* Submit button */
.login-btn {
    width: 100%; padding: 16px 24px;
    background: linear-gradient(135deg, #D98618 0%, #b8700f 100%);
    color: #fff; border: none; border-radius: 12px;
    font-family: 'Cairo', sans-serif; font-size: 1rem; font-weight: 800;
    cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden;
    box-shadow: 0 4px 24px rgba(217,134,24,0.3);
}
.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 36px rgba(217,134,24,0.5);
    background: linear-gradient(135deg, #f0a020 0%, #D98618 100%);
}
.login-btn::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    transform: translateX(-100%); transition: transform 0.6s ease;
}
.login-btn:hover::after { transform: translateX(100%); }

/* Cred items */
.login-cred-box {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px; padding: 10px 12px;
    transition: border-color 0.2s;
}
.login-cred-box:hover { border-color: rgba(217,134,24,0.35); }
.login-cred-role { color: rgba(217,134,24,0.85); font-family:'Cairo',sans-serif; font-weight:700; font-size:11px; margin-bottom:3px; }
.login-cred-pass { color: rgba(255,255,255,0.3); font-family:monospace; font-size:11px; }

/* Registration crosshair mark */
.login-reg-mark svg { animation: loginGlowPulse 4s ease-in-out infinite; }

/* Center logo on right panel */
.login-form-panel-inner {
    direction: rtl;
}
.login-center-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px auto;
}
.login-logo-img {
    height: 102px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(0,0,0,0.55)) drop-shadow(0 0 18px rgba(217,134,24,0.22));
    transition: transform 0.25s ease;
}
.login-logo-img:hover {
    transform: translateY(-2px) scale(1.02);
}
.login-logo-fallback {
    height: 102px;
    width: 102px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(217,134,24,0.1);
    border: 1px solid rgba(217,134,24,0.25);
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}
.login-logo-fallback-text {
    color: #D98618;
    font-size: 26px;
    font-weight: 900;
    font-family: 'Cairo', sans-serif;
}

.login-brand-under-logo {
    text-align: center;
    margin-top: -10px;
    margin-bottom: 22px;
}
.login-brand-ar {
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    font-size: 1.25rem;
    color: rgba(255,255,255,0.92);
    letter-spacing: 0.2px;
}
.login-brand-en {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 0.88rem;
    color: rgba(217,134,24,0.72);
    letter-spacing: 1.8px;
    text-transform: uppercase;
    margin-top: 2px;
}

/* ── Orders Notification Panel ── */
.orders-notif-panel {
    background: linear-gradient(135deg, #fff5f5, #fff);
    border: 1.5px solid #fca5a5;
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 4px 20px rgba(239,68,68,0.1);
    animation: notifPanelSlide 0.35s cubic-bezier(0.34,1.3,0.64,1);
    overflow: hidden;
}
@keyframes notifPanelSlide {
    from { opacity: 0; transform: translateY(-12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
.orders-notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #fecaca;
}
.orders-notif-count-badge {
    background: #ef4444;
    color: white;
    font-size: 11px;
    font-weight: 800;
    border-radius: 8px;
    padding: 1px 7px;
    min-width: 20px;
    text-align: center;
}
.orders-notif-clear-btn {
    background: #fee2e2;
    color: #b91c1c;
    border: none;
    border-radius: 8px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    font-family: 'Cairo', sans-serif;
}
.orders-notif-clear-btn:hover { background: #fecaca; }
.orders-notif-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
}
.orders-notif-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #fee2e2;
    border-radius: 10px;
    padding: 10px 14px;
    gap: 10px;
    animation: notifItemIn 0.25s ease;
    transition: background 0.15s;
}
.orders-notif-item:hover { background: #fff5f5; }
@keyframes notifItemIn {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}
.orders-notif-item-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
    font-size: 13px;
}
.orders-notif-order-id {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
    font-weight: 800;
    font-size: 11px;
    border-radius: 6px;
    padding: 2px 8px;
    white-space: nowrap;
    font-family: 'Cairo', sans-serif;
}
.orders-notif-client {
    font-weight: 700;
    color: #1f2937;
    white-space: nowrap;
}
.orders-notif-arrow {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}
.orders-notif-old-status {
    color: #9ca3af;
    text-decoration: line-through;
    font-size: 11px;
}
.orders-notif-new-status {
    font-weight: 800;
    font-size: 12px;
}
.orders-notif-time {
    color: #9ca3af;
    font-size: 11px;
    white-space: nowrap;
    margin-right: auto;
}
.orders-notif-dismiss {
    background: none;
    border: none;
    color: #f87171;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 13px;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.orders-notif-dismiss:hover { background: #fee2e2; color: #b91c1c; }

/* ── Orders Notification Badge ── */
.orders-notif-badge {
    position: absolute;
    top: 6px;
    left: 8px;
    min-width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    font-family: 'Cairo', sans-serif;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid rgba(13, 13, 19, 0.9);
    z-index: 10;
    animation: ordersNotifPulse 2s ease-in-out infinite, ordersNotifAppear 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center;
    line-height: 1;
}
.orders-notif-badge.hidden {
    display: none !important;
}

/* Ping ring effect behind badge */
.orders-notif-badge::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.35);
    animation: ordersNotifRing 2s ease-in-out infinite;
    z-index: -1;
}

@keyframes ordersNotifPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.6), 0 2px 8px rgba(239,68,68,0.4); transform: scale(1); }
    50%       { box-shadow: 0 0 0 5px rgba(239,68,68,0), 0 2px 8px rgba(239,68,68,0.2); transform: scale(1.08); }
}
@keyframes ordersNotifRing {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50%       { transform: scale(1.5); opacity: 0; }
}
@keyframes ordersNotifAppear {
    from { transform: scale(0) rotate(-15deg); opacity: 0; }
    to   { transform: scale(1) rotate(0deg);  opacity: 1; }
}

/* ── Fade-in animation refinement ── */
.fade-in {
    animation: fadeIn 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}