:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 240 10% 3.9%;
  --radius: 0.5rem;
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 240 4.9% 83.9%;
}

body {
  font-family: "Inter", sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: hsl(var(--background));
}
::-webkit-scrollbar-thumb {
    background: hsl(var(--muted-foreground) / 0.5);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground));
}

@media print {
    /* Global Resets */
    *, *::before, *::after {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* Hide Navigation & UI Elements */
    nav, 
    header, 
    footer, 
    .no-print, 
    button, 
    .btn, 
    input[type="file"], 
    .bi-pencil, 
    .bi-trash, 
    .bi-x, 
    .bi-cloud-upload,
    #upload-area, 
    #photo-count,
    [role="alert"],
    [role="dialog"],
    .modal,
    #toast-container,
    .debug-grid-overlay,
    .tox-toolbar, /* TinyMCE toolbar if present */
    .tox-statusbar,
    select /* Hide selects, maybe replace with selected value text via JS if needed, but for now just hide dropdown arrow styling */
    {
        display: none !important;
    }

    /* Hide Select arrow specifically */
    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important;
        font-weight: bold;
    }

    /* Body & Page Setup */
    body {
        margin: 0;
        padding: 0;
        background-color: white !important;
        color: black !important;
        font-family: "Times New Roman", Times, serif; /* Professional Serif for Print */
        font-size: 12pt;
        line-height: 1.3;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    @page {
        margin: 2cm;
        size: A4;
    }

    /* Layout Adjustments */
    .container, .container-fluid, .grid {
        display: block !important; /* Stack grid items */
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Force full width for scrolling containers */
    .overflow-x-auto, .overflow-y-auto {
        overflow: visible !important;
        width: 100% !important;
        display: block !important;
    }

    /* Card Resets */
    .card, .bg-white, .bg-gray-50, .dark\:bg-gray-800, .dark\:bg-gray-900\/50, .shadow, .rounded-lg, .border {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin-bottom: 20px !important;
        color: black !important;
    }

    /* Typography */
    h1, h2, h3, h4, h5, h6 {
        color: black !important;
        page-break-after: avoid;
        margin-top: 1.5em;
        margin-bottom: 0.5em;
        font-weight: bold;
        text-transform: uppercase;
        border-bottom: 1px solid #000;
        padding-bottom: 5px;
    }
    
    p, td, li {
        color: black !important;
    }

    /* Links */
    a {
        text-decoration: none !important;
        color: black !important;
    }
    
    /* Tables */
    table {
        width: 100% !important;
        border-collapse: collapse !important;
        margin-bottom: 1em;
        font-size: 10pt;
    }
    
    th, td {
        border: 1px solid #000 !important;
        padding: 6px !important;
        text-align: left;
        vertical-align: top;
    }
    
    th {
        background-color: #f0f0f0 !important;
        font-weight: bold;
    }

    /* Odontogram Specifics */
    #odontogram-container {
        border: 1px solid #000 !important;
        padding: 10px !important;
        page-break-inside: avoid;
        margin-bottom: 20px;
        background: white !important;
    }
    
    /* Ensure colors print for odontogram */
    .odontogram-tooth {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Gallery Grid */
    #gallery-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }
    #gallery-grid img {
        border: 1px solid #ddd;
    }

    /* Form Elements as Text */
    textarea {
        border: none !important;
        resize: none;
        width: 100%;
        height: auto;
        overflow: visible;
        background: transparent !important;
    }

    /* Custom Print Header */
    .print-header {
        display: block !important;
        text-align: center;
        margin-bottom: 30px;
        border-bottom: 3px double black;
        padding-bottom: 20px;
    }
    
    .print-footer {
        display: block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        font-size: 9pt;
        border-top: 1px solid #ccc;
        padding-top: 10px;
        background: white;
    }

    /* Odontogram Print Fixes */
    #odontogram-container {
        overflow: visible !important;
        border: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        /* Remove transform scaling, use tooth resizing instead for sharper text */
    }
    
    .tooth-row {
        width: 100% !important;
        justify-content: center !important;
        min-width: 0 !important;
    }

    .odontogram-tooth {
        width: 28px !important;
        height: 28px !important;
        font-size: 10px !important;
        border-width: 1px !important;
    }
    
    .tooth-quadrant {
        gap: 2px !important;
    }
    
    /* 8 teeth * 28px + 7 gaps * 2px = 224 + 14 = 238px */
    .child-row .tooth-quadrant:first-child,
    .child-row .tooth-quadrant:last-child,
    .adult-row .tooth-quadrant {
        width: 238px !important;
    }
    
    .tooth-separator {
        font-size: 18px !important;
        margin: 0 5px !important;
    }

    /* Hide scrollbars in print */
    ::-webkit-scrollbar {
        display: none !important;
    }
}

/* Odontogram Styles */
#odontogram-container {
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    /* align-items: center; REMOVED to prevent left-clipping on overflow */
}
.dark #odontogram-container {
    background-color: #1f2937; /* gray-800 */
}

.tooth-row {
    display: flex;
    /* justify-content: center; REMOVED to prevent left-clipping */
    align-items: stretch;
    gap: 10px;
    margin-bottom: 10px;
    margin-left: auto;  /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    min-width: max-content; /* Ensure row doesn't shrink below content width */
}

.tooth-quadrant {
    display: flex;
    gap: 4px;
}

/* Align child teeth quadrants to the center (separator) */
.child-row .tooth-quadrant:first-child {
    justify-content: flex-end;
    width: 316px; /* 8 teeth * (36px width + 4px gap) - 4px = 316px. Matches adult width */
}
.child-row .tooth-quadrant:last-child {
    justify-content: flex-start;
    width: 316px;
}
.adult-row .tooth-quadrant {
    width: 316px;
}

.tooth-separator {
    font-size: 24px;
    font-weight: bold;
    color: #cbd5e1; /* slate-300 */
    margin: 0 10px;
    display: flex;
    align-items: center;
}

.odontogram-tooth {
    width: 36px;
    height: 36px;
    border: 1px solid #94a3b8; /* slate-400 */
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    color: #475569; /* slate-600 */
    background-color: #f8fafc; /* slate-50 */
    transition: all 0.2s;
    user-select: none;
    position: relative;
}
.dark .odontogram-tooth {
    background-color: #374151; /* gray-700 */
    border-color: #4b5563; /* gray-600 */
    color: #d1d5db; /* gray-300 */
}

.odontogram-tooth:hover {
    border-color: #3b82f6; /* blue-500 */
    background-color: #eff6ff; /* blue-50 */
    transform: translateY(-2px);
}
.dark .odontogram-tooth:hover {
    background-color: #1e3a8a; /* blue-900 */
    border-color: #60a5fa; /* blue-400 */
}

.odontogram-tooth.selected {
    border-color: #2563eb; /* blue-600 */
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
    z-index: 10;
    transform: scale(1.1);
}

/* Conditions */
.odontogram-tooth.cond-caries {
    background-color: #fee2e2; /* red-100 */
    color: #b91c1c; /* red-700 */
    border-color: #f87171; /* red-400 */
}
.dark .odontogram-tooth.cond-caries {
    background-color: #7f1d1d; /* red-900 */
    color: #fca5a5; /* red-300 */
}

.odontogram-tooth.cond-filling {
    background-color: #dcfce7; /* green-100 */
    color: #15803d; /* green-700 */
    border-color: #4ade80; /* green-400 */
}
.dark .odontogram-tooth.cond-filling {
    background-color: #14532d; /* green-900 */
    color: #86efac; /* green-300 */
}

.odontogram-tooth.cond-missing {
    background-color: #f1f5f9; /* slate-100 */
    color: #94a3b8; /* slate-400 */
    background-image: linear-gradient(45deg, transparent 48%, #94a3b8 48%, #94a3b8 52%, transparent 52%), linear-gradient(-45deg, transparent 48%, #94a3b8 48%, #94a3b8 52%, transparent 52%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.dark .odontogram-tooth.cond-missing {
    background-color: #1f2937; /* gray-800 */
    background-image: linear-gradient(45deg, transparent 48%, #6b7280 48%, #6b7280 52%, transparent 52%), linear-gradient(-45deg, transparent 48%, #6b7280 48%, #6b7280 52%, transparent 52%);
}

.odontogram-tooth.cond-crown {
    background-color: #fef9c3; /* yellow-100 */
    color: #854d0e; /* yellow-800 */
    border-color: #facc15; /* yellow-400 */
}
.dark .odontogram-tooth.cond-crown {
    background-color: #713f12; /* yellow-900 */
    color: #fde047; /* yellow-300 */
}

/* Debug Grid Overlay */
.debug-grid-overlay .odontogram-tooth {
    outline: 1px dashed red;
}