/* ============================================
   MODERN STYLING - COMPACT & REFINED
   Inspired by itslolly.com design principles
   Preserves original spacing and dimensions
   ============================================ */

/* CSS VARIABLES - Modern Design System */
:root {
    /* Primary Color Palette */
    --primary-orange: #F78E1E;
    --primary-orange-hover: #E67D0D;
    --primary-orange-light: #FFA844;
    --primary-teal: #006987;
    --primary-teal-dark: #005772;
    --primary-teal-hover: #025C7A;

    /* Neutral Colors */
    --neutral-white: #FFFFFF;
    --neutral-lightest: #F8F9FA;
    --neutral-light: #F2F2F2;
    --neutral-medium: #E0E0E0;
    --neutral-gray: #9D9D9D;
    --neutral-dark: #607775;
    --neutral-darkest: #222222;

    /* Shadows - Subtle */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 3px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 10px 30px rgba(0, 0, 0, 0.12);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;

    /* Font Family */
    --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================
   GLOBAL IMPROVEMENTS (NO SPACING CHANGES)
   ============================================ */

* {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

body {
    background: #FAFBFC !important;
    font-family: var(--font-primary) !important;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* ============================================
   TYPOGRAPHY REFINEMENTS
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

h2 {
    color: var(--primary-orange) !important;
}

h3 {
    color: var(--primary-orange) !important;
}

/* ============================================
   LINKS - Modern Subtle Effects
   ============================================ */

a {
    color: var(--primary-orange) !important;
    transition: color var(--transition-fast) !important;
}

a:hover {
    color: var(--primary-orange-hover) !important;
}

/* ============================================
   HEADER - Modern Gradient
   ============================================ */

#header {
    background: linear-gradient(135deg, #006987 0%, #004d66 100%) !important;
    box-shadow: var(--shadow-md);
}

/* ============================================
   BREADCRUMBS - Cleaner Look
   ============================================ */

.sitemapbk {
    background: var(--neutral-white) !important;
    border-bottom: 1px solid var(--neutral-medium) !important;
    box-shadow: var(--shadow-xs);
}

.sitemaptop {
    color: var(--neutral-dark) !important;
    /*font-size: 0.9em !important;*/
}

/* ============================================
   LEFT MENU - Modern Refinement
   ============================================ */

#leftMenu, #collapsedleftMenu {
    background: linear-gradient(180deg, #006987 0%, #004d66 100%) !important;
    box-shadow: var(--shadow-lg);
    border-right: none !important;
}

#leftbg {
    background: linear-gradient(180deg, #006987 0%, #004d66 100%) !important;
    border-right: none !important;
}

#leftMenu .leftMenuItem,
#collapsedleftMenu .leftMenuItem {
    border-radius: var(--radius-md);
    margin: 3px 6px !important;
    transition: all var(--transition-fast) !important;
}

#leftMenu .leftMenuItem:hover,
#collapsedleftMenu .leftMenuItem:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    transform: translateX(3px);
}

#leftMenu .leftMenuItemSelected,
#collapsedleftMenu .leftMenuItemSelected {
    background: var(--primary-orange) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm);
}

/* Submenu hover states */
#lftmenuProductsSubMenu .leftMenuItem:hover,
#lftmenuInventorySubMenu .leftMenuItem:hover,
#lftmenuCustomersSubMenu .leftMenuItem:hover,
#lftmenuVouchersSubMenu .leftMenuItem:hover,
#lftmenuAppPreorderSubMenu .leftMenuItem:hover,
#lftmenuPOSAdminSubMenu .leftMenuItem:hover,
#lftmenuReportsSubMenu .leftMenuItem:hover,
#lftmenuAdminSubMenu .leftMenuItem:hover {
    background: rgba(247, 142, 30, 0.2) !important;
    transform: translateX(3px);
}

#lftmenuProductsSubMenu .leftMenuItemSelected,
#lftmenuInventorySubMenu .leftMenuItemSelected,
#lftmenuCustomersSubMenu .leftMenuItemSelected,
#lftmenuVouchersSubMenu .leftMenuItemSelected,
#lftmenuAppPreorderSubMenu .leftMenuItemSelected,
#lftmenuPOSAdminSubMenu .leftMenuItemSelected,
#lftmenuReportsSubMenu .leftMenuItemSelected,
#lftmenuAdminSubMenu .leftMenuItemSelected {
    background: rgba(247, 142, 30, 0.3) !important;
    border: 1px solid rgba(247, 142, 30, 0.5) !important;
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */

.mainWrapper {
    /* Keep original padding */
}

/* ============================================
   PANELS & CARDS - Subtle Modern Look
   ============================================ */

.panel, .panel-wrapper {
    background: var(--neutral-white) !important;
    border: 1px solid var(--neutral-medium) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: box-shadow var(--transition-base) !important;
}

.panel:hover, .panel-wrapper:hover {
    box-shadow: var(--shadow-md) !important;
}

.panel-header {
    background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-teal-dark) 100%) !important;
    color: var(--neutral-white) !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    font-weight: 600 !important;
}

/* ============================================
   BUTTONS - Modern with Minimal Padding Change
   ============================================ */

.btn,
button:not(.ui-button),
input[type="button"]:not(.ui-button),
input[type="submit"]:not(.ui-button) {
    /*background: var(--primary-orange);*/
    color: var(--neutral-white) !important;
    border: none !important;
    /*border-radius: var(--radius-md) !important;*/
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
    box-shadow: var(--shadow-sm) !important;
    font-family: var(--font-primary) !important;
}

.btn:hover,
button:not(.ui-button):hover,
input[type="button"]:not(.ui-button):hover,
input[type="submit"]:not(.ui-button):hover {
    background: var(--primary-orange-hover) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-1px);
}

.btn:active,
button:not(.ui-button):active,
input[type="button"]:not(.ui-button):active,
input[type="submit"]:not(.ui-button):active {
    transform: translateY(0);
}

/* ============================================
   FORMS - Clean Modern Inputs
   ============================================ */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
textarea,
select {
    border: 1px solid var(--neutral-medium) !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-fast) !important;
    font-family: var(--font-primary) !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 2px rgba(247, 142, 30, 0.1) !important;
}

/* Custom select arrow */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23607775' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px !important;
}

select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23F78E1E' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

/* ============================================
   TABLES - Clean & Spacious
   ============================================ */

table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: var(--neutral-white) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-sm) !important;
}

thead {
    background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-teal-dark) 100%) !important;
}

thead th {
    font-weight: 600 !important;
    border-bottom: 2px solid var(--primary-teal-dark) !important;
}

tbody tr {
    transition: background-color var(--transition-fast) !important;
}

tbody tr:hover {
    background-color: rgba(247, 142, 30, 0.04) !important;
}

/* Disable hover effects for ReportViewer tables */
#reportdivMain tbody tr:hover {
    background-color: transparent !important;
}

tbody td {
    border-bottom: 1px solid var(--neutral-light) !important;
}

tbody tr:last-child td {
    border-bottom: none !important;
}

/* ============================================
   UI WIDGETS - Compact jQuery UI Styling
   ============================================ */

.ui-widget {
    font-family: var(--font-primary) !important;
}

.ui-widget-content {
    background: var(--neutral-white) !important;
    /*border: 1px solid var(--neutral-medium) !important;*/
    border-radius: var(--radius-lg) !important;
}

.ui-widget-header {
    background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-teal-dark) 100%) !important;
    border: none !important;
    color: var(--neutral-white) !important;
    font-weight: 600 !important;
}

.ui-button {
    background: var(--primary-orange) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    color: var(--neutral-white) !important;
    font-weight: 600 !important;
    transition: all var(--transition-fast) !important;
    box-shadow: var(--shadow-sm) !important;
    text-shadow: none !important;
    font-family: var(--font-primary) !important;
}

.ui-button:hover {
    background: var(--primary-orange-hover) !important;
    box-shadow: var(--shadow-md) !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default {
    /*background: var(--neutral-white) !important;*/
    border: 1px solid var(--neutral-medium) !important;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus {
    background: var(--neutral-lightest) !important;
    border: 1px solid var(--primary-orange) !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active {
    background: var(--primary-orange) !important;
    border: 1px solid var(--primary-orange) !important;
    color: var(--neutral-white) !important;
}

/* ============================================
   DIALOG & MODAL
   ============================================ */

.ui-dialog {
    border: none !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-xl) !important;
    overflow: hidden !important;
}

.ui-dialog-titlebar {
    background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-teal-dark) 100%) !important;
    border: none !important;
    color: var(--neutral-white) !important;
    font-weight: 600 !important;
    padding: 10px 15px !important;
}

.ui-dialog-content {
    background: var(--neutral-white) !important;
    padding: 15px !important;
}

.ui-dialog-buttonpane {
    padding: 10px 15px !important;
}

/* ============================================
   DATEPICKER
   ============================================ */

.ui-datepicker {
    border: none !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
    background: var(--neutral-white) !important;
    padding: 10px !important;
}

.ui-datepicker-header {
    background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-teal-dark) 100%) !important;
    border: none !important;
    color: var(--neutral-white) !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    padding: 8px 10px !important;
}

.ui-datepicker td a {
    border-radius: var(--radius-sm) !important;
    transition: all var(--transition-fast) !important;
}

.ui-datepicker td a:hover {
    background: var(--primary-orange) !important;
    color: var(--neutral-white) !important;
}

.ui-datepicker td .ui-state-active {
    background: var(--primary-teal) !important;
    color: var(--neutral-white) !important;
}

/* ============================================
   DATATABLES - Compact Modern Styling
   ============================================ */

.dataTables_wrapper {
    background: var(--neutral-white) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
}

.fg-toolbar,
.ui-toolbar {
    padding: 12px 15px !important;
}

.dataTables_length,
.dataTables_filter {
    margin: 0 !important;
}

.dataTables_filter input {
    border: 1px solid var(--neutral-medium) !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-fast) !important;
}

.dataTables_filter input:focus {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 2px rgba(247, 142, 30, 0.1) !important;
    outline: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-fast) !important;
    margin: 0 2px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--primary-orange) !important;
    color: var(--neutral-white) !important;
    border-color: var(--primary-orange) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--primary-teal) !important;
    color: var(--neutral-white) !important;
    border-color: var(--primary-teal) !important;
}

/* ============================================
   TABS
   ============================================ */

.ui-tabs {
    border: none !important;
    background: transparent !important;
}

.ui-tabs-nav {
    border: none !important;
    background: transparent !important;
    border-bottom: 2px solid var(--neutral-medium) !important;
    padding: 0 !important;
}

.ui-tabs-nav li {
    border: none !important;
    background: transparent !important;
    margin-right: 2px !important;
}

.ui-tabs-nav li a {
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
    transition: all var(--transition-fast) !important;
    border: none !important;
    background: transparent !important;
    padding: 10px 20px !important;
    color: var(--neutral-gray) !important;
}

.ui-tabs-nav li:hover a {
    background: rgba(247, 142, 30, 0.1) !important;
    color: var(--primary-orange) !important;
}

.ui-tabs-nav li.ui-tabs-active {
    border-bottom: none !important;
}

.ui-tabs-nav li.ui-tabs-active a {
    background: var(--primary-orange) !important;
    color: var(--neutral-white) !important;
    font-weight: 600 !important;
    border: none !important;
}

.ui-tabs-panel {
    background: var(--neutral-white) !important;
    border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 15px !important;
}

/* ============================================
   ACCORDION
   ============================================ */

.ui-accordion-header {
    background: var(--neutral-white) !important;
    border: 1px solid var(--neutral-medium) !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-fast) !important;
    margin-bottom: 5px !important;
    padding: 10px 15px !important;
}

.ui-accordion-header:hover {
    background: var(--neutral-lightest) !important;
    border-color: var(--primary-orange) !important;
}

.ui-accordion-header.ui-state-active {
    background: var(--primary-orange) !important;
    color: var(--neutral-white) !important;
    border-color: var(--primary-orange) !important;
}

.ui-accordion-content {
    border: 1px solid var(--neutral-medium) !important;
    border-top: none !important;
    background: var(--neutral-lightest) !important;
    padding: 10px 15px !important;
}

/* ============================================
   PROGRESSBAR
   ============================================ */

.ui-progressbar {
    background: var(--neutral-light) !important;
    border: none !important;
    border-radius: 999px !important;
    overflow: hidden !important;
}

.ui-progressbar-value {
    background: linear-gradient(90deg, var(--primary-orange) 0%, var(--primary-orange-light) 100%) !important;
    border: none !important;
}

/* ============================================
   NOTICE & ALERT BARS
   ============================================ */

.notice-bar {
    border: 1px solid var(--neutral-medium) !important;
    border-left: 4px solid var(--primary-orange) !important;
    background-color: var(--neutral-white) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* ============================================
   CHECKBOXES & RADIOS - Modern Custom Styling
   ============================================ */

/* Disabled checkbox styles */
input[type="checkbox"]:disabled:not(.ui-checkboxradio-radio-label input),
input[type="checkbox"]:disabled:not(.ui-widget-content):not(.uinavheaderweek) {
    background-color: #BFBFBF !important;
    border-color: #5E5E5E !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    box-shadow: none !important;
    outline-color: #999 !important;
}

/* Disabled label styling (if labels are siblings) */
input[type="checkbox"]:disabled + label,
input[type="checkbox"]:disabled ~ label {
    color: #999 !important;
    cursor: not-allowed !important;
}

input[type="checkbox"]:not(.ui-checkboxradio-radio-label input),
input[type="radio"]:not(.ui-checkboxradio-radio-label input) {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border: 3px solid #000000 !important;
    background-color: #FFFFFF !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all var(--transition-fast) !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
    outline: 1px solid #000000 !important;
    outline-offset: -1px !important;
}

/* Extra specificity for stubborn checkboxes */
input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

fieldset input[type="checkbox"]:not(.ui-checkboxradio-radio-label input) {
    border: 3px solid #000000 !important;
    background-color: #FFFFFF !important;
}

input[type="checkbox"]:not(.ui-checkboxradio-radio-label input) {
    border-radius: var(--radius-sm);
}

input[type="radio"]:not(.ui-checkboxradio-radio-label input) {
    border-radius: 50%;
}

input[type="checkbox"]:not(.ui-checkboxradio-radio-label input):checked,
input[type="radio"]:not(.ui-checkboxradio-radio-label input):checked {
    background: var(--primary-orange) !important;
    border-color: var(--primary-orange) !important;
}

input[type="checkbox"]:not(.ui-checkboxradio-radio-label input):checked:after {
    content: '\2713' !important;
    position: absolute !important;
    color: var(--neutral-white) !important;
    font-size: 14px !important;
    font-weight: bold !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: block !important;
}

input[type="radio"]:not(.ui-checkboxradio-radio-label input):checked:after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--neutral-white);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================
   BADGES & LABELS
   ============================================ */

.badge, .label {
    border-radius: 999px !important;
    font-weight: 600 !important;
    font-size: 0.75em !important;
}

/* ============================================
   TOOLTIPS
   ============================================ */

.ui-tooltip {
    background: var(--neutral-darkest) !important;
    color: var(--neutral-white) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    font-size: 0.85em !important;
    padding: 8px 12px !important;
}

/* ============================================
   SCROLLBAR STYLING (Webkit)
   ============================================ */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--neutral-light);
}

::-webkit-scrollbar-thumb {
    background: var(--neutral-gray);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-orange);
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

:focus-visible {
    outline: 2px solid var(--primary-orange) !important;
    outline-offset: 2px !important;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .ui-dialog {
        width: 95% !important;
        max-width: 500px !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    body {
        background: white !important;
    }

    .panel, .card, table {
        box-shadow: none !important;
    }
}

#reportDivMain table {
    border-collapse: unset !important;
    border-spacing: 0 !important;
    background: transparent !important;
    border-radius: 0px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}