/* assets/style.css */

/* ========================= */
/*  Color Scheme for native  */
/* ========================= */
html       { color-scheme: light; }
html.dark  { color-scheme: dark; }

/* ========================= */
/*  CSS Custom Properties     */
/* ========================= */
[x-cloak] { display: none !important; }

:root {
  --color-primary: #01696f;
  --color-primary-hover: #0c4e54;
  --color-danger: #c0392b;
  --color-danger-bg: #fdf0ee;
  --color-warning: #d4850a;
  --color-warning-bg: #fef9ec;
  --color-target: #2e7d32;
  --color-target-bg: #f0f7f0;
  --color-low: #1565c0;
  --color-low-bg: #e8f0fe;
  --card-bg: #ffffff;
}

html.dark {
  --color-primary: #4f98a3;
  --color-danger-bg: #2a1614;
  --color-warning-bg: #2a2010;
  --color-target-bg: #131d14;
  --color-low-bg: #0f1c2e;
  --card-bg: #27272a;
}

/* ========================= */
/*  Tabular Numbers           */
/* ========================= */
.sugar-value, td.sugar-cell, .kpi-number, [data-kpi] { 
    font-variant-numeric: tabular-nums lining-nums; 
}

/* ========================= */
/*  Skeleton Shimmer          */
/* ========================= */
@keyframes shimmer { 
    0% { background-position: -200% 0; } 
    100% { background-position: 200% 0; } 
}
.skeleton {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
}
html.dark .skeleton {
    background: linear-gradient(90deg, #27272a 25%, #3f3f46 50%, #27272a 75%);
    background-size: 200% 100%;
}
@media (prefers-reduced-motion: reduce) { 
    .skeleton { animation: none; } 
}

/* ========================= */
/*  Swipe Reveal (Mobile)     */
/* ========================= */
.reading-card { 
    position: relative; 
    overflow: hidden; 
    touch-action: pan-y;
}
.swipe-actions { 
    position: absolute; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    display: flex; 
    align-items: center; 
    padding-right: 1rem; 
    gap: 0.5rem; 
    z-index: 1;
}
.card-content { 
    position: relative; 
    background: var(--card-bg); 
    will-change: transform; 
    z-index: 2;
}

/* ========================= */
/*  Pull to Refresh Indicator */
/* ========================= */
#pull-indicator {
    pointer-events: none;
    opacity: 0;
    transform: translateY(-40px);
    transition: transform 0.1s linear, opacity 0.1s linear;
}

/* ========================= */
/*  NProgress Customization   */
/* ========================= */
#nprogress .bar { 
    background: var(--color-primary) !important; 
    height: 3px; 
}
#nprogress .peg { 
    box-shadow: 0 0 10px var(--color-primary), 0 0 5px var(--color-primary) !important; 
}

/* ========================= */
/*  Flatpickr Dark Mode       */
/* ========================= */
html.dark .flatpickr-calendar { 
    background: #18181b !important; 
    border-color: #3f3f46 !important; 
    color: #e4e4e7 !important; 
    box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
}
html.dark .flatpickr-day {
    color: #d4d4d8 !important;
}
html.dark .flatpickr-day:hover {
    background: #3f3f46 !important;
    border-color: #3f3f46 !important;
    color: #fff !important;
}
html.dark .flatpickr-day.selected,
html.dark .flatpickr-day.today {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}
html.dark .flatpickr-months,
html.dark .flatpickr-month,
html.dark .flatpickr-weekdays,
html.dark .flatpickr-weekday {
    background: #18181b !important;
    color: #a1a1aa !important;
}
html.dark .flatpickr-current-month .flatpickr-monthDropdown-months,
html.dark .flatpickr-current-month input.cur-year {
    background: #18181b !important;
    color: #e4e4e7 !important;
}
html.dark .numInputWrapper:hover {
    background: transparent !important;
}
html.dark .flatpickr-am-pm,
html.dark .flatpickr-time input,
html.dark .flatpickr-time .flatpickr-time-separator {
    color: #e4e4e7 !important;
}
html.dark .flatpickr-time {
    border-color: #3f3f46 !important;
}

/* ========================= */
/*  TomSelect Dark + Light    */
/* ========================= */
/* Light mode base */
.ts-control {
    border-radius: 0.5rem !important;
    border: 1px solid #d1d5db !important;
    padding: 0.5rem 0.75rem !important;
    box-shadow: none !important;
    background: #f9fafb !important;
    color: #111827 !important;
    font-family: inherit !important;
}
.ts-control > input {
    font-family: inherit !important;
    color: inherit !important;
}
.ts-control > input::placeholder {
    color: #9ca3af !important;
}
.ts-dropdown {
    border-radius: 0.5rem !important;
    border: 1px solid #d1d5db !important;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
    overflow: hidden;
    background: #ffffff !important;
    z-index: 10000 !important;
}
.ts-dropdown .option {
    color: #374151 !important;
    padding: 8px 12px !important;
}
.ts-dropdown .option:hover,
.ts-dropdown .active {
    background: #f3f4f6 !important;
    color: #111827 !important;
}
.ts-dropdown .option.selected {
    background: #e0f2f1 !important;
    color: var(--color-primary) !important;
    font-weight: 600;
}

/* Dark mode overrides */
html.dark .ts-wrapper .ts-control,
html.dark .ts-control { 
    background: #27272a !important; 
    border-color: #3f3f46 !important; 
    color: #e4e4e7 !important; 
}
html.dark .ts-control > input { 
    color: #e4e4e7 !important; 
}
html.dark .ts-control > input::placeholder { 
    color: #71717a !important; 
}
html.dark .ts-dropdown { 
    background: #27272a !important; 
    border-color: #3f3f46 !important; 
    box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
}
html.dark .ts-dropdown .option {
    color: #d4d4d8 !important;
}
html.dark .ts-dropdown .option:hover,
html.dark .ts-dropdown .active {
    background: #3f3f46 !important;
    color: #ffffff !important;
}
html.dark .ts-dropdown .option.selected {
    background: #115e59 !important;
    color: #5eead4 !important;
}
/* TomSelect item (selected value pill) */
html.dark .ts-control .item {
    background: #3f3f46 !important;
    color: #e4e4e7 !important;
    border-color: #52525b !important;
}

/* ========================= */
/*  Native Select Dark Mode   */
/* ========================= */
html.dark select,
html.dark select option {
    background-color: #27272a !important;
    color: #e4e4e7 !important;
}

/* ========================= */
/*  Scroll Hide (KPI strip)   */
/* ========================= */
.hide-scroll::-webkit-scrollbar {
    display: none;
}
.hide-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ========================= */
/*  Toast Notifications       */
/* ========================= */
.toast {
    position: fixed;
    z-index: 9999;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    font-size: 0.875rem;
    font-weight: 500;
    max-width: calc(100vw - 2rem);
}
@media (max-width: 768px) {
    .toast {
        top: auto;
        bottom: calc(5rem + max(env(safe-area-inset-bottom), 16px));
        left: 50%;
        right: auto;
        transform: translateX(-50%) !important; 
    }
}
.toast-success {
    background: white;
    color: #166534;
    border-left: 4px solid #22c55e;
}
.toast-error {
    background: white;
    color: #991b1b;
    border-left: 4px solid #ef4444;
}
html.dark .toast-success {
    background: #18181b;
    color: #4ade80;
    border-left-color: #22c55e;
}
html.dark .toast-error {
    background: #18181b;
    color: #f87171;
    border-left-color: #ef4444;
}

/* ========================= */
/*  Animations                */
/* ========================= */
.animate-in {
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========================= */
/*  Print Styles              */
/* ========================= */
@media print {
    .sidebar, nav, .bottom-tab-bar, button, .filters-bar, header { 
        display: none !important; 
    }
    main { 
        margin: 0 !important; 
        padding: 0 !important;
        background: white !important;
    }
    .row-danger  { background-color: #fdf0ee !important; }
    .row-warning { background-color: #fef9ec !important; }
    .row-target  { background-color: #f0f7f0 !important; }
    .row-low     { background-color: #e8f0fe !important; }
    body { background: white !important; color: black !important; }
    * { color: black !important; box-shadow: none !important; text-shadow: none !important; }
}