/* Font Definitions */
@font-face {
    font-family: 'KhmerOS_battambang';
    src: url('/assets/fonts/KhmerOS_battambang.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KhmerOS_muollight';
    src: url('/assets/fonts/KhmerOS_muollight.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'times';
    src: url('/assets/fonts/times.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Times New Roman';
    src: url('/assets/fonts/Times New Roman.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Global Language Based Font Application */

/* Khmer Language - /km */
html[lang="km"], html[lang="kh"], .khmer-font {
    font-family: 'KhmerOS_battambang', sans-serif !important;
}

html[lang="km"] body, html[lang="kh"] body, body.khmer-font {
    font-family: 'KhmerOS_battambang', sans-serif !important;
}

html[lang="km"] h1, html[lang="km"] h2, html[lang="km"] h3, html[lang="km"] h4, html[lang="km"] h5, html[lang="km"] h6,
html[lang="kh"] h1, html[lang="kh"] h2, html[lang="kh"] h3, html[lang="kh"] h4, html[lang="kh"] h5, html[lang="kh"] h6,
.khmer-font h1, .khmer-font h2, .khmer-font h3, .khmer-font h4, .khmer-font h5, .khmer-font h6 {
    font-family: 'KhmerOS_muollight', serif !important;
}

/* English and others - /en, /cn, /ja, /fr... */
/* Default to 'times' if not Khmer */
html:not([lang="km"]):not([lang="kh"]) {
    font-family: 'times', 'Times New Roman', serif !important;
}

html:not([lang="km"]):not([lang="kh"]) body {
    font-family: 'times', 'Times New Roman', serif !important;
}

html:not([lang="km"]):not([lang="kh"]) h1, 
html:not([lang="km"]):not([lang="kh"]) h2, 
html:not([lang="km"]):not([lang="kh"]) h3, 
html:not([lang="km"]):not([lang="kh"]) h4, 
html:not([lang="km"]):not([lang="kh"]) h5, 
html:not([lang="km"]):not([lang="kh"]) h6 {
    font-family: 'times', 'Times New Roman', serif !important;
}

@import 'sweetalert2/dist/sweetalert2.min.css';
@import "./style.css";
@import "tailwindcss";

.grid-table-container { /* New container for the whole grid */
    border: 1px solid #ddd;
    background-color: #fff;
    overflow-x: auto; /* Allows horizontal scrolling */
    position: relative; /* Needed for sticky header */
}

.grid-table { /* This will be the direct grid parent */
    display: grid;
    /* grid-template-columns will be applied inline in JSX based on columns.length */
}

.grid-table-header, .grid-table-row {
    display: grid;
    /* grid-template-columns needs to be inherited or set here */
}

.grid-table-header {
    font-weight: bold;
    background-color: #f2f2f2;
    position: sticky; /* Make header sticky */
    top: 0;
    z-index: 10;
    background-color: #f9fafb;
    font-weight: 600;
    border-bottom: 1px solid #ddd; /* Add border for header */
}

.grid-table-row:hover {
    background-color: #f5f5f5;
}

.grid-table-cell {
    padding: 8px;
    border-right: 1px solid #eee; /* Lighter border between cells */
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
    min-height: 38px;
    display: flex;
    align-items: center;
}

/* Remove border-bottom from last cell in a row if grid-table-row has it */
.grid-table-row:not(:last-child) .grid-table-cell {
    border-bottom: 1px solid #ddd;
}

.grid-table-cell.actions {
    text-align: center;
    justify-content: center;
}

/* New Excel-like Table Styles */
.excel-table {
    @apply min-w-full divide-y divide-gray-200 border border-gray-300;
}

.excel-thead {
    @apply bg-gray-50 sticky top-0 z-10;
}

.excel-th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-300;
}

.excel-tbody {
    @apply bg-white divide-y divide-gray-200;
}

.excel-tr {
    @apply hover:bg-gray-50;
}

.excel-tr.deleted {
    @apply opacity-50 line-through;
}

.excel-td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 border-r border-gray-200;
}

.excel-td:last-child {
    @apply border-r-0;
}

/* Added styles for Preloader and Custom Cursor */
/* Font-family is now handled globally via lang attribute */

/* Preloader */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #111827; /* bg-gray-900 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}

#preloader.hidden {
    opacity: 0;
    pointer-events: none;
}

.spinner {
    margin: 100px auto;
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px;
}

.spinner > div {
    background-color: #4f46e5; /* A nice purple color */
    height: 100%;
    width: 6px;
    display: inline-block;
    margin-left: 2px;
    
    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
    20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
    0%, 40%, 100% { 
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }  20% { 
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}


/* Custom Cursor */
.custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border: 2px solid white;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 10000;
    transition: width 0.3s, height 0.3s, background-color 0.3s;
}

.custom-cursor .cursor-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: black;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s;
}

.custom-cursor.hover {
    width: 60px;
    height: 60px;
    background-color: white;
}

.custom-cursor.hover .cursor-text {
    opacity: 1;
}

/* Hide default cursor on the body */
body {
    cursor: auto !important;
}

/* ---------------------------------- */
/* -- NEW MODERN DASHBOARD STYLES -- */
/* ---------------------------------- */

/* Keyframe Animations */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Main Background and Layout */
.dashboard-background {
    display: flex;
    min-height: 100vh;
    background: linear-gradient(-45deg, #667eea, #764ba2, #2c3e50, #000);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    color: white;
    /* font-family: 'Hanuman', 'Khmer OS', Arial, sans-serif; - now global */
}

/* Sidebar Styles */
.sidebar {
    height: 100vh;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    transition: width 0.3s ease;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    flex-shrink: 0;
    overflow-y: auto;
}

.sidebar.open {
    width: 280px;
}

.sidebar.closed {
    width: 88px;
}

.sidebar.closed .ml-3,
.sidebar.closed .p-4 .text-sm,
.sidebar.closed .p-4 .text-xs {
    opacity: 0;
    display: none;
}

.sidebar.closed .justify-between {
    justify-content: center;
}

/* Main Content Styles */
.main-content {
    flex-grow: 1;
    overflow-y: auto;
    height: 100vh;
}

.main-header {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem 2rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Dashboard Card Styles */
.dashboard-card {
    color: white;
    background: linear-gradient(145deg, var(--service-color, #FFA12B), color-mix(in srgb, var(--service-color, #FFA12B) 80%, black));
    padding: 1.5rem;
    border-radius: 15px;
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.25);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: cardFadeIn 0.6s ease-out backwards;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
}

.dashboard-card:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3);
    filter: brightness(1.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sidebar.open {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 100;
    }

    .sidebar.closed {
        width: 0;
        padding: 0;
        border: none;
        overflow: hidden;
    }
    
    .sidebar.open + .main-content {
        margin-left: 0; /* Or you can add a backdrop */
    }

    /* A simple toggle button could be added to the header to control the sidebar */
}