/* ============================================
   PRIMOS Configurator & Modal Styles
   Modal dialogs, product images, line item config
   ============================================ */

    .modal-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.5);
      z-index: 1000;
      justify-content: center;
      align-items: center;
    }

    .modal-overlay.active {
      display: flex;
    }

    .modal {
      background: white;
      border-radius: 12px;
      width: 90%;
      max-width: 800px;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    }

    .modal-large {
      max-width: 1100px;
    }

    .product-modal-image {
      text-align: center;
      margin-bottom: 20px;
      padding: 20px;
      background: #fafafa;
      border-radius: 8px;
      border: 1px solid #eee;
    }

    .product-modal-image img {
      max-width: 95%;
      max-height: 400px;
      object-fit: contain;
    }

    /* Product Image Gallery */
    .product-image-gallery {
      margin-bottom: 20px;
    }

    .product-main-image {
      text-align: center;
      margin-bottom: 12px;
      padding: 20px;
      background: #fafafa;
      border-radius: 8px;
      border: 1px solid #eee;
      min-height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .product-main-image img {
      max-width: 100%;
      max-height: 350px;
      object-fit: contain;
      border-radius: 4px;
    }

    .product-main-image-placeholder {
      color: #ccc;
      font-size: 64px;
    }

    .product-thumbnails {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .product-thumbnail {
      width: 60px;
      height: 60px;
      border-radius: 6px;
      border: 2px solid #eee;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.2s;
    }

    .product-thumbnail:hover {
      border-color: #8B1538;
    }

    .product-thumbnail.active {
      border-color: #8B1538;
      box-shadow: 0 0 0 2px rgba(139, 21, 56, 0.2);
    }

    .product-thumbnail img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Image Upload Zone */
    .image-upload-zone {
      border: 2px dashed #ddd;
      border-radius: 12px;
      padding: 30px 20px;
      text-align: center;
      background: #fafafa;
      cursor: pointer;
      transition: all 0.2s;
      margin-bottom: 20px;
    }

    .image-upload-zone:hover {
      border-color: #8B1538;
      background: #fef7f9;
    }

    .image-upload-zone.dragover {
      border-color: #8B1538;
      background: #fef0f3;
      transform: scale(1.01);
    }

    .image-upload-zone-icon {
      font-size: 40px;
      margin-bottom: 10px;
      color: #8B1538;
    }

    .image-upload-zone-text {
      color: #666;
      font-size: 14px;
      margin-bottom: 5px;
    }

    .image-upload-zone-hint {
      color: #999;
      font-size: 12px;
    }

    /* Current Images List (Edit Mode) */
    .current-images-section {
      margin-bottom: 20px;
    }

    .current-images-section h4 {
      font-size: 13px;
      color: #666;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .current-images-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .current-image-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      background: #f8f9fa;
      border-radius: 8px;
      border: 1px solid #eee;
    }

    .current-image-item.is-main {
      border-color: #8B1538;
      background: #fef7f9;
    }

    .current-image-thumb {
      width: 50px;
      height: 50px;
      border-radius: 6px;
      overflow: hidden;
      flex-shrink: 0;
    }

    .current-image-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .current-image-info {
      flex: 1;
      min-width: 0;
    }

    .current-image-name {
      font-size: 13px;
      font-weight: 500;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .current-image-meta {
      font-size: 11px;
      color: #888;
      margin-top: 2px;
    }

    .current-image-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .btn-set-main {
      padding: 4px 10px;
      font-size: 11px;
      border-radius: 4px;
      border: 1px solid #ddd;
      background: white;
      color: #666;
      cursor: pointer;
    }

    .btn-set-main:hover {
      border-color: #8B1538;
      color: #8B1538;
    }

    .btn-set-main.is-main {
      background: #8B1538;
      color: white;
      border-color: #8B1538;
    }

    .btn-delete-image {
      padding: 4px 8px;
      font-size: 12px;
      border-radius: 4px;
      border: 1px solid #ddd;
      background: white;
      color: #dc3545;
      cursor: pointer;
    }

    .btn-delete-image:hover {
      background: #dc3545;
      color: white;
      border-color: #dc3545;
    }

    .main-badge {
      display: inline-block;
      padding: 2px 6px;
      font-size: 10px;
      background: #8B1538;
      color: white;
      border-radius: 3px;
      text-transform: uppercase;
      margin-left: 6px;
    }

    .orders-list-section {
      max-height: 300px;
      overflow-y: auto;
    }

    .order-link-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid #eee;
      font-size: 13px;
    }

    .order-link-item:last-child {
      border-bottom: none;
    }

    .order-link-item a {
      color: #007bff;
      text-decoration: none;
      font-weight: 500;
    }

    .order-link-item a:hover {
      text-decoration: underline;
    }

    .order-link-meta {
      color: #666;
      font-size: 12px;
    }

    .modal-header {
      padding: 20px 25px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .modal-header h2 {
      font-size: 20px;
    }

    .modal-close {
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      color: #999;
    }

    .modal-close:hover {
      color: #333;
    }

    .modal-body {
      padding: 25px;
    }

    .detail-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .detail-section {
      background: #f8f9fa;
      padding: 15px;
      border-radius: 8px;
    }

    .detail-section h3 {
      font-size: 14px;
      color: #666;
      margin-bottom: 10px;
      text-transform: uppercase;
    }

    .detail-row {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      border-bottom: 1px solid #eee;
    }

    .detail-row:last-child {
      border-bottom: none;
    }

    .detail-label {
      color: #666;
      font-size: 13px;
    }

    .detail-value {
      font-weight: 500;
      font-size: 14px;
    }

    .editable-section {
      grid-column: 1 / -1;
      background: #e8f4fd;
      border: 2px solid #4a90d9;
    }

    .editable-section h3 {
      color: #4a90d9;
    }

    .edit-field {
      margin-bottom: 15px;
    }

    .edit-field label {
      display: block;
      font-size: 13px;
      color: #666;
      margin-bottom: 5px;
    }

    .edit-field select {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 14px;
    }

    .save-btn {
      background: #4a90d9;
      color: white;
      border: none;
      padding: 12px 25px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      margin-top: 10px;
    }

    .save-btn:hover {
      background: #3a7bc8;
    }

    .save-btn:disabled {
      background: #ccc;
      cursor: not-allowed;
    }

    .loading {
      text-align: center;
      padding: 50px;
      color: #666;
    }

    .loading-spinner {
      display: inline-block;
      font-size: 36px;
      animation: fly 1.2s ease-in-out infinite;
      margin-bottom: 10px;
    }

    .loading-text {
      display: block;
      color: #888;
      font-size: 14px;
      margin-top: 8px;
    }

    @keyframes fly {
      0%, 100% {
        transform: translateY(0) rotate(-5deg);
      }
      50% {
        transform: translateY(-8px) rotate(5deg);
      }
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .line-items-section {
      grid-column: 1 / -1;
      margin-top: 10px;
    }

    .line-items-table {
      width: 100%;
      font-size: 13px;
    }

    .line-items-table th {
      background: #eee;
      padding: 10px;
    }

    .line-items-table td {
      padding: 10px;
    }

    .btn-configure-item {
      padding: 6px 12px;
      background: #8B1538;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 12px;
      cursor: pointer;
      transition: background 0.2s;
    }

    .btn-configure-item:hover {
      background: #6d1029;
    }

    .line-item-status {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 500;
    }

    .line-item-status.not-configured {
      background: #fff3cd;
      color: #856404;
    }

    .line-item-status.configured {
      background: #d4edda;
      color: #155724;
    }

    .line-item-status.partial {
      background: #cce5ff;
      color: #004085;
    }

    .config-details-row td {
      padding: 0 !important;
    }

    .config-details-row td > div {
      padding: 12px 15px;
    }

    /* Line Item Configurator Modal */
    .line-item-config-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.7);
      z-index: 2000;
      justify-content: center;
      align-items: center;
    }

    .line-item-config-modal.active {
      display: flex;
    }

    .line-item-config-content {
      background: white;
      border-radius: 12px;
      width: 90%;
      max-width: 900px;
      max-height: 85vh;
      overflow-y: auto;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    }

    .line-item-config-header {
      padding: 20px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%);
      color: white;
      border-radius: 12px 12px 0 0;
      position: relative;
    }

    .line-item-config-header h2 {
      font-size: 20px;
      font-weight: 700;
      color: white;
      margin: 0;
    }

    .line-item-config-header .item-info {
      font-size: 13px;
      color: rgba(255,255,255,0.8);
      margin-top: 5px;
    }

    .line-item-config-close {
      position: absolute;
      top: 12px;
      right: 12px;
      background: rgba(255,255,255,0.2);
      border: none;
      color: white;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      font-size: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
    }

    .line-item-config-close:hover {
      background: rgba(255,255,255,0.3);
    }

    .line-item-config-body {
      padding: 25px;
    }

    .line-item-config-footer {
      padding: 20px 25px;
      border-top: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #f8f9fa;
      border-radius: 0 0 12px 12px;
    }

    .btn-save-config {
      padding: 10px 24px;
      background: #28a745;
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
    }

    .btn-save-config:hover {
      background: #218838;
    }

    .btn-cancel-config {
      padding: 10px 24px;
      background: #f5f5f5;
      color: #666;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 14px;
      cursor: pointer;
    }

    .btn-cancel-config:hover {
      background: #e9ecef;
    }

    .config-aircraft-display {
      background: #e8f4fd;
      padding: 15px 20px;
      border-radius: 8px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .config-aircraft-display .aircraft-label {
      font-size: 12px;
      color: #666;
      text-transform: uppercase;
    }

    .config-aircraft-display .aircraft-value {
      font-size: 18px;
      font-weight: 600;
      color: #1a1a2e;
    }

    .config-aircraft-missing {
      background: #fff3cd;
      padding: 15px 20px;
      border-radius: 8px;
      margin-bottom: 20px;
      border: 1px solid #ffc107;
    }

    .config-aircraft-missing p {
      margin: 0 0 10px 0;
      color: #856404;
    }

    /* Section Headers */
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .section-header h2 {
      font-size: 20px;
      color: #333;
    }

    /* Announcements */
    .announcement {
      background: white;
      border-radius: 10px;
      padding: 20px;
      margin-bottom: 15px;
      border-left: 4px solid #4a90d9;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    .announcement h4 {
      font-size: 15px;
      margin-bottom: 5px;
    }

    .announcement .date {
      font-size: 12px;
      color: #999;
      margin-bottom: 10px;
    }

    .announcement p {
      font-size: 14px;
      color: #555;
    }

    /* Analytics Grid */
    .analytics-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-top: 15px;
    }

    @media (max-width: 1200px) {
      .analytics-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 600px) {
      .analytics-grid {
        grid-template-columns: 1fr;
      }
    }

    .analytics-card {
      background: white;
      border-radius: 12px;
      padding: 20px;
      text-align: center;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      border: 1px solid #eee;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .analytics-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .analytics-icon {
      font-size: 28px;
      margin-bottom: 10px;
    }

    .analytics-value {
      font-size: 32px;
      font-weight: 700;
      color: #1a1a2e;
      margin-bottom: 5px;
    }

    .analytics-label {
      font-size: 12px;
      color: #888;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* Drive Files List */
    .drive-files-list {
      background: white;
      border-radius: 12px;
      padding: 15px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      border: 1px solid #eee;
      margin-top: 15px;
    }

    .drive-loading {
      text-align: center;
      color: #888;
      padding: 20px;
    }

    .drive-file-item {
      display: flex;
      align-items: center;
      padding: 12px 10px;
      border-bottom: 1px solid #f0f0f0;
      transition: background 0.2s;
      cursor: pointer;
      text-decoration: none;
      color: inherit;
    }

    .drive-file-item:last-child {
      border-bottom: none;
    }

    .drive-file-item:hover {
      background: #f8f9fa;
    }

    .drive-file-icon {
      font-size: 24px;
      margin-right: 12px;
      width: 32px;
      text-align: center;
    }

    .drive-file-info {
      flex: 1;
      min-width: 0;
    }

    .drive-file-name {
      font-weight: 500;
      color: #333;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .drive-file-meta {
      font-size: 12px;
      color: #888;
      margin-top: 2px;
    }

    .drive-file-action {
      color: #4285f4;
      font-size: 12px;
      padding: 6px 12px;
      background: #e8f0fe;
      border-radius: 6px;
      white-space: nowrap;
    }

    /* Metrics Dashboard */
    .metrics-dashboard {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }

    .metrics-card {
      background: white;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .metrics-card h3 {
      font-size: 11px;
      color: #666;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
    }

    .metrics-value {
      font-size: 28px;
      font-weight: 700;
      color: #1a1a2e;
      margin-bottom: 6px;
    }

    .metrics-value.small {
      font-size: 22px;
    }

    .metrics-change {
      font-size: 12px;
      font-weight: 500;
    }

    .metrics-change.positive {
      color: #28a745;
    }

    .metrics-change.negative {
      color: #dc3545;
    }

    .metrics-change.neutral {
      color: #666;
    }

    /* Metrics Sections */
    .metrics-section {
      margin-bottom: 30px;
    }

    .metrics-section-title {
      font-size: 16px;
      font-weight: 600;
      color: #1a1a2e;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 2px solid #8B1538;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .metrics-section-title .icon {
      font-size: 20px;
    }

    .metrics-grid-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 15px;
    }

    .metrics-grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
    }

    .metrics-grid-5 {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 15px;
    }

    .metrics-grid-6 {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 15px;
    }

    /* Comparison Table */
    .metrics-table {
      width: 100%;
      background: white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .metrics-table th {
      background: #1a1a2e;
      color: white;
      padding: 12px 15px;
      text-align: left;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .metrics-table td {
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
      font-size: 14px;
    }

    .metrics-table tr:last-child td {
      border-bottom: none;
    }

    .metrics-table tr:hover {
      background: #f8f9fa;
    }

    .metrics-table .category {
      font-weight: 600;
      color: #1a1a2e;
    }

    .metrics-table .number {
      font-weight: 600;
      text-align: right;
    }

    .metrics-table .change {
      text-align: right;
      font-size: 12px;
    }

    .metrics-period-toggle {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }

    .metrics-period-btn {
      padding: 8px 16px;
      border: 1px solid #ddd;
      background: white;
      border-radius: 6px;
      font-size: 13px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .metrics-period-btn:hover {
      border-color: #8B1538;
      color: #8B1538;
    }

    .metrics-period-btn.active {
      background: #8B1538;
      color: white;
      border-color: #8B1538;
    }

    @media (max-width: 1200px) {
      .metrics-grid-6 {
        grid-template-columns: repeat(3, 1fr);
      }
      .metrics-grid-5 {
        grid-template-columns: repeat(3, 1fr);
      }
      .metrics-grid-4 {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      .metrics-grid-6,
      .metrics-grid-5,
      .metrics-grid-4,
      .metrics-grid-3 {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* Password Modal */
    .password-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.6);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }

    .password-modal.active {
      display: flex;
    }

    .password-dialog {
      background: white;
      padding: 30px;
      border-radius: 12px;
      width: 100%;
      max-width: 360px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    }

    .password-dialog h3 {
      margin-bottom: 20px;
      color: #1a1a2e;
    }

    .password-dialog input {
      width: 100%;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 14px;
      margin-bottom: 15px;
    }

    .password-dialog .btn-row {
      display: flex;
      gap: 10px;
    }

    .password-dialog button {
      flex: 1;
      padding: 12px;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
    }

    .password-dialog .btn-cancel {
      background: #e9ecef;
      color: #333;
    }

    .password-dialog .btn-submit {
      background: #8B1538;
      color: white;
    }

    .password-dialog .error {
      color: #dc3545;
      font-size: 13px;
      margin-bottom: 10px;
      display: none;
    }

    /* Ask Primos Modal */
    .ask-primos-modal-content {
      background: white;
      width: 95%;
      max-width: 700px;
      max-height: 85vh;
      border-radius: 16px;
      box-shadow: 0 25px 80px rgba(0,0,0,0.3);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .ask-primos-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 25px;
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
      color: white;
    }

    .ask-primos-modal-title {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .ask-primos-modal-icon {
      font-size: 24px;
    }

    .ask-primos-modal-title h2 {
      font-size: 20px;
      font-weight: 600;
      margin: 0;
    }

    .modal-close-btn {
      background: rgba(255,255,255,0.1);
      border: none;
      color: white;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      font-size: 24px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }

    .modal-close-btn:hover {
      background: rgba(255,255,255,0.2);
    }

    .ask-primos-modal-body {
      padding: 25px;
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .ask-primos-input-section {
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }

    .ask-primos-input-section textarea {
      flex: 1;
      padding: 14px 16px;
      border: 2px solid #e0e0e0;
      border-radius: 12px;
      font-size: 15px;
      font-family: inherit;
      resize: none;
      transition: border-color 0.2s;
    }

    .ask-primos-input-section textarea:focus {
      outline: none;
      border-color: #8B1538;
    }

    .ask-primos-submit-btn {
      padding: 14px 24px;
      background: linear-gradient(135deg, #8B1538 0%, #a91d47 100%);
      color: white;
      border: none;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.2s;
      height: fit-content;
    }

    .ask-primos-submit-btn:hover {
      background: linear-gradient(135deg, #a91d47 0%, #c42255 100%);
      transform: translateY(-1px);
    }

    .ask-primos-submit-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }

    .submit-arrow {
      font-size: 18px;
    }

    .ask-primos-suggestions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .suggestion-label {
      font-size: 13px;
      color: #666;
    }

    .ask-primos-suggestions button {
      padding: 6px 12px;
      background: #f0f0f0;
      border: 1px solid #ddd;
      border-radius: 20px;
      font-size: 12px;
      color: #555;
      cursor: pointer;
      transition: all 0.2s;
    }

    .ask-primos-suggestions button:hover {
      background: #e0e0e0;
      border-color: #ccc;
    }

    .ask-primos-response-area {
      flex: 1;
      min-height: 200px;
      background: #f8f9fa;
      border-radius: 12px;
      padding: 20px;
      overflow-y: auto;
    }

    .ask-primos-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      min-height: 160px;
      color: #999;
    }

    .placeholder-icon {
      font-size: 40px;
      margin-bottom: 10px;
      opacity: 0.5;
    }

    .ask-primos-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      min-height: 160px;
      gap: 15px;
    }

    .ask-primos-loading .spinner {
      width: 40px;
      height: 40px;
      border: 3px solid #e0e0e0;
      border-top-color: #8B1538;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

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

    .ask-primos-response-content {
      line-height: 1.6;
    }

    .ask-primos-response-content p {
      margin: 0 0 12px 0;
    }

    .ask-primos-response-content ul {
      margin: 10px 0;
      padding-left: 20px;
    }

    .ask-primos-response-content li {
      margin: 6px 0;
    }

    .ask-primos-response-content a {
      color: #8B1538;
      text-decoration: none;
      font-weight: 500;
    }

    .ask-primos-response-content a:hover {
      text-decoration: underline;
    }

    .ask-primos-response-content .order-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      background: #f0e6e9;
      border-radius: 6px;
      margin: 2px;
      cursor: pointer;
      transition: background 0.2s;
    }

    .ask-primos-response-content .order-link:hover {
      background: #e6d0d6;
      text-decoration: none;
    }

    /* Engineering Button for Product Rows */
    .btn-engineering {
      padding: 6px 12px;
      background: #16213e;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.2s;
      white-space: nowrap;
    }

    .btn-engineering:hover {
      background: #8B1538;
    }

    /* ============================================
       PROPOSAL CONFIGURATOR STYLES
       ============================================ */

    /* Proposal Header Bar */
    .proposal-header-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 20px;
      background: #f8f9fa;
      border-bottom: 1px solid #e9ecef;
      border-radius: 12px 12px 0 0;
    }

    .proposal-header-left {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .proposal-id-badge {
      background: #1a1a2e;
      color: white;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
    }

    .proposal-id-badge.draft {
      background: #6c757d;
    }

    .proposal-id-badge.sent {
      background: #0d6efd;
    }

    .proposal-id-badge.accepted {
      background: #198754;
    }

    .proposal-customer-label {
      font-size: 14px;
      color: #495057;
    }

    .proposal-customer-label strong {
      color: #1a1a2e;
    }

    .proposal-header-actions {
      display: flex;
      gap: 10px;
    }

    .btn-proposal {
      padding: 8px 16px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      border: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s;
    }

    .btn-proposal-primary {
      background: #8B1538;
      color: white;
    }

    .btn-proposal-primary:hover {
      background: #6d102c;
    }

    .btn-proposal-secondary {
      background: white;
      color: #495057;
      border: 1px solid #dee2e6;
    }

    .btn-proposal-secondary:hover {
      background: #e9ecef;
    }

    .btn-proposal-success {
      background: #198754;
      color: white;
    }

    .btn-proposal-success:hover {
      background: #146c43;
    }

    /* Proposals List Modal */
    .proposals-modal {
      max-width: 1200px;
    }

    .proposals-toolbar {
      display: flex;
      gap: 15px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .proposals-search {
      flex: 1;
      min-width: 250px;
      position: relative;
    }

    .proposals-search input {
      width: 100%;
      padding: 10px 15px 10px 40px;
      border: 1px solid #dee2e6;
      border-radius: 8px;
      font-size: 14px;
    }

    .proposals-search::before {
      content: '\1F50D';
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 14px;
      opacity: 0.5;
    }

    .proposals-filters {
      display: flex;
      gap: 10px;
    }

    .proposals-filters select {
      padding: 10px 15px;
      border: 1px solid #dee2e6;
      border-radius: 8px;
      font-size: 14px;
      background: white;
      cursor: pointer;
    }

    .proposals-stats {
      display: flex;
      gap: 20px;
      padding: 15px 20px;
      background: #f8f9fa;
      border-radius: 8px;
      margin-bottom: 20px;
    }

    .proposals-stat {
      text-align: center;
    }

    .proposals-stat-value {
      font-size: 24px;
      font-weight: 700;
      color: #1a1a2e;
    }

    .proposals-stat-label {
      font-size: 12px;
      color: #6c757d;
      text-transform: uppercase;
    }

    .proposals-table-container {
      max-height: 500px;
      overflow-y: auto;
      border: 1px solid #dee2e6;
      border-radius: 8px;
    }

    .proposals-table {
      width: 100%;
      border-collapse: collapse;
    }

    .proposals-table th {
      background: #f8f9fa;
      padding: 12px 15px;
      text-align: left;
      font-size: 12px;
      font-weight: 600;
      color: #495057;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      position: sticky;
      top: 0;
      border-bottom: 2px solid #dee2e6;
      cursor: pointer;
      user-select: none;
    }

    .proposals-table th:hover {
      background: #e9ecef;
    }

    .proposals-table th.sort-asc::after {
      content: ' ▲';
      font-size: 10px;
    }

    .proposals-table th.sort-desc::after {
      content: ' ▼';
      font-size: 10px;
    }

    .proposals-table td {
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
      font-size: 14px;
    }

    .proposals-table tr:hover {
      background: #f8f9fa;
    }

    .proposals-table tr.selected {
      background: #e7f1ff;
    }

    .proposal-row-id {
      font-weight: 600;
      color: #0d6efd;
    }

    .proposal-row-customer {
      font-weight: 500;
    }

    .proposal-row-aircraft {
      color: #495057;
    }

    .proposal-row-tail {
      font-family: monospace;
      background: #f8f9fa;
      padding: 2px 6px;
      border-radius: 4px;
    }

    .proposal-row-total {
      font-weight: 600;
      color: #198754;
    }

    .proposal-row-items {
      color: #6c757d;
    }

    .proposal-row-date {
      color: #6c757d;
      font-size: 13px;
    }

    .proposal-status-badge {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
    }

    .proposal-status-badge.draft {
      background: #e9ecef;
      color: #495057;
    }

    .proposal-status-badge.sent {
      background: #cfe2ff;
      color: #0a58ca;
    }

    .proposal-status-badge.accepted {
      background: #d1e7dd;
      color: #0f5132;
    }

    .proposal-status-badge.declined {
      background: #f8d7da;
      color: #842029;
    }

    .proposal-row-actions {
      display: flex;
      gap: 5px;
    }

    .proposal-action-btn {
      padding: 5px 10px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      transition: all 0.2s;
    }

    .proposal-action-btn.edit {
      background: #e7f1ff;
      color: #0d6efd;
    }

    .proposal-action-btn.edit:hover {
      background: #0d6efd;
      color: white;
    }

    .proposal-action-btn.duplicate {
      background: #e2e3e5;
      color: #495057;
    }

    .proposal-action-btn.duplicate:hover {
      background: #495057;
      color: white;
    }

    .proposal-action-btn.delete {
      background: #f8d7da;
      color: #842029;
    }

    .proposal-action-btn.delete:hover {
      background: #842029;
      color: white;
    }

    .proposals-empty {
      text-align: center;
      padding: 60px 20px;
      color: #6c757d;
    }

    .proposals-empty-icon {
      font-size: 48px;
      margin-bottom: 15px;
      opacity: 0.5;
    }

    .proposals-pagination {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
      margin-top: 15px;
      border-top: 1px solid #dee2e6;
    }

    .proposals-pagination-info {
      color: #6c757d;
      font-size: 14px;
    }

    .proposals-pagination-buttons {
      display: flex;
      gap: 5px;
    }

    .proposals-pagination-btn {
      padding: 8px 15px;
      border: 1px solid #dee2e6;
      background: white;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
    }

    .proposals-pagination-btn:hover:not(:disabled) {
      background: #e9ecef;
    }

    .proposals-pagination-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* Proposal Actions Menu */
    .proposal-actions-dropdown {
      position: relative;
      display: inline-block;
    }

    .proposal-actions-menu {
      display: none;
      position: absolute;
      right: 0;
      top: 100%;
      background: white;
      border: 1px solid #dee2e6;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      min-width: 180px;
      z-index: 100;
    }

    .proposal-actions-menu.active {
      display: block;
    }

    .proposal-actions-menu button {
      width: 100%;
      padding: 10px 15px;
      border: none;
      background: none;
      text-align: left;
      cursor: pointer;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .proposal-actions-menu button:hover {
      background: #f8f9fa;
    }

    .proposal-actions-menu button:first-child {
      border-radius: 8px 8px 0 0;
    }

    .proposal-actions-menu button:last-child {
      border-radius: 0 0 8px 8px;
    }

    .proposal-actions-divider {
      height: 1px;
      background: #dee2e6;
      margin: 5px 0;
    }

    /* Voice/Text Quick Entry Button */
    .btn-voice-entry {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      margin-left: 15px;
      background: linear-gradient(135deg, #4a90d9 0%, #3672b9 100%);
      color: white;
      border: none;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      vertical-align: middle;
    }

    .btn-voice-entry:hover {
      background: linear-gradient(135deg, #3672b9 0%, #2a5a94 100%);
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(74, 144, 217, 0.3);
    }

    /* Voice Entry Modal */
    .voice-entry-modal {
      max-width: 650px;
    }

    .voice-entry-textarea {
      width: 100%;
      min-height: 150px;
      padding: 15px;
      border: 2px solid #e0e0e0;
      border-radius: 10px;
      font-size: 15px;
      line-height: 1.6;
      resize: vertical;
      font-family: inherit;
      transition: border-color 0.2s;
    }

    .voice-entry-textarea:focus {
      outline: none;
      border-color: #4a90d9;
      box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.1);
    }

    .voice-entry-textarea::placeholder {
      color: #999;
      font-size: 14px;
    }

    .voice-entry-hint {
      margin-top: 10px;
      font-size: 12px;
      color: #666;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .voice-entry-actions {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }

    .btn-parse-voice {
      padding: 12px 24px;
      background: linear-gradient(135deg, #198754 0%, #146c43 100%);
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.2s;
    }

    .btn-parse-voice:hover {
      background: linear-gradient(135deg, #146c43 0%, #0f5132 100%);
      transform: translateY(-1px);
    }

    .btn-parse-voice:disabled {
      background: #ccc;
      cursor: not-allowed;
      transform: none;
    }

    .btn-cancel-voice {
      padding: 12px 24px;
      background: white;
      color: #666;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 15px;
      cursor: pointer;
    }

    .btn-cancel-voice:hover {
      background: #f5f5f5;
    }

    .parsing-status {
      margin-top: 15px;
      padding: 12px 15px;
      border-radius: 8px;
      font-size: 13px;
      display: none;
    }

    .parsing-status.active {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .parsing-status.loading {
      background: #fff3cd;
      color: #856404;
    }

    .parsing-status.success {
      background: #d4edda;
      color: #155724;
    }

    .parsing-status.error {
      background: #f8d7da;
      color: #721c24;
    }

    .parsing-spinner {
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .parsed-preview {
      margin-top: 15px;
      background: #f8f9fa;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: 15px;
      display: none;
    }

    .parsed-preview.active {
      display: block;
    }

    .parsed-preview-title {
      font-weight: 600;
      color: #1a1a2e;
      margin-bottom: 10px;
      font-size: 14px;
    }

    .parsed-fields {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 8px;
    }

    .parsed-field {
      display: flex;
      gap: 8px;
      font-size: 13px;
      padding: 6px 10px;
      background: white;
      border-radius: 6px;
      border: 1px solid #e9ecef;
    }

    .parsed-field-label {
      color: #666;
      font-weight: 500;
    }

    .parsed-field-value {
      color: #1a1a2e;
    }

    /* Customer Type Selection (Step 1) */
    .customer-type-section {
      margin-bottom: 25px;
    }

    .customer-type-cards {
      display: flex;
      gap: 20px;
      margin-top: 15px;
    }

    .customer-type-card {
      flex: 1;
      border: 2px solid #e0e0e0;
      border-radius: 12px;
      padding: 20px;
      cursor: pointer;
      transition: all 0.2s;
      background: white;
    }

    .customer-type-card:hover {
      border-color: #8B1538;
      box-shadow: 0 2px 8px rgba(139, 21, 56, 0.1);
    }

    .customer-type-card.selected {
      border-color: #8B1538;
      background: linear-gradient(135deg, #fdf2f4 0%, #fff 100%);
      box-shadow: 0 2px 12px rgba(139, 21, 56, 0.15);
    }

    .customer-type-card-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
    }

    .customer-type-icon {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
    }

    .customer-type-card.direct .customer-type-icon {
      background: #e7f3ff;
    }

    .customer-type-card.gulfstream .customer-type-icon {
      background: #e8f5e9;
    }

    .customer-type-card-title {
      font-size: 18px;
      font-weight: 600;
      color: #1a1a2e;
    }

    .customer-type-card-subtitle {
      font-size: 12px;
      color: #666;
    }

    .customer-type-card-desc {
      font-size: 13px;
      color: #555;
      line-height: 1.5;
    }

    .customer-type-radio {
      position: absolute;
      opacity: 0;
    }

    .customer-type-check {
      position: absolute;
      top: 15px;
      right: 15px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 2px solid #ddd;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 14px;
    }

    .customer-type-card.selected .customer-type-check {
      background: #8B1538;
      border-color: #8B1538;
    }

    .customer-type-card {
      position: relative;
    }

    /* Gulfstream Locations */
    .gulfstream-locations {
      display: none;
      margin-top: 20px;
      padding: 20px;
      background: #f8faf8;
      border-radius: 12px;
      border: 1px solid #d4e5d4;
    }

    .gulfstream-locations.active {
      display: block;
    }

    .gulfstream-locations-title {
      font-size: 14px;
      font-weight: 600;
      color: #1a1a2e;
      margin-bottom: 15px;
    }

    .gulfstream-location-cards {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
    }

    .gulfstream-location-card {
      background: white;
      border: 2px solid #e0e0e0;
      border-radius: 10px;
      padding: 15px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .gulfstream-location-card:hover {
      border-color: #2e7d32;
    }

    .gulfstream-location-card.selected {
      border-color: #2e7d32;
      background: #f1f8f1;
    }

    .gulfstream-location-name {
      font-size: 16px;
      font-weight: 600;
      color: #1a1a2e;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .gulfstream-location-name .location-check {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid #ddd;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: white;
      margin-left: auto;
    }

    .gulfstream-location-card.selected .location-check {
      background: #2e7d32;
      border-color: #2e7d32;
    }

    .gulfstream-contact-row {
      display: flex;
      gap: 10px;
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid #eee;
    }

    .gulfstream-contact {
      flex: 1;
      font-size: 12px;
    }

    .gulfstream-contact-label {
      color: #888;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
    }

    .gulfstream-contact-name {
      color: #333;
      font-weight: 500;
    }

    .gulfstream-contact-email {
      color: #666;
      font-size: 11px;
    }

    /* ============================================
       FIXED BED SLEEP KIT STYLES
       ============================================ */

    /* Order Type Selection (Gulfstream only) */
    .order-type-section {
      margin-bottom: 30px;
      padding: 20px;
      background: linear-gradient(135deg, #f8f4f0 0%, #fff 100%);
      border: 2px solid #e8ddd0;
      border-radius: 12px;
    }

    .order-type-header {
      font-size: 12px;
      font-weight: 600;
      color: #8B6914;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 15px;
    }

    .order-type-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
    }

    .order-type-card {
      position: relative;
      padding: 20px;
      border: 2px solid #e0e0e0;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.2s;
      background: white;
    }

    .order-type-card:hover {
      border-color: #8B1538;
      box-shadow: 0 4px 12px rgba(139, 21, 56, 0.1);
    }

    .order-type-card.selected {
      border-color: #8B1538;
      background: linear-gradient(135deg, #fff5f7 0%, #fff 100%);
    }

    .order-type-card input[type="radio"] {
      display: none;
    }

    .order-type-card-check {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 2px solid #ddd;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 14px;
      font-weight: bold;
      transition: all 0.2s;
    }

    .order-type-card.selected .order-type-card-check {
      background: #8B1538;
      border-color: #8B1538;
    }

    .order-type-card-icon {
      font-size: 28px;
      margin-bottom: 10px;
    }

    .order-type-card-title {
      font-size: 16px;
      font-weight: 600;
      color: #1a1a2e;
      margin-bottom: 4px;
    }

    .order-type-card-subtitle {
      font-size: 12px;
      color: #666;
    }

    /* Fixed Bed Sleep Kit Configurator */
    .fixed-bed-kit-configurator {
      padding: 0;
    }

    .kit-section {
      background: white;
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      margin-bottom: 20px;
      overflow: hidden;
    }

    .kit-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
      border-bottom: 1px solid #e0e0e0;
      cursor: pointer;
    }

    .kit-section-header h3 {
      font-size: 14px;
      font-weight: 600;
      color: #8B1538;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .kit-section-header .section-badge {
      font-size: 11px;
      padding: 3px 8px;
      background: #e8f5e9;
      color: #2e7d32;
      border-radius: 12px;
      font-weight: 500;
    }

    .kit-section-content {
      padding: 20px;
    }

    .kit-info-box {
      background: #f8f9fa;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 20px;
    }

    .kit-info-box h4 {
      font-size: 13px;
      color: #333;
      margin: 0 0 10px 0;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .kit-info-box ul {
      margin: 0;
      padding-left: 20px;
      font-size: 13px;
      color: #555;
    }

    .kit-info-box li {
      margin-bottom: 4px;
    }

    .kit-included-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      background: #e8f5e9;
      color: #2e7d32;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 500;
      margin-top: 15px;
    }

    .kit-included-badge::before {
      content: '✓';
      font-weight: bold;
    }

    /* Fixed Bed Size Selection */
    .bed-size-cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-bottom: 20px;
    }

    .bed-size-card {
      padding: 15px;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
    }

    .bed-size-card:hover {
      border-color: #8B1538;
      background: #fff5f7;
    }

    .bed-size-card.selected {
      border-color: #8B1538;
      background: #8B1538;
      color: white;
    }

    .bed-size-card .size-label {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .bed-size-card .size-desc {
      font-size: 11px;
      opacity: 0.7;
    }

    .bed-size-card.selected .size-desc {
      opacity: 0.9;
    }

    .custom-size-inputs {
      display: none;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
      margin-top: 15px;
      padding: 15px;
      background: #f8f9fa;
      border-radius: 8px;
    }

    .custom-size-inputs.active {
      display: grid;
    }

    /* Fabric Source Toggle */
    .fabric-source-toggle {
      display: flex;
      gap: 12px;
      margin-bottom: 20px;
    }

    .fabric-source-option {
      flex: 1;
      padding: 12px 16px;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s;
      font-size: 13px;
      font-weight: 500;
    }

    .fabric-source-option:hover {
      border-color: #8B1538;
    }

    .fabric-source-option.selected {
      border-color: #8B1538;
      background: #8B1538;
      color: white;
    }

    .fabric-source-option input[type="radio"] {
      display: none;
    }

    /* CFS Form Fields */
    .cfs-form-fields {
      display: none;
      margin-top: 15px;
    }

    .cfs-form-fields.active {
      display: block;
    }

    .cfs-form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
    }

    .cfs-form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .cfs-form-group.full-width {
      grid-column: 1 / -1;
    }

    .cfs-form-group label {
      font-size: 12px;
      font-weight: 500;
      color: #555;
    }

    .cfs-form-group input,
    .cfs-form-group textarea {
      padding: 10px 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 13px;
    }

    .cfs-form-group textarea {
      resize: vertical;
      min-height: 80px;
    }

    /* Prima Donna Fabric Selection */
    .pd-fabric-selection {
      display: none;
      margin-top: 15px;
    }

    .pd-fabric-selection.active {
      display: block;
    }

    /* Pillow Quantities Display (read-only) */
    .pillow-quantities-display {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
    }

    .pillow-quantity-card {
      padding: 15px;
      background: #f8f9fa;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
    }

    .pillow-quantity-card h5 {
      font-size: 13px;
      font-weight: 600;
      color: #333;
      margin: 0 0 8px 0;
    }

    .pillow-quantity-card .pillow-size {
      font-size: 11px;
      color: #666;
      margin-bottom: 10px;
    }

    .pillow-quantity-card .quantity-row {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      padding: 4px 0;
      border-bottom: 1px solid #eee;
    }

    .pillow-quantity-card .quantity-row:last-child {
      border-bottom: none;
    }

    .pillow-quantity-card .quantity-label {
      color: #555;
    }

    .pillow-quantity-card .quantity-value {
      font-weight: 600;
      color: #8B1538;
    }

    /* Bed Covering Type Cards */
    .covering-type-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 20px;
    }

    .covering-type-card {
      padding: 20px 15px;
      border: 2px solid #e0e0e0;
      border-radius: 10px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
    }

    .covering-type-card:hover {
      border-color: #8B1538;
      background: #fff5f7;
    }

    .covering-type-card.selected {
      border-color: #8B1538;
      background: linear-gradient(135deg, #8B1538 0%, #a91e4a 100%);
      color: white;
    }

    .covering-type-card .covering-icon {
      font-size: 32px;
      margin-bottom: 8px;
    }

    .covering-type-card .covering-name {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .covering-type-card .covering-desc {
      font-size: 11px;
      opacity: 0.7;
    }

    .covering-type-card.selected .covering-desc {
      opacity: 0.9;
    }

    /* Covering Options Panel */
    .covering-options-panel {
      display: none;
      padding: 20px;
      background: #f8f9fa;
      border-radius: 8px;
      margin-top: 15px;
    }

    .covering-options-panel.active {
      display: block;
    }

    /* Kit Summary in Order Summary */
    .kit-summary-section {
      background: linear-gradient(135deg, #f8f4f0 0%, #fff 100%);
      border: 1px solid #e8ddd0;
      border-radius: 8px;
      margin-bottom: 15px;
      overflow: hidden;
    }

    .kit-summary-header {
      padding: 12px 15px;
      background: linear-gradient(135deg, #8B6914 0%, #a67c1a 100%);
      color: white;
      font-size: 13px;
      font-weight: 600;
    }

    .kit-summary-items {
      padding: 15px;
    }

    .kit-summary-item {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      border-bottom: 1px solid #eee;
      font-size: 12px;
    }

    .kit-summary-item:last-child {
      border-bottom: none;
    }

    .kit-summary-item .item-name {
      color: #333;
    }

    .kit-summary-item .item-price {
      font-weight: 600;
      color: #8B1538;
    }

    /* Direct Customer Form Container */
    .direct-customer-form {
      display: none;
    }

    .direct-customer-form.active {
      display: block;
    }

    .proposal-config-container {
      display: flex;
      gap: 30px;
      min-height: calc(100vh - 200px);
    }

    .proposal-config-main {
      flex: 1;
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.08);
      overflow-y: auto;
      max-height: calc(100vh - 180px);
    }

    .proposal-config-sidebar {
      width: 340px;
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.08);
      position: sticky;
      top: 20px;
      max-height: calc(100vh - 180px);
      overflow-y: auto;
    }

/* ============================================
   MOBILE RESPONSIVE STYLES - Configurator
   ============================================ */

@media (max-width: 768px) {
  /* Modal - Full screen on mobile */
  .modal {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }

  .modal-large {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }

  .modal-header {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 16px;
    background: white;
    border-bottom: 1px solid var(--color-gray-200);
  }

  .modal-header h2 {
    font-size: var(--mobile-font-h2, 20px);
  }

  .modal-close {
    width: var(--touch-target-min, 44px);
    height: var(--touch-target-min, 44px);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal-body {
    padding: var(--mobile-padding, 16px);
    padding-bottom: calc(var(--mobile-padding, 16px) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Config container - stack vertically */
  .proposal-config-container {
    flex-direction: column;
    gap: var(--mobile-padding, 16px);
    min-height: auto;
  }

  .proposal-config-main {
    max-height: none;
    border-radius: 8px;
  }

  .proposal-config-sidebar {
    width: 100%;
    position: static;
    max-height: none;
    border-radius: 8px;
  }

  /* Line item config */
  .line-item-config-content {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
  }

  /* Form layouts */
  .form-row {
    grid-template-columns: 1fr;
    gap: var(--mobile-gap, 12px);
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    min-height: var(--touch-target-comfortable, 48px);
    font-size: var(--mobile-font-body, 16px);
  }

  /* Dropdown menus - full width action sheet style */
  .proposal-actions-menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    border-radius: 16px 16px 0 0;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .proposal-actions-menu button {
    min-height: var(--touch-target-comfortable, 48px);
    font-size: var(--mobile-font-body, 16px);
    border-bottom: 1px solid var(--color-gray-100);
    justify-content: flex-start;
    padding: 14px 20px;
  }

  /* Image upload - hide drag-drop, show button */
  .image-upload-zone {
    padding: var(--mobile-padding, 16px);
  }

  .image-upload-zone .upload-hint {
    font-size: var(--mobile-font-label, 14px);
  }

  /* Filter sections */
  .filter-section {
    padding: var(--mobile-padding, 16px);
  }

  .filter-section-header {
    min-height: var(--touch-target-min, 44px);
  }

  /* Checkbox and radio inputs */
  .filter-option input[type="checkbox"],
  .filter-option input[type="radio"] {
    width: 24px;
    height: 24px;
  }

  .filter-option label {
    min-height: var(--touch-target-min, 44px);
    display: flex;
    align-items: center;
    padding: 8px 0;
  }

  /* Analytics grid */
  .analytics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ----------------------------------------
     PROPOSAL HEADER BAR - Mobile
     Collapse tools into dropdown
     ---------------------------------------- */
  .proposal-header-bar {
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px;
  }

  .proposal-header-left {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .proposal-header-actions {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Hide text labels on mobile, keep icons */
  .proposal-header-actions .btn-proposal {
    padding: 10px 12px;
    font-size: 12px;
  }

  /* Hide Load, New, Email, PDF text - icons only */
  .proposal-header-actions .btn-proposal span:last-child:not(:first-child) {
    display: none;
  }

  /* Show only first span (icon) for most buttons */
  .proposal-header-actions > .btn-proposal:not(.btn-proposal-success):not(:last-child) span {
    font-size: 16px;
  }

  /* Keep Save button text visible */
  .proposal-header-actions .btn-proposal-success span:last-child {
    display: inline;
  }

  /* ----------------------------------------
     GULFSTREAM LOCATION CARDS - Mobile Stack
     ---------------------------------------- */
  .gulfstream-location-cards {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .gulfstream-location-card {
    padding: 16px;
  }

  .gulfstream-location-name {
    font-size: 15px;
  }

  .gulfstream-contact-row {
    flex-direction: column;
    gap: 12px;
  }

  .gulfstream-contact {
    width: 100%;
  }
}

@media (max-width: 480px) {
  /* Analytics grid - single column on very small screens */
  .analytics-grid {
    grid-template-columns: 1fr;
  }

  /* Modal close button repositioned for easier thumb reach */
  .modal-close {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
  }
}