/* Layout Wrapper */
#ec-main-layout {
    display: flex;
    gap: 20px;
    margin: 20px auto;
    max-width: 1400px;
    align-items: flex-start;
}

/* Sidebar History Style */
#ec-sidebar {
    width: 250px;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    padding: 15px;
    border-radius: 8px;
    min-height: 400px;
}

.sidebar-header {
    font-weight: bold;
    font-size: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #2d3748;
    margin-bottom: 15px;
}

#ec-content-area {
    flex: 1;
}

/* Tabs Navigation */
.ec-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e2e8f0;
}

.ec-tab-link {
    padding: 12px 24px;
    background: #f1f5f9;
    border: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-weight: 600;
    color: #64748b;
    transition: all 0.3s;
}

.ec-tab-link.active {
    background: #2d3748;
    color: white;
}

.ec-tab-content {
    display: none;
}

.ec-tab-content.active {
    display: block;
}

/* Top Bar: Unit and Delivery */
.ec-top-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    background: #fff;
    padding: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 20px;
}

.ec-customer-ref {
    margin-bottom: 25px;
}

.ec-customer-ref input {
    width: 100%;
    padding: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 16px;
}


/* Sheet Tables */

.ec-review-container {
    color: #334155;
    max-height: 600px;
    overflow-y: auto;
}

.ec-summary-table {
    width: 100%;
    margin-bottom: 20px;
    font-size: 14px;
    border-collapse: collapse;
}

.ec-summary-label {
    padding: 5px;
    font-weight: bold;
    width: 150px;
    vertical-align: top;
}

.ec-summary-table td {
    padding: 5px;
    vertical-align: top;
}

.ec-address-label {
    color: #b91c1c;
}

.ec-address-value {
    color: #b91c1c;
}

.ec-sheet-block {
    margin-top: 20px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    overflow: hidden;
}

.ec-sheet-header {
    background: #f1f5f9;
    padding: 10px;
    font-weight: bold;
    border-bottom: 1px solid #cbd5e1;
}

.ec-sheet-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    background: white;
}

.ec-sheet-thead {
    background: #f8fafc;
}

.ec-sheet-th,
.ec-sheet-td {
    padding: 8px;
    border: 1px solid #e2e8f0;
}

.ec-sheet-qty {
    font-weight: bold;
}

.ec-sheet-eb {
    font-size: 12px;
}

.ec-sheet-notes {
    padding: 10px;
    font-size: 12px;
    font-style: italic;
    background: #fffbeb;
}

.ec-review-notes {
    margin-top: 20px;
    padding: 15px;
    background: #f1f5f9;
    border-left: 4px solid #1e40af;
}

/* Sheet Group Container */
.ec-sheet-group {
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ec-sheet-header {
    display: flex;
    gap: 15px;
    background: #f8fafc;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 15px;
    align-items: flex-end;
    border-left: 4px solid #3b82f6;
}

.ec-sheet-header .ec-field {
    flex: 1;
}

.ec-sheet-header label {
    display: block;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #475569;
}

.ec-brand-select,
#ec-unit-selector {
    font-weight: 500;
    cursor: pointer;
}


.ec-sheet-code::placeholder,
.ec-sum-stock::placeholder {
    font-weight: 500;
}

/* Tables Styling */
.ec-cl-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
}

.ec-cl-table th {
    background: #f1f5f9;
    color: #334155;
    font-weight: 600;
    padding: 12px;
    border: 1px solid #e2e8f0;
}

.ec-cl-table td {
    border: 1px solid #e2e8f0;
    padding: 10px;
    text-align: center;
}

/* Buttons Styling */
.ec-btn-primary {
    background: #2563eb;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
}

.ec-btn-secondary {
    background: #64748b;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
}

.ec-btn-add-main {
    width: 100%;
    padding: 15px;
    background: #10b981;
    /* Green for adding main groups */
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
}

.ec-btn-add-row {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}

.ec-btn-add-row.double {
    background: #1e2937;
}

.ec-row.double-part {
    background: #ededed;
}

.ec-btn-remove {
    background: #ef4444;
    color: white;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
}

.ec-remove-group {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
}

/* Summary Footer */
.ec-summary-section {
    margin-top: 30px;
    border-radius: 8px;
    width: 100%;
}

.ec-summary-section h3 {
    margin-bottom: 20px;
}

.sum-item .label {
    color: #92400e;
    font-size: 14px;
    display: block;
}

.sum-item .value {
    font-size: 24px;
    font-weight: 800;
    color: #b45309;
}

/* Edge Banding Helper - Perfect Trapezoid Edition */
.ec-eb-wrapper {
    --eb-thickness: 15px;
    --eb-bg: #f8fafc;
    --eb-border: #cbd5e1;
    --eb-side-base: #e2e8f0;
    --eb-active: #3b82f6;

    position: relative;
    background: var(--eb-bg);
    border: 1px solid var(--eb-border);
    border-radius: 4px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
}

.ec-eb-side {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background-color: var(--eb-side-base);
    transition: background-color 0.01s ease;
    z-index: 2;
}

.ec-eb-side.active {
    background-color: var(--eb-active);
}

.ec-eb-top {
    clip-path: polygon(0 0,
            100% 0,
            calc(100% - var(--eb-thickness)) var(--eb-thickness),
            var(--eb-thickness) var(--eb-thickness));
}

.ec-eb-right {
    clip-path: polygon(100% 0,
            100% 100%,
            calc(100% - var(--eb-thickness)) calc(100% - var(--eb-thickness)),
            calc(100% - var(--eb-thickness)) var(--eb-thickness));
}

.ec-eb-bottom {
    clip-path: polygon(0 100%,
            100% 100%,
            calc(100% - var(--eb-thickness)) calc(100% - var(--eb-thickness)),
            var(--eb-thickness) calc(100% - var(--eb-thickness)));
}

.ec-eb-left {
    clip-path: polygon(0 0,
            var(--eb-thickness) var(--eb-thickness),
            var(--eb-thickness) calc(100% - var(--eb-thickness)),
            0 100%);
}

.ec-eb-center {
    position: absolute;
    inset: var(--eb-thickness);
    cursor: pointer;
    z-index: 3;
    background: transparent;
    border-radius: 2px;
}

/* Top: Soft Blue */
.ec-eb-top:hover {
    background-color: rgba(59, 130, 246, 0.5);
}

/* Right: Soft Emerald */
.ec-eb-right:hover {
    background-color: rgba(16, 185, 129, 0.5);
}

/* Bottom: Soft Amber/Yellow */
.ec-eb-bottom:hover {
    background-color: rgba(245, 158, 11, 0.5);
}

/* Left: Soft Rose/Red */
.ec-eb-left:hover {
    background-color: rgba(244, 63, 94, 0.5);
}

/* Center: Grey */
.ec-eb-center:hover {
    background: rgb(26 31 41 / 50%);
}

@media (max-width: 480px) {
    .ec-eb-wrapper {
        --eb-thickness: 6px;
    }
}

/* Drag Handle */
.ec-drag-handle {
    cursor: grab;
    color: #cbd5e1;
    font-size: 18px;
}

/* File Dropzone Style */
.ec-file-dropzone {
    border: 2px dashed #cbd5e1;
    padding: 40px;
    text-align: center;
    border-radius: 8px;
    background: #f8fafc;
    position: relative;
}

.ec-file-dropzone input {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    #ec-main-layout {
        flex-direction: column;
    }

    #ec-sidebar {
        width: 100%;
        min-height: auto;
    }

    .ec-top-bar {
        grid-template-columns: 1fr;
    }
}

#ec-overlay {
    position: fixed;
    inset: 0;
    /* Shorthand for top, right, bottom, left: 0 */
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.98);
    z-index: 9999999;
    display: none;
    /* JS will trigger display: flex */
    align-items: center;
    justify-content: center;
}

body.ec-loading-fixed {
    overflow: hidden !important;
    /* Prevents scrolling while loading */
}


/* =========================================
   1. Full Screen Overlay & Centering
   ========================================= */
#ec-overlay {
    position: fixed !important;
    /* Forces it relative to the viewport */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    /* Flexbox centers the content */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    /* Ensure it's above WordPress admin bar and header */
}

.ec-loader-content {
    text-align: center;
}

/* =========================================
   4. Professional Order Summary
   ========================================= */
.ec-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    background: #ffffff;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 6px rgb(0 0 0 / 20%);
    align-items: stretch;
}

.sum-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 15px;
    background: #f1f1f1;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.sum-item .label {
    font-size: 0.85em;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.sum-item .value {
    font-size: 1.2em;
    font-weight: 600;
    color: #212529;
}

/* =========================================
   5. Math Captcha UI Friendly
   ========================================= */
.ec-security-row {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.ec-math-captcha {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #eef2f5;
    padding: 12px 20px;
    border-radius: 8px;
    width: auto;
    border: 1px solid #ced4da;
    font-weight: 500;
    width: fit-content;
}

.ec-math-captcha input {
    width: 70px !important;
    padding: 8px;
    text-align: center;
    border: 1px solid #adb5bd;
    border-radius: 4px;
    font-size: 16px;
}

.ec-math-error-msg {
    margin-top: -15px;
    font-size: 14px;
    color: rgb(239, 68, 68);
}

/* =========================================
   6. Buttons (Same Size, Friendly Colors)
   ========================================= */
.ec-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    margin-top: 10px;
}

#ec-btn-draft,
#ec-btn-submit-trigger {
    flex: 1;
    min-width: 160px;
    max-width: 200px;
    padding: 14px 24px;
    font-size: 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-align: center;
}

#ec-btn-draft {
    background: #e2e8f0;
    color: #475569;
    border: 1px solid #cbd5e1;
}

#ec-btn-draft:hover {
    background: #cbd5e1;
}

#ec-btn-submit-trigger {
    background: #2563eb;
    color: white;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

#ec-btn-submit-trigger:hover {
    background: #1d4ed8;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
    transform: translateY(-1px);
}

/* =========================================
   9. Active Group Styling
   ========================================= */
.ec-sheet-group {
    border: 1px solid #dee2e6;
    padding: 25px;
    margin-bottom: 25px;
    border-radius: 12px;
    background: #ffffff;
    transition: all 0.3s ease;
}

/* When your JS adds the 'active' class to a group */
.ec-sheet-group.active {
    border: 2px solid #2563eb;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.15);
    transform: scale(1.01);
    /* Slight pop out effect */
}

/* =========================================
   10. Add Sheet Notes Button
   ========================================= */
.ec-add-notes-btn {
    display: block;
    margin: 30px auto 0 auto;
    /* Auto left/right pushes it to center */
    background: #f8f9fa;
    border: 1px dashed #adb5bd;
    color: #495057;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.ec-add-notes-btn:hover {
    background: #e9ecef;
    border-color: #6c757d;
}


/* Fix 5: Extreme Bottom Center Button */
.ec-group-notes-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    width: 100%;
    margin-top: 25px;
    border-top: 1px dashed #ccc;
}

.ec-btn-add-notes {
    order: 2;
    margin-top: 10px;
}

.ec-group-notes, .ec-review-notes {
    width: 100%; height: 80px; resize: none;
    border: 1px solid #979fa9; border-radius: 6px; padding: 10px; background: #f8f9fa;
}
.ec-group-notes:hover,
.ec-group-notes:focus,
.ec-review-notes:hover,
.ec-review-notes:focus{
    background: #fff;
    box-shadow: inset 0 0 5px #33333344;
}
.ec-btn-add-notes {
    background: transparent; color: #3b82f6; border: 1px solid #3b82f6;
    padding: 5px 12px; border-radius: 4px; cursor: pointer; font-size: 13px;
}

/* Fix 1: Inline Loader Styling */
#ec-inline-feedback {
    margin-top: 15px;
    display: none;
    text-align: center;
    font-weight: 600;
    color: #2563eb;
}

.ec-loader-dots:after {
    content: ' .';
    animation: dots 1.5s steps(5, end) infinite;
}

@keyframes dots {

    0%,
    20% {
        content: ' .';
    }

    40% {
        content: ' ..';
    }

    60% {
        content: ' ...';
    }

    80%,
    100% {
        content: '';
    }
}


.ec-sheet-group {
    display: flex;
    flex-direction: column;
    min-height: 400px;
    /* helps push notes to bottom */
}

.ec-group-notes-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px 0 10px;
    width: 100%;
}

.ec-review-notes-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px 0;
    margin: 25px auto;
    border-bottom: 1px solid #ccc;
    width: 100%;
}

.ec-btn-add-notes,
.ec-btn-add-review-notes {
    background: #f8f9fa;
    border: 1px dashed #adb5bd;
    color: #495057;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.ec-btn-add-notes:hover,
.ec-btn-add-review-notes:hover {
    background: #e9ecef;
    border-color: #6c757d;
}

/* Confirmation Screen */
.ec-review-heading {
    text-align: center;
    margin: 20px 0;
    font-weight: bold;
}

.ec-conf-card {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    margin: 30px auto;
    overflow: hidden;
}

.ec-success-icon {
    font-size: 60px;
    color: #10b981;
    width: 60px;
    height: 60px;
}

.ec-conf-buttons {
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.ec-conf-footer {
    color: #aaa;
    font-size: 12px;
    text-align: center;
}

.ec-btn-pdf {
    background: #10b981;
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
}

.ec-btn-pdf:hover {
    background: #059669;
    transform: translateY(-2px);
}

.ec-receipt-table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 15px;
}

.ec-receipt-table th,
.ec-receipt-table td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.ec-receipt-table th {
    background: #f1f5f9;
    font-weight: 700;
    color: #334155;
}

#ec-tracking-id-big {
    font-size: 32px;
    font-weight: 900;
    color: #2563eb;
    background: #eff6ff;
    padding: 10px 30px;
    border-radius: 12px;
    display: inline-block;
    letter-spacing: 1px;
}

.ec-tracking-id {
    font-size: 24px;
    color: #2563eb;
}


/* Make date/time fields fully clickable */
.ec-cl-group label {
    cursor: pointer;
    display: block;
    margin-bottom: 6px;
}

.ec-cl-group input[type="date"],
.ec-cl-group input[type="time"] {
    cursor: pointer;
}


/* Sootar side-by-side layout */
.ec-sootar-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ec-sootar-group input {
    flex: 1;
    min-width: 0;
}

.ec-sootar-field {
    max-width: 65px;
    text-align: center;
}

/* Group Marker (issue 4) */
.ec-sheet-group {
    position: relative;
}

.ec-group-marker {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #2563eb, #1e40af);
    color: white;
    padding: 8px 24px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
    z-index: 10;
    letter-spacing: 0.5px;
}

/* Rotating Spinner (issue 5) */
.ec-spinner {
    width: 28px;
    height: 28px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #2563eb;
    border-radius: 50%;
    animation: ec-spin 0.8s linear infinite;
    margin: 0 auto 8px;
    display: block;
}

@keyframes ec-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Full clickable date/time fields (issue 3) */
.ec-cl-group {
    cursor: pointer;
}

.ec-cl-group input {
    cursor: pointer;
}

/* 1. Customer Name + Address - Same Row (responsive) */
.ec-customer-info-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
}

@media (max-width: 768px) {
    .ec-customer-info-row {
        grid-template-columns: 1fr;
    }
}

/* 2. Beautiful Sheet Type Radio Buttons */
.ec-sheet-type-group {
    display: flex;
    gap: 25px;
    padding: 4px 0;
}

.ec-sheet-type-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
    color: #334155;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s;
}

.ec-sheet-type-group label:hover {
    background: #f1f5f9;
}

.ec-sheet-type-group input[type="radio"] {
    accent-color: #2563eb;
    width: 18px;
    height: 18px;
}

/* 3+4. Clean overlapping badge + header (matches screenshot) */
.ec-group-marker {
    top: -19px;
    padding: 8px 28px;
    font-size: 14.5px;
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.45);
}

/* receipt generation */
.ec-receipt-container {
    text-align: left;
    color: #1e2937;
    max-width: 700px;
    margin: 0 auto;
}

.ec-receipt-success-emoji {
    font-size: 5rem;
    margin-bottom: 20px;
    text-align: center;
}

.ec-receipt-title {
    font-size: 42px;
    color: #10b981;
    margin: 0 0 15px;
}

.ec-receipt-message {
    font-size: 19px;
    color: #475569;
    margin-bottom: 40px;
}

.ec-tracking-card {
    background: #eff6ff;
    padding: 35px;
    border-radius: 16px;
    margin: 30px 0;
    text-align: center;
}

.ec-tracking-label {
    font-size: 15px;
    color: #64748b;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.ec-tracking-id {
    font-size: 42px;
    font-weight: 900;
    color: #2563eb;
    margin: 12px 0 8px;
}

.ec-tracking-hint {
    color: #10b981;
    font-weight: 600;
}

.ec-receipt-info {
    margin: 40px 0;
    font-size: 16px;
    line-height: 1.7;
    color: #64748b;
}


/* Reuse your existing button classes or define them if not present */
.ec-btn-pdf,
.ec-btn-primary {
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    border: none;
}

.ec-btn-pdf {
    background: #3b82f6;
    color: white;
}

.ec-btn-primary {
    background: #10b981;
    color: white;
}