@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

.font-poppins {
    font-family: 'Poppins', sans-serif;
}

/* index.css */

/* ... (previous styles) ... */

@media print {
    @page { 
        size: A4; 
        margin: 0mm; 
    }
    
    html, body { 
        width: 210mm !important; 
        height: auto !important; 
        background: #fff !important; 
        color: #000 !important; 
        font-size: 10pt !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    * {
        box-sizing: border-box !important;
    }

    .no-print, .no-print-in-modal { display: none !important; }
    .print-only { display: block !important; }

    /* Employee Form Printing */
    body.is-printing-employee-form #root {
        display: none !important;
    }

    body.is-printing-employee-form .printable-induction-form,
    body.is-printing-employee-form .printable-employee-form {
        display: block !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 210mm !important;
    }
    
    .printable-document {
        width: 210mm !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    #root {
        width: 210mm !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Target pages specifically for induction form */
    .print-page {
        page-break-after: always !important;
        page-break-inside: avoid !important;
        /* Use 296mm instead of 297mm to prevent rounding issues causing blank pages */
        height: 296mm !important; 
        width: 210mm !important;
        padding: 15mm 20mm 20mm 20mm !important; /* Increased bottom padding for fit */
        position: relative;
        overflow: hidden;
        background: white !important;
        display: flex;
        flex-direction: column;
        margin: 0 !important;
    }

    /* Ensure the last page doesn't trigger a trailing blank page */
    .print-page:last-child,
    .printable-induction-form .print-page:last-of-type {
        page-break-after: auto !important;
    }

    /* Prevent cutting off long text */
    pre, blockquote, p {
        orphans: 3;
        widows: 3;
    }
}

/* Base styles continued ... */

.mask-security {
    -webkit-text-security: disc;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: #334155;
}

.animate-fade-in-fast {
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-slide-down {
    animation: slideDown 0.2s ease-out forwards;
}

/* Customizer styles */
.is-in-customizer [data-customizer-section] {
    cursor: pointer;
    position: relative;
    transition: outline 0.2s ease-in-out;
}

.is-in-customizer [data-customizer-section]:hover {
    outline: 2px dashed #f2b007;
    outline-offset: -2px;
}

.is-in-customizer .customizer-highlight {
    outline: 2px solid #3b82f6 !important;
    outline-offset: -2px;
    background-color: rgba(59, 130, 246, 0.05);
}

.is-in-customizer .interactive-element-wrapper {
    outline: 1px dashed rgba(59, 130, 246, 0.3);
    outline-offset: 1px;
}

.is-in-customizer .interactive-element-wrapper:hover {
    outline: 2px solid #3b82f6;
    outline-offset: 0;
}

.is-in-customizer .is-dragging {
    opacity: 0.8;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    cursor: grabbing;
}

.is-in-customizer .drop-target-hover {
    background-color: rgba(242, 176, 7, 0.1) !important;
    outline: 2px solid #f2b007 !important;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
  font-size: 24px !important;
  display: inline-block;
  vertical-align: middle;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }

.is-in-customizer .resize-handle {
    user-select: none;
}

/* Hide Google Translate Banner and Top Bar */
.goog-te-banner-frame.skiptranslate,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-te-menu-frame,
.goog-te-menu-value,
#translate-bar,
.goog-te-spinner-pos,
.skiptranslate[style*="top"] {
    display: none !important;
}

body {
    top: 0 !important;
    position: static !important;
}

iframe.VIpgJc-y69Pmc-L606Q-fi1wS {
    display: none !important;
}
#google_translate_element select {
    width: 100%;
    padding: 0.25rem;
    border-radius: 0.25rem;
    border: 1px solid #e2e8f0;
    background-color: white;
    color: #1e293b;
    font-size: 0.875rem;
}
.dark #google_translate_element select {
    background-color: #1e293b;
    border-color: #334155;
    color: white;
}
.no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }