/* copyright 2026 peter mooring peterpm@xs4all.nl peter@petermooring.com all rights reserved */
body { qqqbackground-color: #0a0a0a; }

.w-page-max {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.w-modal-max {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.w-80px {
	min-width: 80px;
	max-width: 80px;
	width: 80px;
}

.w-100px {
	min-width: 100px;
	max-width: 100px;
	width: 100px;
}

.mw-120px {
	min-width: 120px;
}

.chat-container { 
    max-height: 75vh; 
    overflow-y: auto; 
    padding: 20px;
    qqqbackground-color: #111;
}
.message {
    margin-bottom: 18px; 
    max-width: 95%;
}
.user-msg { 
    background: #0d6efd; 
    color: white; 
    border-radius: 18px 18px 0 18px; 
    padding: 12px 16px; 
}
.ai-msg { 
    background: #1f1f1f; 
    color: #e0e0e0; 
    border-radius: 18px 18px 18px 0; 
    padding: 12px 16px; 
}
.typing {
    font-style: italic;
    color: #888;
    padding: 10px 16px;
}
.header-name {
    font-size: 1.1rem;
    font-weight: 500;
}

/* dots animation */
.typing .dots::after {
    content: ' .';
    animation: dots 1.4s steps(4, end) infinite;
    font-weight: bold;
}

@keyframes dots {
    0%   { content: ' ..'; }
    33%  { content: ' ....'; }
    66%  { content: ' ......'; }
    100% { content: ' ........'; }
}

.wi-icon img
        {
            position: relative;
            display: block;
            qheight: 120px;
            qwidth: 120px;
            qheight: 60px;
            qwidth: 60px;
            qheight: 30px;
            qwidth: 30px;
            height: 40px;
            width: 40px;
            qmargin-bottom: 12px;
            margin-bottom: 0px;
            transition: inherit;
        }

.card-wi-icon img {
    position: relative;
    display: block;
    qheight: 120px;
    qwidth: 120px;
    height: 60px;
    width: 60px;
    qmargin-bottom: 12px;
    margin-bottom: 0px;
    transition: inherit;
}

.card-wi-icon-svg {
    position: relative;
    display: block;
    qheight: 120px;
    qwidth: 120px;
    height: 80px;
    width: 80px;
    qmargin-bottom: 12px;
    margin-bottom: 0px;
    transition: inherit;
}

/* weather-icon - start */
.card-weather-icon-svg-small {
    position: relative;
    display: block;
    width: 56px;
    height: 56px;
    padding: 0px;
    margin: 0 auto;
    transition: inherit;
}
/* weather-icon - end */

/* humidity - start */
.card-humidity-icon-svg {
    position: relative;
    display: block;
    display: inline-block;           /* Important */
    margin: 0 auto;                  /* Centers the block */
    width: 24px;
    height: 24px;
    margin: 0px;
    padding: 0px;
    transition: inherit;
}

.humidity-parent {
    display: flex;                /* Enables Flexbox */
    justify-content: center;      /* Centers child elements horizontally */
    align-items: center;          /* Centers child elements vertically (optional) */
    height: 30px;
}

.humidity-child {
    margin: 0px;                /* Optional: Adds space between elements */
}
/* humidity - end */

/* uv-index - start */
.card-uv-index-icon-svg {
    position: relative;
    display: block;
    display: inline-block;
    margin: 0 auto;
    width: 20px;
    height: 20px;
    margin: 0px;
    padding: 0px;
    transition: inherit;
}

.uv-index-parent {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
}

.uv-index-child {
    margin: 0px;
}

.bg-uv-moderate {
    background-color: #facc15 !important;   /* Nice bright yellow */
    color: black !important;
}

.bg-uv-veryhigh {
    background-color: #ef4444 !important;   /* Strong red */
    color: white !important;
}

.bg-uv-extreme {
    background-color: #7c3aed !important;   /* Purple */
    color: white !important;
}

/* uv-index - end */

.card-wi-icon-img {
    position: relative;
    display: block;
    qheight: 120px;
    qwidth: 120px;
    height: 60px;
    width: 60px;
    qmargin-bottom: 12px;
    margin-bottom: 0px;
    transition: inherit;
}

.wi-icon2 img {
    position: relative;
    display: block;
    qheight: 120px;
    qwidth: 120px;
    height: 60px;
    width: 60px;
    qheight: 30px;
    qwidth: 30px;
    qheight: 40px;
    qwidth: 40px;
    qmargin-bottom: 12px;
    margin-bottom: 0px;
    transition: inherit;
}

.card-precip-icon-svg {
    position: relative;
    display: block;
    display: inline-block;           /* Important */
    margin: 0 auto;                  /* Centers the block */
    height: 40px;
    width: 40px;                    /* this is the height */
    qmargin-bottom: 12px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px;
    transition: inherit;
}

.card-precip-icon-placeholder {
    display: block;
    margin: 0 auto;
    width: 20px;
    height: 20px;                      /* Same height as the real icon */
    /* Optional: make it slightly visible for debugging */
    /* background: rgba(0,0,0,0.03); */
}


.hourly-forecast {
  margin-top: 20px;
}

.hourly-forecast h2 {
  margin-bottom: 8px;
  font-size: 1.1rem;
  color: #475569;
}

.hours-scroll {
    overflow-x: auto;
    padding: 12px 8px 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;           /* Firefox */
    scrollbar-color: #94a3b8 #e2e8f0;
}

.hours-scroll::-webkit-scrollbar {
    height: 8px;                     /* Visible scrollbar on Chrome/Edge/Safari */
}

.hours-scroll::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 10px;
}

/* dummy class used for selection */
.hour-card {
}

/* all columns */
.hour-card-small {
    min-width: 60px;
    max-width: 60px;
}

/* all columns */
.hour-card-wide {
    min-width: 120px;
    max-width: 120px;
}

/* all columns but first column */
.hour-card-next {
    margin-left: -1px;
}

.hour-card:hover {
  transform: translateY(-2px);
}

/* hour-card small/wide toggle - start */
/* make .hour-card-wide-visible and .card-weather-icon-svg toggle with small/wide */
.hour-card-small .hour-card-wide-visible {
    display: none !important;
}

.hour-card-wide .hour-card-wide-visible {
    display: block !important;
}

.hour-card-small .card-weather-icon-svg {
    width: 56px;
    height: 56px;
    transition: all 0.3s;
}

.hour-card-wide .card-weather-icon-svg {
    width: 120px;
    height: 120px;
    transition: all 0.3s;
}
/* hour-card small/wide toggle - end */

/* cloud-cover - start */
.card-cloud-cover-bar {
  width: 100%;
  height: 2px;               /* slim height as requested */
  background: #334155;       /* dark background */
  border-radius: 9999px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}

.card-cloud-cover-fill {
  height: 100%;
  background: #e2e8f0;       /* light cloud color - most visible */
  transition: width 0.6s ease;
  border-radius: 9999px;
}

.card-cloud-cover-fill-high-clouds {
  height: 100%;
  background: #1ae8f0;       /* high clouds - light blue cloud color - most visible */
  transition: width 0.6s ease;
  border-radius: 9999px;
}
/* cloud-cover - end */

/* uv-index - start */
.uv-index-level-none          { background-color: #313e52 !important; color: #fff; }
.uv-index-level-low           { background-color: #4ade80 !important; color: #000; }   /* green */
.uv-index-level-moderate      { background-color: #facc15 !important; color: #000; }   /* yellow */
.uv-index-level-high          { background-color: #fb923c !important; color: #000; }   /* orange */
.uv-index-level-very-high     { background-color: #ef4444 !important; color: #000; }   /* red */
.uv-index-level-extreme       { background-color: #7c3aed !important; color: #000; }   /* purple */
/* uv-index - end */

/* pressure-msl - start */
.pressure-msl-level-very-low  { color: #dc3545; }   /* red */
.pressure-msl-level-low       { color: #fd7e14; }   /* orange */
.pressure-msl-level-normal    { color: #ffffff; }   /* secondary gray */
.pressure-msl-level-high      { color: #0dcaf0; }   /* cyan / info */
.pressure-msl-level-very-high { color: #0d6efd; }   /* blue */

.pressure-msl-trend-no-chnage {
}
.pressure-msl-trend-noticeable {
}
.pressure-msl-trend-rapid {
    color: var(--bs-warning) !important;
}
.pressure-msl-trend-extreme {
    color: var(--bs-danger) !important;
}
/* pressure-msl - end */

/* nav tabs - start */
.nav-tabs .nav-link:not(.active) {
	color: var(--bs-secondary);
}
/* subtle darkening effect while pressing, on mobile */
.nav-tabs .nav-link:active {
	background-color: rgba(0, 0, 0, 0.05);
}
/* nav tabs - end */

/* checkbox_switch_size - start */
.form-switch .form-check-input {
  width: 3rem;
  height: 1.5rem;
}
/* checkbox_switch_size - end */

/* button_installation - start */
.ios-share-icon {
	font-size: 18px;
	font-weight: bold;
}

.indent {
	margin-left: 20px;
}
/* button_installation - end */

/* user_settings_list_group - start */
.list-group-custom {
	gap: 0.75rem;
}

.list-group-custom .list-group-item {
	margin-bottom: 0;
	border: 1px solid var(--bs-secondary);
	
	border-radius: 0.75rem;
}

/* Optional: Adjust active/hover states */
.list-group-custom .list-group-item.active {
	background-color: #0d6efd;
	border-color: #0d6efd;
}
/* user_settings_list_group - end */