/* =========================================================
   Tee-Finder Deluxe – Portfolio-Theme
   Ergänzendes Stylesheet für die optische Angleichung an
   die Portfolio-Webseite von Marcel.

   Einbindung direkt NACH der bisherigen style.css:
   <link rel="stylesheet" href="./css/portfolio-theme.css">
   ========================================================= */

:root {
    --color-background: #07181b;
    --color-background-soft: rgba(8, 27, 30, 0.92);
    --color-card: rgba(14, 35, 38, 0.88);
    --color-card-solid: rgba(17, 42, 45, 0.96);

    --color-primary: #32b9b0;
    --color-primary-dark: #1d918d;
    --color-primary-darker: #126c6a;
    --color-primary-soft: rgba(50, 185, 176, 0.13);
    --color-primary-soft-strong: rgba(50, 185, 176, 0.22);

    --color-accent: #e2b15f;
    --color-accent-soft: rgba(226, 177, 95, 0.16);
    --color-accent-light: rgba(226, 177, 95, 0.12);

    --color-text: #f3fbfb;
    --color-text-soft: #c5d9da;
    --color-text-light: #9ab5b7;

    --color-border: rgba(73, 203, 196, 0.22);
    --color-border-strong: rgba(73, 203, 196, 0.42);

    --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.24);
    --shadow-medium: 0 14px 34px rgba(0, 0, 0, 0.3);
    --shadow-card-hover: 0 18px 40px rgba(0, 0, 0, 0.38);
}

/* ---------------------------------------------------------
   Hintergrund wie auf der Portfolio-Webseite
   --------------------------------------------------------- */

body {
    position: relative;
    isolation: isolate;
    background:
        linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.7)),
        url("/src/pictures/Background-3.png") center / cover fixed no-repeat,
        #07181b;
    color: var(--color-text);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at top left, rgba(50, 185, 176, 0.2), transparent 31rem),
        radial-gradient(circle at bottom right, rgba(9, 89, 91, 0.22), transparent 34rem);
}

body.modal-open {
    overflow: hidden;
}

/* ---------------------------------------------------------
   Grundlegende Karten – ähnlich style-card / style-hero
   --------------------------------------------------------- */

.dashboard-card {
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    background: linear-gradient(145deg, rgba(16, 42, 45, 0.94), rgba(8, 27, 30, 0.9));
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(10px);
}

.dashboard-intro {
    border-left-width: 6px;
    background:
        linear-gradient(135deg, rgba(21, 85, 86, 0.96), rgba(11, 46, 49, 0.94)),
        var(--color-card);
}

h1,
h2,
h3,
.tea-name,
.section-heading h2,
.recommendations-header h2,
.today-item strong,
.weather-result strong {
    color: var(--color-text);
}

h1 {
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

.brand-subtitle,
.eyebrow,
.form-label,
.tea-of-day-text p,
.recommendation-preview p,
.sidebar-hint,
.empty-info-box,
.results-footer span,
.weather-result,
.add-tea-description,
.add-tea-hint {
    color: var(--color-text-soft);
}

.eyebrow {
    color: #80dcd7;
}

.section-divider {
    background: rgba(112, 224, 217, 0.18);
}

/* ---------------------------------------------------------
   Chips, Kacheln und Kopfbereich
   --------------------------------------------------------- */

.quick-info-item,
.quick-info-button,
.quick-info-checkbox,
.stats-item,
.tea-stock,
.tag,
.match-badge {
    border-color: rgba(106, 222, 215, 0.18);
    background: rgba(50, 185, 176, 0.15);
    color: #d5ffff;
}

.quick-info-button:hover {
    background: rgba(50, 185, 176, 0.28);
}

.quick-info-add-tea {
    background: rgba(50, 185, 176, 0.28);
    color: #ffffff;
}

.today-item,
.weather-result,
.checkbox-card,
.results-footer span,
.empty-info-box,
.tea-feature-row {
    border-color: rgba(86, 207, 201, 0.2);
    background: rgba(7, 29, 32, 0.56);
}

.today-item-icon {
    width: 30px;
    height: 30px;
    margin-bottom: 6px;
    object-fit: contain;
}

.today-item span,
.stats-item span,
.feature-label {
    color: #a4c6c8;
}

.stats-item strong,
.results-footer strong,
.recommendation-preview strong,
.feature-tag,
.tea-type,
.weather-result small {
    color: #72d7d1;
}

.tea-of-day-image-wrapper {
    border: 1px solid rgba(106, 222, 215, 0.2);
    background: rgba(255, 255, 255, 0.94);
}

/* ---------------------------------------------------------
   Eingabefelder und Buttons
   --------------------------------------------------------- */

.form-control {
    border-color: rgba(92, 208, 201, 0.24);
    background: rgba(4, 20, 22, 0.76);
    color: #f6ffff;
}

.form-control::placeholder {
    color: #78999b;
}

.form-control:focus {
    border-color: rgba(96, 236, 227, 0.78);
    box-shadow: 0 0 0 3px rgba(50, 185, 176, 0.2);
}

select.form-control option {
    background: #0b292c;
    color: #f6ffff;
}

.button-primary,
.drink-btn {
    background: linear-gradient(135deg, #31b9b0, #1b8785);
    color: #ffffff;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.button-primary:hover,
.drink-btn:hover {
    background: linear-gradient(135deg, #43cbc2, #239c98);
}

.button-secondary,
.refill-btn,
.drink-btn-secondary,
.favorite-action-btn {
    border: 1px solid rgba(91, 214, 207, 0.23);
    background: rgba(50, 185, 176, 0.14);
    color: #cffffc;
}

.button-secondary:hover,
.refill-btn:hover,
.drink-btn-secondary:hover,
.favorite-action-btn:hover {
    background: rgba(50, 185, 176, 0.26);
}

.checkbox-card:hover {
    border-color: rgba(96, 236, 227, 0.52);
    background: rgba(50, 185, 176, 0.12);
}

/* ---------------------------------------------------------
   Tee-Karten
   --------------------------------------------------------- */

.tea-card {
    border: 1px solid rgba(91, 214, 207, 0.22);
    border-left: 4px solid var(--color-primary);
    background: linear-gradient(145deg, rgba(17, 43, 46, 0.98), rgba(8, 27, 30, 0.96));
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}

.tea-card:hover {
    border-color: rgba(92, 226, 217, 0.6);
    box-shadow: var(--shadow-card-hover);
}

.tea-image-wrapper {
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.98), rgba(232, 246, 245, 0.9));
}

.tea-caffeine {
    background: rgba(226, 177, 95, 0.18);
    color: #ffd994;
}

.tea-stock-low {
    background: rgba(221, 137, 70, 0.2);
    color: #ffc28f;
}

.tea-stock-warning {
    border-left-color: #e1a545;
    background: rgba(217, 154, 0, 0.16);
    color: #ffe0a6;
}

.tea-card-highlighted {
    border-color: rgba(226, 177, 95, 0.92);
    box-shadow:
        0 0 0 4px rgba(226, 177, 95, 0.2),
        0 18px 42px rgba(0, 0, 0, 0.4);
}

/* ---------------------------------------------------------
   Übersicht: niedriger Bestand
   --------------------------------------------------------- */

.low-stock-overview {
    margin-bottom: 18px;
}

.low-stock-description {
    margin: 12px 0 14px;
    color: var(--color-text-soft);
}

.low-stock-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.low-stock-item {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(226, 177, 95, 0.25);
    border-radius: var(--radius-small);
    background: rgba(226, 177, 95, 0.1);
}

.low-stock-item strong,
.low-stock-type {
    display: block;
}

.low-stock-item strong {
    overflow: hidden;
    color: #fff6e4;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.low-stock-type {
    color: #d2b98d;
    font-size: 0.68rem;
}

.low-stock-count {
    flex: 0 0 auto;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(226, 177, 95, 0.18);
    color: #ffe1a7;
    font-size: 0.7rem;
    font-weight: 800;
}

/* ---------------------------------------------------------
   Modalfenster: neuen Tee hinzufügen
   --------------------------------------------------------- */

.add-tea-modal[hidden] {
    display: none;
}

.add-tea-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 18px;
}

.add-tea-modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(5px);
}

.add-tea-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 820px);
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    padding: 22px;
    border-left-width: 5px;
}

.add-tea-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(98, 225, 217, 0.22);
    border-radius: 50%;
    background: rgba(50, 185, 176, 0.12);
    color: #eaffff;
    font-size: 1.35rem;
    line-height: 1;
}

.add-tea-modal-close:hover {
    background: rgba(50, 185, 176, 0.26);
}

.add-tea-fieldset {
    border-color: rgba(91, 214, 207, 0.22);
    background: rgba(5, 25, 27, 0.52);
}

.add-tea-fieldset legend {
    color: #7adbd5;
}

.add-tea-options label,
.add-tea-checkbox {
    border: 1px solid rgba(91, 214, 207, 0.18);
    background: rgba(50, 185, 176, 0.1);
    color: #d7f5f4;
}

.add-tea-caffeine {
    border-color: rgba(91, 214, 207, 0.22);
}

.add-tea-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.add-tea-message-success {
    color: #8ee3b1;
}

.add-tea-message-error {
    color: #ff9b91;
}

/* ---------------------------------------------------------
   Responsive Ergänzungen
   --------------------------------------------------------- */

@media (max-width: 900px) {
    .low-stock-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    body {
        background-attachment: scroll;
    }

    .dashboard-card,
    .tea-card {
        border-left-width: 3px;
    }

    .low-stock-list {
        grid-template-columns: 1fr;
    }

    .add-tea-modal {
        padding: 8px;
    }

    .add-tea-modal-dialog {
        max-height: calc(100vh - 16px);
        padding: 16px;
    }

    .add-tea-modal-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .add-tea-submit {
        min-width: 0;
    }
}