.vet-indoor-wrapper{
  margin-bottom: 40px;  
}


.vet-indoor-cards-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 32px;
}
@media (max-width: 768px) {
#vet-indoor-add-btn{
    position: fixed !important;

    bottom: 0px !important;

    left: 0px !important;

    right: 0px !important;

    padding: 20px !important; /* Added padding */

    font-size: 18px !important; /* Bigger text */

    height: 10px !important; /* Fixed height */

    background-color: #007bff !important; /* Make it stand out */

    color: white !important;

    border: none !important;

    cursor: pointer !important;

    z-index: 1000 !important; /* Ensure it's on top */
}
}

.vet-indoor-card {
    flex: 1 1 120px;
    min-width: 110px;
    max-width: 180px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 18px 12px 16px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    transition: transform .15s, box-shadow .15s;
}
.vet-indoor-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,.1);
}

.vet-indoor-card-icon {
    font-size: 24px;
    margin-bottom: 6px;
}
.vet-indoor-card-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: #1f2937;
}
.vet-indoor-card-label {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* card colour accents – top border */
.vet-indoor-card-total        { border-top: 3px solid #3b82f6; }
.vet-indoor-card-emergency    { border-top: 3px solid #ef4444; }
.vet-indoor-card-critical     { border-top: 3px solid #f59e0b; }
.vet-indoor-card-normal       { border-top: 3px solid #8b5cf6; }
.vet-indoor-card-stable       { border-top: 3px solid #10b981; }
.vet-indoor-card-discharged   { border-top: 3px solid #6366f1; }
.vet-indoor-card-dead         { border-top: 3px solid #6b7280; }

/* paravet personal cards – slightly smaller on wide screens */
.vet-paravet-cards .vet-indoor-card { max-width: 160px; }

/* ─────────────────────────────────────────────────────────────────
   3.  DASHBOARD – RECENT PATIENTS TABLE
   ───────────────────────────────────────────────────────────────── */
.vet-indoor-recent-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.vet-indoor-recent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
}
.vet-indoor-recent-header h3 {
    margin: 0;
    font-size: 16px;
    color: #1f2937;
}

.vet-indoor-table {
    width: 100%;
    border-collapse: collapse;
}
.vet-indoor-table th {
    text-align: left;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .4px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}
.vet-indoor-table td {
    padding: 10px 16px;
    font-size: 13px;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    white-space: nowrap;
}
.vet-indoor-table tr:last-child td { border-bottom: none; }
.vet-indoor-table tr:hover td { background: #f0f7ff; }

/* ─────────────────────────────────────────────────────────────────
   4.  PATIENT CARDS – left-border accent for urgency
   ───────────────────────────────────────────────────────────────── */
.vet-indoor-card-border-emergency {
    border-left: 4px solid #ef4444 !important;
    background: #fef2f2;
}
.vet-indoor-card-border-critical {
    border-left: 4px solid #f59e0b !important;
    background: #fffbeb;
}

/* ─────────────────────────────────────────────────────────────────
   5.  CONDITION & STATUS BADGES
   ───────────────────────────────────────────────────────────────── */
.vet-indoor-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

/* condition */
.vet-indoor-badge-emergency { background: #fecaca; color: #991b1b; }
.vet-indoor-badge-critical  { background: #fde68a; color: #92400e; }
.vet-indoor-badge-normal    { background: #ede9fe; color: #5b21b6; }
.vet-indoor-badge-stable    { background: #d1fae5; color: #065f46; }

/* status */
.vet-indoor-badge-status-indoor     { background: #dbeafe; color: #1e40af; }
.vet-indoor-badge-status-discharged { background: #e0e7ff; color: #3730a3; }
.vet-indoor-badge-status-closed     { background: #f3f4f6; color: #374151; }
.vet-indoor-badge-status-dead       { background: #e5e7eb; color: #4b5563; }

/* ─────────────────────────────────────────────────────────────────
   6.  DISCHARGE ACTION BUTTONS (on each card)
   ───────────────────────────────────────────────────────────────── */
.vet-indoor-discharge-actions {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}


.vet-btn-discharge {
    background: #3b82f6; color: #fff; border: none;
    border-radius: 5px; padding: 6px 12px; font-size: 12px;
    cursor: pointer; transition: background .15s;
    flex: 1 1 auto;
    min-width: 70px;
    text-align: center;
}
.vet-btn-discharge:hover { background: #2563eb; }

.vet-btn-dead {
    background: #6b7280; color: #fff; border: none;
    border-radius: 5px; padding: 6px 12px; font-size: 12px;
    cursor: pointer; transition: background .15s;
    flex: 1 1 auto;
    min-width: 70px;
    text-align: center;
}
.vet-btn-dead:hover { background: #4b5563; }

.vet-btn-closed {
    background: #8b5cf6; color: #fff; border: none;
    border-radius: 5px; padding: 6px 12px; font-size: 12px;
    cursor: pointer; transition: background .15s;
    flex: 1 1 auto;
    min-width: 70px;
    text-align: center;
}
.vet-btn-closed:hover { background: #7c3aed; }

/* ─────────────────────────────────────────────────────────────────
   7.  FORM POPUP – wider max-width for 3 steps
   ───────────────────────────────────────────────────────────────── */
.vet-indoor-form-popup-content {
    max-width: 680px;
    width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
}

/* Two-column grid for compact form fields (age, weight, etc.) */
.vet-form-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

/* Full-width for fields that need more space */
.vet-form-full-width {
    grid-column: 1 / -1;
}

/* ─────────────────────────────────────────────────────────────────
   8.  STEP PROGRESS BAR  (reuses .vet-step but needs indoor colours)
   ───────────────────────────────────────────────────────────────── */
.vet-step-progress {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 0 0 24px;
    position: relative;
}
.vet-step-progress::before {
    content: '';
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: #e5e7eb;
    z-index: 0;
}
.vet-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    flex: 1;
    max-width: 160px;
}
.vet-step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s, color .25s;
}
.vet-step-label {
    font-size: 11px;
    color: #6b7280;
    margin-top: 5px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.vet-step.active .vet-step-number   { background: #3b82f6; color: #fff; }
.vet-step.active .vet-step-label    { color: #3b82f6; font-weight: 600; }
.vet-step.completed .vet-step-number { background: #10b981; color: #fff; }
.vet-step.completed .vet-step-label  { color: #10b981; }

/* ─────────────────────────────────────────────────────────────────
   9.  EXISTING-PET NOTIFICATION + GRID
   ───────────────────────────────────────────────────────────────── */
.vet-notification-box {
    border-radius: 8px;
    padding: 14px 16px;
    margin: 12px 0;
}
.vet-notification-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}
.vet-notification-info h4 { margin: 0 0 4px; font-size: 14px; }
.vet-notification-info p  { margin: 0 0 10px; font-size: 13px; }

.existing-pets-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}
.existing-pet-card {
    background: #fff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 12px;
    flex: 1 1 180px;
    max-width: 240px;
}
.pet-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.pet-card-header strong { font-size: 14px; color: #1e3a5f; }
.pet-species-badge {
    font-size: 11px;
    background: #dbeafe;
    color: #1e40af;
    padding: 2px 7px;
    border-radius: 12px;
    font-weight: 600;
}
.pet-card-details { font-size: 12px; color: #4b5563; line-height: 1.6; }
.pet-card-details .label { font-weight: 600; color: #374151; }

/* ─────────────────────────────────────────────────────────────────
  10.  LOCKED FIELD INDICATORS
   ───────────────────────────────────────────────────────────────── */
.indoor-field-locked {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
    cursor: not-allowed;
}
.indoor-lock-msg {
    display: block;
    color: #6b7280;
    font-size: 11px;
    margin-top: 3px;
}

/* ─────────────────────────────────────────────────────────────────
  11.  TREATMENT ROWS (Step 3)
   ───────────────────────────────────────────────────────────────── */
.vet-indoor-treatment-row {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 12px;
}
.vet-indoor-treatment-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.vet-indoor-treatment-row-num {
    font-size: 14px;
    color: #374151;
}

/* sub-panel shared base – shown/hidden by JS */
.vet-indoor-treatment-sub {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #d1d5db;
}

/* ─────────────────────────────────────────────────────────────────
  12.  VIEW POPUP – read-only detail layout
   ───────────────────────────────────────────────────────────────── */
.vet-indoor-view-header {
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.vet-indoor-view-header .vet-case-id {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
}

.vet-indoor-view-section {
    margin-bottom: 18px;
}
.vet-indoor-view-section h5 {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.vet-indoor-view-section p {
    margin: 0;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.5;
}

.vet-indoor-view-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px 16px;
    font-size: 13px;
    color: #374151;
}
.vet-indoor-view-label {
    font-weight: 600;
    color: #6b7280;
    margin-right: 4px;
}

/* Mobile-specific 2-column grid for Pet & Owner, Admission fields */
.vet-indoor-view-grid-mobile-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    font-size: 13px;
    color: #374151;
}

/* Action buttons inline for mobile */
.vet-indoor-view-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}
.vet-indoor-view-actions .vet-btn,
.vet-indoor-view-actions .vet-btn-sm {
    flex: 1 1 auto;
    min-width: 80px;
    text-align: center;
}

/* treatment items inside view popup */
.vet-indoor-treatment-item {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
}
.vet-indoor-treatment-item-header {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 5px;
}
.vet-indoor-treatment-item-body {
    font-size: 12px;
    color: #4b5563;
    line-height: 1.8;
}
.vet-indoor-treatment-item-body span {
    display: inline-block;
    background: #eef2ff;
    color: #3730a3;
    padding: 2px 7px;
    border-radius: 4px;
    margin-right: 4px;
    margin-bottom: 2px;
    font-size: 11.5px;
}
.vet-indoor-treatment-note {
    margin-top: 5px;
    font-size: 11.5px;
    color: #6b7280;
    font-style: italic;
}

/* status-change block at bottom of view */
.vet-indoor-status-change {
    background: #f3f4f6;
    border-radius: 8px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
}
.vet-indoor-status-change h5 { margin-bottom: 6px; }
.vet-indoor-status-change p  { margin: 4px 0 0; font-size: 13px; color: #4b5563; }

/* muted placeholder text */
.vet-indoor-muted {
    color: #9ca3af;
    font-style: italic;
    font-size: 13px;
}

/* ─────────────────────────────────────────────────────────────────
  13.  PARAVET TASK CARDS – inline treatment summary
   ───────────────────────────────────────────────────────────────── */
.pv-task-card { position: relative; }

.pv-task-section-header {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 8px 0 4px;
    border-top: 1px solid #e5e7eb;
    margin-top: 4px;
}

.pv-task-treatments {
    padding: 4px 0 2px;
}
.pv-task-treatment-item {
    font-size: 13px;
    color: #1f2937;
    padding: 6px 0;
    border-bottom: 1px solid #f3f4f6;
}
.pv-task-treatment-item:last-child { border-bottom: none; }
.pv-task-treatment-item strong { color: #3b82f6; }

.pv-task-treatment-detail {
    font-size: 12px;
    color: #4b5563;
    margin-top: 3px;
    line-height: 1.7;
}
.pv-task-treatment-detail span {
    display: inline-block;
    background: #eff6ff;
    color: #1e40af;
    padding: 1px 6px;
    border-radius: 4px;
    margin-right: 3px;
    margin-bottom: 2px;
}

.pv-task-note {
    font-size: 11.5px;
    color: #6b7280;
    font-style: italic;
    margin-top: 3px;
}

.pv-task-general-notes {
    font-size: 12px;
    color: #6b7280;
    background: #fefce8;
    border: 1px solid #fef08a;
    border-radius: 5px;
    padding: 7px 10px;
    margin-top: 8px;
    font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────
  14.  TOAST MESSAGES
   ───────────────────────────────────────────────────────────────── */
.vet-message {
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    margin-top: 12px;
    display: none;
}
.vet-message.vet-success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.vet-message.vet-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.vet-message.vet-info    { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }

/* ─────────────────────────────────────────────────────────────────
  15.  ACCORDION – Physical Examination (Step 3)
   ───────────────────────────────────────────────────────────────── */
.vet-accordion-header {
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}
.vet-accordion-icon {
    font-size: 12px;
    color: #6b7280;
    transition: transform .2s;
}
.vet-accordion-header.active .vet-accordion-icon {
    transform: rotate(180deg);
}
.vet-accordion-content {
    display: none;
    padding-top: 14px;
}

/* ─────────────────────────────────────────────────────────────────
  16.  PARAVET GRID – slightly tighter gap than base cases grid
   ───────────────────────────────────────────────────────────────── */
.vet-paravet-grid {
    gap: 14px;
}

.vet-case-card-actions {
  
  
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

/* ─────────────────────────────────────────────────────────────────
  17.  RESPONSIVE BREAKPOINTS
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .vet-indoor-cards-row .vet-indoor-card {
        flex: 1 1 calc(33% - 12px);
        max-width: none;
    }
    .vet-indoor-form-popup-content {
        max-width: 96vw;
        max-height: 95vh;
    }
    .vet-indoor-table {
        font-size: 12px;
    }
    .vet-indoor-table th,
    .vet-indoor-table td {
        padding: 8px 10px;
    }
    
    /* View popup - 2 columns for pet/owner/admission */
    .vet-indoor-view-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
    }
    
    
    
    
}

@media (max-width: 480px) {
    .vet-indoor-cards-row .vet-indoor-card {
        flex: 1 1 calc(50% - 6px);
    }
    
    /* Keep 2-column layout for view popup on mobile */
    .vet-indoor-view-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
        font-size: 12px;
    }
    
    .existing-pet-card {
        max-width: 100%;
    }
    .vet-indoor-recent-section {
        overflow-x: auto;
    }
    
    /* FULLSCREEN POPUP for Add/Edit Patient */
    .vet-indoor-form-popup-content {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    /* Ensure popup body scrolls properly in fullscreen */
    .vet-indoor-form-popup-content .vet-popup-body {
        max-height: calc(100vh - 140px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Two-column grid for compact fields (age, weight, vet, paravet) */
    .vet-form-grid-2col {
        grid-template-columns: 1fr 1fr;
        gap: 10px 12px;
    }
    
    /* Action buttons in rows */
    .vet-indoor-discharge-actions {
        gap: 8px;
    }
    .vet-indoor-discharge-actions button {
        min-width: 60px;
    }
    
    .vet-indoor-view-actions {
        gap: 8px;
    }
    .vet-indoor-view-actions .vet-btn,
    .vet-indoor-view-actions .vet-btn-sm {
        min-width: 60px;
        font-size: 11px;
        padding: 6px 10px;
    }
}




/* Default grid for form fields - 2 columns on desktop */
.vet-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

/* 3 columns on wide screens for treatment rows */
.vet-indoor-treatment-row .vet-form-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 12px;
}

/* Physical exam accordion - 3 columns on desktop */
.vet-accordion-content .vet-form-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 12px;
}

/* ─────────────────────────────────────────────────────────────────
   PATCH 2: MOBILE OPTIMIZATIONS (≤ 768px)
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    
    /* ═══ STEP PROGRESS - HORIZONTAL & COMPACT ═══ */
    .vet-step-progress {
        display: flex ;
        flex-direction: row ;
        justify-content: space-between ;
        align-items: center ;
        gap: 8px ;
        flex-wrap: nowrap ;
        overflow-x: auto ;
    }
    .vet-step-progress::before {
        width: 50%;
        top: 14px;
    }
    .vet-step {
        max-width: 100px;
    }
    .vet-step-number {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }
    .vet-step-label {
        font-size: 9px;
        margin-top: 3px;
    }
    
    /* ═══ FORM FIELDS - 2 COLUMNS ═══ */
    .vet-form-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px 12px;
    }
    
    /* Treatment rows - 2 columns on mobile */
    .vet-indoor-treatment-row .vet-form-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    /* Physical exam - 2 columns on mobile */
    .vet-accordion-content .vet-form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ─────────────────────────────────────────────────────────────────
   PATCH 3: SMALL MOBILE (≤ 480px)
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    
    /* Steps even more compact */
    .vet-step {
        max-width: 80px;
    }
    .vet-step-number {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
    .vet-step-label {
        font-size: 8px;
    }
    
    /* Physical exam - single column on very small screens */
    .vet-accordion-content .vet-form-grid {
        grid-template-columns: 1fr;
    }
}