/* HT Pantry Custom Styles */

/* Theme Variables */
:root {
    --bg-primary: #f7f7f7;
    --bg-secondary: #ffffff;
    --text-primary: rgba(0, 0, 0, 0.87);
    --text-secondary: rgba(0, 0, 0, 0.6);
    --border-color: rgba(34, 36, 38, 0.15);
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] {
    --bg-primary: #1b1c1d;
    --bg-secondary: #2d2e2f;
    --text-primary: rgba(255, 255, 255, 0.9);
    --text-secondary: rgba(255, 255, 255, 0.7);
    --border-color: rgba(255, 255, 255, 0.1);
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.segment,
[data-theme="dark"] .ui.card,
[data-theme="dark"] .ui.cards > .card {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow) !important;
}

[data-theme="dark"] .ui.form input:not([type]),
[data-theme="dark"] .ui.form input[type="date"],
[data-theme="dark"] .ui.form input[type="datetime-local"],
[data-theme="dark"] .ui.form input[type="email"],
[data-theme="dark"] .ui.form input[type="number"],
[data-theme="dark"] .ui.form input[type="password"],
[data-theme="dark"] .ui.form input[type="search"],
[data-theme="dark"] .ui.form input[type="tel"],
[data-theme="dark"] .ui.form input[type="time"],
[data-theme="dark"] .ui.form input[type="text"],
[data-theme="dark"] .ui.form input[type="file"],
[data-theme="dark"] .ui.form input[type="url"],
[data-theme="dark"] .ui.form textarea,
[data-theme="dark"] .ui.selection.dropdown {
    background-color: #3a3b3c !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .ui.selection.dropdown .menu {
    background-color: #3a3b3c !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .ui.selection.dropdown .menu > .item {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .ui.selection.dropdown .menu > .item:hover {
    background-color: #4a4b4c !important;
}

[data-theme="dark"] .ui.table {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.table thead th {
    background-color: #3a3b3c !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.table tbody tr {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .ui.modal {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.modal > .header {
    background-color: #3a3b3c !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .ui.sidebar.menu {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .ui.sidebar.menu .item {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.sidebar.menu .item:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .ui.divider {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .ui.header {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.icon.header {
    color: var(--text-primary) !important;
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .ui.icon.header .icon {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .ui.placeholder.segment,
[data-theme="dark"] .ui.placeholder {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .ui.list .item,
[data-theme="dark"] .ui.list .list > .item {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.message {
    background-color: var(--bg-secondary) !important;
    box-shadow: var(--shadow) !important;
}

[data-theme="dark"] .ui.positive.message {
    background-color: #1a3d2e !important;
    color: #b5f5d1 !important;
}

[data-theme="dark"] .ui.negative.message {
    background-color: #3d1a1a !important;
    color: #f5b5b5 !important;
}

[data-theme="dark"] .ui.label {
    background-color: #3a3b3c !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.statistic > .value,
[data-theme="dark"] .ui.statistic > .label {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .pusher {
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .ui.container {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.basic.segment,
[data-theme="dark"] .ui.segments .segment {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4, 
[data-theme="dark"] h5, 
[data-theme="dark"] h6 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] p,
[data-theme="dark"] .ui.text,
[data-theme="dark"] .description {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .ui.horizontal.divider {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .ui.checkbox label,
[data-theme="dark"] .ui.checkbox + label {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.form .field > label {
    color: var(--text-primary) !important;
}

/* [data-theme="dark"] .ui.placeholder,
[data-theme="dark"] .ui.placeholder .header,
[data-theme="dark"] .ui.placeholder .line {
    background-color: rgba(255, 255, 255, 0.1) !important;
} */

[data-theme="dark"] .ui.cards > .card > .content > .header,
[data-theme="dark"] .ui.card > .content > .header {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.cards > .card > .content > .description,
[data-theme="dark"] .ui.card > .content > .description,
[data-theme="dark"] .ui.cards > .card > .content > .meta,
[data-theme="dark"] .ui.card > .content > .meta {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .ui.button:not(.primary):not(.positive):not(.negative):not(.inverted) {
    background-color: #3a3b3c !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.button:not(.primary):not(.positive):not(.negative):not(.inverted):hover {
    background-color: #4a4b4c !important;
}

[data-theme="dark"] a:not(.item):not(.button) {
    color: #4a9eff !important;
}

[data-theme="dark"] .ui.form .field > .selection.dropdown {
    background-color: #3a3b3c !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.header .sub.header {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .sub.header {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .ui.attached.message {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow) !important;
}

[data-theme="dark"] .ui.menu {
    background-color: var(--bg-secondary) !important;
    box-shadow: var(--shadow) !important;
}

[data-theme="dark"] .ui.menu .item {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.menu .item:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .ui.secondary.menu {
    background-color: transparent !important;
}

[data-theme="dark"] .ui.secondary.menu .item {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.secondary.menu .item:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .ui.dropdown .menu {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .ui.dropdown .menu > .item {
    color: var(--text-primary) !important;
    border-top-color: var(--border-color) !important;
}

[data-theme="dark"] .ui.dropdown .menu > .item:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .ui.dropdown .menu > .divider {
    border-top-color: var(--border-color) !important;
}

[data-theme="dark"] .ui.inverted.menu .ui.dropdown .menu {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .ui.inverted.menu .ui.dropdown .menu > .item {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.inverted.menu .ui.dropdown .menu > .item:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .ui.statistics .statistic > .value,
[data-theme="dark"] .ui.statistics .statistic > .label {
    color: var(--text-primary) !important;
}

/* Blue Theme */
[data-theme="blue"] {
    --bg-primary: #e8f4f8;
    --bg-secondary: #ffffff;
    --text-primary: #1e3a5f;
    --text-secondary: #4a6fa5;
}

[data-theme="blue"] body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="blue"] .ui.segment,
[data-theme="blue"] .ui.card,
[data-theme="blue"] .ui.cards > .card {
    background-color: var(--bg-secondary) !important;
    border-left: 4px solid #2185d0 !important;
}

/* Green Theme */
[data-theme="green"] {
    --bg-primary: #f0f8f0;
    --bg-secondary: #ffffff;
    --text-primary: #1e3a1e;
    --text-secondary: #4a6f4a;
}

[data-theme="green"] body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="green"] .ui.segment,
[data-theme="green"] .ui.card,
[data-theme="green"] .ui.cards > .card {
    background-color: var(--bg-secondary) !important;
    border-left: 4px solid #21ba45 !important;
}

/* Purple Theme */
[data-theme="purple"] {
    --bg-primary: #f5f0f8;
    --bg-secondary: #ffffff;
    --text-primary: #3a1e5f;
    --text-secondary: #6f4aa5;
}

[data-theme="purple"] body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="purple"] .ui.segment,
[data-theme="purple"] .ui.card,
[data-theme="purple"] .ui.cards > .card {
    background-color: var(--bg-secondary) !important;
    border-left: 4px solid #a333c8 !important;
}

body {
    background-color: var(--bg-primary);
    font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    color: var(--text-primary);
}

/* Theme switcher styles */
.theme-selector {
    padding: 0.5rem 1.5rem !important;
    margin-top: auto !important;
}

.ui.left.vertical.sidebar.menu {
    display: flex !important;
    flex-direction: column !important;
}

.theme-selector .checkbox {
    margin: 0 !important;
}

/* Mobile-first adjustments */
@media only screen and (max-width: 767px) {
    .ui.container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .ui.cards > .card {
        width: 100% !important;
        margin: 0.5em 0;
    }
    
    .ui.statistics {
        flex-wrap: wrap;
    }
    
    .ui.statistics > .statistic {
        flex: 0 0 50%;
        margin: 1em 0;
    }
    
    .ui.form .fields {
        flex-wrap: wrap;
    }
    
    .ui.form .field {
        width: 100% !important;
    }
}

/* Camera scanner styles */
#scanner-container {
    text-align: center;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 5px;
    box-shadow: var(--shadow);
}

#scanner-video {
    border-radius: 5px;
}

/* QR Code display */
.qr-code-display {
    text-align: center;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 5px;
}

/* Inventory cards */
.inventory-card {
    transition: box-shadow 0.3s ease;
}

.inventory-card:hover {
    box-shadow: var(--shadow-hover);
}

/* Quick action buttons */
.quick-action-button {
    min-height: 80px;
    font-size: 1.2em;
}

/* Expiry warning colors */
.expiry-warning {
    color: #f2711c;
}

.expiry-critical {
    color: #db2828;
}

/* Loading overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Touch-friendly buttons */
@media (hover: none) and (pointer: coarse) {
    .ui.button {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Print styles for QR codes */
@media print {
    body * {
        visibility: hidden;
    }
    
    .qr-code-display,
    .qr-code-display * {
        visibility: visible;
    }
    
    .qr-code-display {
        position: absolute;
        left: 0;
        top: 0;
    }
    
    .ui.menu,
    .ui.button {
        display: none !important;
    }
}