/* css/app.css - Complete application styles */

/* Select2 — render above Bootstrap modals (modal z-index is 1055) */
.select2-container--open { z-index: 9999 !important; }

/* ========================================
   CSS Variables & Root Styles
   ======================================== */
:root {
    --primary-color: #ff00ff;
    --secondary-color: #808000;
    --background-color: #ffffff;
    --text-color: #000000;
    --primary-rgb: 255, 0, 255;
    --secondary-rgb: 128, 128, 0;
    --sidebar-width: 280px;
    --navbar-height: 72px;
    --border-color: #e9ecef;
    --shadow-sm: 0 2px 4px rgba(0,0,0,.08);
    --shadow-md: 0 5px 15px rgba(0,0,0,.1);
    --shadow-lg: 0 10px 30px rgba(0,0,0,.15);
    --transition-speed: 0.3s;
}

/* ========================================
   Reset & Base Styles
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #f8f9fa;
    color: var(--text-color);
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: all var(--transition-speed) ease;
}

a:hover {
    opacity: 0.8;
}

/* ========================================
   Loading Screen
   ======================================== */
.app-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}



.app-loader .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}

/* ========================================
   Navbar/Header Styles
   ======================================== */
/* Pin the whole header bar to the top of the viewport. The navbar itself
   can't stick (its parent #header-container is only navbar-height tall, so
   it has no room to travel) — so we make the container the sticky element. */
#header-container {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: white;
}

.navbar {
    background-color: white !important;
    box-shadow: var(--shadow-sm);
    padding: 1rem 0;
    position: relative;
    top: 0;
    z-index: 1030;
    min-height: var(--navbar-height);
}

.navbar-brand {
    font-weight: 600;
    color: var(--primary-color) !important;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-size: 1.25rem;
}

.navbar-brand:hover {
    opacity: 0.8;
}

.temple-logo-nav {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid var(--border-color);
}

.navbar-nav .nav-link {
    color: #6c757d;
    padding: 0.5rem 1rem;
    transition: all var(--transition-speed) ease;
}

.navbar-nav .nav-link:hover {
    color: var(--primary-color);
}

.navbar-nav .dropdown-menu {
    border: none;
    box-shadow: var(--shadow-md);
    border-radius: 8px;
    padding: 0.5rem;
}

.navbar-nav .dropdown-item {
    border-radius: 4px;
    padding: 0.5rem 1rem;
    transition: all var(--transition-speed) ease;
}

.navbar-nav .dropdown-item:hover {
    background-color: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
}

/* ========================================
   Sidebar Styles
   ======================================== */
.sidebar {
    min-height: calc(100vh - var(--navbar-height));
    background-color: white;
    border-right: 1px solid var(--border-color);
    padding: 20px 0;
    position: relative;
    width: 100%;
    transition: all var(--transition-speed) ease;
}

/* Desktop: pin the sidebar pane so the long menu scrolls inside itself
   (its own scrollbar) instead of pushing the whole page "like a train". */
@media (min-width: 768px) {
    #sidebar-container {
        position: sticky;
        top: var(--navbar-height);
        align-self: flex-start;
        height: calc(100vh - var(--navbar-height));
        padding: 0;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
    }

    #sidebar-container .sidebar {
        min-height: 100%;
    }

    /* Slim, unobtrusive scrollbar for the sidebar pane */
    #sidebar-container::-webkit-scrollbar {
        width: 6px;
    }
    #sidebar-container::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.18);
        border-radius: 3px;
    }
    #sidebar-container::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.3);
    }
    #sidebar-container::-webkit-scrollbar-track {
        background: transparent;
    }
}

.sidebar.collapsed {
    width: 80px;
}

.sidebar.collapsed .nav-text {
    display: none;
}

.sidebar.collapsed .sidebar-footer {
    display: none;
}

.sidebar.collapsed .nav-link {
    justify-content: center;
    padding: 12px 10px;
}

.sidebar.collapsed .nav-link i {
    margin-right: 0;
    font-size: 20px;
}

.sidebar .nav-link {
    color: #2c3038;
    padding: 12px 20px;
    font-weight: 500;
    transition: all var(--transition-speed) ease;
    border-left: 3px solid transparent;
    display: flex;
    align-items: center;
    text-decoration: none;
    position: relative;
}

/* Leading menu icons only — exclude the expand caret (.submenu-arrow) so its
   own rotate(90deg) on expand isn't clobbered by the icon scale/transform. */
.sidebar .nav-link i:not(.submenu-arrow) {
    width: 20px;
    margin-right: 10px;
    font-size: 18px;
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.2s ease;
}

/* Smooth label nudge so the whole row feels alive on hover */
.sidebar .nav-link .nav-text {
    transition: transform 0.25s ease;
}

.sidebar .nav-link:hover {
    color: var(--primary-color);
    background-color: rgba(var(--primary-rgb), 0.05);
    border-left-color: var(--primary-color);
}

/* Icon: pop + gentle bounce-in on hover (the springy easing above).
   Excludes the expand caret so it keeps its rotate, not this scale. */
.sidebar .nav-link:hover i:not(.submenu-arrow),
.sidebar .nav-link.active i:not(.submenu-arrow) {
    color: var(--primary-color);
    transform: scale(1.18) translateX(2px);
}

/* Label drifts slightly toward the content for a smooth follow-through */
.sidebar .nav-link:hover .nav-text {
    transform: translateX(4px);
}

/* Expand/collapse caret eases as the row is hovered */
.sidebar .nav-link .submenu-arrow {
    transition: transform 0.3s ease, color 0.2s ease;
}
.sidebar .nav-link:hover .submenu-arrow {
    color: var(--primary-color);
    transform: translateX(3px);
}
.sidebar .nav-link-parent.expanded:hover .submenu-arrow {
    transform: rotate(90deg) translateX(3px);
}

.sidebar .nav-link.active {
    color: var(--primary-color);
    background-color: rgba(var(--primary-rgb), 0.1);
    border-left-color: var(--primary-color);
    font-weight: 600;
}

/* Respect users who prefer no motion — drop the hover transforms */
@media (prefers-reduced-motion: reduce) {
    .sidebar .nav-link i,
    .sidebar .nav-link .nav-text,
    .sidebar .nav-link .submenu-arrow {
        transition: color 0.2s ease;
    }
    .sidebar .nav-link:hover i,
    .sidebar .nav-link.active i,
    .sidebar .nav-link:hover .nav-text,
    .sidebar .nav-link:hover .submenu-arrow {
        transform: none;
    }
}

.sidebar .nav-link.active::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background-color: var(--primary-color);
    border-radius: 2px;
}

/* Only the actual active page (a leaf link) shows the right-edge marker.
   An active PARENT still gets its background/left-border highlight, but not
   the bar — otherwise the parent and its active child both draw a bar, which
   looks like a doubled/broken marker. */
.sidebar .nav-link-parent.active::after {
    display: none;
}

.sidebar .nav-link .badge {
    margin-left: auto;
    font-size: 10px;
}

.sidebar-footer {
    /* position: absolute; */
    bottom: 20px;
    left: 0;
    right: 0;
    padding: 0 20px;
}

/* ========================================
   Main Content Area
   ======================================== */
.main-content {
    /* padding: 30px; */
    padding: 30px !important;
    background-color: #f8f9fa;
    min-height: calc(100vh - var(--navbar-height));
}

#page-container {
    animation: fadeIn 0.3s ease;
}

/* ========================================
   Footer Styles
   ======================================== */
.footer {
    background-color: white !important;
    border-top: 1px solid var(--border-color);
    margin-top: auto;
    box-shadow: 0 -2px 4px rgba(0,0,0,.04);
}

/* ========================================
   Card Styles
   ======================================== */
.stat-card {
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    border: 1px solid var(--border-color);
    height: 100%;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 15px;
}

.stat-icon.primary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
}

.stat-icon.success {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
}

.stat-icon.info {
    background: linear-gradient(135deg, #17a2b8, #3498db);
    color: white;
}

.stat-icon.warning {
    background: linear-gradient(135deg, #ffc107, #ff9800);
    color: white;
}

.stat-icon.danger {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
}

.stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 5px;
    line-height: 1;
}

.stat-label {
    color: #6c757d;
    font-weight: 500;
    font-size: 14px;
}

.stat-change {
    font-size: 12px;
    margin-top: 10px;
}

.stat-change.positive {
    color: #28a745;
}

.stat-change.negative {
    color: #dc3545;
}

/* ========================================
   Chart Container
   ======================================== */
.chart-container {
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: var(--shadow-sm);
    height: 400px;
    position: relative;
}

.chart-container canvas {
    max-height: 350px;
}

/* ========================================
   Activity & Timeline Styles
   ======================================== */
.recent-activities {
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: var(--shadow-sm);
}

.activity-item {
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
    transition: all var(--transition-speed) ease;
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-item:hover {
    background-color: rgba(var(--primary-rgb), 0.02);
    margin: 0 -15px;
    padding: 15px;
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   Quick Links
   ======================================== */
.quick-links {
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: var(--shadow-sm);
}

.quick-link-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    transition: all var(--transition-speed) ease;
    text-decoration: none;
    color: var(--text-color);
    margin-bottom: 10px;
}

.quick-link-item:hover {
    background-color: rgba(var(--primary-rgb), 0.1);
    transform: translateX(5px);
    color: var(--text-color);
}

.quick-link-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    flex-shrink: 0;
}

/* ========================================
   Button Styles
   ======================================== */
.btn {
    border-radius: 8px;
    padding: 8px 14px;
    font-weight: 500;
    transition: all var(--transition-speed) ease;
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: white;
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-outline-primary {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    background: transparent;
}

.btn-outline-primary:hover {
    background: var(--primary-color);
    color: white;
}

/* ========================================
   Modal Styles
   ======================================== */
.modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
    padding: 20px;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    border-top: 1px solid var(--border-color);
    padding: 20px;
}

/* ========================================
   Form Styles
   ======================================== */
.form-control, .form-select {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 10px 15px;
    transition: all var(--transition-speed) ease;
}

/* Bootstrap reserves extra right padding on .form-select for its dropdown
   chevron background-image; the flat padding above was clobbering that,
   pushing the arrow on top of the selected text (e.g. DataTables' length
   select showing "10 25 50 100"). Restore it here so the arrow has room. */
.form-select {
    padding-right: 2.25rem;
}

.form-select-sm {
    padding-right: 2rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.1);
}

.form-label {
    font-weight: 500;
    margin-bottom: 8px;
    color: #495057;
}

.input-group-text {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}

/* ========================================
   Table Styles
   ======================================== */
.table {
    background: white;
    border-radius: 8px;
    overflow: hidden;
}

.table thead th {
    background-color: #f8f9fa;
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    color: #495057;
    padding: 12px;
}

.table tbody tr {
    transition: all var(--transition-speed) ease;
}

.table tbody tr:hover {
    background-color: rgba(var(--primary-rgb), 0.05);
}

/* ========================================
   Loading Overlay
   ======================================== */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-overlay.active {
    display: flex;
}

/* ========================================
   Toast Styles
   ======================================== */
.toast-container {
    z-index: 9999;
}

.toast {
    border-radius: 8px;
    border: none;
    box-shadow: var(--shadow-md);
}

/* ========================================
   Badge Styles
   ======================================== */
.badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 11px;
}

/* ========================================
   Mobile Responsive Styles
   ======================================== */
@media (max-width: 767px) {
    .sidebar {
        position: fixed;
        top: var(--navbar-height);
        left: calc(-1 * var(--sidebar-width));
        width: var(--sidebar-width);
        height: calc(100vh - var(--navbar-height));
        z-index: 1040;
        transition: left var(--transition-speed) ease;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }
    
    .sidebar.show {
        left: 0;
    }
    
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1035;
        display: none;
    }
    
    .sidebar-overlay.show {
        display: block;
    }

    .main-content {
        padding: 20px 15px;
    }
    
    #sidebar-container {
        display: none !important;
    }
    
    #page-container {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    .stat-card {
        margin-bottom: 15px;
    }
    
    .chart-container {
        height: 300px;
    }
    
    .navbar-brand span {
        font-size: 1rem;
    }
    
    .quick-link-item {
        padding: 10px;
    }
}

/* Medium screens - collapsed sidebar */
@media (min-width: 768px) and (max-width: 991px) {
    .sidebar {
        width: 80px;
    }
    
    .sidebar .nav-link {
        padding: 12px 10px;
        justify-content: center;
    }
    
    .sidebar .nav-link i {
        margin-right: 0;
        font-size: 20px;
    }
    
    .nav-text {
        display: none;
    }
    
    .sidebar-footer {
        display: none;
    }
}

/* Large screens */
@media (min-width: 1200px) {
    /* .container-fluid {
        max-width: 1400px;
    } */
}

/* ========================================
   Utility Classes
   ======================================== */
.text-primary-gradient {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-primary-gradient {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

.bg-light-primary {
    background-color: rgba(var(--primary-rgb), 0.1);
}

.border-primary-light {
    border-color: rgba(var(--primary-rgb), 0.2);
}

.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.shadow-md {
    box-shadow: var(--shadow-md) !important;
}

.shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

.rounded-lg {
    border-radius: 12px !important;
}

.rounded-md {
    border-radius: 8px !important;
}

/* ========================================
   Animation Classes
   ======================================== */
@keyframes fadeIn {
    from { 
        opacity: 0;
        transform: translateY(10px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from { 
        transform: translateX(-100%);
        opacity: 0;
    }
    to { 
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from { 
        transform: translateX(100%);
        opacity: 0;
    }
    to { 
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.fade-in {
    animation: fadeIn 0.3s ease;
}

.slide-in-left {
    animation: slideInLeft 0.3s ease;
}

.slide-in-right {
    animation: slideInRight 0.3s ease;
}

.pulse {
    animation: pulse 2s infinite;
}

.spinning {
    animation: spin 1s linear infinite;
}

/* ========================================
   Scrollbar Styles
   ======================================== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    .navbar,
    .sidebar,
    .footer,
    .btn,
    .modal,
    #aiWidgetRoot,
    .ai-widget-root {
        display: none !important;
    }
    
    .main-content {
        margin: 0;
        padding: 0;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* ── Buttons with a bilingual (tDual) label ──────────────────────────────
   tDual() renders the secondary language as a display:block <small>, which
   pushed it onto its own line and misaligned the icon (e.g. Filter / Reset
   buttons). Lay such buttons out as a centred flex box: icon + primary on
   line 1, secondary language centred just below. Only affects buttons that
   actually carry a secondary label, so single-language buttons are untouched. */
.btn:has(> .t-secondary) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 5px;
    row-gap: 0;
    line-height: 1.15;
}
.btn:has(> .t-secondary) > .t-secondary {
    flex-basis: 100%;
    text-align: center;
    font-size: .8em;
    font-weight: 400;
    opacity: .85;
}

/* ── Hall-service package master: compact "Qty" input-group ───────────────
   The Qty addon uses a tDual() label; because .input-group-text is flex, the
   bilingual label rendered side-by-side ("Qty मात्रा") and ate the narrow
   input-group width, collapsing the number field. Stack the label tightly so
   the number input keeps its width. */
.hpkc-svc-qty-price-wrap .input-group-text,
.hpkc-food-qty-wrap .input-group-text {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
    padding: 4px 8px;
    font-size: 11px;
    white-space: nowrap;
}
.hpkc-svc-qty-price-wrap .input-group,
.hpkc-food-qty-wrap { width: auto !important; }
/* Override Bootstrap's .input-group > .form-control { flex:1 1 auto; width:1% }
   so the number field is a fixed, readable size instead of collapsing. */
.hpkc-svc-qty,
.hpkc-food-qty {
    flex: 0 0 70px !important; width: 70px !important; min-width: 70px;
    height: 42px; font-size: 16px; font-weight: 600; padding: 4px 6px;
}
/* ── Entry code links (General Ledger → entry detail, Entries list → view) ──
   Blue, no underline at rest; a bottom border appears on hover. The border
   is transparent (not absent) at rest so hovering doesn't shift the row.
   Applied to <a> (general ledger) and <code role="button"> (entries list),
   hence the explicit cursor. */
.entry-code-link {
    color: #0d6efd;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: border-color .15s ease-in-out, color .15s ease-in-out;
}

.entry-code-link:hover,
.entry-code-link:focus-visible {
    color: #0a58ca;
    border-bottom-color: currentColor;
}

/* ── Phone code Select2 ───────────────────────────────────────────────────
   Select2's single-select is ~28px tall with its own padding, so it sits short
   next to the neighbouring fields. Mirror the exact `.form-control/.form-select`
   declarations above (border 1px #dee2e6, radius 8px, padding 10px 15px) rather
   than hardcoding a pixel height — that way the field keeps matching if the
   shared form tokens ever change.
   Scoped via containerCssClass, so no other single select is affected.
   Used by: settings/index.js (#temple-phone-code). */
.phone-code-select2.select2-container--default .select2-selection--single {
    height: auto;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 10px 15px;
}

.phone-code-select2.select2-container--default .select2-selection--single .select2-selection__rendered {
    /* Select2 hardcodes line-height:28px and its own horizontal padding.
       Reset both so the container padding above defines the box. */
    line-height: 1.5;
    padding-left: 0;
    padding-right: 20px;
    color: inherit;
}

.phone-code-select2.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 8px;
}

/* Match the focus ring the other fields get (.form-select:focus). */
.phone-code-select2.select2-container--default.select2-container--focus .select2-selection--single,
.phone-code-select2.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.1);
}