/* Dashboards page: hero stage, widget filters, built-in vs app widgets, builder, kiosk */

/* hero stage: dashboard tabs over a tablet + phone */
.dh-stage { width: min(100%, 1060px); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.dh-tabs { display: inline-flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,0.07); flex-wrap: wrap; justify-content: center; }
.dh-tabs button { font: inherit; font-size: 14px; font-weight: 600; color: #AAB4CC; background: transparent; border: 0; border-radius: 999px; padding: 8px 16px; min-height: 40px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background-color .2s ease, color .2s ease, transform var(--spring-snappy-ms) var(--spring-snappy); }
.dh-tabs button[aria-pressed="true"] { background: var(--white); color: var(--ink); }
.dh-tabs button:active { transform: scale(.96); }
.dh-devices { position: relative; width: 100%; display: flex; justify-content: center; }
.dh-tablet { width: min(100%, 900px); }
.dh-tablet .tscreen { min-height: 430px; align-items: start; }
.dh-phone { position: absolute; inset-inline-end: -10px; bottom: -36px; width: 230px; height: 470px; border-radius: 38px; transform: rotate(4deg); }
[dir="rtl"] .dh-phone { transform: rotate(-4deg); }
.dh-phone .screen { border-radius: 30px; padding: 22px 10px 10px; gap: 8px; }
.dh-phone .widget { margin: 0; padding: 10px; font-size: 12px; }
@media (max-width: 900px) { .dh-phone { display: none; } }
.dh-swap > * { animation: sky-up var(--spring-reveal-ms) var(--spring-reveal) both; animation-delay: var(--d, 0ms); }

/* widget wall filter chips */
.dh-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.dh-chips button { font: inherit; font-size: 14px; font-weight: 600; color: #C9D2E6; background: rgba(255,255,255,0.06); border: 1px solid var(--night-line); border-radius: 999px; padding: 8px 14px; min-height: 40px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; transition: transform var(--spring-snappy-ms) var(--spring-snappy), background-color .2s; }
.dh-chips button[aria-pressed="true"] { background: var(--teal); color: var(--navy); border-color: var(--teal); }
.dh-chips button:active { transform: scale(.96); }
.masonry .widget.is-out { display: none; }

/* built-in vs app widgets */
.dh-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 860px) { .dh-split { grid-template-columns: 1fr; } }
.dh-kind { gap: 16px; }
.night-box { background: var(--night); border-radius: 20px; padding: 14px; }
.dh-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-height: 360px; align-content: start; }
.dh-mini .widget { margin: 0; }
.appw-badge { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #C4B5FD; display: inline-flex; align-items: center; gap: 4px; }

/* builder */
.db-wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 960px) { .db-wrap { grid-template-columns: 1fr; } }
.db-palette { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 90px; }
@media (max-width: 960px) { .db-palette { position: static; } }
.db-seg { width: 100%; }
.db-seg [data-tab] { flex: 1 1 0; justify-content: center; padding-inline: 8px; font-size: 14px; }
.db-themes { display: flex; gap: 8px; }
.db-themes button { width: 44px; height: 44px; border-radius: 14px; border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform var(--spring-snappy-ms) var(--spring-snappy); }
.db-themes button[aria-pressed="true"] { border-color: var(--blue, #007BFF); box-shadow: 0 0 0 3px rgba(0,123,255,.2); }
.db-themes button:active { transform: scale(.92); }
.db-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 420px; overflow: auto; padding: 2px; }
.db-list button { font: inherit; font-size: 13px; font-weight: 600; text-align: start; color: var(--ink); background: var(--white); border: 1px solid #D6DCE8; border-radius: 12px; padding: 10px; min-height: 44px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: transform var(--spring-snappy-ms) var(--spring-snappy), border-color .2s; }
.db-list button:hover { border-color: var(--teal); }
.db-list button:active { transform: scale(.95); }
.db-list button.is-used { opacity: .45; }
.db-list .tag { margin-inline-start: auto; font-size: 10px; color: #7C3AED; font-weight: 700; }

.db-canvas-wrap { display: flex; justify-content: center; }
.db-frame { --cols: 3; width: 100%; max-width: 900px; border-radius: 34px; background: #2B3245; padding: 14px; box-shadow: 0 40px 80px rgba(6,10,23,0.25); transition: max-width var(--spring-gentle-ms) var(--spring-gentle), border-radius .3s ease; }
.db-frame[data-device="phone"] { --cols: 1; max-width: 340px; border-radius: 46px; }
.db-frame[data-device="tablet"] { --cols: 2; max-width: 620px; }
.db-frame[data-device="wall"] { --cols: 3; max-width: 900px; border-radius: 18px; background: #1A1F2C; }
.db-head { display: flex; justify-content: space-between; align-items: center; color: #fff; padding: 6px 10px 12px; }
.db-head b { font-family: 'Sora', sans-serif; font-size: 18px; }
.db-head .small { color: #AAB4CC; }
.db-canvas { --bg: #0D1324; border-radius: 22px; background: var(--bg); padding: 14px; min-height: 420px; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 12px; align-content: start; transition: background-color .4s ease; }
.db-frame[data-theme="sand"] .db-canvas { --bg: #2A2116; }
.db-frame[data-theme="sand"] .db-canvas .widget { background: #3A2E1F; border-color: rgba(255,230,190,.12); }
.db-frame[data-theme="teal"] .db-canvas { --bg: #052A2A; }
.db-frame[data-theme="teal"] .db-canvas .widget { background: #0B3B3B; border-color: rgba(94,234,212,.15); }
.db-item { position: relative; cursor: grab; touch-action: none; }
.db-item.is-wide { grid-column: span min(2, var(--cols)); }
.db-item .widget { margin: 0; height: 100%; }
.db-item.dragging { opacity: .35; }
.db-item.drop-before::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: -7px; width: 3px; border-radius: 3px; background: var(--teal); }
.db-tools { position: absolute; top: 6px; inset-inline-end: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .2s; z-index: 2; }
.db-item:hover .db-tools, .db-item:focus-within .db-tools { opacity: 1; }
@media (hover: none) { .db-tools { opacity: 1; } }
.db-tools button { width: 30px; height: 30px; border-radius: 9px; border: 0; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.db-tools button:focus-visible { outline: 2px solid var(--teal); }
.db-empty { grid-column: 1 / -1; border: 2px dashed rgba(255,255,255,.18); border-radius: 18px; color: #AAB4CC; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 380px; text-align: center; padding: 20px; }

/* kiosk */
.dh-ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.dh-ticks li { display: flex; gap: 10px; align-items: center; color: #DCE3F2; }
.dh-ticks li > span:first-child { color: var(--teal); }
.kiosk { border-radius: 20px; background: #1A1F2C; padding: 14px; box-shadow: 0 40px 80px rgba(0,0,0,.45); }
.kiosk-screen { position: relative; border-radius: 10px; background: #000; aspect-ratio: 16 / 10; overflow: hidden; }
.kiosk-saver, .kiosk-dash { position: absolute; inset: 0; transition: opacity .6s ease, transform var(--spring-smooth-ms) var(--spring-smooth); }
.kiosk-saver { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #fff; text-align: center; }
.kiosk-saver .clock { font-family: 'Sora', sans-serif; font-weight: 600; font-size: clamp(44px, 7vw, 76px); letter-spacing: .02em; }
.kiosk-saver .next { color: #5EEAD4; font-weight: 600; }
.kiosk-dash { background: #0D1324; padding: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; opacity: 0; transform: scale(1.04); pointer-events: none; }
.kiosk-dash .widget { margin: 0; padding: 10px; font-size: 12px; }
.kiosk.awake .kiosk-dash { opacity: 1; transform: none; pointer-events: auto; }
.kiosk.awake .kiosk-saver { opacity: 0; transform: scale(.96); }
@media (max-width: 560px) { .kiosk-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kiosk-dash > :nth-child(n+5) { display: none; } }