/* ===== General Styles ===== */
.text-muted[data-v-22141a4c] {
  color: #6c757d !important;
  font-size: 0.875rem;
}
.clickable[data-v-22141a4c] {
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.clickable[data-v-22141a4c]:hover {
  opacity: 0.7;
}

/* ===== Branch List Styles ===== */
.v-list-item[data-v-22141a4c] {
  min-height: 36px;
}
.v-list-item__title[data-v-22141a4c] {
  font-size: 0.875rem;
}
.v-select__selection[data-v-22141a4c] {
  font-weight: 500;
}
.branch-item-level-1[data-v-22141a4c] {
  padding-left: 24px;
}
.branch-item-level-2[data-v-22141a4c] {
  padding-left: 48px;
}
.branch-item-level-3[data-v-22141a4c] {
  padding-left: 72px;
}
.v-menu__content[data-v-22141a4c] {
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.v-list-item--highlighted[data-v-22141a4c] {
  background-color: #f5f5f5;
}

/* ===== Compact Zones Dialog Styles ===== */
.zones-dialog-compact[data-v-22141a4c] {
  border-radius: 12px !important;
  overflow: hidden;
  font-family: "Roboto", "Arial", sans-serif;
}
.compact-toolbar[data-v-22141a4c] {
  height: 48px !important;
  background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%) !important;
}
.compact-toolbar .v-toolbar__title[data-v-22141a4c] {
  font-size: 1rem !important;
  font-weight: 700 !important;
}
.compact-toolbar .v-btn[data-v-22141a4c] {
  color: white !important;
}
.compact-toolbar .v-chip[data-v-22141a4c] {
  background-color: white !important;
  color: #1e88e5 !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
}
.compact-content[data-v-22141a4c] {
  background-color: #f8f9fa;
  max-height: 500px;
  overflow-y: auto;
}

/* ===== Period Section Styles ===== */
.compact-period-section[data-v-22141a4c] {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e3f2fd;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}
.compact-period-section[data-v-22141a4c]:hover {
  box-shadow: 0 4px 16px rgba(30, 136, 229, 0.2);
  transform: translateY(-2px);
}
.compact-period-header[data-v-22141a4c] {
  background: linear-gradient(135deg, #42a5f5 0%, #1e88e5 100%);
}
.compact-period-header span[data-v-22141a4c] {
  font-size: 0.938rem !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* ===== Zones Table Styles ===== */
.compact-zones-table[data-v-22141a4c] {
  background: white;
}
.compact-zone-row[data-v-22141a4c] {
  border-bottom: 1px solid #e3f2fd;
  transition: all 0.2s ease;
  padding: 8px;
}
.compact-zone-row[data-v-22141a4c]:hover {
  background-color: #f3f8fc !important;
}
.compact-zone-row.primary-row[data-v-22141a4c] {
  background: linear-gradient(90deg, #e3f2fd 0%, #bbdefb 100%) !important;
  border-left: 4px solid #1e88e5;
}
.compact-zone-row[data-v-22141a4c]:last-child {
  border-bottom: none;
}

/* ===== Input Fields Styles ===== */
.compact-input[data-v-22141a4c] .v-input__control {
  min-height: 36px !important;
}
.compact-input[data-v-22141a4c] .v-text-field__details {
  display: none;
}
.compact-input[data-v-22141a4c] input {
  font-size: 0.938rem !important;
  font-weight: 600 !important;
  padding: 8px 10px;
  color: #212529 !important;
}
.compact-input[data-v-22141a4c] .v-select__selection {
  font-size: 0.938rem !important;
  font-weight: 600 !important;
  color: #212529 !important;
}
.compact-input[data-v-22141a4c] .v-select__selection .text-truncate {
  font-weight: 600 !important;
}
.compact-input[data-v-22141a4c] .v-input__slot {
  background-color: #ffffff !important;
  border-color: #e1e8ed !important;
}
.compact-input[data-v-22141a4c] .v-input__slot:hover {
  border-color: #90caf9 !important;
}
.compact-input[data-v-22141a4c] label {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #495057 !important;
}
.compact-input[data-v-22141a4c] fieldset {
  border-color: #e1e8ed !important;
  border-width: 1.5px !important;
  transition: border-color 0.2s ease;
}
.compact-input[data-v-22141a4c] .v-input--is-focused fieldset {
  border-color: #64b5f6 !important;
  border-width: 2px !important;
}
.compact-input[data-v-22141a4c] .v-icon {
  color: #64b5f6 !important;
}
.compact-input input[type="number"][data-v-22141a4c] {
  text-align: center;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #1e88e5 !important;
}

/* ===== تكبير الخط في حقول الإدخال - محسّن ===== */

/* تكبير الخط في حقل الأولوية (الرقم) */
.compact-zone-row .v-text-field input[type="number"][data-v-22141a4c],
.compact-incomplete-row .v-text-field input[type="number"][data-v-22141a4c] {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #1e88e5 !important;
  text-align: center;
}

/* تكبير الخط في حقل اختيار المنطقة */
.compact-zone-row .v-autocomplete input[data-v-22141a4c],
.compact-zone-row .v-autocomplete .v-select__selection[data-v-22141a4c],
.compact-incomplete-row .v-autocomplete input[data-v-22141a4c],
.compact-incomplete-row .v-autocomplete .v-select__selection[data-v-22141a4c] {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: #212529 !important;
}

/* تكبير الخط في القائمة المنسدلة */
.compact-zone-row .v-list-item__title[data-v-22141a4c],
.compact-incomplete-row .v-list-item__title[data-v-22141a4c] {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
}

/* تكبير Labels */
.compact-zone-row .v-label[data-v-22141a4c],
.compact-incomplete-row .v-label[data-v-22141a4c] {
  font-size: 1rem !important;
  font-weight: 600 !important;
}

/* تكبير النص داخل الـ chips */
.compact-zone-row .v-chip[data-v-22141a4c],
.compact-incomplete-row .v-chip[data-v-22141a4c] {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
}

/* تكبير النص داخل span.text-truncate */
.compact-zone-row .text-truncate[data-v-22141a4c],
.compact-incomplete-row .text-truncate[data-v-22141a4c] {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
}

/* تكبير placeholder */
.compact-zone-row .v-text-field input[data-v-22141a4c]::-moz-placeholder, .compact-incomplete-row .v-text-field input[data-v-22141a4c]::-moz-placeholder, .compact-zone-row .v-autocomplete input[data-v-22141a4c]::-moz-placeholder, .compact-incomplete-row .v-autocomplete input[data-v-22141a4c]::-moz-placeholder {
  font-size: 1rem !important;
}
.compact-zone-row .v-text-field input[data-v-22141a4c]::placeholder,
.compact-incomplete-row .v-text-field input[data-v-22141a4c]::placeholder,
.compact-zone-row .v-autocomplete input[data-v-22141a4c]::placeholder,
.compact-incomplete-row .v-autocomplete input[data-v-22141a4c]::placeholder {
  font-size: 1rem !important;
}

/* ===== Incomplete Zones Section ===== */
.compact-incomplete-section[data-v-22141a4c] {
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #ffb74d;
  background: white;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.15);
  transition: all 0.3s ease;
}
.compact-incomplete-section[data-v-22141a4c]:hover {
  box-shadow: 0 4px 16px rgba(255, 152, 0, 0.25);
}
.compact-incomplete-header[data-v-22141a4c] {
  background: linear-gradient(135deg, #ffa726 0%, #ff9800 100%);
}
.compact-incomplete-header span[data-v-22141a4c] {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.compact-incomplete-row[data-v-22141a4c] {
  border-bottom: 1px dashed #ffe0b2;
  background-color: #fffaf0;
  padding: 8px;
}
.compact-incomplete-row[data-v-22141a4c]:last-child {
  border-bottom: none;
}
.compact-incomplete-row[data-v-22141a4c]:hover {
  background-color: #fff3e0 !important;
}

/* ===== Empty State Styles ===== */
.compact-empty-state[data-v-22141a4c] {
  text-align: center;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 8px;
  border: 2px dashed #dee2e6;
}
.compact-empty-state .caption[data-v-22141a4c] {
  font-size: 0.938rem !important;
  font-weight: 600 !important;
}

/* ===== Delete Button Styles - واضح جداً ===== */
.delete-btn-prominent[data-v-22141a4c] {
  background: linear-gradient(135deg, #f44336 0%, #e53935 100%) !important;
  color: white !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  border: 3px solid white !important;
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.6) !important;
  transition: all 0.3s ease !important;
  position: relative;
}
.delete-btn-prominent .v-icon[data-v-22141a4c] {
  color: white !important;
  font-size: 24px !important;
  font-weight: 900 !important;
}
.delete-btn-prominent[data-v-22141a4c]:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #c62828 100%) !important;
  transform: rotate(90deg) scale(1.15);
  border-color: #ffebee !important;
  box-shadow: 0 6px 20px rgba(244, 67, 54, 0.8) !important;
}
.delete-btn-prominent[data-v-22141a4c]:active {
  transform: rotate(90deg) scale(0.95);
  box-shadow: 0 2px 8px rgba(244, 67, 54, 0.5) !important;
}

/* تأثير الخلفية الدائرية */
.delete-btn-prominent[data-v-22141a4c]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background: rgba(244, 67, 54, 0.15);
  border-radius: 50%;
  z-index: -1;
  transition: all 0.3s ease;
}
.delete-btn-prominent[data-v-22141a4c]:hover::before {
  width: 60px;
  height: 60px;
  background: rgba(244, 67, 54, 0.25);
}

/* تأثير التوهج المستمر */
@keyframes glowRed-22141a4c {
0%,
  100% {
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.6);
}
50% {
    box-shadow: 0 4px 20px rgba(244, 67, 54, 0.9),
      0 0 30px rgba(244, 67, 54, 0.4);
}
}
.compact-zone-row:hover .delete-btn-prominent[data-v-22141a4c],
.compact-incomplete-row:hover .delete-btn-prominent[data-v-22141a4c] {
  animation: glowRed-22141a4c 2s infinite;
}

/* ===== Add Zone Button ===== */
.compact-content .v-btn.success[data-v-22141a4c] {
  background: linear-gradient(135deg, #66bb6a 0%, #43a047 100%) !important;
  color: white !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  text-transform: none;
  letter-spacing: 0.5px;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3) !important;
  transition: all 0.3s ease !important;
}
.compact-content .v-btn.success[data-v-22141a4c]:hover {
  background: linear-gradient(135deg, #81c784 0%, #66bb6a 100%) !important;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.5) !important;
  transform: translateY(-2px);
}

/* ===== Save and Cancel Buttons ===== */
.v-card__actions .v-btn.success[data-v-22141a4c] {
  background: linear-gradient(135deg, #66bb6a 0%, #43a047 100%) !important;
  color: white !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3) !important;
}
.v-card__actions .v-btn.success[data-v-22141a4c]:hover {
  background: linear-gradient(135deg, #81c784 0%, #66bb6a 100%) !important;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.5) !important;
}
.v-card__actions .v-btn[data-v-22141a4c]:not(.success) {
  color: #757575 !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  border-radius: 8px !important;
}
.v-card__actions .v-btn[data-v-22141a4c]:not(.success):hover {
  background-color: #f5f5f5 !important;
}

/* ===== Checkbox Styles ===== */
.compact-zone-row .v-input--selection-controls[data-v-22141a4c] {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.compact-zone-row .v-input--checkbox .v-input__slot[data-v-22141a4c] {
  background-color: transparent !important;
  border: none !important;
}

/* ===== Scrollbar Styles ===== */
.compact-content[data-v-22141a4c]::-webkit-scrollbar {
  width: 8px;
}
.compact-content[data-v-22141a4c]::-webkit-scrollbar-track {
  background: #f1f3f5;
  border-radius: 4px;
}
.compact-content[data-v-22141a4c]::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #90caf9 0%, #64b5f6 100%);
  border-radius: 4px;
}
.compact-content[data-v-22141a4c]::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #64b5f6 0%, #42a5f5 100%);
}

/* ===== Animations ===== */
@keyframes fadeIn-22141a4c {
from {
    opacity: 0;
    transform: translateY(10px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.compact-period-section[data-v-22141a4c],
.compact-incomplete-section[data-v-22141a4c],
.compact-empty-state[data-v-22141a4c] {
  animation: fadeIn-22141a4c 0.3s ease;
}

/* ===== Responsive Design ===== */
@media (max-width: 960px) {
.compact-content[data-v-22141a4c] {
    max-height: 450px;
}
.compact-period-header[data-v-22141a4c],
  .compact-incomplete-header[data-v-22141a4c] {
    font-size: 0.875rem;
}
.compact-zone-row .v-autocomplete input[data-v-22141a4c],
  .compact-zone-row .v-autocomplete .v-select__selection[data-v-22141a4c],
  .compact-incomplete-row .v-autocomplete input[data-v-22141a4c],
  .compact-incomplete-row .v-autocomplete .v-select__selection[data-v-22141a4c] {
    font-size: 1rem !important;
}
.compact-zone-row .v-text-field input[type="number"][data-v-22141a4c],
  .compact-incomplete-row .v-text-field input[type="number"][data-v-22141a4c] {
    font-size: 1.125rem !important;
}
.delete-btn-prominent[data-v-22141a4c] {
    width: 38px !important;
    height: 38px !important;
}
.delete-btn-prominent .v-icon[data-v-22141a4c] {
    font-size: 20px !important;
}
}
@media (max-width: 600px) {
.compact-content[data-v-22141a4c] {
    max-height: 400px;
}
.compact-zone-row .v-col[data-v-22141a4c],
  .compact-incomplete-row .v-col[data-v-22141a4c] {
    padding: 2px !important;
}
.compact-zone-row .v-autocomplete input[data-v-22141a4c],
  .compact-zone-row .v-autocomplete .v-select__selection[data-v-22141a4c],
  .compact-incomplete-row .v-autocomplete input[data-v-22141a4c],
  .compact-incomplete-row .v-autocomplete .v-select__selection[data-v-22141a4c] {
    font-size: 0.938rem !important;
}
.compact-zone-row .v-text-field input[type="number"][data-v-22141a4c],
  .compact-incomplete-row .v-text-field input[type="number"][data-v-22141a4c] {
    font-size: 1rem !important;
}
.delete-btn-prominent[data-v-22141a4c] {
    width: 36px !important;
    height: 36px !important;
}
.delete-btn-prominent .v-icon[data-v-22141a4c] {
    font-size: 18px !important;
}
}

/* ===== General Text Styles ===== */
.compact-content *[data-v-22141a4c] {
  letter-spacing: 0.3px;
}

/* ===== Hover Effects ===== */
.compact-zone-row:hover .v-btn.error[data-v-22141a4c] {
  box-shadow: 0 5px 16px rgba(244, 67, 54, 0.7) !important;
}
.compact-incomplete-row:hover .v-btn.error[data-v-22141a4c] {
  box-shadow: 0 5px 16px rgba(244, 67, 54, 0.7) !important;
}

/* ===== Button Content Alignment ===== */
.delete-btn-prominent .v-btn__content[data-v-22141a4c] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Theme Support ===== */
.theme--dark .compact-zone-row .v-btn.error[data-v-22141a4c],
.theme--dark .compact-incomplete-row .v-btn.error[data-v-22141a4c] {
  background: linear-gradient(135deg, #f44336 0%, #e53935 100%) !important;
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.7) !important;
}

/* ===== Deleted Zone Styles ===== */
.compact-zone-row[data-deleted="true"][data-v-22141a4c] {
  background: linear-gradient(90deg, #ffebee 0%, #ffcdd2 100%) !important;
  border-left: 4px solid #f44336;
}
.error--text[data-v-22141a4c] {
  color: #f44336 !important;
  font-weight: 600 !important;
}

/* ===== Deleted Zone Chip ===== */
.v-chip.error[data-v-22141a4c] {
  background: linear-gradient(135deg, #f44336 0%, #e53935 100%) !important;
  color: white !important;
  font-weight: 700 !important;
  font-size: 0.688rem !important;
  padding: 2px 6px !important;
  height: 18px !important;
}
.compact-zone-row[data-deleted="true"][data-v-22141a4c] {
  background: linear-gradient(90deg, #fff8e1 0%, #ffecb3 100%) !important;
  border-left: 4px solid #ffa726;
}
.deleted-zone-input[data-v-22141a4c] .v-input__slot {
  background-color: #fffaf0 !important;
  border-color: #ffa726 !important;
}
.deleted-zone-text[data-v-22141a4c] {
  color: #e65100 !important;
  font-weight: 600 !important;
}

/* ===== Warning Icon Style ===== */
.mdi-alert-circle[data-v-22141a4c],
.mdi-information[data-v-22141a4c] {
  animation: pulse-22141a4c 2s infinite;
}
@keyframes pulse-22141a4c {
0%, 100% {
    opacity: 1;
}
50% {
    opacity: 0.5;
}
}

/* ===== Autocomplete Item Hover ===== */
.v-list-item:hover .grey--text[data-v-22141a4c] {
  color: #616161 !important;
}