/* --- FILENAME: modules/style.css --- */
/* This file contains custom styles for the application, including the new sidebar. */

body { 
    font-family: 'Inter', sans-serif; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
}
.sidebar { 
    transition: transform 0.3s ease-in-out; 
}
.toast { 
    transition: opacity 0.5s, transform 0.5s; 
}
.hidden-by-permission { 
    display: none !important; 
}
.modal { 
    transition: opacity 0.3s ease, visibility 0.3s ease; 
}
.modal-content { 
    transition: transform 0.3s ease; 
}
::-webkit-scrollbar { 
    width: 8px; 
}
::-webkit-scrollbar-track { 
    background: #f1f1f1; 
}
::-webkit-scrollbar-thumb { 
    background: #888; 
    border-radius: 10px; 
}
[readonly] { 
    background-color: #f3f4f6; 
    cursor: not-allowed; 
}
tbody tr:nth-child(even) { 
    background-color: #f9fafb; 
}
tbody tr:hover { 
    background-color: #f0f9ff !important; 
}
.table-auto { 
    font-size: 15px; 
}
.btn {
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.btn:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
}
.btn-disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: translateY(0) !important;
    box-shadow: none !important;
}

/* New Sidebar Accordion Styles */
.nav-item .nav-toggle {
    cursor: pointer;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: white;
}

.nav-item .nav-toggle:hover, .nav-item .nav-link:hover, .nav-toggle.active {
    background-color: #4a5568; /* gray-700 */
}

.nav-item .sub-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    background-color: rgba(0,0,0,0.2);
}

.nav-item .sub-menu.open {
    max-height: 500px; /* Adjust as needed */
}

.nav-item .toggle-icon {
    transition: transform 0.2s ease-in-out;
}

.nav-item .toggle-icon.open {
    transform: rotate(180deg);
}

.nav-link.active {
    background-color: #2d3748; /* gray-800 */
    font-weight: 600;
}


@media print {
    @page { 
        margin: 15mm; 
        size: A4 landscape; /* Changed to landscape for better horizontal layout */
    }

    body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Hide everything by default */
    body * {
        visibility: hidden;
    }

    .no-print, .no-print * {
        display: none !important;
    }

    /* Make the print area and its contents visible */
    .print-area, .print-area * {
        visibility: visible;
    }

    /* Position the print area at the top of the page */
    .print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    /* Reset styles on containers that might interfere */
    #app-view, #main-content, #transactions-page-content, .bg-white {
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background-color: transparent !important;
    }

    .overflow-x-auto {
        overflow: visible !important;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        font-size: 10pt;
    }

    thead {
        display: table-header-group; /* Ensures header repeats on each page */
    }

    tr {
        page-break-inside: avoid;
    }

    th, td {
        border: 1px solid #ccc;
        padding: 4px 6px;
    }
    
    th {
        background-color: #f2f2f2 !important;
    }

    h2.text-2xl {
        font-size: 16pt;
        text-align: center;
        width: 100%;
        margin-bottom: 20px;
    }
}

/* --- Mobile Responsive Styles --- */
@media (max-width: 768px) {
    /* Main layout */
    #main-content {
        padding: 1rem;
    }

    /* Make filter bars stack vertically */
    .bg-white .flex-wrap {
        flex-direction: column;
        align-items: stretch;
    }
    
    .bg-white .flex-wrap > * {
        width: 100%;
    }
    
    .bg-white .flex-wrap .flex.items-center.gap-2 {
        flex-direction: column;
        align-items: stretch;
    }

    /* Page headers */
    #transactions-page-content .flex.justify-between,
    #dashboard-content .flex.justify-between {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .page-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    /* Ensure tables are scrollable and don't break the layout */
    .overflow-x-auto {
        overflow-x: auto;
    }

    .table-auto {
        font-size: 14px; /* Slightly smaller font for mobile */
        white-space: nowrap; /* Prevent text wrapping in cells */
    }
    
    .table-auto th, .table-auto td {
        padding: 0.5rem;
    }
    
    /* Modal adjustments */
    .modal-content {
        width: 95%;
        padding: 1rem;
    }
    
    .modal-form .grid-cols-2 {
        grid-template-columns: 1fr; /* Stack grid items in forms */
    }

    #page-title {
        font-size: 1.25rem; /* text-xl */
    }
}