/*  home.kaikarrel.com - app-mode layout (iPhone app / phone browser).
    Loaded through 'css' in /pwa.config.php. Every rule is scoped under html.app,
    so the desktop site never sees it. Shared app chrome lives in /pwa (dev.admin/pwa).
    To beat a shared !important utility class (.mr20, .w60 ... live in @layer core/tbl),
    put the override in  @layer pwa { ... !important }  - see the water section.  */

/* ----~~~~ Home ~~~~---- */
/* One column that can't be pushed wider than the screen by a long row of chips */
html.app #home_grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
/* site.css takes 22px off cards on .mobile - full width in the app */
html.app #home_grid .card { width: 100%; }

/* ----~~~~ Home / room switcher (drag_tabs) ~~~~---- */
/* It scrolls sideways - fade the right edge so a cut-off name reads as "swipe for more" */
html.app .drag_tabs {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}

/* ----~~~~ Rooms (/rooms) - admin table shown as an iOS grouped list ~~~~---- */
html.app[data-page="rooms"] .divider,
html.app[data-page="rooms"] .res_total,
html.app[data-page="rooms"] .table_wrap .tbl.hdr { display: none; }
html.app[data-page="rooms"] .table_wrap {
	gap: 0 !important;                     /* the admin table spaces rows apart */
	background: #1c1c1e; border-radius: 10px; overflow: hidden; margin-bottom: 20px;
}
html.app[data-page="rooms"] .table_wrap .tbl:not(.hdr) {
	position: relative; display: flex; align-items: center;
	height: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0 36px 0 16px !important;
	background: none; border: 0; border-radius: 0 !important;
}
/* hairline between rows, inset like iOS */
html.app[data-page="rooms"] .table_wrap .tbl:not(.hdr) + .tbl::before {
	content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: .5px solid rgba(84, 84, 88, .65);
}
/* chevron on the right of every row */
html.app[data-page="rooms"] .table_wrap .tbl:not(.hdr)::after {
	content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -5px;
	border: solid rgba(235, 235, 245, .3); border-width: 2px 2px 0 0; transform: rotate(45deg);
}
/* only the room name stays; ID / Created / delete are desktop columns */
html.app[data-page="rooms"] .table_wrap .tbl .tblc { display: none; }
html.app[data-page="rooms"] .table_wrap .tbl .tblc.o1 {
	display: block; width: auto !important; flex: 1; padding: 0 !important; background: none; border: 0;
	height: 48px !important; line-height: 48px !important;
	font-size: 17px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* the pencil cell stretches invisibly over the whole row - tap anywhere to edit.
   (.w60 forces width:60px !important - min-width wins over width) */
html.app[data-page="rooms"] .table_wrap .tbl .tblc.edit {
	display: block; position: absolute !important; top: 0 !important; left: 0 !important;
	min-width: 100% !important; height: 100% !important; padding: 0 !important;
	background: none; border: 0; z-index: 1;
}
html.app[data-page="rooms"] .table_wrap .tbl .tblc.edit::before { display: none; }   /* pencil glyph */
html.app[data-page="rooms"] .table_wrap .tbl:not(.hdr):active { background: rgba(120, 120, 128, .24); }

/* ----~~~~ Water (/water) ~~~~---- */
/* #water adds its own 20px sides - the app page gutter already does that */
html.app[data-page="water"] #water { padding-left: 0; padding-right: 0; }
/* the tank: a full-width summary card, its buttons in a row underneath */
html.app[data-page="water"] .w-tank-wrap { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 10px; }
/* .mr20 (margin-right:20px !important in @layer core) - only @layer pwa can beat it */
@layer pwa { html.app[data-page="water"] .w-tank-wrap { margin-right: 0 !important; } }
html.app[data-page="water"] #w-tank {
	flex: 1 1 100%; text-align: left; margin: 0; min-width: 0;
	background: #1c1c1e; border-radius: 12px; padding: 14px 16px;
}
html.app[data-page="water"] #w-tank .w-tank-v { font-size: 34px; }
html.app[data-page="water"] #w-tank .w-tank-s { white-space: normal; }
html.app[data-page="water"] .w-tank-wrap > .btn { width: auto !important; }
/* Tank Filled takes the row, mail + sync sit beside it */
html.app[data-page="water"] .w-tank-wrap > .btn:first-of-type { flex: 1 1 auto; }
html.app[data-page="water"] .divider { display: none; }
/* device status cards and filter controls run full width */
html.app[data-page="water"] .w-status { flex-direction: column; }
html.app[data-page="water"] .w-dev { margin: 0; }
html.app[data-page="water"] .w-seg { display: flex; width: 100%; }
html.app[data-page="water"] .w-seg > * { flex: 1; text-align: center; }
/* usage table: Period + Total + Peak Flow only - the per-device columns don't fit a phone */
html.app[data-page="water"] .w-table .tbl > .tblc:not(:first-child):not(:nth-last-child(-n+2)) { display: none; }
@layer pwa {
	/* .w150 is width:150px !important in @layer core */
	html.app[data-page="water"] .w-table .tbl > .tblc.w150 { flex: 0 0 88px !important; width: 88px !important; padding: 0 6px !important; }
}
html.app[data-page="water"] .w-table .tbl > .tblc:first-child { flex: 1 1 0; min-width: 0; width: auto; padding-left: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ----~~~~ Electricity (/electricity) - same treatment as Water ~~~~---- */
html.app[data-page="electricity"] #electric { padding-left: 0; padding-right: 0; }
html.app[data-page="electricity"] .divider { display: none; }
/* battery/outage status: a full-width card, rate + mail + sync in a row underneath */
html.app[data-page="electricity"] .e-bat-wrap { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 10px; }
@layer pwa { html.app[data-page="electricity"] .e-bat-wrap { margin-right: 0 !important; } }
html.app[data-page="electricity"] #e-bat {
	flex: 1 1 100%; margin: 0; min-width: 0;
	background: #1c1c1e; border-radius: 12px; padding: 14px 16px;
}
html.app[data-page="electricity"] .e-bat-wrap > .btn:first-of-type { flex: 1 1 auto; }
/* status cards and filter switches run full width */
html.app[data-page="electricity"] .e-status { flex-direction: column; }
html.app[data-page="electricity"] .e-seg { display: flex; width: 100%; }
html.app[data-page="electricity"] .e-seg > * { flex: 1; text-align: center; }