@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap');

/************************************************** || CSS SECTION PAGE LAYOUT || *************************************************/
/*
 * |Colors|
 * |Typography|
 * |General_styles_and_layouts|
 * |Workspace_header_and_main_navigation|
 *		-|ws_workspace|
 			-|ws_default|
 				-|ws_default_header|
 					-|ws_default_header_usermenu|
 					-|ws_default_breadcrumbs|
 					-|ws_default_left_sidebar|
 				-|ws_default_search|
 				-|ws_default_fw_button|
 				-|ws_default_fw_icon|
 			-|ws_roleAdmin|
 			-|ws_roleTech|
 				-|ws_roleTech_header|
 * |Page_specific_layout_and_styles|
 		-|pg-default|
 			-|pg_default_left_drawer|
 			-|pg_default_summary|
 			-|pg_default_calendar|
 		-|pg_roleAdmin|
 			-|pg_roleAdmin_rsAgency|
 			-|pg_roleAdmin_rsProperty|
 			-|pg_roleAdmin_rsJob|
 		-|pg_roleTech|
 			-|pg_roleTech_rstechDailySchedule|
 			-|pg_roleTech_rstechJob|
 			-|pg_roleTech_rstechJobForms|
 			-|pg_roleTech_rstechJobInspection|
 			-|pg_roleTech_rstechQuestionAnswers|
 * |Object_specific_layout_and_styles|
 		-|rstechDailySchedule|
 		-|rstechJob|
 		-|rstechJobForms|
 		-|rstechJobInspection|
 		-|rstechQuestionAnswers|
*/

/* Comments
 * Color palette should ideally be generated by a material design theme selector
 * All colours should be defined here and the var tags used in the rest of the styles
 * All styles and layouts should be defined in the general section and then the variable tags used in the preceding sections.
*/


/************************************************** |Colors| ****************************************************************/

:root{
    --date-fill-color: #2a7d43;
    --md-sys-color-primary: rgb(60 96 144);
    --md-sys-color-surface-tint: rgb(60 96 144);
    --md-sys-color-on-primary: rgb(255 255 255);
    --md-sys-color-primary-container: rgb(212 227 255);
    --md-sys-color-on-primary-container: rgb(33 72 118);
    --md-sys-color-secondary: rgb(60 96 144);
    --md-sys-color-on-secondary: rgb(255 255 255);
    --md-sys-color-secondary-container: rgb(212 227 255);
    --md-sys-color-on-secondary-container: rgb(34 72 118);
    --md-sys-color-tertiary: rgb(62 95 144);
    --md-sys-color-on-tertiary: rgb(255 255 255);
    --md-sys-color-tertiary-container: rgb(213 227 255);
    --md-sys-color-on-tertiary-container: rgb(36 71 119);
    --md-sys-color-error: rgb(186 26 26);
    --md-sys-color-on-error: rgb(255 255 255);
    --md-sys-color-error-container: rgb(255 218 214);
    --md-sys-color-on-error-container: rgb(147 0 10);
    --md-sys-color-background: rgb(243 243 243);
    --md-sys-color-on-background: rgb(25 28 32);
    --md-sys-color-surface: rgb(245 250 251);
    --md-sys-color-on-surface: rgb(23 29 30);
    --md-sys-color-surface-variant: rgb(221 227 234);
    --md-sys-color-on-surface-variant: rgb(65 71 77);
    --md-sys-color-outline: rgb(113 120 126);
    --md-sys-color-outline-variant: rgb(193 199 206);
    --md-sys-color-shadow: rgb(0 0 0);
    --md-sys-color-scrim: rgb(0 0 0);
    --md-sys-color-inverse-surface: rgb(43 49 51);
    --md-sys-color-inverse-on-surface: rgb(236 242 243);
    --md-sys-color-inverse-primary: rgb(165 200 255);
    --md-sys-color-primary-fixed: rgb(212 227 255);
    --md-sys-color-on-primary-fixed: rgb(0 28 58);
    --md-sys-color-primary-fixed-dim: rgb(165 200 255);
    --md-sys-color-on-primary-fixed-variant: rgb(33 72 118);
    --md-sys-color-secondary-fixed: rgb(212 227 255);
    --md-sys-color-on-secondary-fixed: rgb(0 28 58);
    --md-sys-color-secondary-fixed-dim: rgb(166 200 255);
    --md-sys-color-on-secondary-fixed-variant: rgb(34 72 118);
    --md-sys-color-tertiary-fixed: rgb(213 227 255);
    --md-sys-color-on-tertiary-fixed: rgb(0 28 59);
    --md-sys-color-tertiary-fixed-dim: rgb(167 200 255);
    --md-sys-color-on-tertiary-fixed-variant: rgb(36 71 119);
    --md-sys-color-surface-dim: rgb(213 219 220);
    --md-sys-color-surface-bright: rgb(245 250 251);
    --md-sys-color-surface-container-lowest: rgb(255 255 255);
    --md-sys-color-surface-container-low: rgb(239 245 246);
    --md-sys-color-surface-container: rgb(233 239 240);
    --md-sys-color-surface-container-high: rgb(227 233 234);
    --md-sys-color-surface-container-highest: rgb(222 227 229);
	
	--rs-subtext: #999;
	--rs-container-secondary-text: var(--md-sys-color-on-secondary-container);
	
	--rs-container-third-text: var(--md-sys-color-on-tertiary-container);
	--rs-container-fourth-text: var(--md-sys-color-primary);
	--rs-container-primary-text: var(--md-sys-color-on-primary);
	--rs-primary-gray-text: var(--md-sys-color-outline);

	--rs-container-secondary: var(--md-sys-color-surface);

	--rs-container-third: var(--md-sys-color-primary);

    --rs-container-primary-border: var(--md-sys-color-outline-variant);
    --rs-container-secondary-border: #D6E7FF;

    --rs-container-hover: var(--md-sys-color-primary-container);

/**********************************************/

	--rs-button-selected: var(--md-sys-color-primary);
	
	/* TODO: ad defined colors. Need to be properly mapped to the above so we can use a theme editor*/
	/*mapped*/
	--rs-workspace-bg : var(--md-sys-color-background);
	--rs-header	: var(--md-sys-color-primary);
	--rs-header-calendar: var(--md-sys-color-tertiary);
	--rs-view-header: var(--md-sys-color-secondary);
	--rs-left-sidebar:var(--rs-container-secondary);
	--rs-menu-highlight: var(--md-sys-color-primary-container);
	--rs-fwbutton : var(--md-sys-color-secondary);
	--rs-fwbutton-text : var(--md-sys-color-on-secondary);
	--rs-fwbutton-active : var(--md-sys-color-primary-fixed);
	--rs-fwbutton-shadow : var(--md-sys-color-surface-tint);
	--rs-primary-border : var(--md-sys-color-primary);
	
	/*need to re map*/
	--rs-header-breadcrumbs: var(--rs-container-third);
	--rs-wsdefault-text: rgb(52 95 155);
	--rs-wsheader-text: var(--rs-container-primary-text);
	--rs-left-sidebar-text: var(--md-sys-color-on-secondary-container);
	--rs-header-text: var(--rs-container-secondary-text);
	--rs-icon-initials-text: var(--rs-container-primary-text);
	--rs-primary-gray-text: var(--rs-primary-gray-text);
	--rs-secondary-border : var(--rs-container-primary-border);
	
	--rs-left-sidebar-button: var(--rs-fwbutton);
	--rs-left-sidebar-button-text: var(--rs-fwbutton-text);

	--rs-left-drawer-bg: var(--rs-container-secondary);
	--rs-left-drawer-hover: var(--rs-container-hover);
	
	/*miscellaneous mappings*/
	--rs-primary-border: 1px solid var(--rs-container-primary-border);
	--rs-primary-no_border: 0px solid var(--rs-container-primary-border);
	--rs-primary-border-color: var(--rs-container-primary-border);
    --rs-secondary-border: 1px solid var(--rs-container-secondary-border);
    --rs-secondary-no_border: 0px solid var(--rs-container-secondary-border);
    --rs-secondary-border-color: var(--rs-container-secondary-border);
	
	--rs-drawer-border-radius: 0px 24px 24px 0px;
	
	--rs-calendar-tile-color-on: #ffebca;
	--rs-calendar-tile-text-color-on: #333333;
	--rs-calendar-tile-color-off: #fffcf8;
	--rs-calendar-tile-text-color-off: #474747;

	/* Property tag special-case colours - the scheduling drawer card's/calendar tile's NEW/240V
	   treatment. 240V is deliberately darker than the urgent-card red (--md-sys-color-error) but
	   not black - a straight darken of that same colour rather than an unrelated red, so the two
	   read as "more severe than urgent" without clashing against it. */
	--rs-tag-new-color: #2e7d32;
	--rs-tag-240v-color: color-mix(in srgb, var(--md-sys-color-error, #ba1a1a) 75%, black);
}


/************************************************** |Typography| *************************************************************/
body { font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 0.9em; color: var(--rs-wsdefault-text);background: var(--md-sys-color-background); overflow-x: hidden;}
/* body { font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 0.9em; color: var(--rs-wsdefault-text);background: #e7effb;} */

dialog {
	padding: 0;
}
dialog .dialog-header {
    margin-right: 0;
    margin-left: 0;
}
.material-symbols-outlined-fill {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}
.heading_lrg{ font: 2.25em;	color: var(--rs-header-text); font-weight: bold;}
.heading_med{ font: 1.3em; color: var(--rs-header-text); font-weight: bold;}
.heading_sml{ font: 1em; color: var(--rs-header-text); font-weight: bold;}
/************************************************** |General_styles_and_layouts| *********************************************/
.flex-row-left {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.flex-row-left-center {
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.flex-column-left {
	display: flex;
	flex-direction: column;
}

.flex-column-left-center {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.grid-left {
	display: grid;
}

/************************************************** |Workspace_header_and_main_navigation| ***********************************/
/*|workspace|*/
	#workspace {
		width:100%;
		height:100vh;
		display: grid;
		/* workspace-bgnd.svg is a fixed 1920x519 asset - with no background-size it only ever
		   painted at that native pixel size, so on anything wider than ~1920px (increasingly common
		   as monitors get bigger) the graphic ran out before the header did, leaving its left portion
		   on the plain page background instead - exactly where the (white) header title text sits,
		   making it unreadable. background-size:100% auto stretches it to always span the full
		   width, scaling height proportionally (no distortion), so it covers the header the same way
		   regardless of resolution. Reported 2026-09-10.
		*/
		background: url(../images/workspace-bgnd.svg) no-repeat top right;
		background-size: 100% auto;
	}
/*|ws_default|*/
	#workspace .workspace-body {
		display: grid;
		grid-template-columns: max-content auto max-content;
		min-height:0;
/* 		background: var(--rs-workspace-bg); */
	}
/*|ws_default_header|*/
	#workspace header {
	   position: absolute;
	   right: 0;
	   display: flex;
	}
	#workspace header .material-symbols-outlined {
		color: var(--rs-wsheader-text);
		font-size: 32px;
	}


/*|ws_default_header_usermenu|*/
	#workspace .right-drawer .user-avatar-menu {
		display: flex;
		cursor: pointer;
	}
	#workspace .right-drawer .user-avatar-menu .drop-arrow {
	   	font-size: 24px;
 	    line-height: 1.4;
	}
	#workspace .right-drawer .user-avatar-menu .user-name {
		display: inline-block;
		color: var(--rs-wsheader-text);
		font-size: 16px;
		padding-left: 8px;
		line-height: 2;
	}
	#workspace .right-drawer .user-avatar-menu {
		display: none;
		position: absolute;
	    top: 0;
	    background: #184f8a;
	    color: var(--rs-wsheader-text);
	    padding: 12px 0;
	    width: 211px;
	    border: var(--rs-primary-border);	
	    z-index: 1000;
	    right: 62px;
	    margin: 0;
	    border-top-left-radius: 10px;
	    border-bottom-left-radius: 10px;
	    border-color: #6d8dbc;
	}
	#workspace .right-drawer .user-avatar-menu li {
		list-style-type: none;
	}
	#workspace .right-drawer .user-avatar-menu li a {
		color: inherit;
	    font-size: 1em;
	    display: flex;
	    align-items: center;
	    padding: 8px 12px;
	    border: 1px solid transparent;
	    border-width: 1px 0;
	}
	#workspace .right-drawer .user-avatar-menu li a:hover {
		background-color: var(--rs-header);
		border-color: var(--rs-primary-border-color);
	}

/*|ws_default_breadcrumbs|*/
	#workspace header .header-breadcrumbs {
		height: 25px;
		background-color: var(--rs-header-breadcrumbs);
		border: var(--rs-primary-no_border);
		border-width: 1px 0;
		box-sizing: border-box;
	}
/*|ws_default_left_sidebar|*/
	#workspace .workspace-body .left-sidebar {
		width: 180px;
		height: 100%;
		background-color: var(--rs-left-sidebar);
		display: flex;
	    flex-direction: column;
	    justify-content: space-between;
	    font-size: 16px;
	    border-right: var(--rs-primary-border);
	    transition: all .5s ease;
	    overflow: hidden;
	}
	#workspace .workspace-body .left-sidebar.left-sidebar__closed{
		width: 60px;
	}
	#workspace .workspace-body .left-sidebar .top {
		display: grid;
	    grid-row-gap: 12px;
	    grid-template-columns: 100%;
	}
	#workspace .workspace-body .left-sidebar .top .collapse-control {
		text-align: right;
	    color: var(--rs-left-sidebar-text);
	    font-size: 32px;
	    line-height: .5;
	    margin-top: 15px;
	    cursor: pointer;	
	    transition: all .5s ease;
	}
	#workspace .workspace-body .left-sidebar .top .logo {
	   background: url(../images/rs_logo.svg) no-repeat top left;
	   width: 100%;
	   height: 50px;
	   background-size: 150px;
	}
    #workspace .workspace-body .left-sidebar.left-sidebar__closed .top .logo {
       background: url(../images/rs_logo_icon.svg) no-repeat top center;
       background-size: contain;
    }
	#workspace .workspace-body .left-sidebar .top .collapse-control span {
	    font-size: 32px;
	    line-height: .5;
	    transition: all .5s ease;
	}
	#workspace .workspace-body .left-sidebar.left-sidebar__closed .top .collapse-control {
		text-align: center;
	}
	#workspace .workspace-body .left-sidebar.left-sidebar__closed .top .collapse-control span {
		visibility: hidden;
	}
	#workspace .workspace-body .left-sidebar .top .middle {
	    text-align: center;
	}
	#workspace .workspace-body .left-sidebar .top .middle .searcher::before {
        font-family: 'Material Symbols Outlined';
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-feature-settings: 'liga';
        font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
        content: "search";
        width: 35px;
        min-width: 35px;
        position: absolute;
        padding: 8px 0 6px 0;
	}
    #workspace .workspace-body .left-sidebar .top .middle .searcher input,
    #workspace .workspace-body .left-sidebar .top .middle .searcher .searcher-trigger {
	    background: transparent;
	    border: 1px solid var(--md-sys-color-outline-variant);
	    border-radius: 2em;
	    font-size: 12px;
        padding: 7px 16px 7px 32px;
        width: 140px;
    }
    #workspace .workspace-body .left-sidebar.left-sidebar__closed .top .middle .searcher input,
    #workspace .workspace-body .left-sidebar.left-sidebar__closed .top .middle .searcher .searcher-trigger {
        /* Matches the icon's own box (.searcher::before, above) exactly, rather than shrinking to
           width:0 - that left the actual click target smaller than (and not reliably aligned with)
           the visible icon circle, and let a sliver of the trigger's placeholder text peek through
           via box-model clamping. color:transparent hides that text outright rather than relying on
           width/overflow alone to clip it. */
        width: 35px;
        padding: 8px 0 6px 0;
        color: transparent;
    }
    #workspace .workspace-body .left-sidebar .top .middle .searcher .searcher-trigger {
        text-align: left;
        color: var(--md-sys-color-on-surface-variant, #79747e);
        font-family: Roboto, Arial, Helvetica, sans-serif;
        cursor: text;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
	#workspace .workspace-body .left-sidebar .top .left-sidebar-button {
		background-color: var(--rs-left-sidebar-button);
		padding: 8px 16px;
		margin: 0 16px;
		border-radius: 2em;
		font-family: "Exo 2", sans-serif;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 12px;
		color: var(--rs-left-sidebar-button-text);
		white-space: nowrap;
		box-sizing: border-box;
		min-height: 30px;
		text-align: center;
	}
	#workspace .workspace-body .left-sidebar .top .left-sidebar-button::after {
		content: attr(data-label);
	}
	#workspace .workspace-body .left-sidebar.left-sidebar__closed .top .left-sidebar-button::after {
		content: attr(data-label-closed);
	    position: absolute;
	    margin-left: -4px;
	    font-size: 16px;
	    margin-top: -3px;	
	}
	#workspace .workspace-body .left-sidebar .top .menu a,
	#workspace .workspace-body .left-sidebar .bottom a {
		display: flex;
		align-items: center;
		font-size: 16px;
		color: var(--rs-left-sidebar-text);
		padding: 15px 28px;
		font-family: "Exo 2", sans-serif;
		border: 1px solid var(--rs-left-sidebar);
		border-width: 1px 0;
		transition: all .5s ease;
	}
	#workspace .workspace-body .left-sidebar .bottom a {
		padding: 8px 28px;
	}
	#workspace .workspace-body .left-sidebar.left-sidebar__closed .top .menu a,
	#workspace .workspace-body .left-sidebar.left-sidebar__closed .bottom a {
		color: transparent;
		padding-left: 20px;
	}
	#workspace .workspace-body .user-avatar-menu li a::before,
	#workspace .workspace-body .left-sidebar .top .menu a::before,
	#workspace .workspace-body .left-sidebar .bottom a::before {
		font-family: 'Material Symbols Outlined';
	    font-weight: normal;
	    font-style: normal;
	    font-size: 24px;
	    line-height: 1;
	    letter-spacing: normal;
	    text-transform: none;
	    display: inline-block;
	    white-space: nowrap;
	    word-wrap: normal;
	    direction: ltr;
	    -webkit-font-feature-settings: 'liga';
    	font-feature-settings: 'liga';
	    -webkit-font-smoothing: antialiased;
	    content: attr(data-icon);
	    width: 35px;
	    min-width: 35px;
	    color: var(--rs-left-sidebar-text);
	}
	#workspace .right-drawer .user-avatar-menu li a::before {
		color: inherit;
	}
	#workspace .workspace-body .left-sidebar .bottom .sidebar-profile-link::before {
		display: none;
	}
	#workspace .workspace-body .left-sidebar .bottom .sidebar-profile-avatar {
		width: 28px;
		height: 28px;
		min-width: 28px;
		border-radius: 50%;
		background-color: #184f8a;
		background-size: cover;
		background-position: center;
		color: white;
		font-size: 11px;
		font-weight: 700;
		font-family: "Exo 2", sans-serif;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-right: 7px;
		flex-shrink: 0;
		overflow: hidden;
	}
	#workspace .workspace-body .left-sidebar .top .menu a:hover,
	#workspace .workspace-body .left-sidebar .top .menu a.highlight,
	#workspace .workspace-body .left-sidebar .bottom a:hover {
		border-color: var(--md-sys-color-outline-variant);
		background-color: var(--rs-menu-highlight);
	}
/*|ws_default_search|*/
/*|ws_default_fw_button|*/
	.fw-button {
	    width: max-content;
	    color: var(--rs-fwbutton);
	    border: 2px solid var(--rs-fwbutton);
	    padding: 0 1rem;
	    cursor: pointer;
	    align-content: center;
	    text-align: center;
	    border-radius: 25px;
	    text-transform: uppercase;
	    font-weight: bold;
	    box-shadow: none;
	    height: 30px;
	}
	.fw-button:hover {
		opacity: 0.9;
	    color: var(--rs-fwbutton-text);
	    box-shadow: 0px 1px 2px var(--rs-fwbutton-shadow);
	}
	.fw-button:active {
		background-color: var(--rs-fwbutton-active);
	    color: var(--rs-fwbutton-text);
	    box-shadow: 0px 1px 2px var(--rs-fwbutton-shadow);
	}
/*|ws_default_fw_icon|*/
/*|ws_roleAdmin|*/
/*|ws_roleCustomer|*/
	@media (width <= 450px) {
		#workspace {
			grid-template-rows: 50px auto;
		}
		#workspace header {
			position: fixed;
			width: 100%;
			z-index: 1;
		}
		#workspace header .header-bar {
			grid-template-columns: 2fr 1fr;
		}
		#workspace header .header-breadcrumbs,
		#workspace header .header-bar .middle,
		#workspace header .header-bar .right .notifier,
		#workspace .workspace-body .user-avatar-menu .user-name,
		#workspace .workspace-body .left-sidebar {
			display: none;
		}
		#workspace .workspace-body .user-avatar-menu .menu {
			right: 0;
		}
		#workspace .workspace-body {
			grid-template-columns: 100%;
/* 			padding: 16px; */
			margin-top: 50px;
		}
	}
/*|ws_roleCustomer_header|*/
/************************************************** |Page_specific_layout_and_styles| ****************************************/
/*|pg_default|*/
	.section-divider {
		border-bottom: 1px solid var(--md-sys-color-outline-variant);
		padding-bottom: 3PX;
    	margin-bottom: 10px;
	}
/*|pg_default_left_drawer|*/
	.fw-view .fw-view__drawer-container-left {
		background: var(--rs-left-drawer-bg);
		color: var(--rs-primary-border-color);
		border-right: var(--rs-primary-border);
		border-radius:var(--rs-drawer-border-radius);
	}
	.fw-view .fw-view__drawer-container-left .fw-view__drawer-container-inner {
		display: grid;
		grid-template-rows: 35px auto 1fr;
		grid-row-gap: 15px;
	    border: var(--rs-primary-border);
	    border-left-width: 0;
	    border-radius:var(--rs-drawer-border-radius);
	    width: 280px;
	    color: var(--rs-header-text);
	    padding: 0;
	    border: none;
	    position: relative;
	    height: calc(100% - 0px);
	}
	.fw-view .fw-view__drawer-container-left .fw-view__drawer-container-inner .fw-card-list__title {
		padding: 8px;
		margin-left: 15px;
		border: var(--rs-primary-border);
		border-radius: 16px;
		font-size: 14px;
		text-align:center;
	}
	.fw-view .fw-view__drawer-container-left .fw-view__drawer-container-inner .fw-card-list__count {
		position: absolute;
		right: 0;
		height: 24px;
		padding: 0 10px;
		background-color: var(--rs-fwbutton);
		border-radius: 16px;
		margin: 5px;
		line-height: 24px;
		color: var(--md-sys-color-on-primary);
	}
	.fw-view .fw-view__drawer-container-left .fw-view__drawer-container-inner .fw-card-list__search {
		display: flex;
		align-items: center;
		gap: 6px;
		margin-left: 15px;
		padding: 4px 10px;
		border: var(--rs-primary-border);
		border-radius: 16px;
		background: var(--rs-left-drawer-bg);
	}
	.fw-view .fw-view__drawer-container-left .fw-view__drawer-container-inner .fw-card-list__search .material-symbols-outlined {
		font-size: 18px;
		color: var(--rs-header-text);
		opacity: 0.6;
		flex-shrink: 0;
	}
	.fw-view .fw-view__drawer-container-left .fw-view__drawer-container-inner .fw-card-list__search-input {
		border: none;
		background: transparent;
		outline: none;
		font-size: 13px;
		color: var(--rs-header-text);
		width: 100%;
	}
	.fw-view .fw-view__drawer-container-left .fw-view__drawer-container-inner .fw-card-list__search-input::placeholder {
		color: var(--rs-header-text);
		opacity: 0.5;
	}
	.fw-view .fw-view__drawer-container-left .fw-view__drawer-container-inner .fw-card-list__card-container {
		border: var(--rs-primary-no_border);
		border-width: 1px 1px 1px 0;
		border-top-right-radius: 16px;
		border-bottom-right-radius: 16px;
		overflow: auto;
		min-height: 0;
		min-width: 0;
		scrollbar-width: none;
	}
	.fw-view .fw-view__drawer-container-left .fw-view__drawer-container-inner .fw-card-list__card-container::-webkit-scrollbar {
		display: none;
	}
	.fw-view .fw-view__drawer-container-left .fw-view__drawer-container-inner .fw-card-list__card {
		padding: 8px 5px 8px 16px;
		border: var(--rs-primary-no_border);
		border-width: 0 0 1px 0;
		cursor: pointer;
	}
	.fw-view .fw-view__drawer-container-left .fw-view__drawer-container-inner .fw-card-list__card:first-child {
	  	border-top-right-radius: 16px;
	} 
	.fw-view .fw-view__drawer-container-left .fw-view__drawer-container-inner .fw-card-list__card.fw-card-list__card-selected, 
	.fw-view .fw-view__drawer-container-left .fw-view__drawer-container-inner .fw-card-list__card:hover {
	   	background-color: var(--rs-left-drawer-hover);
	}
/*|pg_default_left_drawer_tiles|*/
	/* Tile navigation for the scheduling drawer: heading, search + filters row, the filters panel,
	   tile row, banner strip, then the cards. Scoped to this drawer so the other left drawers keep
	   the title/search/cards layout above. */
	.fw-view .scheduling-jobs-drawer .fw-view__drawer-container-inner {
		grid-template-rows: auto auto auto auto auto 1fr;
		grid-row-gap: 10px;
		padding-top: 12px;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__base {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 8px;
		margin: 0 15px;
		font-size: 0.9em;
		font-weight: 600;
		color: var(--rs-header-text);
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__base-count {
		font-weight: 700;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__search-row {
		display: flex;
		align-items: stretch;
		gap: 8px;
		margin: 0 15px;
	}
	/* The shared rule above gives the search a left margin and a 16px pill radius of its own; the
	   row owns the margin now, and the radius matches the tiles below. */
	.fw-view .scheduling-jobs-drawer .fw-card-list__search-row .fw-card-list__search {
		flex: 1;
		min-width: 0;
		margin-left: 0;
		border-radius: 8px;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__filters-toggle {
		display: flex;
		align-items: center;
		gap: 6px;
		flex-shrink: 0;
		padding: 4px 12px;
		border: var(--rs-primary-border);
		border-radius: 8px;
		background: var(--rs-left-drawer-bg);
		color: var(--rs-header-text);
		font-family: inherit;
		font-size: 0.8em;
		font-weight: 600;
		cursor: pointer;
	}
	.fw-view .scheduling-jobs-drawer.fw-card-list--filters-open .fw-card-list__filters-toggle {
		background: var(--rs-menu-highlight);
		border-color: var(--rs-fwbutton);
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__filters-count:empty {
		display: none;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__filters-count {
		padding: 0 6px;
		border-radius: 9px;
		background: var(--rs-fwbutton);
		color: var(--rs-fwbutton-text);
		font-size: 0.85em;
		font-weight: 700;
	}
	/* ── Filters panel ──────────────────────────────────────────────────────── */
	.fw-view .scheduling-jobs-drawer .fw-card-list__filters-panel {
		display: none;
	}
	.fw-view .scheduling-jobs-drawer.fw-card-list--filters-open .fw-card-list__filters-panel {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin: 0 15px;
		padding: 10px;
		border: var(--rs-primary-border);
		border-radius: 8px;
		background: var(--rs-menu-highlight);
		/* Belt and braces with the label rule below: keeps any future control that reports a wide
		   intrinsic size from stretching the panel past the drawer rather than truncating. */
		min-width: 0;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__filter {
		position: relative;
		min-width: 0;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__filter-btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 4px;
		width: 100%;
		padding: 5px 9px;
		border: var(--rs-primary-border);
		border-radius: 6px;
		background: var(--rs-left-drawer-bg);
		color: var(--rs-header-text);
		font-family: inherit;
		font-size: 0.8em;
		text-align: left;
		cursor: pointer;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__filter.has-value .fw-card-list__filter-btn {
		border-color: var(--rs-fwbutton);
	}
	/* min-width:0 is what makes the ellipsis actually engage: as a flex item this defaults to
	   min-width:auto, which refuses to shrink below the text's intrinsic width, so a long single-line
	   selection label ("Services: Smoke Alarm Compliance Service with photos") would stretch the
	   button - and with it the panel - past the edge of the drawer instead of truncating. */
	.fw-view .scheduling-jobs-drawer .fw-card-list__filter-btn-label {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__filter-btn .material-symbols-outlined {
		font-size: 16px;
		flex-shrink: 0;
		opacity: 0.6;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__filter-menu {
		display: none;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__filter.open .fw-card-list__filter-menu {
		display: block;
		position: absolute;
		top: calc(100% + 4px);
		left: 0;
		right: 0;
		z-index: 20;
		padding: 6px;
		border: var(--rs-primary-border);
		border-radius: 8px;
		background: var(--rs-left-drawer-bg);
		box-shadow: 0 6px 16px rgb(0 0 0 / 12%);
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__filter-search {
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 5px;
		padding: 5px 8px;
		border: var(--rs-primary-border);
		border-radius: 6px;
		background: transparent;
		outline: none;
		font-family: inherit;
		font-size: 0.8em;
		color: var(--rs-header-text);
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__filter-options {
		max-height: 180px;
		overflow-y: auto;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__filter-option {
		display: flex;
		align-items: center;
		gap: 7px;
		width: 100%;
		padding: 5px 6px;
		border: none;
		border-radius: 5px;
		background: none;
		color: var(--rs-header-text);
		font-family: inherit;
		font-size: 0.8em;
		text-align: left;
		cursor: pointer;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__filter-option:hover {
		background-color: var(--rs-left-drawer-hover);
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__filter-check {
		flex-shrink: 0;
		width: 13px;
		height: 13px;
		border: 1.4px solid var(--rs-fwbutton);
		border-radius: 3px;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__filter-option.selected .fw-card-list__filter-check {
		background: var(--rs-fwbutton);
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__filter-done {
		width: 100%;
		margin-top: 4px;
		padding: 6px 0 2px;
		border: none;
		border-top: var(--rs-primary-border);
		background: none;
		color: var(--rs-fwbutton);
		font-family: inherit;
		font-size: 0.78em;
		font-weight: 600;
		cursor: pointer;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__filters-footer {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__filter--number {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__filter-num-label {
		white-space: nowrap;
		font-size: 0.75em;
		font-weight: 600;
		color: var(--rs-header-text);
		opacity: 0.7;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__filter-num {
		width: 70px;
		box-sizing: border-box;
		padding: 5px 8px;
		border: var(--rs-primary-border);
		border-radius: 6px;
		background: var(--rs-left-drawer-bg);
		outline: none;
		font-family: inherit;
		font-size: 0.8em;
		color: var(--rs-header-text);
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__filters-clear {
		margin-left: auto;
		border: none;
		background: none;
		color: var(--rs-fwbutton);
		font-family: inherit;
		font-size: 0.78em;
		font-weight: 600;
		cursor: pointer;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__tiles {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 0 15px;
	}
	/* A 28% basis fits three tiles per row (Overview, Urgent, Stalled), so the remaining two
	   (Snoozed, Cold) wrap and grow to share the second row - the design's 3-then-2 arrangement. */
	.fw-view .scheduling-jobs-drawer .fw-card-list__tile {
		flex: 1 1 28%;
		min-width: 0;
		padding: 8px 10px;
		border: var(--rs-primary-border);
		border-radius: 8px;
		background: transparent;
		color: var(--rs-header-text);
		font-family: inherit;
		text-align: left;
		cursor: pointer;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__tile:hover {
		background-color: var(--rs-left-drawer-hover);
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__tile.active {
		background: var(--rs-fwbutton);
		border-color: var(--rs-fwbutton);
		color: var(--rs-fwbutton-text);
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__tile-label {
		font-size: 0.75em;
		font-weight: 600;
		letter-spacing: 0.02em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__tile-count {
		font-size: 1.35em;
		font-weight: 700;
		line-height: 1.2;
		min-height: 1.2em;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__banners:empty {
		display: none;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__banner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		margin: 0 15px;
		padding: 6px 10px;
		border: var(--rs-primary-border);
		border-radius: 8px;
		background: var(--rs-menu-highlight);
		color: var(--rs-header-text);
		font-size: 0.85em;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__banner-text {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__banner-btn,
	.fw-view .scheduling-jobs-drawer .fw-card-list__row-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		border: none;
		background: none;
		padding: 2px;
		color: inherit;
		cursor: pointer;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__banner-btn .material-symbols-outlined,
	.fw-view .scheduling-jobs-drawer .fw-card-list__row-btn .material-symbols-outlined {
		font-size: 18px;
	}
	/* A saved list offers "edit"; anything else offers "save". FWCardList adds --saved. */
	.fw-view .scheduling-jobs-drawer .fw-card-list__banner-btn--edit,
	.fw-view .scheduling-jobs-drawer .fw-card-list__banner--saved .fw-card-list__banner-btn--save {
		display: none;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__banner--saved .fw-card-list__banner-btn--edit {
		display: flex;
	}
	/* Overview rows - one per saved search, then one per agency */
	.fw-view .scheduling-jobs-drawer .fw-card-list__group-row,
	.fw-view .scheduling-jobs-drawer .fw-card-list__saved-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		padding: 10px 16px;
		border-bottom: var(--rs-primary-border);
		cursor: pointer;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__group-row:hover,
	.fw-view .scheduling-jobs-drawer .fw-card-list__saved-row:hover {
		background-color: var(--rs-left-drawer-hover);
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__saved-row {
		background: var(--rs-menu-highlight);
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__row-label {
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__row-meta {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-shrink: 0;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__row-count {
		font-weight: 700;
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__row-urgent {
		font-size: 0.8em;
		font-weight: 600;
		color: var(--md-sys-color-error);
	}
	.fw-view .scheduling-jobs-drawer .fw-card-list__row-urgent::after {
		content: " urgent";
	}
	/* FWContainerBinder stamps urgentCount-0 on the node when the group has none */
	.fw-view .scheduling-jobs-drawer .fw-card-list__row-urgent.urgentCount-0 {
		display: none;
	}
	/* Booking.stalledSummary is empty for anything not stalled, which collapses this line - the
	   same card template is used by every tile, for both a job's and a quote's booking. Also
	   hidden for a quote regardless of staleness: that slot shows the QUOTE badge instead (see
	   .job-dates__quote-badge below), the card's main "which kind is this" signal. */
	.fw-view .scheduling-jobs-drawer .job-dates__stalled:empty,
	.fw-view .scheduling-jobs-drawer .job-dates__stalled.booking--quote {
		display: none;
	}
	.fw-view .scheduling-jobs-drawer .job-dates__stalled {
		font-size: 0.78em;
		font-weight: 600;
		color: var(--md-sys-color-error);
        position: absolute;
        top: 0;
        width: calc(100% - 32px);
        text-align: center;
    	}
	.fw-view .scheduling-jobs-drawer .job-dates__quote-badge {
		display: none;
		font-size: 0.78em;
		font-weight: 700;
		letter-spacing: 0.04em;
		color: #7B1FA2;
        position: absolute;
        top: 0;
        width: calc(100% - 32px);
        text-align: center;
    	}
	.fw-view .scheduling-jobs-drawer .job-dates__quote-badge.booking--quote {
		display: block;
	}
/*|pg_default_outbox_drawer_tiles|*/
	/* Tile navigation for the outbox drawer: search row, tile row, banner strip, then the
	   cards - same idiom as the scheduling drawer above, minus the filters panel (outbox has
	   no filter controls). Scoped to this drawer so the other left drawers keep the plain
	   title/search/cards layout. */
	.fw-view .outbox-drawer .fw-view__drawer-container-inner {
		grid-template-rows: auto auto auto 1fr;
		grid-row-gap: 10px;
		padding-top: 12px;
	}
	.fw-view .outbox-drawer .fw-card-list__search-row {
		display: flex;
		align-items: stretch;
		gap: 8px;
		margin: 0 15px;
	}
	.fw-view .outbox-drawer .fw-card-list__search-row .fw-card-list__search {
		flex: 1;
		min-width: 0;
		margin-left: 0;
		border-radius: 8px;
	}
	.fw-view .outbox-drawer .fw-card-list__tiles {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 0 15px;
	}
	.fw-view .outbox-drawer .fw-card-list__tile {
		flex: 1 1 28%;
		min-width: 0;
		padding: 8px 10px;
		border: var(--rs-primary-border);
		border-radius: 8px;
		background: transparent;
		color: var(--rs-header-text);
		font-family: inherit;
		text-align: left;
		cursor: pointer;
	}
	.fw-view .outbox-drawer .fw-card-list__tile:hover {
		background-color: var(--rs-left-drawer-hover);
	}
	.fw-view .outbox-drawer .fw-card-list__tile.active {
		background: var(--rs-fwbutton);
		border-color: var(--rs-fwbutton);
		color: var(--rs-fwbutton-text);
	}
	.fw-view .outbox-drawer .fw-card-list__tile-label {
		font-size: 0.75em;
		font-weight: 600;
		letter-spacing: 0.02em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.fw-view .outbox-drawer .fw-card-list__tile-count {
		font-size: 1.35em;
		font-weight: 700;
		line-height: 1.2;
		min-height: 1.2em;
	}
	.fw-view .outbox-drawer .fw-card-list__banners:empty {
		display: none;
	}
	.fw-view .outbox-drawer .fw-card-list__banner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		margin: 0 15px;
		padding: 6px 10px;
		border: var(--rs-primary-border);
		border-radius: 8px;
		background: var(--rs-menu-highlight);
		color: var(--rs-header-text);
		font-size: 0.85em;
	}
	.fw-view .outbox-drawer .fw-card-list__banner-text {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.fw-view .outbox-drawer .fw-card-list__banner-btn,
	.fw-view .outbox-drawer .fw-card-list__row-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		border: none;
		background: none;
		padding: 2px;
		color: inherit;
		cursor: pointer;
	}
	.fw-view .outbox-drawer .fw-card-list__banner-btn .material-symbols-outlined,
	.fw-view .outbox-drawer .fw-card-list__row-btn .material-symbols-outlined {
		font-size: 18px;
	}
	/* A saved list offers "edit"; anything else offers "save". FWCardList adds --saved. */
	.fw-view .outbox-drawer .fw-card-list__banner-btn--edit,
	.fw-view .outbox-drawer .fw-card-list__banner--saved .fw-card-list__banner-btn--save {
		display: none;
	}
	.fw-view .outbox-drawer .fw-card-list__banner--saved .fw-card-list__banner-btn--edit {
		display: flex;
	}
	/* Searches/Overview rows - one per saved search, then one per agency */
	.fw-view .outbox-drawer .fw-card-list__group-row,
	.fw-view .outbox-drawer .fw-card-list__saved-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		padding: 10px 16px;
		border-bottom: var(--rs-primary-border);
		cursor: pointer;
	}
	.fw-view .outbox-drawer .fw-card-list__group-row:hover,
	.fw-view .outbox-drawer .fw-card-list__saved-row:hover {
		background-color: var(--rs-left-drawer-hover);
	}
	.fw-view .outbox-drawer .fw-card-list__saved-row {
		background: var(--rs-menu-highlight);
	}
	.fw-view .outbox-drawer .fw-card-list__row-label {
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.fw-view .outbox-drawer .fw-card-list__row-meta {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-shrink: 0;
	}
	.fw-view .outbox-drawer .fw-card-list__row-count {
		font-weight: 700;
	}
/*|pg_default_quotes_drawer_tiles|*/
	/* Quotes sidebar section - identical tile/search/banner idiom to the outbox drawer above,
	   just re-scoped to .quotes-drawer so its own tile row (Draft/Scheduled/Ready/Sent) styles
	   independently. */
	.fw-view .quotes-drawer .fw-view__drawer-container-inner {
		grid-template-rows: auto auto auto 1fr;
		grid-row-gap: 10px;
		padding-top: 12px;
	}
	.fw-view .quotes-drawer .fw-card-list__search-row {
		display: flex;
		align-items: stretch;
		gap: 8px;
		margin: 0 15px;
	}
	.fw-view .quotes-drawer .fw-card-list__search-row .fw-card-list__search {
		flex: 1;
		min-width: 0;
		margin-left: 0;
		border-radius: 8px;
	}
	.fw-view .quotes-drawer .fw-card-list__tiles {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 0 15px;
	}
	.fw-view .quotes-drawer .fw-card-list__tile {
		flex: 1 1 28%;
		min-width: 0;
		padding: 8px 10px;
		border: var(--rs-primary-border);
		border-radius: 8px;
		background: transparent;
		color: var(--rs-header-text);
		font-family: inherit;
		text-align: left;
		cursor: pointer;
	}
	.fw-view .quotes-drawer .fw-card-list__tile:hover {
		background-color: var(--rs-left-drawer-hover);
	}
	.fw-view .quotes-drawer .fw-card-list__tile.active {
		background: var(--rs-fwbutton);
		border-color: var(--rs-fwbutton);
		color: var(--rs-fwbutton-text);
	}
	.fw-view .quotes-drawer .fw-card-list__tile-label {
		font-size: 0.75em;
		font-weight: 600;
		letter-spacing: 0.02em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.fw-view .quotes-drawer .fw-card-list__tile-count {
		font-size: 1.35em;
		font-weight: 700;
		line-height: 1.2;
		min-height: 1.2em;
	}
	.fw-view .quotes-drawer .fw-card-list__banners:empty {
		display: none;
	}
	.fw-view .quotes-drawer .fw-card-list__banner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		margin: 0 15px;
		padding: 6px 10px;
		border: var(--rs-primary-border);
		border-radius: 8px;
		background: var(--rs-menu-highlight);
		color: var(--rs-header-text);
		font-size: 0.85em;
	}
	.fw-view .quotes-drawer .fw-card-list__banner-text {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.fw-view .quotes-drawer .fw-card-list__banner-btn,
	.fw-view .quotes-drawer .fw-card-list__row-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		border: none;
		background: none;
		padding: 2px;
		color: inherit;
		cursor: pointer;
	}
	.fw-view .quotes-drawer .fw-card-list__banner-btn .material-symbols-outlined,
	.fw-view .quotes-drawer .fw-card-list__row-btn .material-symbols-outlined {
		font-size: 18px;
	}
	.fw-view .quotes-drawer .fw-card-list__banner-btn--edit,
	.fw-view .quotes-drawer .fw-card-list__banner--saved .fw-card-list__banner-btn--save {
		display: none;
	}
	.fw-view .quotes-drawer .fw-card-list__banner--saved .fw-card-list__banner-btn--edit {
		display: flex;
	}
	.fw-view .quotes-drawer .fw-card-list__group-row,
	.fw-view .quotes-drawer .fw-card-list__saved-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		padding: 10px 16px;
		border-bottom: var(--rs-primary-border);
		cursor: pointer;
	}
	.fw-view .quotes-drawer .fw-card-list__group-row:hover,
	.fw-view .quotes-drawer .fw-card-list__saved-row:hover {
		background-color: var(--rs-left-drawer-hover);
	}
	.fw-view .quotes-drawer .fw-card-list__saved-row {
		background: var(--rs-menu-highlight);
	}
	.fw-view .quotes-drawer .fw-card-list__row-label {
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.fw-view .quotes-drawer .fw-card-list__row-meta {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-shrink: 0;
	}
	.fw-view .quotes-drawer .fw-card-list__row-count {
		font-weight: 700;
	}
	/* Quote card - same purple accent the scheduling drawer and calendar already use for a quote
	   (booking--quote), so a quote reads consistently across every screen it appears on. */
	.fw-view .fw-view__drawer-container-left .fw-view__drawer-container-inner .fw-card-list__card.quote-drawer-card {
		position: relative;
		margin: 8px 8px 0;
		padding: 8px 10px;
		background: var(--rs-workspace-bg);
		border: 1px solid var(--rs-primary-border-color);
		border-left: 3px solid #7B1FA2;
		border-radius: 6px;
		cursor: pointer;
	}
	.fw-view .fw-view__drawer-container-left .fw-view__drawer-container-inner .fw-card-list__card.quote-drawer-card.highlight,
	.fw-view .fw-view__drawer-container-left .fw-view__drawer-container-inner .fw-card-list__card.quote-drawer-card:hover {
		background: var(--rs-left-drawer-hover);
	}
	.quote-drawer-card { display: flex; flex-direction: column; gap: 3px; }
	.quote-drawer-card__top-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
	.quote-drawer-card__address { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
	.quote-drawer-card__status { font-size: 0.82em; }
	.quote-drawer-card__refs-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
	.quote-drawer-card__quote-id { font-size: 0.75em; color: var(--md-sys-color-outline); flex-shrink: 0; }
	.quote-drawer-card__refs { font-size: 0.75em; color: var(--md-sys-color-outline); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
	.quote-drawer-card__badge {
		flex-shrink: 0;
		font-size: 0.7em;
		font-weight: 700;
		letter-spacing: 0.03em;
		color: #7B1FA2;
		text-transform: uppercase;
	}
/*|pg_default_summary|*/
    .summary {
		border : var(--rs-primary-no_border);
		border-width: 0 0 1px 1px;
		min-height: 120px;
	    padding: 0 15px;
	    display: grid;
    }
	.summary:first-child {
    	border-left-width: 0!important;
    }
	.summary.high {
    	background: radial-gradient(ellipse at 50% 125%, rgb(253 211 211 / 55%) 5%, var(--rs-workspace-bg) 58%) no-repeat center bottom;
    }
	.summary.medium,
	.summary.active {
    	background: radial-gradient(ellipse at 50% 125%, rgb(128 246 147 / 55%) 5%, var(--rs-workspace-bg) 58%) no-repeat center bottom;
    }
	.summary.low,
	.summary.inactive { 
    	background: radial-gradient(ellipse at 50% 125%, rgb(153 193 241 / 55%) 5%, var(--rs-workspace-bg) 58%) no-repeat center bottom;
    }    
	.summary-title {
		display: flex;
		justify-content: space-between;
	    font-size: 1.2em;
	    color: var(--rs-primary-gray-text);
	}
	.summary-middle {
		display: flex;
		justify-content: center;
	    font-size: 4em;
	    color: var(--rs-wsdefault-text);
	}
	.summary.high .summary-middle.urgent {
		color: var(--md-sys-color-error);
	}
	.summary.medium .summary-middle.new {
		color: #259230;
	}
	.summary.low .summary-middle.active {
		color: var(--md-sys-color-tertiary);
	}
/*|pg_default_calendar|*/
	.fw-calendar-strip__strip {
		font-size: 0.9em;
		border-radius: 5px;
	}
	.fw-calendar-strip__strip .fw-calendar-strip__tile:first-child {
    	border-top-left-radius: 5px;
	}
	.fw-calendar-strip__strip .fw-calendar-strip__tile:last-child {
	    border-top-right-radius: 5px;
	}
	.fw-calendar-strip__strip .fw-calendar-strip__tile .fw-calendar-strip__tile-header {
		background-color: var(--rs-header-calendar);
	}
/*|pg_roleAdmin|*/
/*|pg_roleAdmin_rsAgency|*/

/*|pg_roleAdmin_rsProperty|*/

/*|pg_roleAdmin_rsJob|*/


/** Sundry items **/
.question-status-icon, 
.question-logo-small {
   	display:flex;
   	align-content:center;
	width: 48px;
    height: 48px;
    border-radius: 24px;
    background-position: center;
    background-size: contain;
    align-items: center;
    justify-content: center;
    background-color: var(--md-sys-color-surface-tint);
    font-size: 22px;
    color: var(--rs-icon-initials-text);
}
.question-status-icon {
	font-size: 0px;
}
.question-status-icon::after {
	font-size: 32px;
}
.question-status-icon.wait_adviser::after {
	content: "hourglass";
}

.fw-card-list__card.highlight {
   	background-color: var(--rs-container-hover);
}

/************************************************** || SCHEDULING VIEW || *************************************************/
/* |pg_scheduling| */
.fw-view .fw-view__drawer-container-left.scheduling-jobs-drawer .fw-view__drawer-container-inner .fw-card-list__card-container {
    padding: 10px 8px 10px 6px;
    border-width: 0;
    gap: 10px;
}
.fw-view .fw-view__drawer-container-left.scheduling-jobs-drawer .fw-view__drawer-container-inner .fw-card-list__card {
    padding: 14px 14px 12px 18px;
    border: 1px solid var(--md-sys-color-outline-variant, rgba(0,0,0,.08));
    border-radius: 14px;
    background: var(--md-sys-color-surface, #fff);
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    cursor: pointer;
    overflow: hidden;
    /* Setting `overflow` to non-visible changes a flex item's automatic minimum
       size from content-based to 0 (CSS Flexbox spec) — without flex-shrink:0 here,
       the card-container's default flex-shrink:1 was free to crush every card down
       toward zero height, clipping everything past ~ the first line via the
       overflow:hidden above. */
    flex-shrink: 0;
    transition: box-shadow .15s ease, border-color .15s ease;
    /* Establishes a local stacking context (position:relative is already set globally
       on .fw-card-list__card) so the isUrgent watermark's z-index:-1 below stays behind
       this card's own content without escaping to affect sibling cards. */
    z-index: 0;
}
.fw-view .fw-view__drawer-container-left.scheduling-jobs-drawer .fw-view__drawer-container-inner .fw-card-list__card:first-child {
    border-top-right-radius: 14px;
}
.fw-view .fw-view__drawer-container-left.scheduling-jobs-drawer .fw-view__drawer-container-inner .fw-card-list__card.isUrgent-1 {
    background: color-mix(in srgb, var(--md-sys-color-error, #ba1a1a) 6%, var(--md-sys-color-surface, #fff));
    border-color: color-mix(in srgb, var(--md-sys-color-error, #ba1a1a) 45%, transparent);
}
/* card-flag--tag-new/240v are hidden FWLabel flags (see scheduling.html) - :has() reads their
   emptiness reactively rather than needing JS class toggling for a second/third independent
   condition on a node that already carries one data-toggle-class-field (isUrgent). */
.fw-view .fw-view__drawer-container-left.scheduling-jobs-drawer .fw-view__drawer-container-inner .fw-card-list__card:has(.card-flag--tag-new:not(:empty)) {
    background: color-mix(in srgb, var(--rs-tag-new-color) 18%, var(--md-sys-color-surface, #fff));
    border-color: color-mix(in srgb, var(--rs-tag-new-color) 45%, transparent);
}
.fw-view .fw-view__drawer-container-left.scheduling-jobs-drawer .fw-view__drawer-container-inner .fw-card-list__card:has(.card-flag--tag-240v:not(:empty)) {
    background: color-mix(in srgb, var(--rs-tag-240v-color) 18%, var(--md-sys-color-surface, #fff));
    border-color: color-mix(in srgb, var(--rs-tag-240v-color) 45%, transparent);
}
.fw-view .fw-view__drawer-container-left.scheduling-jobs-drawer .fw-view__drawer-container-inner .fw-card-list__card.fw-card-list__card-selected,
.fw-view .fw-view__drawer-container-left.scheduling-jobs-drawer .fw-view__drawer-container-inner .fw-card-list__card.highlight,
.fw-view .fw-view__drawer-container-left.scheduling-jobs-drawer .fw-view__drawer-container-inner .fw-card-list__card:hover {
    background: var(--rs-left-drawer-hover);
    border-color: color-mix(in srgb, var(--md-sys-color-primary) 45%, transparent);
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--md-sys-color-primary) 35%, transparent);
}
.scheduling-jobs-drawer .fw-card-list__card {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.scheduling-jobs-drawer .fw-card-list__card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--md-sys-color-primary);
    transition: width .15s ease;
}
.scheduling-jobs-drawer .fw-card-list__card.fw-card-list__card-selected::before,
.scheduling-jobs-drawer .fw-card-list__card.highlight::before {
    width: 4px;
}
.scheduling-jobs-drawer .fw-card-list__card.isUrgent-1::after {
    content: 'URGENT';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-18deg);
    font-size: 2.6em;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--md-sys-color-error, #ba1a1a);
    opacity: 0.14;
    pointer-events: none;
    white-space: nowrap;
    z-index: -1;
}
/* :not(.isUrgent-1) - only one ::after can exist per element, so an urgent card that also
   happens to be NEW/240V keeps the URGENT watermark rather than the two silently fighting over
   which content wins. */
.scheduling-jobs-drawer .fw-card-list__card:has(.card-flag--tag-new:not(:empty)):not(.isUrgent-1)::after {
    content: 'NEW';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-18deg);
    font-size: 2.6em;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--rs-tag-new-color);
    opacity: 0.14;
    pointer-events: none;
    white-space: nowrap;
    z-index: -1;
}
.scheduling-jobs-drawer .fw-card-list__card:has(.card-flag--tag-240v:not(:empty)):not(.isUrgent-1)::after {
    content: '240V';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-18deg);
    font-size: 2.6em;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--rs-tag-240v-color);
    opacity: 0.14;
    pointer-events: none;
    white-space: nowrap;
    z-index: -1;
}
.scheduling-jobs-drawer .job-dates {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    width: 100%;
    margin-top: 2px;
}
.scheduling-jobs-drawer .job-dates__approved {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}
.scheduling-jobs-drawer .job-dates__approved-label {
    font-size: 10px;
    color: var(--md-sys-color-on-primary-container);
    opacity: 0.6;
    white-space: nowrap;
}
.scheduling-jobs-drawer .job-dates__approved-date {
    font-size: 12px;
    color: var(--md-sys-color-on-primary-container);
    opacity: 0.75;
    font-weight: 600;
}
.scheduling-jobs-drawer .job-dates__approved-date:empty::before {
    content: 'Not approved';
    font-weight: normal;
    opacity: 0.6;
}
.scheduling-jobs-drawer .job-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
}
.scheduling-jobs-drawer .job-actions__book-btn,
.scheduling-jobs-drawer .job-actions__snooze-btn,
.scheduling-jobs-drawer .job-actions__uncontactable-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 1;
    text-decoration: none;
    border: 1px solid var(--md-sys-color-outline-variant, rgba(0,0,0,.08));
    background: color-mix(in srgb, var(--md-sys-color-on-surface) 4%, transparent);
    padding: 7px 6px;
    color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 70%, transparent);
    cursor: pointer;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.scheduling-jobs-drawer .job-actions__book-btn .material-symbols-outlined,
.scheduling-jobs-drawer .job-actions__snooze-btn .material-symbols-outlined,
.scheduling-jobs-drawer .job-actions__uncontactable-btn .material-symbols-outlined {
    font-size: 15px;
}
.scheduling-jobs-drawer .job-actions__book-btn:hover,
.scheduling-jobs-drawer .job-actions__snooze-btn:hover,
.scheduling-jobs-drawer .job-actions__uncontactable-btn:hover {
    color: var(--md-sys-color-primary);
    background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--md-sys-color-primary) 35%, transparent);
}
.scheduling-jobs-drawer .job-actions__book-btn__label,
.scheduling-jobs-drawer .job-actions__snooze-btn__label,
.scheduling-jobs-drawer .job-actions__uncontactable-btn__label {
    line-height: 1;
    white-space: nowrap;
}
.scheduling-jobs-drawer .job-actions__snooze-btn.is-snoozed {
    color: var(--md-sys-color-error, #b00020);
    background: color-mix(in srgb, var(--md-sys-color-error, #b00020) 12%, transparent);
    border-color: color-mix(in srgb, var(--md-sys-color-error, #b00020) 35%, transparent);
}
.scheduling-jobs-drawer .job-actions__uncontactable-btn.uncontactable-1 {
    color: var(--md-sys-color-error, #b00020);
    background: color-mix(in srgb, var(--md-sys-color-error, #b00020) 12%, transparent);
    border-color: color-mix(in srgb, var(--md-sys-color-error, #b00020) 35%, transparent);
}
.scheduling-jobs-drawer .job-note-previews {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 6px;
}
.scheduling-jobs-drawer .job-note-previews:empty {
    display: none;
}
.scheduling-jobs-drawer .job-note-preview {
    font-size: 11px;
    color: var(--rs-subtext);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px 8px;
    background: color-mix(in srgb, var(--md-sys-color-on-surface) 4%, transparent);
    border-radius: 6px;
}
.scheduling-jobs-drawer .job-tenants {
    border-top: 1px solid var(--md-sys-color-outline-variant, rgba(0,0,0,0.1));
    margin-top: 8px;
    padding-top: 8px;
}
.scheduling-jobs-drawer .job-tenants__header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.scheduling-jobs-drawer .job-tenants__label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--md-sys-color-on-surface-variant);
}
.scheduling-jobs-drawer .job-tenants__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 160px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* .ap-contact__action-btn-tick overhangs its button by 2px (bottom:-2px/right:-2px) - this
       list's own scroll box is otherwise sized tight to its rows' normal-flow content, which
       doesn't account for that absolutely-positioned overhang. padding-bottom covers the vertical
       edge; padding-right covers the horizontal one - setting overflow-y without an explicit
       overflow-x makes overflow-x compute to "auto" too (a CSS default, confirmed live via
       getComputedStyle), so the rightmost button's tick (the attempt button, last in
       .ap-contact__actions) gets clipped on its right edge the same way without this. */
    padding-bottom: 3px;
    padding-right: 3px;
}
.scheduling-jobs-drawer .job-tenants__list::-webkit-scrollbar {
    display: none;
}
.scheduling-jobs-drawer .job-tenants__list .ap-contact-row {
    padding: 4px 0;
    gap: 8px;
    cursor: pointer;
    align-items: center;
}
.scheduling-jobs-drawer .job-tenants__list .ap-contact__avatar {
    width: 24px;
    height: 24px;
    min-width: 24px;
    font-size: 9px;
    margin-top: 0;
}
.scheduling-jobs-drawer .job-tenants__list .ap-contact__info {
    flex: 1;
    min-width: 0;
}
.scheduling-jobs-drawer .job-tenants__list .ap-contact__name,
.scheduling-jobs-drawer .job-tenants__list .ap-contact__detail {
    font-size: 11px;
}
.scheduling-jobs-drawer .job-tenants__list .ap-contact__detail {
    display: none;
    margin-top: 2px;
    color: var(--md-sys-color-on-surface-variant);
}
.scheduling-jobs-drawer .job-tenants__list .ap-contact-row--expanded .ap-contact__detail {
    display: block;
}
.ap-contact__actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    margin-top: 1px;
}
.ap-contact__action-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    transition: opacity 0.15s;
}
.ap-contact__action-btn:hover {
    opacity: 0.85;
}
.ap-contact__action-btn .material-symbols-outlined {
    font-size: 13px;
}
.ap-contact__action-btn:disabled {
    background: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.45;
    cursor: not-allowed;
}
/* "Recently contacted" indicator - mirrors RentSafe V1's rsScheduleList.jsp .ticked class
   (call/sms/email logged within the last commsResetDays), but as a size/colour/badge combo
   rather than V1's small background icon swap. position:relative so the tick badge can be
   absolutely positioned without disturbing the centered action icon (button stays display:flex). */
.ap-contact__action-btn.is-recent {
    position: relative;
    width: 24px;
    height: 24px;
    background: #2e7d32;
}
.ap-contact__action-btn.is-recent .material-symbols-outlined {
    font-size: 14px;
}
.ap-contact__action-btn-tick {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    color: #2e7d32;
    box-shadow: 0 0 0 1px #2e7d32;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ap-contact__action-btn-tick.material-symbols-outlined {
    font-size: 9px !important;
    font-weight: 700;
}
.scheduling-job-list .fw-card-list__card.agency-card {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}
.agency-card .agency-logo {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.agency-card .agency-logo.material-symbols-outlined {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--md-sys-color-primary);
}
.agency-card .agency-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.agency-card .agency-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.agency-card .agency-property-count {
    font-size: 0.8em;
    color: var(--rs-subtext);
}
.agency-card .agency-property-count::before {
    content: "Properties: ";
}

/* Scheduling view main container — remove default padding, fill height as flex column */
.scheduling-view-main {
    padding: 0 !important;
    position: relative;
    display: grid;
    grid-template-rows: 60px auto;
    height: 100%;
    overflow: hidden;
}
.scheduling-view-main .scheduling-view__body {
	display: grid;
	grid-template-columns: auto 64px;
    grid-template-rows: calc(100vh - 62px);
    transition: grid-template-columns .35s ease-in-out;
}
.scheduling-view-main .scheduling-view__body.open {
	grid-template-columns: auto 400px;
}
.scheduling-view-main .scheduling-view__body .fw-view__drawer-container-right.right-drawer {
	background: transparent;
}
.scheduling-view-main .scheduling-view__body .fw-view__drawer-container-right.right-drawer .right-drawer__panel-close {
	grid-column: 6;
}
.scheduling-view-main .job-view .fw-view__drawer-container-right.right-drawer{
	display: none;
}
.scheduling-view-main .job-view .job-view__main {
	grid-template-columns: auto;
	grid-template-rows: calc(100vh - 192px);
}

/* ── Scheduling header bar ─────────────────────────────────────────────── */
.scheduling-header {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: stretch;
    height: 60px;
    flex-shrink: 0;
    color: white;
    user-select: none;
}

.scheduling-header__views {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 6px 10px;
    border-right: 1px solid rgba(255,255,255,0.12);
}

.scheduling-header__view-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.5);
    border-radius: 6px;
    cursor: pointer;
    font-size: 10px;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
}
.scheduling-header__view-btn .material-symbols-outlined {
    font-size: 20px;
}
.scheduling-header__view-btn:hover {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.85);
}
.scheduling-header__view-btn.is-active {
    background: rgba(255,255,255,0.18);
    color: white;
}
.scheduling-header__view-btn:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.scheduling-tech-filter {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    background: var(--md-sys-color-primary);
    border-radius: 0 0 12px 12px;
    min-width: 260px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.scheduling-tech-filter__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
}
.scheduling-tech-filter__row:last-child {
    border-bottom: none;
}
.scheduling-tech-filter__row:hover {
    background: rgba(255,255,255,0.08);
}
.scheduling-tech-filter__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 15px;
    flex-shrink: 0;
}
.scheduling-tech-filter__info {
    flex: 1;
}
.scheduling-tech-filter__role {
    font-size: 11px;
    color: #69D98C;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.scheduling-tech-filter__name {
    font-size: 15px;
    color: white;
    font-weight: 400;
}
.scheduling-tech-filter__check {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #69D98C;
    flex-shrink: 0;
}

.scheduling-header__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.scheduling-header__arrow:hover {
    background: rgba(255,255,255,0.1);
    color: white;
}
.scheduling-header__arrow .material-symbols-outlined {
    font-size: 28px;
}

.scheduling-header__strip {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* Top row — "return to today" jump + the selected date's total booked count (see ViewSchedule.js's
   #buildDateStrip - this used to be a per-day strip of tech avatars, but that never actually
   rendered, per #refreshJobHighlights's own history note; ViewTeams.js still uses this same class
   name for its own, still-working per-day avatar strip, so its CSS below stays untouched). */
.scheduling-header__tech-row {
    display: flex;
    align-items: center;
    position: relative;
    flex: 1;
    background: #0e1e33;
}
.scheduling-header__today-btn {
    background: none;
    border: none;
    margin: 0 0 0 10px;
    padding: 0;
    /* Same colour as the date cells' own weekday label ("Wed" etc, .scheduling-header__day). */
    color: rgba(255,255,255,0.6);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}
.scheduling-header__today-btn:hover {
    color: #fff;
    text-decoration: underline;
}
/* Absolutely centred (not flex-centred) so the "return to today" button's own width doesn't skew
   it off-centre. */
.scheduling-header__status {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 5px;
    pointer-events: none;
}
.scheduling-header__status-date {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: rgba(255,255,255,0.9);
    white-space: nowrap;
}
/* Same orange as a quote's own calendar tile (.scheduling-calendar__job.booking--quote's
   background) - ties this count back to the same colour language used for quote bookings
   elsewhere on this screen. */
.scheduling-header__status-count {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    color: #e0a868;
}
.scheduling-header__status-count-label {
    font-size: 9px;
    font-weight: 500;
}
/* As large as the row's own height (this bar keeps its previous, unchanged height) allows without
   growing it - the row sits in an overflow:hidden strip (.scheduling-header__strip), so anything
   taller just clips rather than pushing the date-cell row below it down. */
.scheduling-header__status-count-value {
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.scheduling-header__tech-slot {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 2px 2px 3px;
    position: relative;
    min-width: 0;
}

.scheduling-header__today-label {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}

.scheduling-header__tech-avatars {
    display: flex;
    gap: 1px;
    align-items: flex-end;
    flex-wrap: nowrap;
    overflow: hidden;
    max-width: 100%;
}

.scheduling-header__tech-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--md-sys-color-primary);
    border: 1px solid rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}
.scheduling-header__tech-avatar--overflow {
    background: rgba(255,255,255,0.2);
    font-size: 9px;
}

/* Bottom row — date cells */
.scheduling-header__date-row {
    display: flex;
    background: #1e3a5f;
    height: 44px;
}

.scheduling-header__date-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3px 2px;
    cursor: pointer;
    border-left: 1px solid rgba(255,255,255,0.07);
    transition: background 0.12s;
    min-width: 0;
    overflow: hidden;
    position: relative;
}
/* Drag-to-a-different-day target - see ViewSchedule.js's #buildDateStrip drop handler. */
.scheduling-header__date-cell--drop-target {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: -2px;
}
.scheduling-header__date-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0%;
    background: var(--date-fill-color);
    transition: height 0.3s ease;
    z-index: 0;
    pointer-events: none;
}
.scheduling-header__date-cell:first-child {
    border-left: none;
}
.scheduling-header__date-cell:hover {
    background: rgba(255,255,255,0.08);
}
.scheduling-header__date-cell.has-jobs {
    background: #2a7d43;
}
.scheduling-header__date-cell.has-jobs:hover {
    background: #339950;
}
.scheduling-header__date-cell.is-today {
    outline: 2px solid #e8522a;
    outline-offset: -2px;
}
.scheduling-header__date-cell.is-selected {
    background: rgba(255, 255, 255, 0.22);
}
.scheduling-header__date-cell.has-jobs.is-selected {
    background: #4ab86a;
}

.scheduling-header__day {
    font-size: 10px;
    color: rgba(255,255,255,0.6);
    font-weight: 500;
    line-height: 1;
    position: relative;
    z-index: 1;
}
.scheduling-header__date {
    font-size: 12px;
    color: white;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}

/* ── Map area ──────────────────────────────────────────────────────────── */
.scheduling-map {
    flex: 1;
    min-height: 0;
    border-radius: var(--rs-drawer-border-radius);
}

/* Shown while the map/job list are still loading; hidden for good once both are ready */
.scheduling-map__loading {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 13px;
    border-radius: var(--rs-drawer-border-radius);
}
.scheduling-map__loading-icon {
    font-size: 32px;
    animation: pending-approve-spin 0.8s linear infinite;
}

/* Traffic toggle injected as a Google Maps custom control */
.scheduling-map__layer-btn {
    margin: 10px;
    padding: 8px 14px;
    background: white;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    cursor: pointer;
    font-size: 13px;
    font-family: Roboto, sans-serif;
    font-weight: 500;
    color: #444;
    transition: background 0.12s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.scheduling-map__layer-btn:hover {
    background: #f5f5f5;
}
.scheduling-map__layer-btn.is-active {
    background: var(--md-sys-color-primary);
    color: white;
    border-color: transparent;
}
/* Invisible (not display:none) unless the button is toggled on - the active/blue background alone
   reads as "selected" too subtly at a glance, so the tick is the more obvious, at-a-distance signal
   that a map layer toggle (Booked Jobs, Zoom to job) is currently on. Green (not white, matching
   the rest of the active button's text) so it still reads as a distinct "on" indicator against the
   blue fill. visibility, not display, so its width is reserved even while hidden - these buttons
   are pushed individually onto the Google Maps control bar, which lays them out once and never
   re-flows a neighbour when an adjacent control's own width changes afterward; toggling the tick's
   display on/off shrank/grew this button and visibly closed the gap to the next one every time both
   ended up active. Reported 2026-09-16 ("buttons almost overlap when both are on"). */
.scheduling-map__layer-btn-tick {
    visibility: hidden;
    font-size: 20px;
    color: #34A853;
    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 24;
}
.scheduling-map__layer-btn.is-active .scheduling-map__layer-btn-tick {
    visibility: visible;
}

/* "N have no address location..." notice - see ViewSchedule.js's #refreshUncoordinatedBanner.
   Quiet chip styling (no icon, not a full-width banner) matching TechApp's own equivalent map-
   screen notice, rather than the app's usual bolder alert-banner treatment - it's informational,
   not actionable. */
.scheduling-map__uncoordinated-banner {
    margin: 10px;
    padding: 3px 6px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    font-size: 12px;
    font-family: Roboto, sans-serif;
    color: #8A97A8;
}

/* Strip default InfoWindow padding so it wraps tightly around content */
.scheduling-map .gm-style-iw-c { padding: 0 !important; }
.scheduling-map .gm-style-iw-d { overflow: hidden !important; }
.scheduling-map .gm-ui-hover-effect { display: none !important; }



/* ── Calendar view ─────────────────────────────────────────────────────── */
.scheduling-details-space {
    display: none;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 16px;
}

.scheduling-details-placeholder {
    display: none;
}

.scheduling-calendar {
    display: none;
    flex: 1;
    min-height: 0;
    /* Row 4 (timed body) shrinks from its normal 720px (12h × 60px) down to a 360px floor
       (12h × 30px, half-height cells) before anything else gives; row 3 (all-day) always gets
       its full content height first, down to a 136px floor (5 single-line 24px all-day tiles +
       the column's 2px gaps + 4px top/bottom padding) so the row reads as a real section even
       with 0-4 items, rather than collapsing to just the "All day" gutter label's height. Above
       that floor it's still max-content, not a bare "auto" keyword - a plain auto track's base
       size is not reliably pinned to its content height during grid's track-sizing, so it can
       end up squeezed far below its content (cards clipped) once room is tight, which is exactly
       the case this feature targets. */
    grid-template-rows: max-content max-content minmax(136px, max-content) minmax(360px, 720px);
    /* auto (not hidden): once even the 360px floor doesn't fit, or columns don't fit the
       250px min-width, this scrolls instead of clipping - the sticky header (below) stays
       pinned to the top of this same scroll container while everything scrolls beneath it. */
    overflow: auto;
    background: #fff;
    border-radius: var(--rs-drawer-border-radius);
    padding-bottom: 16px;
}

/* Sticky header row — technician names */
.scheduling-calendar__header {
    grid-row: 2;
    display: flex;
    background: #fff;
    border-bottom: 1px solid #e0e4ea;
    position: sticky;
    top: 0;
    z-index: 2;
}
.scheduling-calendar__gutter {
    width: 52px;
    flex-shrink: 0;
}
/* Pinned to the left/right edge of the viewport during horizontal scroll, in step with
   .scheduling-calendar__time-axis(--right) below - keeps header columns aligned with the
   timed/all-day columns underneath as they all scroll past the same fixed time-axis. */
.scheduling-calendar__gutter--left {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
}
.scheduling-calendar__gutter--right {
    position: sticky;
    right: 0;
    z-index: 2;
    background: #fff;
}
.scheduling-calendar__col-header {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 4px 10px;
    font-weight: 600;
    font-size: 13px;
    border-left: 1px solid #e0e4ea;
    min-width: 250px;
}
/* Booked-jobs-today count next to the tech's name - see #buildCalendar's jobCountByTech. Circular
   pill, matching the app's other count badges (blue/white). min-width=height+border-radius:50%
   keeps it a true circle for a single digit; it grows into a pill for two digits rather than
   clipping. */
.scheduling-calendar__col-header-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 10px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary, #fff);
    font-weight: 700;
    font-size: 12px;
}

/* Scrollable body — 1fr fills remaining space after the auto-height all-day row */
.scheduling-calendar__body {
    grid-row: 4;
    display: flex;
    min-height: 0;
}

/* All-day section — auto-height (grows with content) with a 136px floor (5 single-line all-day
   tiles), pinned to grid row 3. The floor is set on the grid track itself (.scheduling-calendar's
   grid-template-rows) - repeated here too since a grid item's own min-height still participates
   in the track's content-based sizing, not just the track's explicit minmax(). */
.scheduling-calendar__allday {
    grid-row: 3;
    display: flex;
    min-height: 136px;
}
.scheduling-calendar__allday-gutter {
    box-sizing: border-box;
    width: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 6px 8px 0 0;
    font-size: 10px;
    color: #888;
    user-select: none;
    writing-mode: horizontal-tb;
}
/* Same left/right pinning as .scheduling-calendar__gutter, see comment there - keeps the
   all-day row's columns aligned with the header/timed rows during horizontal scroll. */
.scheduling-calendar__allday-gutter--left {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
}
.scheduling-calendar__allday-gutter--right {
    position: sticky;
    right: 0;
    z-index: 2;
    background: #fff;
}
.scheduling-calendar__allday-col {
    flex: 1;
    min-width: 250px;
    border-left: 1px solid #e0e4ea;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
    position: relative;
}

/* Time axis (left and right) - pinned to the left/right edge of the viewport during
   horizontal scroll, same as .scheduling-calendar__gutter(--left/--right) and
   .scheduling-calendar__allday-gutter(--left/--right) above, so the hour labels stay visible
   while tech columns scroll past underneath. position stays a positioned value (sticky, not
   static) so the absolutely-positioned .scheduling-calendar__time-label children still anchor
   to this element. z-index is explicit (not auto) so this paints above .scheduling-calendar__grid,
   which is also positioned (position: relative) and would otherwise win DOM-order paint priority. */
.scheduling-calendar__time-axis {
    width: 52px;
    flex-shrink: 0;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    height: 100%;
}
.scheduling-calendar__time-label {
    position: absolute;
    right: 8px;
    font-size: 11px;
    color: #888;
    transform: translateY(-50%);
    white-space: nowrap;
    user-select: none;
}
.scheduling-calendar__time-axis--right {
    left: auto;
    right: 0;
}
.scheduling-calendar__time-axis--right .scheduling-calendar__time-label {
    left: 8px;
    right: auto;
}

/* Main grid — flex row of tech columns; height follows the body row's track (see
   .scheduling-calendar grid-template-rows) so %-positioned job blocks compress with it */
.scheduling-calendar__grid {
    flex: 1;
    display: flex;
    position: relative;
    min-width: 0;
    height: 100%;
    flex-shrink: 0;
}

/* Grid background: hour / half-hour lines spanning all columns */
.scheduling-calendar__grid-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.scheduling-calendar__gridline {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px solid #e4e8ef;
}
.scheduling-calendar__gridline.--half {
    border-top: 1px dashed #e4e8ef;
}

/* Tech columns */
.scheduling-calendar__col {
    flex: 1;
    position: relative;
    border-left: 1px solid #e0e4ea;
    min-width: 250px;
    height: 100%;
}

/* Booking mode */
.scheduling-calendar--booking-mode .scheduling-calendar__allday-col,
.scheduling-calendar--booking-mode .scheduling-calendar__col {
    cursor: crosshair;
}
.scheduling-calendar--booking-mode .scheduling-calendar__allday-col:hover {
    background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
.scheduling-calendar--booking-mode .scheduling-calendar__col:hover {
    background: color-mix(in srgb, var(--md-sys-color-primary) 5%, transparent);
}
.scheduling-calendar--booking-mode .scheduling-calendar__col .scheduling-calendar__job:not(.scheduling-calendar__job--pending):not(.scheduling-calendar__job--range-preview) {
    pointer-events: none;
    opacity: 0.4;
}
.scheduling-calendar__booking-banner {
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: color-mix(in srgb, var(--md-sys-color-primary) 12%, #fff);
    border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 30%, transparent);
    font-size: 13px;
    flex-shrink: 0;
}
.scheduling-calendar__booking-banner .material-symbols-outlined {
    font-size: 18px;
    color: var(--md-sys-color-primary);
    flex-shrink: 0;
}
.scheduling-calendar__booking-cancel {
    margin-left: auto;
    padding: 4px 12px;
    border: 1px solid currentColor;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    font-size: 12px;
    color: var(--md-sys-color-primary);
}
.scheduling-calendar__job--pending {
    background: color-mix(in srgb, var(--md-sys-color-primary) 40%, transparent);
    border: 2px dashed var(--md-sys-color-primary);
    color: var(--md-sys-color-primary);
    z-index: 2;
}
.scheduling-calendar__job--range-preview {
    background: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 50%, transparent);
    cursor: pointer;
    z-index: 2;
}

/* Job blocks */
.scheduling-calendar__job {
    position: absolute;
    /* Work (job/quote) colour - deliberately warm/teal so it contrasts against the cool
       blue-grey diagonal stripe used for calendar items (booking--calitem below), rather than
       the app's blue brand primary it used to inherit, which read too close to that stripe. */
    background: var(--rs-calendar-tile-color-on);
    color: var(--rs-calendar-tile-text-color-on);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 11px;
    line-height: 1.35;
    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;
    min-height: 20px;
    min-width: 32px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
.scheduling-calendar__job:hover {
    filter: brightness(1.1);
}
.scheduling-calendar__job-address {
    flex-shrink: 0;
}
/* Fixed mark, not the flag's own icon/colour - see ViewSchedule.js's #renderJobBlockBody. */
.scheduling-calendar__job-flag {
    font-size: 12px;
    color: #d32f2f;
    font-variation-settings: 'FILL' 1;
    vertical-align: text-bottom;
    margin-right: 3px;
}
/* Icon row under the address (services, alerts) - matches the legacy V1 booking tile's layout
   (design/Scheduling/calendar.png). Sized well above the 11px tile text (unlike job-icons__icon
   elsewhere, which sits on a much roomier drawer card) since a single glyph illegible at tile
   scale defeats the point of showing it at a glance. */
.scheduling-calendar__job-icons {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.scheduling-calendar__job-icons .material-symbols-outlined {
    font-size: 16px;
}
.scheduling-calendar__job-icons img {
    max-width: 16px;
    max-height: 16px;
}
/* Completed jobs/quotes swap to an explicit light tint + dark text rather than fading via
   opacity - opacity blends the whole block (including its white text) toward the page's own
   white background, so white-on-teal fades toward white-on-white and becomes illegible. This
   keeps a clear, accessible light/dark contrast at every state while still reading as
   "faded out" next to an active (dark) job/quote card. Not scoped to booking--job/--quote:
   isCompleted is only ever true for jobs (see Booking.js), so it never combines with
   booking--calitem's own background in practice. */
.scheduling-calendar__job--completed {
    background-color: var(--rs-calendar-tile-color-off);
    color: var(--rs-calendar-tile-text-color-off);
    border-color: silver;;
}
/* All-day tiles flow in the column rather than overlapping absolutely */
/* Row, not the base .scheduling-calendar__job's column - a fixed 24px single-line tile has no
   room to stack a second icon row underneath the address (it was rendering there, just clipped
   off by the 24px height + overflow:hidden, invisible rather than genuinely absent). Icons sit
   inline after the address instead, address truncating first if the two don't both fit. */
.scheduling-calendar__job--allday {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 24px;
    flex-shrink: 0;
    flex-direction: row;
    align-items: center;
}
.scheduling-calendar__job--allday .scheduling-calendar__job-address {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.scheduling-calendar__job--allday .scheduling-calendar__job-icons {
    flex-shrink: 0;
}

/* ── Booking kinds ──────────────────────────────────────────────────────────
   A calendar block is now a Booking, which may belong to a job, a quote's site visit or a calendar
   item (a day off, a holiday, a note). Booking.kindClass puts one of these on every block.
   booking--quote gets its own orange/brown tone (distinct from the job tile's warm cream and from
   the NEW/240V tag greens/reds) - previously it inherited the base job colour unchanged, which
   made a quote block indistinguishable from a job one at a glance on the calendar itself (it still
   keeps its separate purple identity elsewhere in the app - job-dates__quote-badge, the sidebar
   card's left accent below - this only affects the calendar block). booking--calitem (below) looks
   different again, since a calendar item isn't work at all.
   Calendar items read as texture rather than a solid block, to read as clearly not-work at a
   glance. Still clickable - they open the calendar-item dialog (Booking.dialogPath) rather than
   a detail page. An item with an explicit colour gets it applied inline, which overrides this
   gradient. */
.scheduling-calendar__job.booking--quote {
    background: #e0a868;
    border-color: #8b5a2b;
}
.scheduling-calendar__job.booking--calitem {
    background: repeating-linear-gradient(
        45deg, #78909C, #78909C 6px, #6B7F8B 6px, #6B7F8B 12px);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    font-style: italic;
}

/* Property tag special-case (see Booking.js's hasTagNew/hasTag240V) - same colours as the
   drawer card's equivalent treatment (rentsafe.css's --rs-tag-new-color/--rs-tag-240v-color),
   just a solid pastel rather than a light tint since the tile has no watermark to also carry
   the signal. Declared after (and at the same two-class specificity as) the booking-kind rules
   above, and deliberately not scoped to :not(.booking--quote) - a tagged property's booking
   still needs its NEW/240V colour to win regardless of whether it's a job or a quote, the same
   way it already wins over --completed. */
.scheduling-calendar__job.scheduling-calendar__job--tag-new {
    background-color: color-mix(in srgb, var(--rs-tag-new-color) 50%, white);
    border-color: var(--rs-tag-new-color);
}
.scheduling-calendar__job.scheduling-calendar__job--tag-240v {
    background-color: color-mix(in srgb, var(--rs-tag-240v-color) 50%, white);
    border-color: var(--rs-tag-240v-color);
}
/* Completed + tagged (see Booking.js's isCompleted alongside hasTagNew/hasTag240V) - same "dim
   down" intent as a plain completed job's pale orange (.scheduling-calendar__job--completed above),
   just tinted green/red instead of losing the tag colour entirely. Equal (two-class) specificity to
   the solid tag rules just above, so source order alone decides - declared after them, so a
   completed+tagged tile always shows this paler version rather than the full-strength tag colour.
   Reported 2026-09-16 ("finished tagged jobs still show full-strength red/green"). */
.scheduling-calendar__job--tag-new.scheduling-calendar__job--completed {
    background-color: color-mix(in srgb, var(--rs-tag-new-color) 15%, white);
    border-color: color-mix(in srgb, var(--rs-tag-new-color) 45%, transparent);
    color: var(--rs-calendar-tile-text-color-off);
}
.scheduling-calendar__job--tag-240v.scheduling-calendar__job--completed {
    background-color: color-mix(in srgb, var(--rs-tag-240v-color) 15%, white);
    border-color: color-mix(in srgb, var(--rs-tag-240v-color) 45%, transparent);
    color: var(--rs-calendar-tile-text-color-off);
}

/* Selected-tile highlight (see ViewSchedule.js's #isViewingBooking) - the right drawer can stay
   open on a job/quote while the calendar view is showing (switching Map/Calendar/Details never
   drops the id from the URL), with nothing else on the calendar to say which tile it refers to.
   An outline + glow composes with every background-driven state above (quote/calitem/tag/
   completed) rather than fighting it, and z-index lifts it clear of unselected siblings sharing a
   lane. The drop shadow is layered into the same box-shadow (a second, separate box-shadow
   property would just overwrite the glow ring rather than combine with it). */
.scheduling-calendar__job--selected {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 1px;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--md-sys-color-primary) 35%, transparent),
        0 2px 6px rgba(0, 0, 0, 0.25);
    z-index: 5;
}

/* Drag-to-reschedule (see ViewSchedule.js's #bindBlockDrag/#buildCalendar drop handlers). */
.scheduling-calendar__job--dragging {
    opacity: 0.4;
}
.scheduling-calendar__col--drop-target,
.scheduling-calendar__allday-col--drop-target {
    background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
    outline: 2px dashed var(--md-sys-color-primary);
    outline-offset: -2px;
}
/* Cursor-following "9:00 - 10:30" label - see ViewSchedule.js's #showDragPreview. Fixed, not
   absolute - it isn't scoped to any one column, since the same element follows the cursor across
   every drop target (timed/all-day columns, date-strip cells). */
.scheduling-calendar__drag-preview {
    display: none;
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary, #fff);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}
/* Faint cursor-following clone of the tile being dragged - see #bindBlockDrag's dragstart/
   #showDragPreview. A lower z-index than .scheduling-calendar__drag-preview (not DOM order -
   both are appended to <body> as they're created, in whichever order a drag happens to touch
   them first) is what keeps the time label legible on top of it rather than the two competing. */
.scheduling-calendar__job--drag-ghost {
    display: none;
    position: fixed;
    z-index: 9999;
    opacity: 0.55;
    pointer-events: none;
    margin: 0;
}
/* Snapped placeholder shown over the timed grid in place of the whole-column highlight - see
   ViewSchedule.js's #showSlotGhost. position:fixed (computed from the hovered column's own rect,
   not absolute inside it) so the same element can move between tech columns as a drag crosses
   them without needing to be reparented. Text colour/centring override the base
   .scheduling-calendar__job's left-aligned layout - two centred lines (address, then time range)
   rather than the real tile's address+icon-row layout, since there are no icons to show here. */
.scheduling-calendar__job--slot-ghost {
    display: none;
    position: fixed;
    z-index: 6;
    background: color-mix(in srgb, var(--md-sys-color-primary) 30%, transparent);
    border: 2px dashed var(--md-sys-color-primary);
    color: var(--md-sys-color-primary);
    box-shadow: none;
    pointer-events: none;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.scheduling-calendar__job--slot-ghost-address {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.scheduling-calendar__job--slot-ghost-time {
    font-size: 10px;
}

/* Company-wide all-day bookings (a calendar item with no technician - a public holiday or
   shutdown) span the full width of the all-day section instead of sitting in one tech's column.
   Appended directly to .scheduling-calendar__allday, which is a flex row, so a 100% basis on its
   own line is what makes it span. */
.scheduling-calendar__allday-strip {
    flex: 0 0 100%;
    box-sizing: border-box;
    margin: 2px 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #546E7A;
}

/* Marks a quote's card at a glance - this purple is the quote's own dedicated identity in the
   sidebar (see job-dates__quote-badge); the calendar block itself no longer uses it, see the
   "Booking kinds" comment above. Job/Quote
   cards otherwise show the same actions and sections now - Booking.toggleUrgent/toggleUncontactable/
   addTag/removeTag all resolve to whichever owner the booking actually has (see Booking.js
   #ownerObject), so Snooze/Cold/tags/tenants work identically on either kind. */
.fw-card-list__card:has(.job-actions.booking--quote) {
    border-left: 3px solid #7B1FA2;
}

/* Activity tab on a record that cannot have one.
   Notes, comms and files are all polymorphic (notes.pdoKey/pdoId, files.ownerType/ownerId, and the
   contact list comes from the property), so a quote populates those three exactly as a job does.
   job_activities is keyed by a plain `jobId` column, so a quote has no activity timeline to show and
   its button is hidden rather than opening an empty panel. Remove this rule if job_activities is ever
   made polymorphic (or a quote_activities table added). */
.right-drawer.right-drawer--no-activity .right-drawer__tab-strip-buttons [data-section="activity"] {
    display: none;
}

/* ── Calendar item dialog ──────────────────────────────────────────────────
   Two parts: the item's own fields (widget-bound) and a plain-text booking summary - dates/times/
   technician are set by picking a slot on the calendar, not by typing into this dialog. */
#calendarItem {
    width: 560px;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
}
#calendarItem .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 16px;
    margin: 0;
    cursor: pointer;
}
#calendarItem .fw-view__main-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}
#calendarItem .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
#calendarItem .dialog-footer .fw-button {
    padding: 8px 24px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
#calendarItem .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
#calendarItem .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant);
}
#calendarItem .dialog-footer .changeBooking {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-primary);
}
/* Set apart from Save/Change Booking/Cancel - margin-right: auto absorbs the footer's free space on
   this button's right, pushing it to the opposite end from the rest (same danger-button convention
   as #jobTypeEditor's Delete). */
#calendarItem .dialog-footer .remove {
    background: transparent;
    color: var(--md-sys-color-error);
    border: 1px solid var(--md-sys-color-error);
    margin-right: auto;
}

.calendar-item-editor {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 380px;
    font-size: 13px;
}
.calendar-item-editor__slot-summary {
    margin: 0;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--md-sys-color-primary-container, #d4e3ff);
    color: var(--md-sys-color-on-primary-container, #001b3f);
    font-size: 13px;
    font-weight: 500;
}
.calendar-item-editor__row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.calendar-item-editor__label {
    flex: 0 0 72px;
    padding-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.calendar-item-editor__title,
.calendar-item-editor__notes {
    flex: 1;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    font: inherit;
    font-family: inherit;
    outline: none;
}
.calendar-item-editor__title:focus,
.calendar-item-editor__notes:focus {
    border-color: var(--md-sys-color-primary);
}
.calendar-item-editor__notes {
    resize: vertical;
}

/* Adding a calendar item is an action, not a view mode, so it reads differently from the
   map/calendar/job switches it sits beside. */
.scheduling-header__add-cal-item {
    margin-left: auto;
}



/* ── Confirmation dialog ────────────────────────────────────────────────── */
dialog.confirmation-dialog {
    font-size: 14px;
    font-family: inherit;
    border-radius: 12px;
    padding: 0;
    min-width: 320px;
    max-width: 420px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}
dialog.confirmation-dialog header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border: none;
    margin: 0;
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 500;
}
dialog.confirmation-dialog .dialog-message {
    margin: 0;
    padding: 20px;
    color: var(--md-sys-color-on-surface);
    line-height: 1.5;
}
dialog.confirmation-dialog footer {
    border-top: 1px solid var(--md-sys-color-outline-variant);
    margin: 0;
    padding: 12px 16px;
    gap: 8px;
}
dialog.confirmation-dialog footer button {
    padding: 8px 20px;
    border-radius: 6px;
    border: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}
dialog.confirmation-dialog footer .ok-button {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
dialog.confirmation-dialog footer .ok-button:hover {
    filter: brightness(1.1);
}
dialog.confirmation-dialog footer .cancel-button {
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    border: 1px solid var(--md-sys-color-outline-variant) !important;
}
dialog.confirmation-dialog footer .cancel-button:hover {
    background: var(--md-sys-color-surface-variant);
}

/* ── Alert dialog ───────────────────────────────────────────────────────── */
dialog.alert-dialog {
    font-size: 14px;
    font-family: inherit;
    border-radius: 12px;
    padding: 0;
    min-width: 320px;
    max-width: 420px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    border: none;
}
dialog.alert-dialog::backdrop {
    background: rgba(0, 0, 0, 0.4);
}
dialog.alert-dialog header {
    background: var(--md-sys-color-error);
    color: var(--md-sys-color-on-error);
    border: none;
    margin: 0;
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 500;
}
dialog.alert-dialog .dialog-message {
    margin: 0;
    padding: 20px;
    color: var(--md-sys-color-on-surface);
    line-height: 1.5;
}
dialog.alert-dialog footer {
    border-top: 1px solid var(--md-sys-color-outline-variant);
    margin: 0;
    padding: 12px 16px;
    gap: 8px;
}
dialog.alert-dialog footer .ok-button {
    padding: 8px 20px;
    border-radius: 6px;
    border: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    background: var(--md-sys-color-error);
    color: var(--md-sys-color-on-error);
}
dialog.alert-dialog footer .ok-button:hover {
    filter: brightness(1.1);
}

/************************************************** || AGENCY VIEW || *************************************************/
/* ── Agency View ─────────────────────────────────────────────────────── */
.agency-view {
    display: grid;
    grid-template-rows: 62px 1fr;
    max-height: calc(100vh - 32px);
    gap: 8px;
    font-family: Roboto, Arial, sans-serif;
    overflow: hidden;
    height: 100%;
    box-sizing: border-box;
}

/* ── Header ──────────────────────────────────────────────────────────── */
.agency-view__header {
    display: flex;
    align-items: center;
    gap: 16px;
}
.agency-view__logo {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center left;
}
.agency-view__header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.agency-view__name {
    font-size: 24px;
    font-weight: 400;
    color: #F5F8FD;
    margin: 0;
    line-height: 32px;
    cursor: pointer;
}
.agency-view__subtitle {
    font-size: 15px;
    color: rgba(245, 248, 253, 0.65);
    line-height: 20px;
    cursor: pointer;
}
.agency-view__main {
    display: grid;
    grid-column-gap: 16px;
    grid-template-columns: auto 64px;
    grid-template-rows: calc(100vh - 102px);
    transition: grid-template-columns .35s ease-in-out;
}
.agency-view__main.open {
	grid-template-columns: auto 400px;
}
/* ── Body padding ────────────────────────────────────────────────────── */
.agency-view__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.agency-view__body[hidden] {
    display: none;
}

/* ── Urgent Banner ───────────────────────────────────────────────────── */
/* ── Summary Cards ───────────────────────────────────────────────────── */
.agency-view__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.agency-view__card {
    background: #F9F9FF;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-shadow: 0 2px 8px rgba(27, 28, 28, 0.07);
}
.agency-view__card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.agency-view__card-top .material-symbols-outlined {
    font-size: 28px;
    color: var(--md-sys-color-primary);
    opacity: 0.7;
}
.agency-view__card-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    text-align: right;
}
.agency-view__card-meta-label { font-size: 10px; color: #425F8E; }
.agency-view__card-meta-value { font-size: 10px; font-weight: 600; color: #425F8E; }
.agency-view__card-number {
    flex: 1;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #1B2E4D;
}
.agency-view__card-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
}
.agency-view__card-badge .material-symbols-outlined { font-size: 12px; }
.agency-view__card-badge--red    { background: #FFDAD6; color: #BA1A1A; }
.agency-view__card-badge--blue   { background: #D4E3FF; color: #003062; }
.agency-view__card-badge--yellow { background: #FFF0C2; color: #7A5800; }
.agency-view__card-badges {
    display: flex;
    gap: 6px;
    align-items: center;
}
.agency-view__card--alert {
    background: hsla(6, 100%, 92%, 0.61);
    border-left: 4px solid #BA1A1A;
}
.agency-view__card-title {
    font-size: 18px;
    font-weight: 700;
    color: #1B1C1C;
    margin: 0 0 8px 0;
    line-height: 28px;
}
.agency-view__card-body {
    font-size: 14px;
    color: #64748B;
    line-height: 20px;
    flex: 1;
    margin-bottom: 12px;
}
.agency-view__card-body-label {
    font-weight: 400;
    color: #6B7E9C;
    margin-right: 4px;
}
.agency-view__card-btn {
    background: #fff;
    border: 1px solid #D4E3FF;
    border-radius: 4px;
    padding: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #425F8E;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    transition: background 0.15s;
}
.agency-view__card-btn:hover { background: #EEF4FF; }

/* ── Properties Section ──────────────────────────────────────────────── */
.agency-view__properties {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #F9F9FF;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(27,28,28,0.06);
    overflow: hidden;
    flex: 1;
    min-height: 0;
}
.agency-view__properties .fw-card-list__search-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 12px;
}
.agency-view__properties .fw-card-list__search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 8px 12px;
    color: #888;
    font-size: 14px;
}
.agency-view__properties .fw-card-list__search .material-symbols-outlined { font-size: 18px; color: #888; }
.agency-view__properties .fw-card-list__search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: inherit;
}
.agency-view__properties .fw-card-list__search-input::placeholder { color: #aaa; }
.agency-view__properties .agency-view__prop-tiles-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px 12px;
}
.agency-view__properties .fw-card-list__tiles {
    display: flex;
    gap: 8px;
}
.agency-view__properties .fw-card-list__tile {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--md-sys-color-outline-variant);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    font: inherit;
    transition: background 0.1s, color 0.1s;
}
.agency-view__properties .fw-card-list__tile:hover { opacity: 0.9; }
.agency-view__properties .fw-card-list__tile.active {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border-color: var(--md-sys-color-primary);
}
.agency-view__properties .fw-card-list__tile-count {
    background: rgba(255,255,255,0.25);
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
}
.agency-view__properties .fw-card-list__tile:not(.active) .fw-card-list__tile-count {
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}
/* Same chip treatment as .scheduling-jobs-drawer's own search-result banner - sits inline after
   the last tile (see .agency-view__prop-tiles-row) rather than stacked below, since here it's
   sharing a row with only three tiles instead of a taller filter/tag stack. */
.agency-view__properties .fw-card-list__banners:empty {
    display: none;
}
.agency-view__properties .fw-card-list__banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-secondary-container);
    font-size: 0.85em;
    white-space: nowrap;
}
.agency-view__properties .fw-card-list__banner-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* data-auto-load-threshold's deferred state (no tile auto-selected yet) - overrides the generic
   "No items" empty-indicator text with guidance specific to this not-yet-loaded case. */
.agency-view__properties .fw-card-list--unselected .fw-card-list__empty-indicator::before {
    content: "Select a filter above to view properties";
}
.agency-view__prop-add {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--md-sys-color-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.agency-view__prop-add .material-symbols-outlined { font-size: 18px; }
.agency-view__prop-add:hover { opacity: 0.9; }
.agency-view__prop-table {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.agency-view__prop-header {
    display: grid;
    grid-template-columns: 3fr 2fr 1fr 1fr;
    padding: 10px 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.agency-view__prop-table [data-widget="FWCardList"] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.agency-view__prop-table .fw-card-list__card-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
    margin-right: -15px; /* this is to counter the scroll bar gutter - may need to be excluded from maxOS*/
}
/* Without this, the card-container's own flex:1 above (needed for scrolling when non-empty)
   beats the framework's display:none-when-empty rule on source order, leaving an empty flexed
   box that shoves the empty-indicator down into a sliver at the very bottom. Hiding it here and
   giving the indicator flex:1 instead lets it fill the vacated space and center within it (via
   the framework's own align-items/justify-content:center on .fw-card-list--empty). */
.agency-view__prop-table .fw-card-list--empty .fw-card-list__card-container {
    display: none;
}
.agency-view__prop-table .fw-card-list__empty-indicator {
    flex: 1;
    min-height: 0;
}
.agency-view__prop-row {
    display: grid;
    grid-template-columns: 3fr 2fr 1fr 1fr;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #eef0f4;
    font-size: 13px;
    color: #1B1C1C;
    transition: background 0.1s;
}
.agency-view__prop-row:last-child { border-bottom: none; }
.agency-view__prop-row:hover { background: var(--rs-container-hover); }
.agency-view__prop-key {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-primary);
}
.agency-view__prop-activejob {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-primary);
    text-decoration: none;
    cursor: pointer;
}
.agency-view__prop-activejob:hover {
    text-decoration: underline;
}

/* ── Agency Toggle Buttons ─────────────────────────────────────────── */
.agency-view__actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
    align-items: center;
}
.agency-view__toggle-btn {
    padding: 7px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.5);
    background: transparent;
    color: #fff;
    letter-spacing: 0.5px;
}
.agency-view__toggle-btn:hover { background: rgba(255,255,255,0.15); }
.agency-view__toggle-btn--active {
    background: #fff;
    color: #1a3a5c;
    border-color: #fff;
}

/* ── Agency Panels ─────────────────────────────────────────────────── */
.agency-view__panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}
.agency-view__panel[hidden] {
    display: none;
}
.agency-view__panel--mass-update {
    min-height: 80vh;
}
.agency-view__panel-placeholder {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--md-sys-color-on-surface-variant);
}
.agency-view__prop-row .fw-toggle-switch {
    width: 30px;
    height: 17px;
    border-radius: 17px;
}
.agency-view__prop-row .fw-toggle-switch:before {
    width: 13px;
    height: 13px;
}
.agency-view__prop-row .fw-toggle-switch:checked {
    background-color: var(--md-sys-color-primary);
}
.agency-view__prop-row .fw-toggle-switch:checked:before {
    transform: translateX(13px);
}
.agency-view__prop-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 8px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    flex-shrink: 0;
}
.agency-view__prop-pagination-info {
    font-size: 13px;
    color: #6b7280;
}
.agency-view__prop-pagination-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}
.agency-view__prop-page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}
.agency-view__prop-page-btn .material-symbols-outlined {
    font-size: 18px;
}
.agency-view__prop-page-btn--active {
    background: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
    color: #fff;
    cursor: default;
}
.agency-view__prop-page-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  PROPERTY VIEW                                                       ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.prop-view {
    display: grid;
    grid-template-rows: 62px 1fr;
    max-height: calc(100vh - 32px);
    gap: 8px;
    font-family: Roboto, Arial, sans-serif;
    overflow: hidden;
    height: 100%;
    box-sizing: border-box;
}

/* ── Header ──────────────────────────────────────────────────────────── */
.prop-view__main {
    display: grid;
    grid-column-gap: 16px;
    grid-template-columns: auto 64px;
    grid-template-rows: calc(100vh - 102px);
    transition: grid-template-columns .35s ease-in-out;
}
.prop-view__main.open {
    grid-template-columns: auto 400px;	
}
.prop-view__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 4px;
}
.prop-view__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.prop-view__agency,
.prop-view__address {
    font-size: 20px;
    font-weight: 400;
    color: #F5F8FD;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.prop-view__agency {
    cursor: pointer;
}
.prop-view__agency:hover {
    text-decoration: underline;
}
.prop-view__address { font-size: 24px; }
.prop-view__agency-logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.prop-view__sep { color: #F5F8FD; font-size: 20px; opacity: 0.6; }

/* ── Drawer ───────────────────────────────────────────────────────────── */
.prop-view__drawer .fw-card-list__title {
    font-size: 14px;
    font-weight: 600;
}
.prop-view__drawer-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.prop-view__drawer-address {
    font-size: 13px;
    font-weight: 500;
    color: var(--rs-wsdefault-text);
    line-height: 18px;
}
.prop-view__drawer-manager {
    font-size: 12px;
    color: #737782;
}

.prop-view__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.prop-view__action-btn {
    padding: 7px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: rgba(255,255,255,0.18);
    color: #fff;
    letter-spacing: 0.5px;
}
.prop-view__action-btn--outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.5);
}
.prop-view__action-btn--danger {
    background: rgba(186,26,26,0.75);
}
.prop-view__cancel-service-btn {
    display: none;
}
.prop-view__actions:has(.prop-view__job-flag:not(:empty)) .prop-view__cancel-service-btn {
    display: block;
}
.prop-view__actions:has(.prop-view__job-flag:not(:empty)) .prop-view__request-btn {
    display: none;
}
/* ── Job property view (roleAgency job detail) ───────────────────────── */
.job-prop-view__svc-row {
    grid-template-columns: 2fr 1fr 1fr 1fr;
}
.prop-view__create-wrap { position: relative; }
.prop-view__create-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    min-width: 148px;
    z-index: 100;
}
.prop-view__create-menu-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    color: #1B2E4D;
}
.prop-view__create-menu-item:hover { background: #EEF4FF; }

/* ── Fields row ──────────────────────────────────────────────────────── */
.prop-view__fields {
    display: flex;
    gap: 12px;
    padding-bottom: 20px;
}
.prop-view__fields .job-field {
    flex: 1;
    --md-filled-text-field-hover-container-color: transparent;
    --md-filled-text-field-hover-state-layer-opacity: 0;
    --md-filled-text-field-hover-label-text-color: var(--md-sys-color-on-primary);
    --md-filled-text-field-focus-label-text-color: var(--md-sys-color-on-primary);
    --md-filled-text-field-hover-input-text-color: var(--md-sys-color-on-primary);
    --md-filled-text-field-focus-input-text-color: var(--md-sys-color-on-primary);
    --md-filled-text-field-hover-active-indicator-color: var(--md-sys-color-on-primary);
    --md-filled-text-field-focus-active-indicator-color: var(--md-sys-color-on-primary);
    --md-filled-text-field-caret-color: var(--md-sys-color-on-primary);
}
.prop-view__pm-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--md-sys-color-surface);
    cursor: pointer;
}
.prop-view__pm-label {
    font-size: 12px;
    color: #F5F8FD;
    line-height: 1;
}
.prop-view__pm-select {
    background: transparent;
    border: none;
    outline: none;
    font-size: 14px;
    color: #F5F8FD;
    cursor: pointer;
    width: 100%;
}
.prop-view__pm-select option {
    background: #fff;
    color: #1c1b1f;
}

/* ── Billing Address field ───────────────────────────────────────────── */
.prop-view__billing-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--md-sys-color-surface);
    background: transparent;
    cursor: pointer;
    min-width: 180px;
}
.prop-view__billing-label {
    font-size: 12px;
    color: #F5F8FD;
    line-height: 1;
}
.prop-view__billing-value {
    color: #F5F8FD !important;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 3px 0;
}

/* Empty state: match md-filled-text-field blank appearance */
.prop-view__billing-field:has(.prop-view__billing-value:empty) {
    justify-content: center;
    min-height: 48px;
}
.prop-view__billing-field:has(.prop-view__billing-value:empty) .prop-view__billing-label {
    font-size: 1rem;
    color: var(--md-sys-color-on-primary);
    opacity: 0.6;
}
.prop-view__billing-field:has(.prop-view__billing-value:empty) .prop-view__billing-value {
    display: none;
}

/* ── Billing Address dialog ──────────────────────────────────────────── */
.billing-dialog {
    border: none;
    border-radius: 12px;
    padding: 0;
    width: 420px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
    overflow: hidden;
}
.billing-dialog::backdrop {
    background: rgba(0,0,0,0.32);
}

/* job.html Activity tab - "show location" popup (see ViewJob.js#showActivityLocation). No live
   map instance on this page (unlike scheduling.html), so a Maps Embed iframe in a small modal
   substitutes, matching V1's rsJobActivity.jsp behaviour. */
.activity-map-dialog {
    border: none;
    border-radius: 12px;
    padding: 0;
    width: 480px;
    max-width: 92vw;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
    overflow: hidden;
}
.activity-map-dialog::backdrop {
    background: rgba(0,0,0,0.32);
}
.activity-map-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 12px 12px 12px 20px;
    font-size: 1rem;
    font-weight: 600;
}
.activity-map-dialog__close-btn {
    background: none;
    border: none;
    color: var(--md-sys-color-on-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 50%;
}
.activity-map-dialog__close-btn:hover {
    background: rgba(255,255,255,0.16);
}
.activity-map-dialog__frame {
    width: 100%;
    height: 360px;
    display: block;
}

/* job.html's Back Date button (ViewJob.js#openBackDateDialog) - mirrors V1's "Select New Job
   Completion Date" datepicker dialog. Same shape as .billing-dialog. */
.back-date-dialog {
    border: none;
    border-radius: 12px;
    padding: 0;
    width: 340px;
    max-width: 92vw;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
    overflow: hidden;
}
.back-date-dialog::backdrop {
    background: rgba(0,0,0,0.32);
}
.back-date-dialog__header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 600;
}
.back-date-dialog__body {
    padding: 16px 20px;
}
.back-date-dialog__input {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 9px 12px;
    font-size: 0.9rem;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
.back-date-dialog__input:focus {
    border-color: var(--md-sys-color-primary);
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: -1px;
}
.back-date-dialog__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
.back-date-dialog__cancel-btn,
.back-date-dialog__save-btn {
    padding: 8px 20px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.back-date-dialog__cancel-btn {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant) !important;
}
.back-date-dialog__cancel-btn:hover { background: var(--md-sys-color-surface-variant); }
.back-date-dialog__save-btn {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
.back-date-dialog__save-btn:hover:not(:disabled) { opacity: 0.88; }
.back-date-dialog__save-btn:disabled { opacity: 0.5; cursor: default; }
.call-attempt-dialog {
    border: none;
    border-radius: 12px;
    padding: 0;
    width: 460px;
    max-width: 92vw;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
    overflow: hidden;
}
.call-attempt-dialog::backdrop {
    background: rgba(0,0,0,0.32);
}
.call-attempt-dialog__header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 600;
}
.call-attempt-dialog__body {
    padding: 16px 20px;
    font-size: 0.9rem;
}
.call-attempt-dialog__footer {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 6px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
.call-attempt-dialog__delete-btn,
.call-attempt-dialog__register-btn,
.call-attempt-dialog__cancel-btn {
    padding: 8px 10px;
    border-radius: 20px;
    border: none;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.call-attempt-dialog__cancel-btn {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant) !important;
}
.call-attempt-dialog__cancel-btn:hover { background: var(--md-sys-color-surface-variant); }
.call-attempt-dialog__delete-btn {
    background: transparent;
    color: var(--md-sys-color-error);
    border: 1px solid var(--md-sys-color-error) !important;
}
.call-attempt-dialog__delete-btn:hover { background: var(--md-sys-color-error-container); }
.call-attempt-dialog__register-btn {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
.call-attempt-dialog__register-btn:hover { opacity: 0.88; }
.billing-dialog__header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px 12px 0 0;
}
.billing-dialog__body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.billing-dialog__use-prop-btn {
    align-self: flex-start;
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid var(--md-sys-color-outline-variant);
    background: transparent;
    color: var(--md-sys-color-primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.billing-dialog__use-prop-btn:hover { background: var(--md-sys-color-surface-variant); }
.billing-dialog__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.billing-dialog__input {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 9px 12px;
    font-size: 0.9rem;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
.billing-dialog__input:focus {
    border-color: var(--md-sys-color-primary);
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: -1px;
}
.billing-dialog__city-row {
    display: flex;
    gap: 8px;
}
.billing-dialog__city-row .billing-dialog__input { flex: 2; }
.billing-dialog__city-row .billing-dialog__state  { flex: 1; }
.billing-dialog__city-row .billing-dialog__postcode { flex: 1; }
.billing-dialog__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
.billing-dialog__cancel-btn,
.billing-dialog__update-btn {
    padding: 8px 20px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.billing-dialog__cancel-btn {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant) !important;
}
.billing-dialog__cancel-btn:hover { background: var(--md-sys-color-surface-variant); }
.billing-dialog__update-btn {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
.billing-dialog__update-btn:hover:not(:disabled) { opacity: 0.88; }
.billing-dialog__update-btn:disabled {
    background: var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
    cursor: not-allowed;
}

/* ── Body ────────────────────────────────────────────────────────────── */
.prop-view__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 24px;
}

/* ── Two-card row ────────────────────────────────────────────────────── */
.prop-view__cards {
    display: flex;
    gap: 16px;
}
.prop-view__cards--stacked {
    flex-direction: column;
}
.prop-view__card {
    background: #F9F9FF;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0px 16px 24px -8px rgba(27,28,28,0.06);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.prop-view__card--summary { flex: 1.35; }
.prop-view__card--owners { flex: 1; }
.prop-view__card--tenants { flex: 1; }
.prop-view__cards--stacked .prop-view__card--summary,
.prop-view__cards--stacked .prop-view__card--owners,
.prop-view__cards--stacked .prop-view__card--tenants {
    flex: 1;
}

.prop-view__card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.prop-view__card-icon-wrap {
    width: 34px;
    height: 34px;
    background: hsla(216, 70%, 36%, 0.20);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.prop-view__card-icon-wrap .material-symbols-outlined {
    font-size: 20px;
    color: var(--md-sys-color-primary);
}
.prop-view__card-title {
    flex: 1;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1B1C1C;
}
.prop-view__details-btn {
    padding: 4px 16px;
    border-radius: 4px;
    background: #fff;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: #00377A;
    cursor: pointer;
}
.prop-view__add-btn,
.prop-view__add-owner-btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--md-sys-color-primary);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.prop-view__add-btn .material-symbols-outlined,
.prop-view__add-owner-btn .material-symbols-outlined { font-size: 18px; }

/* ── Summary grid ────────────────────────────────────────────────────── */
.prop-view__summary-grid {
    display: flex;
    gap: 20px;
}
.prop-view__summary-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.prop-view__summary-label {
    font-size: 12px;
    font-weight: 600;
    color: #737782;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.prop-view__summary-text {
    font-size: 14px;
    color: #64748B;
    line-height: 20px;
}

/* ── Tenant rows ─────────────────────────────────────────────────────── */
.prop-view__tenant-header,
.prop-view__tenant-row {
    display: grid;
    grid-template-columns: 1fr 1fr 20px 1fr 20px 1fr 28px;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}
.prop-view__tenant-header {
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.prop-view__tenant-header span {
    font-size: 12px;
    font-weight: 600;
    color: #737782;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.prop-view__tenant-row {
    padding: 10px 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.prop-view__tenant-row:last-child { border-bottom: none; }
.prop-view__tenant-name,
.prop-view__tenant-phone,
.prop-view__tenant-email {
    font-size: 14px;
    color: #345F9B;
    font-family: inherit;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid transparent;
    outline: none;
    width: 100%;
    padding: 2px 0;
    transition: border-color 0.15s;
}
.prop-view__tenant-name {
    font-weight: 500;
}
.prop-view__tenant-name:focus,
.prop-view__tenant-phone:focus,
.prop-view__tenant-email:focus {
    border-bottom-color: var(--md-sys-color-primary);
}
.prop-view__tenant-name::placeholder,
.prop-view__tenant-phone::placeholder,
.prop-view__tenant-email::placeholder {
    color: var(--md-sys-color-outline);
    font-weight: 400;
}
.prop-view__tenant-icon {
    font-size: 18px;
    color: var(--md-sys-color-primary);
    opacity: 0.7;
}
.prop-view__tenant-delete-btn,
.prop-view__owner-delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    color: var(--md-sys-color-error);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}
.prop-view__tenant-row:hover .prop-view__tenant-delete-btn,
.prop-view__tenant-row:hover .prop-view__owner-delete-btn { opacity: 1; }
.prop-view__tenant-delete-btn .material-symbols-outlined,
.prop-view__owner-delete-btn .material-symbols-outlined { font-size: 18px; }

/* ── Services card ───────────────────────────────────────────────────── */
.prop-view__services {
    background: #F9F9FF;
    border-radius: 8px;
    box-shadow: 0px 16px 24px -8px rgba(27,28,28,0.06);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.prop-view__svc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.prop-view__preapproved-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}
.prop-view__preapproved-label md-switch {
    --md-switch-track-width: 44px;
    --md-switch-track-height: 22px;
    --md-switch-handle-width: 10px;
    --md-switch-handle-height: 10px;
    --md-switch-selected-handle-width: 16px;
    --md-switch-selected-handle-height: 16px;
    --md-switch-with-icon-handle-width: 16px;
    --md-switch-with-icon-handle-height: 16px;
    --md-switch-selected-with-icon-handle-width: 16px;
    --md-switch-selected-with-icon-handle-height: 16px;
    --md-switch-with-icon-icon-size: 10px;
}
.prop-view__add-svc-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--md-sys-color-primary);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.prop-view__add-svc-btn .material-symbols-outlined { font-size: 18px; }

/* ── Services table ──────────────────────────────────────────────────── */
.prop-view__svc-table { display: flex; flex-direction: column; }
.prop-view__svc-header,
.prop-view__svc-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
}
.prop-view__svc-header {
    background: transparent;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.prop-view__svc-header span {
    font-size: 12px;
    font-weight: 600;
    color: #737782;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.prop-view__svc-row {
    background: #fff;
    border-radius: 4px;
    margin-top: 4px;
    font-size: 14px;
    color: #1B1C1C;
}
.prop-view__svc-name { color: #345F9B; font-weight: 500; }

.prop-view__svc-table [data-widget="FWCardList"] {
    display: flex;
    flex-direction: column;
}

/* ── Services pagination ─────────────────────────────────────────────── */
.prop-view__svc-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
.prop-view__svc-page-info {
    font-size: 13px;
    color: #6b7280;
}
.prop-view__svc-page-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}
.prop-view__page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    border: 1px solid #C3C6D3;
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
}
.prop-view__page-btn .material-symbols-outlined { font-size: 18px; }
.prop-view__page-btn--active {
    background: #00377A;
    border-color: #00377A;
    color: #fff;
    cursor: default;
}
.prop-view__page-btn:disabled { opacity: 0.4; cursor: default; }

.scheduling-job-list .fw-card-list__card .job-card-footer .job-icons img {
	max-width: 20px;
}
.job-icons {
    display: flex;
    gap: 4px;
    align-items: center;
}
.job-icons .material-symbols-outlined {
    font-size: 16px;
}
.job-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.scheduling-jobs-drawer .job-card-footer {
    margin-top: 8px;
}
.job-card-footer--tech {
    display: flex;
    justify-content: flex-end;
}
.job-card-footer--tech:has(.job-note-icons:empty) {
    display: none;
}

.job-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.job-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 4px 2px 7px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 500;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    white-space: nowrap;
}
.job-tag-pill__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
}
.job-tag-pill__remove:hover {
    opacity: 1;
    background: rgba(0,0,0,0.08);
}
.job-tags__add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px dashed var(--md-sys-color-outline-variant);
    border-radius: 50%;
    background: none;
    color: var(--rs-subtext);
    cursor: pointer;
}
.job-tags__add-btn .material-symbols-outlined {
    font-size: 14px;
}
.job-tags__add-btn:hover {
    background: var(--md-sys-color-surface-variant);
}

.job-tag-input-menu {
    position: fixed;
    background: var(--md-sys-color-surface-container-high, #ece6f0);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    z-index: 9999;
    min-width: 200px;
    padding: 8px;
}
.job-tag-input-menu__input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 10px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 6px;
    font-size: 13px;
}
.job-tag-input-menu__suggestions {
    max-height: 180px;
    overflow-y: auto;
    margin-top: 4px;
}
.job-tag-input-menu__option-row {
    display: flex;
    align-items: center;
    border-radius: 6px;
}
.job-tag-input-menu__option-row:hover {
    background: var(--md-sys-color-surface-variant, #e7e0ec);
}
.job-tag-input-menu__option {
    display: block;
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    text-align: left;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--md-sys-color-on-surface, #1c1b1f);
}
.job-tag-input-menu__option-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-right: 6px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--rs-subtext);
    cursor: pointer;
}
.job-tag-input-menu__option-delete .material-symbols-outlined {
    font-size: 16px;
}
.job-tag-input-menu__option-delete:hover {
    background: rgba(0,0,0,0.08);
    color: var(--md-sys-color-error, #b3261e);
}

.job-note-icons {
    display: flex;
    gap: 4px;
    align-items: center;
}
.job-note-icons .material-symbols-outlined {
    font-size: 16px;
}

.job-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.job-agency {
    font-size: 0.8em;
}
.scheduling-jobs-drawer .job-agency {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1px;
    color: color-mix(in srgb, var(--md-sys-color-primary) 70%, var(--md-sys-color-on-surface-variant, #666));
}
.job-due-date {
    font-size: 0.8em;
    color: var(--color-text-muted, #888);
    text-align: right;
    flex-shrink: 0;
}
.scheduling-jobs-drawer .job-due-date {
    font-size: 11px;
    white-space: nowrap;
}
.scheduling-jobs-drawer .job-address {
    font-size: 15px;
    font-weight: 700;
    color: var(--md-sys-color-on-surface, #222);
    line-height: 1.25;
    margin-top: 2px;
}
.job-address-row {
    display: flex;
    align-items: baseline;
}
/* Fixed mark, not the flag's own icon/colour - see .scheduling-calendar__job-flag's own comment. */
.job-address-flag {
    display: none;
    font-size: 13px;
    color: #d32f2f;
    vertical-align: text-bottom;
    margin-right: 3px;
}
.job-address-flag.hasFlag-1 {
    display: inline-block;
}

/************************************************** || RIGHT DRAWER NOTES || *************************************************/

.right-drawer__section[data-section="notes"] {
    flex-direction: column;
    min-height: 0;
}
.rd-notes-panels {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.rd-notes-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
.rd-notes-panel:first-child {
    border-top: none;
}
.rd-notes-panel.rd-notes-panel--hidden {
    display: none;
}
.rd-notes-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--md-sys-color-surface-container-low);
    flex-shrink: 0;
}
.rd-notes-panel__title {
    color: var(--md-sys-color-on-surface-variant);
    letter-spacing: 0.05em;
}
.rd-notes-panel__add {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--md-sys-color-primary);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rd-notes-panel__add .material-symbols-outlined {
    font-size: 16px;
}
.rd-notes-panel__list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rd-notes-panel__list .fw-card-list__empty-indicator::before {
    content: "No notes";
}

/* Notes toggle toolbar in panel header */
.rd-notes-toolbar {
    display: flex;
    gap: 4px;
    margin-right: 4px;
    padding: 6px 12px;
}
.rd-notes-toggle {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 12px;
    border: 1px solid var(--md-sys-color-outline-variant);
    background: transparent;
    font-size: 11px;
    cursor: pointer;
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.45;
    transition: opacity 0.15s, background 0.15s;
}
.rd-notes-toggle.active {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-color: var(--md-sys-color-primary);
    opacity: 1;
}
.rd-notes-toggle .material-symbols-outlined {
    font-size: 14px;
}

/************************************************** || NOTE EDITOR POPUP || *************************************************/

#noteEditor {
    min-width: 640px;
    min-height: 460px;
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
}

#noteEditor .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 16px;
    margin: 0;
    cursor: pointer;
}

#noteEditor .dialog-header::after {
    color: var(--md-sys-color-on-primary);
    font-size: 22px;
    line-height: 1;
}

#noteEditor .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

#noteEditor .dialog-footer .fw-button {
    padding: 8px 24px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#noteEditor .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

#noteEditor .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant);
}

.note-editor {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    padding: 0;
    gap: 0;
}

.note-editor__left {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--md-sys-color-outline-variant);
    padding: 12px;
    gap: 10px;
    background: var(--md-sys-color-surface-container-lowest);
}

.note-editor__type-select {
    flex-shrink: 0;
}

.note-editor__card-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    min-height: 0;
}

.note-editor__card-list > [data-widget="FWCardList"] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.note-editor__card-list .fw-card-list__card-container {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 4px;
    gap: 4px;
}

.note-editor-item-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.12s, border-color 0.12s;
}

.note-editor-item-card:hover {
    background: var(--md-sys-color-surface-container-low);
}

.note-editor-item-card.selected {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.note-editor-item-card__icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.note-editor-item-card__title {
    font-size: 0.875rem;
    line-height: 1.3;
}

.note-editor__right {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 16px;
    min-width: 0;
}

.note-editor__note-type {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.note-editor__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--md-sys-color-on-surface-variant);
}

.note-editor__type-buttons {
    display: flex;
    gap: 8px;
}

.note-editor__type-btn {
    padding: 6px 18px;
    border-radius: 20px;
    border: 1px solid var(--md-sys-color-outline-variant);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.note-editor__type-btn.is-active {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border-color: var(--md-sys-color-primary);
}

.note-editor__details {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
    min-height: 0;
}

.note-editor__textarea {
    flex: 1;
    resize: none;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-container-lowest);
    min-height: 120px;
    outline: none;
    transition: border-color 0.15s;
}

.note-editor__textarea:focus {
    border-color: var(--md-sys-color-primary);
}

/* ── Page Format popup ─────────────────────────────────────────────────── */

#documentPageFormat {
    min-width: 340px;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
}

#documentPageFormat .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 16px;
    margin: 0;
    cursor: pointer;
}

#documentPageFormat .dialog-header::after {
    color: var(--md-sys-color-on-primary);
    font-size: 22px;
    line-height: 1;
}

#documentPageFormat .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

#documentPageFormat .dialog-footer .fw-button {
    padding: 8px 24px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#documentPageFormat .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

#documentPageFormat .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant);
}

.page-format-editor {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.page-format-editor__section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.page-format-editor__section:last-child {
    border-bottom: none;
}

.page-format-editor__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.page-format-editor__landscape-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--md-sys-color-on-surface);
}

.page-format-editor__margins {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
}

.page-format-editor__margin-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-format-editor__margin-field label {
    font-size: 0.8rem;
    color: var(--md-sys-color-on-surface-variant);
}

.page-format-editor__margin-field input {
    width: 100%;
    padding: 7px 10px;
    border: 1.5px solid var(--md-sys-color-outline);
    border-radius: 8px;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    font-size: 0.9rem;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.15s;
}

.page-format-editor__margin-field input:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
}

/************************************************** || LOGIN VIEW || *************************************************/

#login,
#setPassword {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--md-sys-color-background) url(../images/login-bgnd.png) center center / cover no-repeat;
    font-family: 'Roboto', sans-serif;
}

.login-card {
    background: var(--md-sys-color-surface-container-lowest);
    border-radius: 20px;
    padding: 40px 36px 36px;
    width: 340px;
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.10);
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: -33vh;
}

.login-card.login-card--hidden {
    display: none;
}

/* Brand */
.login-card__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 4px;
}

.login-card__logo {
    height: 80px;
    width: 250px;
    background: url(../images/rs_logo.svg) center / contain no-repeat;
}

/* Heading / subtitle */
.login-card__heading {
    font-size: 20px;
    font-weight: 700;
    color: var(--rs-wsdefault-text);
    text-align: center;
    margin: 0;
}

.login-card__subtitle {
    font-size: 14px;
    color: var(--md-sys-color-on-surface-variant);
    text-align: center;
    line-height: 1.5;
    margin: 0 0 4px;
}

/* Fields */
.login-card__fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-card__fields md-outlined-text-field {
    width: 100%;
    --md-outlined-text-field-container-shape: 8px;
}

/* Forgot link */
.login-card__forgot {
    text-align: right;
    font-size: 14px;
    margin-top: -4px;
}

.login-card__forgot a,
.login-card__forgot a:visited,
.login-card__forgot a:hover {
    color: var(--rs-wsdefault-text);
    cursor: pointer;
    text-decoration: none;
}

/* Login button */
.login-card__submit {
    margin-top: 4px;
}

.login-card__btn {
    width: 100%;
    padding: 13px 24px;
    border: none;
    border-radius: 100px;
    background: radial-gradient(circle at 50%, #1d5087 20%, #3e70a3fc 80%);
    color: var(--md-sys-color-on-primary);
    font-size: 16px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    letter-spacing: 0.3px;
}

.login-card__btn:hover {
    background: radial-gradient(circle at 50%, #3e70a3fc 20%, #1d5087 80%);
}

.login-card__btn .material-symbols-outlined {
    font-size: 20px;
}

.login__password-toggle {
    cursor: pointer;
}

/* Error message */
.login-card__message {
    display: none;
    border: 1px solid var(--md-sys-color-error);
    padding: 5px 16px;
    color: var(--md-sys-color-error);
    border-radius: 16px;
    font-size: 14px;
    text-align: center;
}

.login-card__message.hasLoginError-true {
    display: block;
}

/* Links row */
.login-card__links {
    text-align: center;
    font-size: 14px;
}

.login-card__links a,
.login-card__links a:visited,
.login-card__links a:hover {
    color: var(--rs-wsdefault-text);
    cursor: pointer;
    text-decoration: none;
}

/************************************************** || RIGHT DRAWER FILES || *************************************************/

.right-drawer__section[data-section="files"] {
    flex-direction: column;
    min-height: 0;
}

.files-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--md-sys-color-surface-container-low);
    flex-shrink: 0;
}

.files-panel__title {
    color: var(--md-sys-color-on-surface-variant);
    letter-spacing: 0.05em;
}

.files-panel__add {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--md-sys-color-primary);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.files-panel__add .material-symbols-outlined {
    font-size: 16px;
}

.files-panel__list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.files-panel__list .fw-card-list__empty-indicator::before {
    content: "No files";
}

.file-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--md-sys-color-outline-variant);
    cursor: default;
}

.file-card__icon {
    font-size: 22px;
    color: var(--rs-subtext);
    flex-shrink: 0;
    margin-top: 2px;
}

.file-card__body {
    flex: 1;
    min-width: 0;
}

.file-card__filename {
    font-weight: 600;
    font-size: 13px;
    color: var(--md-sys-color-on-surface);
    word-break: break-word;
}

.file-card__title,
.file-card__description {
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 2px;
}

.file-card__title:empty,
.file-card__description:empty {
    display: none;
}

.file-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--rs-subtext);
}

.file-card__auto-badge {
    display: none;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.file-card.kind-1 .file-card__auto-badge {
    display: inline-block;
}

.file-card__actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.file-card__download-btn,
.file-card__remove-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--rs-subtext);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-card__download-btn:hover,
.file-card__remove-btn:hover {
    background: var(--rs-container-hover);
}

.file-card__download-btn .material-symbols-outlined,
.file-card__remove-btn .material-symbols-outlined {
    font-size: 16px;
}

/* Upload dialog - bespoke dialog, not a routed popup (see FilesTabComponent.js) */
dialog.file-upload-dialog {
    min-width: 340px;
    max-width: 480px;
    border: none;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
    overflow: hidden;
}

dialog.file-upload-dialog::backdrop {
    background: rgba(0,0,0,0.4);
}

dialog.file-upload-dialog header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
}

dialog.file-upload-dialog .dialog-message {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.file-upload-dialog__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
}

.file-upload-dialog__field input[type="text"],
.file-upload-dialog__field input[type="file"],
.file-upload-dialog__field textarea {
    font-size: 14px;
    color: var(--md-sys-color-on-surface);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 4px;
    padding: 8px 10px;
    background: transparent;
    box-sizing: border-box;
    font-family: inherit;
}

.file-upload-dialog__field textarea {
    resize: vertical;
    min-height: 50px;
}

.file-upload-dialog__checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--md-sys-color-on-surface);
}

dialog.file-upload-dialog footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

dialog.file-upload-dialog footer .dialog-button {
    border: none;
    border-radius: 20px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    height: 40px;
}

dialog.file-upload-dialog footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

dialog.file-upload-dialog footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
}

/************************************************** || RIGHT DRAWER || *************************************************/

/* ── Drawer root ── */
.right-drawer {
    z-index: 200;
}
.right-drawer .user-avatar-menu {
	display: none;
}
/* ── Closed: vertical tab strip ── */
/* ── Closed: vertical tab strip ── */
.right-drawer__tab {
    display: flex;
    flex-direction: column;
    border-radius: 10px 0 0 10px;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.right-drawer.open .right-drawer__tab {
    opacity: 0;
    transform: translateX(24px) scale(0.85);
    pointer-events: none;
}
.right-drawer__tab-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 10px 12px;
    background: none;
    border: none;
    color: var(--md-sys-color-on-primary);
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
    min-width: 64px;
    max-width: 64px;
    transition: background 0.15s;
    justify-self: start;
}
.right-drawer__tab-btn .material-symbols-outlined {
    font-size: 22px;
}
.right-drawer__tab-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}
.right-drawer__tab-btn.active {
    background: rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.8);
}

/* ── Open: tab bar inside panel ── */
.right-drawer__panel-tabs {
    display: none;
    flex-direction: row;
    align-items: stretch;
    background: var(--md-sys-color-primary);
    border-top-left-radius: 10px;
    flex-shrink: 0;
    margin-left: -1px;
}
.right-drawer.open .right-drawer__panel-tabs {
    display: flex;
}
.right-drawer.has-job-summary .right-drawer__panel-tabs {
    border-top-left-radius: 0;
    margin-left: 0;
}
.right-drawer__panel-tabs .right-drawer__panel-close {
    margin-left: auto;
    color: var(--md-sys-color-on-primary);
    padding: 6px 10px;
}

/* Panel tab buttons arrive from the left with a stagger */
@keyframes rd-tab-arrive {
    from { opacity: 0; transform: translateX(-28px) scale(0.8); }
    to   { opacity: 1; transform: none; }
}
.right-drawer.open .right-drawer__panel-tabs .right-drawer__tab-btn,
.right-drawer.open .right-drawer__panel-tabs .right-drawer__panel-close {
    animation: rd-tab-arrive 0.22s ease both;
}
.right-drawer.open .right-drawer__panel-tabs .right-drawer__tab-btn:nth-child(1) { animation-delay: 0.05s; }
.right-drawer.open .right-drawer__panel-tabs .right-drawer__tab-btn:nth-child(2) { animation-delay: 0.09s; }
.right-drawer.open .right-drawer__panel-tabs .right-drawer__tab-btn:nth-child(3) { animation-delay: 0.13s; }
.right-drawer.open .right-drawer__panel-tabs .right-drawer__tab-btn:nth-child(4) { animation-delay: 0.17s; }
.right-drawer.open .right-drawer__panel-tabs .right-drawer__tab-btn:nth-child(5) { animation-delay: 0.21s; }
.right-drawer.open .right-drawer__panel-tabs .right-drawer__panel-close        { animation-delay: 0.25s; }

/* ── Open: full panel ── */
.right-drawer__panel {
    display: flex;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 400px;
    background: var(--md-sys-color-surface-container-lowest);
    flex-direction: column;
    border-left: 1px solid var(--rs-container-secondary-border);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.right-drawer.open .right-drawer__panel {
    transform: translateX(0);
}

.right-drawer.open {
    min-width: 400px;
}

/* ── Per-view right-drawer (FWComponent-based) ──────────────────────────────
   Each view now owns a .fw-view__drawer-container-right.right-drawer directly
   containing flat sibling components (tab-strip, comms-tab, notes-tab, etc.)
   instead of the old single global overlay panel - see design/Drawers notes.
   This is a real grid column (matches the existing left-drawer mechanic) rather
   than an absolute-positioned slide-in overlay. */
.fw-view__drawer-container-right.right-drawer {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    background: rgba(255, 255, 255, .1);
    border-radius: 8px;
}
.right-drawer__tab-strip {
    display: grid;
    grid-template-rows: min-content auto;
    width: inherit;
    flex-shrink: 0;
    container-type: inline-size;
}
.right-drawer__tab-strip-buttons {
    display: grid;
    grid-template-columns: repeat(1, 64px);
}
@container (min-width: 64px) {
	.right-drawer__tab-strip-buttons {
	   grid-template-columns: auto;
	}
    .right-drawer__tab-strip-buttons :nth-child(n+2){
        grid-column: 1;
        justify-self: end;
    }
}
@container (min-width: 128px) {
    .right-drawer__tab-strip-buttons {
       grid-template-columns: 64px auto;
    }
    .right-drawer__tab-strip-buttons :nth-child(n+2){
        grid-column: 2;
        justify-self: start;
    }
    .right-drawer__tab-strip-buttons :nth-child(n+3){
        grid-column: 2;
        justify-self: end;
    }
}
@container (min-width: 192px) {
    .right-drawer__tab-strip-buttons {
       grid-template-columns: repeat(2, 64px) auto;
    }
    .right-drawer__tab-strip-buttons :nth-child(n+3){
        grid-column: 3;
        justify-self: start;
    }
    .right-drawer__tab-strip-buttons :nth-child(n+4){
        grid-column: 3;
        justify-self: end;
    }
}
@container (min-width: 256px) {
    .right-drawer__tab-strip-buttons {
       grid-template-columns: repeat(3, 64px) auto;
    }
    .right-drawer__tab-strip-buttons :nth-child(n+4){
        grid-column: 4;
        justify-self: start;
    }
    .right-drawer__tab-strip-buttons :nth-child(n+5){
        grid-column: 4;
        justify-self: end;
    }
}
@container (min-width: 320px) {
    .right-drawer__tab-strip-buttons {
       grid-template-columns: repeat(4, 64px) auto;
    }
    .right-drawer__tab-strip-buttons :nth-child(n+5){
        grid-column: 5;
        justify-self: start;
    }
    .right-drawer__tab-strip-buttons :nth-child(n+6){
        grid-column: 5
    }
}
@container (min-width: 384px) {
    .right-drawer__tab-strip-buttons {
       grid-template-columns: repeat(5, 64px) auto;
    }
    .right-drawer__tab-strip-buttons :nth-child(n+6){
        grid-column: 6;
        justify-self: end;
    }
}
.right-drawer__tab-strip .right-drawer__panel-close {
    display: none;
    margin-top: auto;
    background: none;
    border: none;
    color: var(--md-sys-color-on-primary);
    padding: 10px;
    cursor: pointer;
    order: 100;
    justify-self: end;
}
.open .fw-view__drawer-container-right.right-drawer .right-drawer__tab-strip .right-drawer__panel-close {
    display: block;
    height: 100%;
}
.fw-view__drawer-container-right.right-drawer.open .right-drawer__tab-strip .right-drawer__tab-btn__label {
    display: block;
}
.fw-view__drawer-container-right.right-drawer > [data-section] {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    background: var(--md-sys-color-surface-container-lowest);
    border-left: 1px solid var(--rs-container-secondary-border);
    opacity: 0;
    transition: opacity .20s ease-in-out;
}
.open .fw-view__drawer-container-right.right-drawer > [data-section] {
    display: none;
}
.fw-view__drawer-container-right.right-drawer > [data-section].active {
    opacity: 1;
    transition: opacity .35s ease-in-out .15s;
}
/* comms-tab: hide tenant action buttons / contact filter+add toolbar when this
   drawer is showing contacts rather than a job's tenants (commsContactListKind) */
.comms-tenants.contacts .comms-tenant-row__actions {
    display: none;
}
.rd-notes-toolbar.tenants,
.rd-notes-panel__add.tenants {
    display: none;
}

/* comms-tab log: one shared card template covers sms/email/call - show only the
   sub-block matching this item's kind (Job.commsLog) */
.comms-log__item .comms-log__sms-content,
.comms-log__item .comms-log__icon,
.comms-log__item .comms-log__body {
    display: none;
}
.comms-log__item.sms-outbound,
.comms-log__item.sms-inbound {
    align-items: flex-start;
    border-bottom: none;
    padding: 4px 0;
}
.comms-log__item.sms-outbound { flex-direction: row-reverse; }
.comms-log__item.sms-outbound .comms-log__sms-content,
.comms-log__item.sms-inbound .comms-log__sms-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.comms-log__item.sms-outbound .comms-log__sms-content { align-items: flex-end; }
.comms-log__item.sms-inbound .comms-log__sms-content { align-items: flex-start; }
/* The plain (non -sms) .comms-log__meta at the end of the card is shared by email/call rows -
   sms rows use their own nested .comms-log__meta--sms instead (stacked under the bubble+avatar
   row, matching design/Scheduling/original.png), so the outer one is hidden here. */
.comms-log__item.sms-outbound > .comms-log__meta,
.comms-log__item.sms-inbound > .comms-log__meta {
    display: none;
}
.comms-log__sms-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}
.comms-log__item.sms-outbound .comms-log__sms-row { flex-direction: row-reverse; }
.comms-log__sms-avatar {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--md-sys-color-secondary);
    color: var(--md-sys-color-on-secondary);
}
.comms-log__sms-avatar .material-symbols-outlined { font-size: 16px; }
/* .comms-chat__bubble carries no --inbound/--outbound modifier class of its own in this
   declarative card template (unlike ViewSmsCompose.js's own hand-built chat, which does) -
   data-toggle-class-field only reaches the outer .comms-log__item, so the same colours are
   applied here as descendant selectors off that item-level sms-outbound/sms-inbound class
   instead. Values mirror .comms-chat__bubble--inbound/--outbound exactly. */
.comms-log__item.sms-outbound .comms-chat__bubble {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border-bottom-right-radius: 2px;
}
.comms-log__item.sms-inbound .comms-chat__bubble {
    background: var(--md-sys-color-surface-container-highest);
    color: var(--md-sys-color-on-surface);
    border-bottom-left-radius: 2px;
}
.comms-log__item.email .comms-log__icon--email,
.comms-log__item.email .comms-log__body {
    display: flex;
}
.comms-log__item.email .comms-log__label--call { display: none; }
.comms-log__item.call .comms-log__icon--call,
.comms-log__item.call .comms-log__body {
    display: flex;
}
.comms-log__item.call .comms-log__label--subject { display: none; }

/* ── Job summary card (top of right drawer) ── */
@keyframes job-summary-flash {
    0%   { background: var(--md-sys-color-primary-container); }
    30%  { background: var(--md-sys-color-primary); }
    100% { background: var(--md-sys-color-primary-container); }
}
.right-drawer__job-summary {
    padding: 12px 16px 10px;
    border-bottom: 2px solid var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container);
    flex-shrink: 0;
    border-top-left-radius: 10px;
}
.right-drawer__job-summary--flash {
    animation: job-summary-flash 0.6s ease-out;
}
.right-drawer__job-summary__address {
    font-size: 15px;
    font-weight: 700;
    color: var(--md-sys-color-on-primary-container);
    line-height: 1.3;
}
.right-drawer__job-summary__meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 2px;
}
.right-drawer__job-summary__agency {
    flex: 0 0 50%;
    min-width: 0;
    font-size: 12px;
    color: var(--md-sys-color-on-primary-container);
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.right-drawer__job-summary__dates {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: baseline;
    width: 100%;
    margin-top: 4px;
}
.right-drawer__job-summary__dates-spare {
    grid-column: 1;
}
.right-drawer__job-summary__approved {
    grid-column: 2;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
}
.right-drawer__job-summary__approved-label {
    font-size: 10px;
    color: var(--md-sys-color-on-primary-container);
    opacity: 0.6;
    white-space: nowrap;
}
.right-drawer__job-summary__approved-date {
    font-size: 12px;
    color: var(--md-sys-color-on-primary-container);
    opacity: 0.75;
    font-weight: 600;
}
.right-drawer__job-summary__approved-date:empty::before {
    content: 'Not approved';
    font-weight: normal;
    opacity: 0.6;
}
.right-drawer__job-summary__booked {
    grid-column: 3;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}
.right-drawer__job-summary__booked-label {
    font-size: 10px;
    color: var(--md-sys-color-on-primary-container);
    opacity: 0.6;
    white-space: nowrap;
}
.right-drawer__job-summary__booked-date {
    font-size: 12px;
    color: var(--md-sys-color-on-primary-container);
    opacity: 0.75;
    font-weight: 600;
}
.right-drawer__job-summary__booked-date:empty::before {
    content: 'unbooked';
    font-weight: normal;
    opacity: 0.6;
}
.right-drawer__job-summary__footer[hidden],
.right-drawer__job-summary__tenant-section[hidden],
.right-drawer__job-summary__approved[hidden],
.right-drawer__job-summary__booked[hidden],
.right-drawer__job-summary__open-btn[hidden] { display: none !important; }

.right-drawer__job-summary__footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 6px;
}
.right-drawer__job-summary__action-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}
.right-drawer__job-summary__icons {
    display: flex;
    gap: 6px;
    align-items: center;
}
.right-drawer__job-summary__icons img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.right-drawer__job-summary__tenants {
    flex: 1;
    text-align: center;
    font-size: 12px;
    color: var(--md-sys-color-on-primary-container);
    opacity: 0.8;
}
.right-drawer__job-summary__tenants:not(:empty) {
    cursor: pointer;
}
.right-drawer__job-summary__tenants:not(:empty):hover {
    opacity: 1;
}
.right-drawer__job-summary__book-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-decoration: none;
    color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 65%, transparent);
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 6px;
    padding: 4px 8px;
    transition: color 0.15s, background 0.15s;
}
.right-drawer__job-summary__book-btn:hover:not(.is-disabled) {
    color: var(--md-sys-color-primary);
    background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
.right-drawer__job-summary__book-btn.is-disabled {
    opacity: 0.4;
    cursor: default;
}
.right-drawer__job-summary__book-msg {
    display: none;
    font-size: 0.72em;
    color: var(--md-sys-color-error, #b00020);
    padding: 4px 8px 0;
    text-align: center;
}
.right-drawer__job-summary__book-msg.visible {
    display: block;
}
.right-drawer__job-summary__book-btn__label {
    font-size: 0.7em;
    line-height: 1;
}
.right-drawer__job-summary__open-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-decoration: none;
    color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 65%, transparent);
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 6px;
    padding: 4px 8px;
    transition: color 0.15s, background 0.15s;
}
.right-drawer__job-summary__open-btn:hover {
    color: var(--md-sys-color-primary);
    background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
.right-drawer__job-summary__open-btn__label {
    font-size: 0.7em;
    line-height: 1;
}
.right-drawer__job-summary__snooze-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    background: none;
    border: none;
    padding: 4px 8px;
    color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 65%, transparent);
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}
.right-drawer__job-summary__snooze-btn:hover {
    color: var(--md-sys-color-primary);
    background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
.right-drawer__job-summary__snooze-btn.is-snoozed {
    color: var(--md-sys-color-error, #b00020);
    background: color-mix(in srgb, var(--md-sys-color-error, #b00020) 15%, transparent);
    border-radius: 6px;
    padding: 2px 6px;
}
.right-drawer__job-summary__uncontactable-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    background: none;
    border: none;
    padding: 4px 8px;
    color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 65%, transparent);
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}
.right-drawer__job-summary__uncontactable-btn:hover {
    color: var(--md-sys-color-primary);
    background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
.right-drawer__job-summary__uncontactable-btn__label {
    font-size: 0.7em;
    line-height: 1;
}
.right-drawer__job-summary__uncontactable-btn.is-uncontactable {
    color: var(--md-sys-color-error, #b00020);
    background: color-mix(in srgb, var(--md-sys-color-error, #b00020) 15%, transparent);
    border-radius: 6px;
    padding: 2px 6px;
}
.right-drawer__job-summary__snooze-btn__label {
    font-size: 0.7em;
    line-height: 1;
}
.right-drawer__job-summary__tenant-section {
    border-top: 1px solid color-mix(in srgb, var(--md-sys-color-on-primary-container) 20%, transparent);
    margin-top: 10px;
    padding-top: 8px;
}
.right-drawer__job-summary__tenant-section:has(#jobSummaryTenantList:empty) {
    display: none;
}
.right-drawer__job-summary__tenant-section__label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--md-sys-color-on-primary-container);
    opacity: 0.6;
    margin-bottom: 4px;
}

.right-drawer__job-summary__tenant-section .comms-tenant-row__name {
    color: var(--md-sys-color-on-primary-container);
}
.right-drawer__job-summary__tenant-section .comms-tenant-row__phone,
.right-drawer__job-summary__tenant-section .comms-tenant-row__email {
    color: var(--md-sys-color-on-primary-container);
    opacity: 0.75;
}
.right-drawer__job-summary__tenant-section .comms-tenant-row__actions {
    gap: 12px;
}
.right-drawer__job-summary__tenant-section .comms-tenant-row__action-btn {
    background: none;
    border-radius: 6px;
    color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 65%, transparent);
    width: auto;
    padding: 4px 8px;
    gap: 0;
    transition: color 0.15s, background 0.15s;
}
.right-drawer__job-summary__tenant-section .comms-tenant-row__action-btn:hover {
    color: var(--md-sys-color-primary);
    background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
.right-drawer__job-summary__tenant-section .comms-tenant-row__action-btn .material-symbols-outlined {
    font-size: 24px;
    font-variation-settings: 'FILL' 1;
}
.right-drawer__job-summary__tenant-section .comms-tenant-row__action-btn__label {
    font-size: 0.7em;
    line-height: 1;
}
.right-drawer__job-summary__tenant-section .comms-tenant-row__action-btn:disabled,
.right-drawer__job-summary__tenant-section .comms-tenant-row__action-btn--disabled {
    background: none;
    color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 25%, transparent);
    cursor: not-allowed;
}
.job-snooze-menu {
    position: fixed;
    background: var(--md-sys-color-surface-container-high, #ece6f0);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    z-index: 9999;
    min-width: 120px;
    overflow: hidden;
}
.job-snooze-menu__item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--md-sys-color-on-surface, #1c1b1f);
}
.job-snooze-menu__item:hover {
    background: var(--md-sys-color-surface-variant, #e7e0ec);
}

/* panel header */
.right-drawer__panel-header {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    flex-shrink: 0;
    gap: 6px;
}

.right-drawer__panel-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--rs-wsdefault-text);
    white-space: nowrap;
}

.right-drawer__panel-context {
    font-size: 12px;
    color: var(--rs-subtext);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.right-drawer__panel-close {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.right-drawer__panel-close .material-symbols-outlined {
    font-size: 22px;
}

/* panel body */
.right-drawer__panel-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* sections */
.right-drawer__section {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
}

.right-drawer__section.active {
    display: flex;
}

/* card list (scrollable) */
.right-drawer__card-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px;
}

.right-drawer__card {
    padding: 12px 0;
    border-bottom: 1px solid var(--md-sys-color-surface-variant);
}

.right-drawer__card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.right-drawer__card-icon {
    font-size: 18px;
    color: var(--rs-wsdefault-text);
    flex-shrink: 0;
}

.right-drawer__card-entity {
    font-weight: bold;
    color: var(--rs-wsdefault-text);
    font-size: 14px;
    flex: 1;
}

.right-drawer__card-meta {
    color: var(--rs-subtext);
    font-size: 12px;
    white-space: nowrap;
}

.right-drawer__card-body {
    font-size: 13px;
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1.5;
    padding-left: 26px;
}

/* Activity tab - vertical timeline (see design/Activity/activity.png). A single continuous line
   runs behind every dot via a pseudo-element on the card-container, positioned at the same
   horizontal offset as the dot centers - simpler than stitching per-row line segments together. */
.activity-timeline {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px;
}

.activity-timeline__list .fw-card-list__card-container {
    position: relative;
    padding-left: 4px;
}

.activity-timeline__item {
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: start;
    gap: 2px 10px;
    padding: 10px 8px 10px 4px;
    position: relative;
}

/* Whole row is still clickable (data-click is on this element, per FWCardList's card-template
   binding), but only .activity-timeline__content gets the card look below - keeps the pointer
   cursor honest without boxing the icon in too. */
.activity-timeline__item:has(.activity-timeline__content.clickable-true) {
    cursor: pointer;
}

/* Connecting line - drawn per-row (not one continuous line down the container) so it can stop
   exactly at the first row's node and start exactly at the last row's node, rather than
   overshooting above/below them. Middle rows draw their full height so adjacent segments still
   meet edge-to-edge and read as one continuous line. Row height varies (one-line vs two-line
   "who"/label rows - see .activity-timeline__who:empty below), but the node's distance from its
   own row's top edge is constant regardless: item padding-top (10px) + node margin-top (1px) +
   half the node's height (10px) = 21px - that's what first/last use to stop exactly on the node. */
.activity-timeline__item::before {
    content: '';
    position: absolute;
    left: 15px; /* item padding-left (4px) + half of the 24px node column (12px) - half the line width (1px) */
    width: 2px;
    top: 0;
    bottom: 0;
    background: var(--md-sys-color-surface-variant);
}

.activity-timeline__item:first-child::before {
    top: 21px;
}

.activity-timeline__item:last-child::before {
    bottom: auto;
    height: 21px;
}

.activity-timeline__item:first-child:last-child::before {
    display: none;
}

/* Content wrapper (who/label + meta) - separate from .activity-timeline__item so the card
   treatment below only outlines the text/date, never the node/icon or the connecting line, which
   live in the item's own first grid column outside this wrapper entirely. Margin here (not on
   .activity-timeline__item) is what creates breathing room between consecutive clickable cards
   without touching the item's own padding - that padding is load-bearing for the :first-child/
   :last-child line-stub math above, which assumes it stays constant across every row. */
.activity-timeline__content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

/* clickable covers both reasons a row can be clicked: hasLocation (show map) or navigateTo (open
   the related record, e.g. Property's "job created" rows) - see Job.js/Property.js#activityTimeline
   and ActivityTabComponent.js#handleRowClick. */
.activity-timeline__content.clickable-true {
    border: 1px solid var(--rs-container-primary-border);
    border-radius: 10px;
    padding: 6px 10px;
    margin: 3px 0;
}

.activity-timeline__content.clickable-true:hover {
    background: var(--rs-container-hover);
    border-color: var(--md-sys-color-primary);
}

/* Timeline node - an icon badge per actionKey (Job.js#activityTimeline / ACTIVITY_ICONS) with a
   plain dot fallback for any actionKey with no icon mapped. justify-self:center keeps this
   centered in the same 24px column the connecting line's `left` offset was measured against
   (see the line rule above), so the two stay aligned regardless of node size. */
.activity-timeline__node {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--md-sys-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    margin-top: 1px;
    position: relative;
    z-index: 1;
}

.activity-timeline__node-icon {
    font-size: 13px;
    color: var(--md-sys-color-on-primary);
    line-height: 1;
}

.activity-timeline__node-icon:empty {
    display: none;
}

.activity-timeline__node:has(.activity-timeline__node-icon:empty) {
    width: 10px;
    height: 10px;
    background: var(--md-sys-color-primary);
    border: 2px solid var(--md-sys-color-surface);
    box-shadow: 0 0 0 1px var(--md-sys-color-primary);
}

/* Two-line body: who (bold name) above the action label by default. Tenant-related rows
   (relatedPdoKey="tenant", e.g. "call") flip the order so the action label reads first and the
   tenant's name sits below it instead - see Job.js#activityTimeline. */
.activity-timeline__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.activity-timeline__who {
    order: 1;
    font-weight: bold;
    color: var(--rs-wsdefault-text);
    font-size: 13px;
}

.activity-timeline__who:empty {
    display: none;
}

.activity-timeline__label-row {
    order: 2;
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.activity-timeline__body.tenant .activity-timeline__who {
    order: 2;
}

.activity-timeline__body.tenant .activity-timeline__label-row {
    order: 1;
}

.activity-timeline__label {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 13px;
}

.activity-timeline__pin {
    display: none;
    font-size: 15px;
    color: var(--rs-wsdefault-text);
}

.activity-timeline__pin.hasLocation-true {
    display: inline-block;
}

.activity-timeline__meta {
    color: var(--rs-subtext);
    font-size: 12px;
    white-space: nowrap;
    padding-top: 1px;
}

/* comment box */
.right-drawer__comment-box {
    padding: 12px 16px;
    flex-shrink: 0;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

.right-drawer__comment-inner {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.right-drawer__comment-context {
    font-size: 12px;
    color: var(--rs-subtext);
}

.right-drawer__comment-input {
    border: none;
    outline: none;
    font-size: 14px;
    color: var(--md-sys-color-on-surface-variant);
    resize: none;
    min-height: 40px;
    font-family: inherit;
}

.right-drawer__comment-actions {
    display: flex;
    justify-content: flex-end;
}

.right-drawer__comment-submit {
    border: 1px solid #ccc;
    background: var(--md-sys-color-surface-container-lowest);
    padding: 5px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: var(--md-sys-color-on-surface-variant);
    font-family: inherit;
}

.right-drawer__comment-submit:hover {
    background: var(--md-sys-color-surface);
}

/************************************************** || COMMS PANEL || *************************************************/

/* ── Comms section layout ── */
/* ── Tenant rows ── */
.comms-tenants {
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    flex-shrink: 0;
}
.comms-tenant-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}
.comms-tenant-row__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.comms-tenant-row__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.comms-tenant-row__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}
.comms-tenant-row__phone {
    font-size: 12px;
    color: var(--rs-wsdefault-text);
}
.comms-tenant-row__email {
    font-size: 11px;
    color: var(--rs-subtext);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Which notification categories this contact is opted into (AgencyContact/PropertyContact's
   notificationPillsHtml, decoding the same commsBitField the edit-contact toggle switches write) -
   restores what the pre-rework drawer (WorkspaceComms) used to show here, dropped in the "BIG ONE"
   right-drawer refactor. Empty (no pills) renders as nothing, same as .comms-tenant-row__phone/
   __email do when blank - no placeholder text needed. */
.comms-tenant-row__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 2px;
}
.comms-tenant-row__badges:empty {
    display: none;
}
.comms-tenant-row__badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px 2px 5px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 500;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    white-space: nowrap;
}
.comms-tenant-row__badge .material-symbols-outlined {
    font-size: 12px;
}
.comms-tenant-row__portal-badge {
    display: none;
    font-size: 15px;
    color: var(--md-sys-color-tertiary, var(--md-sys-color-secondary));
    flex-shrink: 0;
    align-self: center;
}
.comms-tenant-row__portal-badge.hasPortalUser-true {
    display: inline-flex;
}
.comms-tenant-row__actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.comms-tenant-row__action-btn {
    width: 44px;
    height: auto;
    padding: 6px 4px 5px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    transition: opacity 0.15s;
}
.comms-tenant-row__action-btn:hover {
    opacity: 0.85;
}
.comms-tenant-row__action-btn .material-symbols-outlined {
    font-size: 18px;
}
.comms-tenant-row__action-btn__label {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
}
.comms-tenant-row__action-btn:disabled,
.comms-tenant-row__action-btn--disabled {
    background: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.45;
    cursor: not-allowed;
}
/* "Recently contacted" indicator - mirrors the scheduling list's .ap-contact__action-btn.is-recent
   (see TenantCommsSync.js), reusing the same green background + white tick badge convention
   (.ap-contact__action-btn-tick, styled near line 1031) sized for this panel's larger buttons.
   position:relative so the tick badge can be absolutely positioned without disturbing the button's
   own flex layout. */
.comms-tenant-row__action-btn.is-recent {
    position: relative;
    background: #2e7d32;
}
.comms-tenant-row--compact .comms-tenant-row__action-btn.is-recent {
    width: 32px;
    height: 32px;
}
.comms-tenant-row__missing {
    color: var(--rs-subtext);
    font-style: italic;
}
.comms-tenant-row--compact {
    cursor: pointer;
}
.comms-tenant-row--compact .comms-tenant-row__info {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.comms-tenant-row--compact .comms-tenant-row__phone,
.comms-tenant-row--compact .comms-tenant-row__email {
    display: none;
    flex-basis: 100%;
}
.comms-tenant-row--compact.comms-tenant-row--expanded .comms-tenant-row__phone,
.comms-tenant-row--compact.comms-tenant-row--expanded .comms-tenant-row__email {
    display: block;
}
.comms-tenant-row--compact .comms-tenant-row__action-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    flex-direction: row;
}
.comms-tenant-row--compact .comms-tenant-row__action-btn__label {
    display: none;
}
.comms-tenant-row--compact .comms-tenant-row__action-btn .material-symbols-outlined {
    font-size: 15px;
}

/* ── Agency contact rows (right drawer comms — agency context) ── */
.agency-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--md-sys-color-surface-variant);
}
.agency-contact-row:last-child {
    border-bottom: none;
}
.agency-contact-row--inactive {
    opacity: 0.45;
}
.agency-contact-row__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--md-sys-color-secondary);
    color: var(--md-sys-color-on-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}
.agency-contact-row__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.agency-contact-row__name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.agency-contact-row__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.agency-contact-row__role-badges {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.agency-contact-row__phone {
    font-size: 12px;
    color: var(--rs-wsdefault-text);
}
.agency-contact-row__email {
    font-size: 11px;
    color: var(--rs-subtext);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agency-contact-row__missing {
    color: var(--rs-subtext);
    font-style: italic;
}
.agency-contact-row__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.agency-contact-row__badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px 2px 4px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 500;
    background: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
    white-space: nowrap;
}
.agency-contact-row__badge .material-symbols-outlined {
    font-size: 13px;
}
.agency-contact-row__badge--role {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}
.agency-contact-row__badge--portal {
    background: var(--md-sys-color-tertiary-container, var(--md-sys-color-secondary-container));
    color: var(--md-sys-color-on-tertiary-container, var(--md-sys-color-on-secondary-container));
}

/* ── Property comms configuration ── */
.prop-comms-config {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.prop-comms-config__section {
    background: var(--md-sys-color-surface-container);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.prop-comms-config__section--standalone {
    margin-top: 4px;
}
.prop-comms-config__heading {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--md-sys-color-primary);
    margin-bottom: 6px;
}
.prop-comms-config__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    gap: 12px;
    cursor: pointer;
}
.prop-comms-config__label {
    font-size: 0.875rem;
    color: var(--md-sys-color-on-surface);
    user-select: none;
}

/* ── Comms log ── */
.comms-log {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px;
}
.comms-log__list {
    display: flex;
    flex-direction: column;
}
.comms-log__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--md-sys-color-surface-variant);
}
.comms-log__item:last-child {
    border-bottom: none;
}
.comms-log__icon {
    font-size: 20px;
    flex-shrink: 0;
    color: var(--rs-wsdefault-text);
}
.comms-log__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.comms-log__label {
    font-size: 13px;
    color: var(--md-sys-color-on-surface);
}
.comms-log__meta {
    font-size: 11px;
    color: var(--rs-subtext);
}
.comms-log__tenant-name {
    color: var(--md-sys-color-primary);
    font-weight: 500;
}
.comms-log__empty {
    font-size: 13px;
    color: var(--rs-subtext);
    text-align: center;
    padding: 16px 0;
    font-style: italic;
}
.comms-log__item--sms {
    align-items: flex-start;
    border-bottom: none;
    padding: 4px 0;
}
.comms-log__item--outbound {
    flex-direction: row-reverse;
}
.comms-log__sms-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.comms-log__item--inbound .comms-log__sms-content { align-items: flex-start; }
.comms-log__item--outbound .comms-log__sms-content { align-items: flex-end; }
.comms-log__item--outbound .comms-log__meta { text-align: right; }
.comms-log__self-avatar {
    background: var(--md-sys-color-secondary);
    color: var(--md-sys-color-on-secondary);
    font-size: 0;
}
.comms-log__self-avatar .material-symbols-outlined { font-size: 18px; }

/* ── Comms dialogs — shared ── */
#smsCompose,
#emailCompose {
    min-width: 480px;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    border: none;
    padding: 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
#smsCompose .dialog-header,
#emailCompose .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 16px;
    border-radius: 12px 12px 0 0;
    cursor: default;
}
#smsCompose .dialog-footer,
#emailCompose .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
#smsCompose .dialog-footer .fw-button,
#emailCompose .dialog-footer .fw-button {
    padding: 8px 24px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    height: auto;
}
#smsCompose .dialog-footer .save,
#emailCompose .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border: none;
}
#smsCompose .dialog-footer .cancel,
#emailCompose .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant);
}

/* ── SMS chat dialog ── */
.sms-compose-dialog {
    min-width: 480px;
    max-width: 560px;
    width: 520px;
    height: 70vh;
    max-height: 680px;
    display: flex;
    flex-direction: column;
}
.sms-compose-dialog .fw-view__main-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
.comms-dialog__chat {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--md-sys-color-surface-container-low);
}
.comms-chat__empty {
    font-size: 13px;
    color: var(--rs-subtext);
    text-align: center;
    padding: 24px 0;
    font-style: italic;
}
.comms-chat__timestamp {
    font-size: 11px;
    color: var(--rs-subtext);
    text-align: center;
    margin: 4px 0;
}
.comms-chat__bubble {
    max-width: 75%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
}
.comms-chat__bubble--inbound {
    background: var(--md-sys-color-surface-container-highest);
    color: var(--md-sys-color-on-surface);
    align-self: flex-start;
    border-bottom-left-radius: 2px;
}
.comms-chat__bubble--outbound {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    align-self: flex-end;
    border-bottom-right-radius: 2px;
}
.comms-dialog__compose {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
.comms-dialog__template {
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 6px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font-family: inherit;
}
.comms-dialog__input {
    resize: vertical;
    min-height: 72px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 6px;
    padding: 8px;
    font-size: 13px;
    font-family: inherit;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}
.comms-dialog__counter {
    font-size: 11px;
    color: var(--rs-subtext);
    text-align: right;
}

/* ── Email compose dialog ── */
.email-compose-dialog {
    min-width: 500px;
    max-width: 620px;
    width: 580px;
    height: 75vh;
    max-height: 740px;
    display: flex;
    flex-direction: column;
}
.email-compose-dialog .fw-view__main-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
.comms-dialog__field-input:read-only {
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface-variant);
}
.comms-dialog__email-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}
.comms-dialog__field {
    display: flex;
    align-items: center;
    gap: 10px;
}
.comms-dialog__field-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    width: 50px;
    flex-shrink: 0;
}
.comms-dialog__field-input {
    flex: 1;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    font-family: inherit;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}
/* ── Email composer ─────────────────────────────────────────────────────── */

.email-compose__toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: var(--md-sys-color-surface-container);
}
.email-compose__tool {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    color: var(--md-sys-color-on-surface-variant);
}
.email-compose__tool:hover { background: var(--md-sys-color-surface-variant); }
.email-compose__tool .material-symbols-outlined { font-size: 18px; }
.email-compose__toolbar-sep {
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background: var(--md-sys-color-outline-variant);
}

/* Square off the top edge so the body reads as one control with its toolbar. */
.email-compose__body {
    border-radius: 0 0 6px 6px;
    overflow-y: auto;
    max-height: 40vh;
}
.email-compose__body:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
}
/* A contenteditable has no placeholder attribute of its own. */
.email-compose__body:empty::before {
    content: attr(data-placeholder);
    color: var(--md-sys-color-on-surface-variant);
    opacity: .7;
}
/* Merged templates arrive as editor markup, which assumes a page-width canvas
   it does not get here. */
.email-compose__body img { max-width: 100%; height: auto; }
.email-compose__body table { max-width: 100%; }

.email-compose__status {
    padding: 6px 2px 0;
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
}
.email-compose__status--error { color: var(--md-sys-color-error); }

.email-compose__attachments-field { align-items: flex-start; }
.email-compose__attachments {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.email-compose__attachments-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.email-compose__attachments-list:empty { display: none; }
.email-compose__attachment-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 14px;
    background: var(--md-sys-color-surface-container);
    font-size: 12px;
    color: var(--md-sys-color-on-surface);
    max-width: 220px;
}
.email-compose__attachment-chip .material-symbols-outlined {
    font-size: 15px;
    color: var(--md-sys-color-on-surface-variant);
    flex-shrink: 0;
}
.email-compose__attachment-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.email-compose__attachment-size {
    color: var(--md-sys-color-on-surface-variant);
    flex-shrink: 0;
}
.email-compose__attachment-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    color: var(--md-sys-color-on-surface-variant);
    flex-shrink: 0;
}
.email-compose__attachment-remove:hover { background: var(--md-sys-color-surface-variant); }
.email-compose__attachment-remove .material-symbols-outlined { font-size: 14px; }
.email-compose__attach-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    border: 1px dashed var(--md-sys-color-outline-variant);
    border-radius: 6px;
    padding: 6px 10px;
    background: none;
    cursor: pointer;
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
}
.email-compose__attach-btn:hover { background: var(--md-sys-color-surface-variant); }
.email-compose__attach-btn .material-symbols-outlined { font-size: 16px; }

.comms-dialog__body-input {
    flex: 1;
    resize: none;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    min-height: 200px;
}

/************************************************** || JOB VIEW || *************************************************/

.job-view {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
    gap: 8px;
    font-family: Roboto, Arial, sans-serif;
    overflow: hidden;
    height: 100%;
    box-sizing: border-box;
    /* Assumes a 16px gutter same as the rest of .job-view's sizing (max-height already budgets
       for one) - only correct when Job is mounted directly at the top level (e.g. /pending/jobs/{id}),
       where #fwViewSpace itself has no padding of its own. Suppressed below wherever Job is instead
       nested inside another view's own view-space, which already provides that gutter. */
    padding: 16px;
}
/* Job nested inside another view's view-space (scheduling's details pane, outbox's/agency jobs'
   fw-view__main-container-based space, ...) already gets its gutter from that ancestor - adding
   .job-view's own padding on top would double it up. */
.fw-view__view-space .job-view {
    padding: 0;
}
.job-view__main {
    display: grid;
    grid-column-gap: 16px;
    grid-template-columns: auto 64px;
    grid-template-rows: calc(100vh - 126px);
    transition: grid-template-columns .35s ease-in-out;
}
.job-view__main.open {
    grid-template-columns: auto 400px;  
}
.job-view__main-body {
	display: grid;
	grid-template-rows: 52px 180px auto;
	gap: 16px;
}
.job-view .right-drawer__tab-strip-buttons .right-drawer__panel-close {
	grid-column: 6;
}
/* ── Header / Breadcrumbs ──────────────────────────────── */
.job-header {
    position: relative;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 8px;
}
.job-header > * {
    position: relative;
    z-index: 1;
}

.job-header__top {
    display: flex;
    align-items: center;
    gap: 4px;
}

.job-header__agency {
    color: var(--md-sys-color-surface);
    font-size: 24px;
    line-height: 32px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-header__address {
    color: var(--md-sys-color-surface);
    font-size: 24px;
    line-height: 32px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-header__agency:hover,
.job-header__address:hover {
    text-decoration: underline;
}

.job-header__sep {
    color: var(--md-sys-color-surface);
    font-size: 24px;
    padding: 0 6px;
    white-space: nowrap;
}

.job-header__number {
    color: var(--md-sys-color-surface);
    font-size: 36px;
    line-height: 44px;
    white-space: nowrap;
}

.job-header__status {
    font-size: 15px;
    font-weight: 500;
    color: #1a3a5c;
    background: #b8d4f0;
    border-radius: 20px;
    padding: 3px 14px;
    white-space: nowrap;
    margin-left: 12px;
}

/* ── Header Editable Fields Row ────────────────────────── */
.job-header__fields {
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: space-between;
}

.job-field {
    --md-filled-text-field-container-color: transparent;
    --md-filled-text-field-label-text-color: var(--md-sys-color-on-primary);
    --md-filled-text-field-input-text-color: var(--md-sys-color-on-primary);
    --md-filled-text-field-active-indicator-color: var(--md-sys-color-surface);
    --md-filled-text-field-bottom-space: 4px;
    --md-filled-text-field-with-label-bottom-space: 4px;
    width: 180px;
    align-self:end;
}

.job-field--readonly {
    opacity: 0.8;
}

.job-header__fields .job-field {
    --md-filled-text-field-hover-label-text-color: var(--md-sys-color-on-primary);
    --md-filled-text-field-focus-label-text-color: var(--md-sys-color-on-primary);
    --md-filled-text-field-hover-input-text-color: var(--md-sys-color-on-primary);
    --md-filled-text-field-focus-input-text-color: var(--md-sys-color-on-primary);
}

.job-header__fields .job-field .job-type-label {
	color: var(--md-sys-color-inverse-on-surface);
    font-size: 12px;
    display: inline-block;
    position: absolute;
    margin: -1em 12px;
}

.job-header__fields .job-field .fw-option-list__trigger {
    background: transparent;
    border-color: var(--md-sys-color-inverse-on-surface);
    border-radius: 0;
    border-width: 0 0 1px 0;
    color: var(--md-sys-color-inverse-on-surface);	
}
.job-header__fields .job-field .fw-option-list__trigger .fw-option-list__trailing-icon {
	color: var(--md-sys-color-inverse-on-surface);
}

.job-field--property-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--md-sys-color-inverse-on-surface);
    border-radius: 0;
    color: var(--md-sys-color-inverse-on-surface);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    cursor: pointer;
    padding: 8px 0;
    white-space: nowrap;
    width: auto;
    opacity: 0.9;
    transition: opacity 0.15s;
}

.job-field--property-summary:hover {
    opacity: 1;
}

.job-field--property-summary .material-symbols-outlined {
    font-size: 18px;
}


/* ── Flag Area ─────────────────────────────────────────── */
.job-flag-area {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.job-field--flag {
    width: 210px;
}
.job-field--flag .fw-option-list__trigger {
    border-width: 0 0 1px 0;
    border-radius: 0;
    background-color: transparent;
}

.job-field--flag-notes {
    --md-filled-text-field-container-color: transparent;
    --md-filled-text-field-active-indicator-color: var(--md-sys-color-primary);
    --md-filled-text-field-input-text-color: var(--rs-wsdefault-text);
    width: 100%;
}

/* ── Action Buttons ────────────────────────────────────── */
.job-header__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}
.job-actions__group {
    display: flex;
    gap: 8px;
}
.job-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.5);
    background: transparent;
    color: #fff;
    letter-spacing: 0.5px;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
}

.job-btn:hover {
    background: rgba(255,255,255,0.15);
}

.job-btn--urgent {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.5);
    color: #fff;
}

.job-btn--urgent.isUrgent-0 span {
    display: none;
}

.job-btn--urgent.isUrgent-1 {
    background: rgba(186,26,26,0.75);
    border: none;
    color: #fff;
}

/* Generic per-status gating for the scheduled-quote view (ViewScheduledQuote#configureActions) -
   opacity-only, same convention job.html's own status-N rules already use: the button stays
   reachable, and it is each action's own backend guard (Quotes.java) that actually refuses it. */
.job-btn--dimmed {
    opacity: .5;
}
.job-btn--hidden {
    display: none;
}

/* COMPLETED */
.job-header__actions.status-0 .job-btn[data-method=toApproved],
.job-header__actions.status-0 .job-btn.job-btn--book,
.job-header__actions.status-0 .job-btn[data-click=start],
.job-header__actions.status-0 .job-btn[data-method=complete] {
    display: none;
}
.job-header__actions.status-0 .job-btn[data-method=toPending],
.job-header__actions.status-0 .job-btn[data-method=unbook],
.job-header__actions.status-0 .job-btn[data-click=confirmCancel],
.job-header__actions.status-0 .job-btn--urgent {
    opacity: .5;
}

/* CANCELLED */
.job-header__actions.status-1 .job-btn[data-method=toPending],
.job-header__actions.status-1 .job-btn[data-method=unbook],
.job-header__actions.status-1 .job-btn[data-method=complete],
.job-header__actions.status-1 .job-btn[data-method=uncomplete] {
    display: none;
}
.job-header__actions.status-1 .job-btn[data-method=toApproved],
.job-header__actions.status-1 .job-btn.job-btn--book,
.job-header__actions.status-1 .job-btn[data-click=start],
.job-header__actions.status-1 .job-btn[data-click=confirmCancel],
.job-header__actions.status-1 .job-btn[data-click=openBackDateDialog],
.job-header__actions.status-1 .job-btn--urgent {
    opacity: .5;
}

/* ACTIVE - Cancel is only valid from Booked/Approved/Pending (see Jobs.java#cancel()'s guard), and
   Back Date only from Completed - both dimmed everywhere else instead of just Cancelled, which
   is all the pre-existing rules covered before those guards existed. */
.job-header__actions.status-2 .job-btn[data-method=toApproved],
.job-header__actions.status-2 .job-btn.job-btn--book,
.job-header__actions.status-2 .job-btn[data-click=start],
.job-header__actions.status-2 .job-btn[data-method=uncomplete] {
    display: none;
}
.job-header__actions.status-2 .job-btn[data-method=toPending],
.job-header__actions.status-2 .job-btn[data-method=unbook],
.job-header__actions.status-2 .job-btn[data-click=confirmCancel],
.job-header__actions.status-2 .job-btn[data-click=openBackDateDialog] {
    opacity: .5;
}

/* BOOKED */
.job-header__actions.status-3 .job-btn[data-method=toApproved],
.job-header__actions.status-3 .job-btn.job-btn--book,
.job-header__actions.status-3 .job-btn[data-method=complete],
.job-header__actions.status-3 .job-btn[data-method=uncomplete] {
    display: none;
}
.job-header__actions.status-3 .job-btn[data-method=toPending],
.job-header__actions.status-3 .job-btn[data-click=openBackDateDialog] {
    opacity: .5;
}

/* APPROVED */
.job-header__actions.status-4 .job-btn[data-method=toApproved],
.job-header__actions.status-4 .job-btn[data-method=unbook],
.job-header__actions.status-4 .job-btn[data-method=complete],
.job-header__actions.status-4 .job-btn[data-method=uncomplete] {
    display: none;
}
.job-header__actions.status-4 .job-btn[data-click=openBackDateDialog] {
    opacity: .5;
}

/* PENDING */
.job-header__actions.status-5 .job-btn[data-method=toPending],
.job-header__actions.status-5 .job-btn[data-method=unbook],
.job-header__actions.status-5 .job-btn[data-method=complete],
.job-header__actions.status-5 .job-btn[data-method=uncomplete] {
    display: none;
}
.job-header__actions.status-5 .job-btn.job-btn--book,
.job-header__actions.status-5 .job-btn[data-click=start],
.job-header__actions.status-5 .job-btn[data-click=openBackDateDialog] {
    opacity: .5;
}

/* ── Reminders ─────────────────────────────────────────── */
.job-reminders {
    flex-shrink: 0;
}
.job-reminders .fw-card-list__card md-outlined-text-field {
    --md-outlined-field-content-size: 12px;
    --md-outlined-field-content-line-height: 1.1;
    width: 100%;
}

.job-reminders__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.job-reminders__title {
    color: var(--rs-wsdefault-text);
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 28px;
}

.job-reminders__action-btn {
    height: 22px;
    border-radius: 100px;
    border: 1px solid var(--rs-wsdefault-text);
    background: var(--md-sys-color-on-secondary-container);
    color: var(--md-sys-color-background);
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    padding: 0 12px;
    cursor: pointer;
}

.job-reminders__action-btn:hover {
    background: var(--md-sys-color-inverse-primary);
}

.job-reminders .fw-card-list__card-container {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex-wrap: wrap;
}

.reminder-card {
    border: var(--rs-primary-border);
    border-radius: 10px;
    padding: 4px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 200px;
}

.reminder-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reminder-card__icon {
	position: absolute;
	padding: 12px;
}

.reminder-card__icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.reminder-card__title {
    color: var(--rs-wsdefault-text);
    font-family: 'Inter', 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 28px;
}

.reminder-card__comment {
    color: var(--rs-wsdefault-text);
    font-family: 'Inter', 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 28px;
}

/* ── Property Status ───────────────────────────────────── */
.job-property-status {
    background: var(--md-sys-color-surface-container-lowest);
    border: 1px solid var(--rs-container-secondary-border);
    border-radius: 10px;
    padding: 10px 14px;
    flex-shrink: 0;
    min-height: 150px;
}

.job-section-title {
    color: var(--rs-wsdefault-text);
    font-family: 'Inter', 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
}

.job-property-status__services {
    display: flex;
    flex-direction: row;
    gap: 32px;
    flex-wrap: wrap;
}

.job-service-summary__title {
    color: var(--rs-wsdefault-text);
    font-family: 'Inter', 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 13px;
    line-height: 24px;
}

.job-service-summary__text {
    color: var(--rs-wsdefault-text);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 20px;
}

/* ── Job Items Table ───────────────────────────────────── */
.job-items {
    flex-shrink: 0;
    padding: 16px;
    font-size: 14px;
    background: white;
    border: 1px solid var(--md-sys-color-primary-container);
    border-radius: 10px;
}
.job-items__list {
    display: flex;
    flex-direction: column;
}
.job-items__title-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--md-sys-color-primary-container);
}
.job-items__title-bar .fw-card-list__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--rs-wsdefault-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.job-items__title-bar .fw-card-list__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 50%;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}
.job-items__list .fw-card-list__card-container {
    display: flex;
    flex-direction: column;
    max-height: 168px; /* ~5 existing rows + the blank "new" row, no scroll needed */
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.job-items__list .fw-card-list__card-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.job-items__header,
.job-item-row {
    display: grid;
    grid-template-columns: 150px 1fr 40px 50px 50px 28px;
    gap: 0 24px;
    width: 100%;
}

.job-item-row .fw-card-list__item-delete {
    position: static;
    width: auto;
    background: transparent;
}

.job-items__header > span {
    color: var(--md-sys-color-shadow);
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    line-height: 1;
    padding-bottom: 4px;
    font-weight: normal;
}

.job-item-row > span,
.job-item-row > input {
    color: var(--rs-wsdefault-text);
    font-family: 'Inter', 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1;
    padding: 4px 0;
}
.job-items__header .job-items__qty,
.job-items__header .job-items__discount,
.job-items__header .job-items__price,
.job-item-row .job-items__qty,
.job-item-row .job-items__discount,
.job-item-row .job-items__price {
	text-align: right;
}

.job-item-row .job-items__description.fw-autocomplete {
    display: block;
}
.job-item-row .job-items__description .fw-autocomplete__input-wrap {
    border: none;
    background: transparent;
    position: relative;
}
.job-item-row .job-items__description .fw-autocomplete__clear {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0;
    visibility: hidden;
    background: var(--md-sys-color-surface, #fff);
}
.job-item-row .job-items__description .fw-autocomplete__input-wrap:focus-within .fw-autocomplete__clear {
    visibility: visible;
}
.job-item-row .job-items__description .fw-autocomplete__input {
    padding: 4px 0;
    font-size: 15px;
    font-family: 'Inter', 'Roboto', sans-serif;
    color: var(--rs-wsdefault-text);
}

/* ── Job Items / Property Summary split (toggled by the "Property Summary" field button) ──
   .job-items itself keeps every one of its own rules above unchanged (border/background/padding/
   internal scroll) - this wrapper only ever controls its WIDTH, by being its flex parent. With the
   summary pane's --open modifier absent, .job-items is this row's only flex child and so still
   takes the full width, unchanged from before this split existed. */
.job-items-split {
    display: flex;
    flex-direction: row;
    gap: 16px;
    min-height: 0;
}
.job-items-split .job-items {
    flex: 1;
    min-width: 0;
}
.job-items-split__property-summary {
    display: none;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    min-width: 0;
    padding: 16px;
    background: white;
    border: 1px solid var(--md-sys-color-primary-container);
    border-radius: 10px;
    overflow-y: auto;
}
.job-items-split__property-summary--open {
    display: flex;
}

/* Active/open state for the toggle button itself - a bolder underline plus full opacity (rather
   than a background chip like .rd-notes-toggle.active) since this button sits directly on the
   job-header's own background, whose exact tone varies by job status/urgency. */
.job-field--property-summary.job-field--active {
    opacity: 1;
    border-bottom-width: 2px;
    font-weight: 600;
}

/* ── Notes Panels ──────────────────────────────────────── */
.job-notes-panels {
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 16px;
    min-height: 0;
}

.job-notes-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid var(--md-sys-color-primary-container);
    border-radius: 10px;
    overflow: hidden;
}

.job-notes-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--md-sys-color-primary-container);
}

.job-notes-panel__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--rs-wsdefault-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.job-notes-panel__buttons {
	display: flex;
	gap: 4px;
}

.job-notes-panel__add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 24px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s;
}

.job-notes-panel__add:hover {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.job-notes-panel__add .material-symbols-outlined {
    font-size: 18px;
}

.job-notes-panel__list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.job-note-card {
    padding: 10px 12px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
/* Delete icon, far right of the card - see NotesTabComponent.js#handleNoteClick, which intercepts
   this before falling through to the card's own click-to-edit behaviour. Matches
   .file-card__remove-btn's own look (right-drawer's Files tab). */
.job-note-card__remove-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--rs-subtext);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.job-note-card__remove-btn:hover {
    background: var(--rs-container-hover);
}
.job-note-card__remove-btn .material-symbols-outlined {
    font-size: 16px;
}
.job-note-card__body {
	display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.job-note-card__text {
    font-size: 13px;
    color: var(--md-sys-color-on-surface);
    line-height: 1.4;
}
.job-note-card__meta {
    font-size: 11px;
    color: var(--rs-subtext);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.job-note-card__meta .time-icons {
	display: flex;
	align-items: center;
	gap: 4px;
}
.job-notes-panel__add.flagged-1,
.job-note-card.flagged-1 {
    background: var(--md-sys-color-error);
}
.job-note-card.flagged-1 .job-note-card__text,
.job-note-card.flagged-1 .material-symbols-outlined {
    color: var(--md-sys-color-error-container);
}

/* Separator before first regular note that follows a flagged/alert note */
.job-note-card.flagged-1 + .job-note-card:not(.flagged-1):not(.alert),
.job-note-card.alert + .job-note-card:not(.flagged-1):not(.alert) {
    border-top: 8px solid var(--md-sys-color-outline-variant);
}

/* Source badge for inherited Property / Agency notes */
.job-note-card__source:empty {
    display: none;
}
.job-note-card__source {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    margin-left: 4px;
    vertical-align: middle;
}

/* Hide icon span when empty (non-flagged, non-alert notes) */
.job-note-card__icon:empty {
    display: none;
}

/* ── Bottom Row (Active / Complete only) ─────────────────── */
.job-bottom-row {
    display: none;
    flex-direction: row;
    gap: 16px;
    height: 190px;
    flex-shrink: 0;
}
.job-bottom-row.status-0,
.job-bottom-row.status-2 {
    display: flex;
}

.job-panel-icon {
    font-size: 18px;
    color: var(--md-sys-color-primary);
}

.job-panel-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--rs-wsdefault-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Inspections Card ───────────────────────────────────── */
.job-inspections-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid var(--md-sys-color-primary-container);
    border-radius: 10px;
    overflow: hidden;
}

.job-inspections-card__header {
    flex-shrink: 0;
    border-bottom: 1px solid var(--md-sys-color-primary-container);
}

.job-inspections-card__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 6px;
}

.job-inspections-card__col-headers {
    display: grid;
    grid-template-columns: 1fr 90px 60px;
    gap: 0 8px;
    padding: 0 14px 6px;
    font-size: 11px;
    color: var(--md-sys-color-shadow);
}

.job-inspections-card__list {
    flex: 1;
    overflow-y: auto;
}

.job-inspection-row {
    display: grid;
    grid-template-columns: 1fr 90px 60px;
    gap: 0 8px;
    padding: 8px 14px;
    align-items: center;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    cursor: pointer;
}

.job-inspection-row:hover {
    background: var(--md-sys-color-surface-container-lowest);
}

.job-inspection-row__service {
    font-size: 14px;
    color: var(--md-sys-color-primary);
}

.job-inspection-row__completed {
    font-size: 13px;
    color: var(--rs-wsdefault-text);
}

.job-inspection-row__report {
    font-size: 20px;
    color: var(--rs-subtext);
}

/* ── Invoice Card ───────────────────────────────────────── */
.job-invoice-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid var(--md-sys-color-primary-container);
    border-radius: 10px;
    overflow: hidden;
}

.job-invoice-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--md-sys-color-primary-container);
}

.job-invoice-card__content {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.job-invoice-item {
    display: flex;
    gap: 12px;
    border: 1px solid var(--md-sys-color-primary-container);
    border-radius: 8px;
    padding: 10px 12px;
}

.job-invoice-item__details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.job-invoice-item__row {
    display: grid;
    grid-template-columns: 80px 1fr;
    font-size: 13px;
}

.job-invoice-item__label {
    color: var(--rs-subtext);
}

.job-invoice-item__value {
    color: var(--rs-wsdefault-text);
    font-weight: 500;
}

.job-invoice-view-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: none;
    border: none;
    color: var(--md-sys-color-primary);
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    cursor: pointer;
    padding: 0 4px;
    flex-shrink: 0;
}

.job-invoice-view-btn .material-symbols-outlined {
    font-size: 32px;
}

.job-invoice-empty {
    color: var(--rs-subtext);
    font-size: 13px;
    font-style: italic;
}

/* ============================================================
   Inspection: Job Items View
   ============================================================ */
#jobservices .fw-view__main-container {
	max-height: 100vh;
	overflow: auto;
	scrollbar-width: none;
}
.fw-view .jobservices-view__drawer {
    border-right: var(--rs-primary-border);
    border-radius: var(--rs-drawer-border-radius);
}

.fw-view .jobservices-view__drawer .fw-view__drawer-container-inner {
    display: flex;
    flex-direction: column;
    grid-template-rows: unset;
    grid-row-gap: unset;
    padding: 0;
    overflow: hidden;
    border-bottom-right-radius: 16px;
}

.fw-view .jobservices-view__drawer .fw-view__drawer-container-inner .fw-card-list__card-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border: var(--rs-primary-no_border);
    border-width: 1px 1px 1px 0;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}
.fw-view .jobservices-view__drawer .fw-view__drawer-container-inner .jobservices-cards {
    border-top-right-radius: 0;
}

.fw-view .jobservices-view__drawer .fw-view__drawer-container-inner .fw-card-list__card.highlight,
.fw-view .jobservices-view__drawer .fw-view__drawer-container-inner .fw-card-list__card:hover {
    background-color: transparent;
}

.jobservices-view__header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 16px;
    flex-shrink: 0;
}

.jobservices-view__actions {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    flex-shrink: 0;
}

/* .job-btn defaults to white-on-transparent, styled for use on the dark job-header
   background — override to a readable colour here since these buttons sit on this
   view's light drawer-card background instead. */
.jobservices-view__actions .job-btn {
    flex: 1;
    color: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
}

.jobservices-view__actions .job-btn:hover {
    background: var(--rs-container-hover);
}

.jobservices-view__action-spinner {
    font-size: 16px;
    animation: pending-approve-spin 0.8s linear infinite;
}

.job-btn--disabled {
    opacity: 0.4;
    cursor: default;
}

.job-btn--disabled:hover {
    background: var(--md-sys-color-background);
}

.jobservices-view__job-number {
    display: block;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.4;
}

.jobservices-view__address {
    display: block;
    font-size: 0.85em;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jobservices-view__breadcrumb {
    font-size: 0.72em;
    opacity: 0.85;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jobservices-view__crumb {
    cursor: pointer;
}

.jobservices-view__crumb:hover {
    text-decoration: underline;
}

.jobservices-view__col-headers {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    padding: 6px 16px 6px 72px; /* left-pad aligns with card text after 48px icon + 12px gap */
    font-size: 0.72em;
    color: var(--md-sys-color-outline);
    border-bottom: var(--rs-primary-border);
    flex-shrink: 0;
}

.jobservices-view__col-completed {
    min-width: 60px;
    text-align: center;
}

.jobservices-view__col-action {
    min-width: 36px;
    text-align: center;
}

.jobservices-view__card-list {
    flex: 1;
    overflow: hidden;
}

.jobservices-view__service-card {
    display: flex;
    flex-direction: column;
    border-bottom: var(--rs-primary-border);
    padding: 8px 10px 8px 10px !important;
}

.jobservices-view__card-header {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 16px;
}

.jobservices-view__service-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--md-sys-color-surface-container);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.jobservices-view__service-img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.jobservices-view__service-name {
    font-size: 1.1em;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--md-sys-color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jobservices-view__sub-rows {
    padding: 0 0px 10px 0px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.jobservices-view__sub-row_body {
	display: flex;
    gap: 2px;
    align-items: center;
    text-align: center;
}

.jobservices-view__sub-row_header {
	display: flex;
    justify-content: center;
}

.jobservices-view__sub-row {
    display: flex;
    flex-direction: column;
    padding: 5px 12px 12px 12px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    cursor: pointer;
    background: var(--md-sys-color-surface);
    transition: background 0.15s;
}

.jobservices-view__sub-row:hover {
    background: var(--rs-left-drawer-hover);
}

.jobservices-view__sub-name {
    flex: 1;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jobservices-view__sub-count {
    font-size: 1.6em;
    font-weight: 700;
    color: var(--md-sys-color-primary);
    white-space: nowrap;
    min-width: 2ch;
    text-align: right;
}

.jobservices-view__add-btn {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border: none;
    background: none;
    color: var(--md-sys-color-primary);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 0;
    transition: background 0.15s;
}

.jobservices-view__add-btn:hover {
    background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent);
}

.jobservices-view__add-btn .material-symbols-outlined {
    font-size: 46px;
}

.jobservices-view__add-label {
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    pointer-events: none;
}

.jobservices-view__unlock-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--md-sys-color-outline);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: color 0.15s;
}

.jobservices-view__unlock-btn .material-symbols-outlined {
    font-size: 20px;
}

.jobservices-view__unlock-label {
    font-size: 0.6em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    pointer-events: none;
}

.jobservices-view__delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--md-sys-color-outline);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.jobservices-view__delete-btn:hover {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-error);
}

.jobservices-view__responses-placeholder {
    text-align: center;
    color: var(--md-sys-color-outline);
    align-self: center;
    align-items: center;
    justify-content: center;
    height: 100%;	
}

.fw-view .fw-view__drawer-container-left .fw-view__drawer-container-inner .job-services-view__question-sets .fw-card-list__card-container {
    border: none;
}

.fw-view .fw-view__drawer-container-left .fw-view__drawer-container-inner .jobservices-view__qset-card {
    border-width: 1px;
    border-radius: 16px;
    padding: 8px 16px 8px 16px;
    display: grid;
    grid-template-columns: auto 36px;
    align-items: center;
    gap: 8px;
}

.jobservices-view__qset-numbers {
    display: flex;
    justify-content: center;
}
.jobservices-view__qset-numbers div {
	padding: 0 5px;
}

.jobservices-view__qset-add-btn {
    width: 36px;
    height: 36px;
    border-radius: 20px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.jobservices-view__qset-add-btn:hover { opacity: 0.85; }

.jobservices-view__qset-add-btn .material-symbols-outlined { font-size: 20px; }

/* Inspection: Question Set Response View */

.jobResponseAnswers-view__main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.jobResponseAnswers-view__header {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--md-sys-color-on-primary);
    padding: 33px 16px;
    flex-shrink: 0;
    font-size: 1.3em;
    margin-bottom: 10px;
}

.jobResponseAnswers-view__job-number {
    font-size: 1.9em;
}

.jobResponseAnswers-view__breadcrumb-sep {
    font-size: 18px;
    opacity: 0.7;
}

.jobResponseAnswers-view__body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Left: response list panel */
.jobResponseAnswers-view__response-panel {
    display: flex;
    flex-direction: column;
    width: 280px;
    min-width: 200px;
    border-right: var(--rs-primary-border);
    overflow: hidden;
    flex-shrink: 0;
}

.jobResponseAnswers-view__col-headers {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    padding: 6px 12px;
    font-size: 0.75em;
    color: var(--md-sys-color-on-primary);
    border-bottom: var(--rs-primary-border);
    font-weight: 500;
    flex-shrink: 0;
}

.jobResponseAnswers-view__response-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.jobResponseAnswers-view__response-card {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: var(--rs-primary-border);
    cursor: pointer;
}

.jobResponseAnswers-view__response-card:hover {
    background: var(--md-sys-color-surface-container-low);
}

.jobResponseAnswers-view__response-card.highlight {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.jobResponseAnswers-view__response-name {
    font-size: 0.9em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jobResponseAnswers-view__response-completed {
    font-size: 0.85em;
    color: var(--md-sys-color-outline);
    white-space: nowrap;
}

.jobResponseAnswers-view__response-actions {
    display: flex;
    gap: 2px;
}

.jobResponseAnswers-view__delete-response-btn,
.jobResponseAnswers-view__copy-response-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: var(--md-sys-color-on-surface-variant);
    display: flex;
    align-items: center;
    line-height: 1;
}

.jobResponseAnswers-view__delete-response-btn:hover {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-error);
}

.jobResponseAnswers-view__copy-response-btn:hover {
    background: var(--md-sys-color-surface-container);
}

.jobResponseAnswers-view__delete-response-btn .material-symbols-outlined,
.jobResponseAnswers-view__copy-response-btn .material-symbols-outlined {
    font-size: 18px;
}

/* Right: answers panel */
.jobResponseAnswers-view__answers-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
    background: transparent;
}

.jobResponseAnswers-view__answers-placeholder {
    text-align: center;
    color: var(--md-sys-color-outline);
    align-self: center;
}

.jobResponseAnswers-view__answers-placeholder .material-symbols-outlined {
    font-size: 48px;
    display: block;
    margin-bottom: 8px;
}

/* Inspection: Answers active panel */
.jobResponseAnswers-view__answers-active {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.jobResponseAnswers-view__answers-active[hidden],
.jobResponseAnswers-view__answers-toolbar[hidden] {
    display: none;
}

.jobResponseAnswers-view__answers-toolbar {
    display: flex;
    align-items: stretch;
    background: var(--md-sys-color-primary);
    flex-shrink: 0;
}

.jobResponseAnswers-view__close-answers-btn,
.jobResponseAnswers-view__complete-btn {
    flex: 1;
    background: none;
    border: none;
    color: var(--md-sys-color-on-primary);
    font-size: 0.95em;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 14px 8px;
    cursor: pointer;
    text-transform: uppercase;
}

.jobResponseAnswers-view__close-answers-btn:hover,
.jobResponseAnswers-view__complete-btn:hover {
    background: rgba(255,255,255,0.15);
}

.jobResponseAnswers-view__answers-toolbar-divider {
    width: 1px;
    background: rgba(255,255,255,0.4);
    margin: 10px 0;
}

.jobResponseAnswers-view__questions-container {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Inspection: Question cards */
.jobResponseAnswers-view__questions-container .fw-card-list__card-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.jobResponseAnswers-view__questions-container .fw-card-list__card {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.answers-view__question-label {
    font-size: 0.9em;
    color: var(--md-sys-color-on-surface);
    margin: 0 0 12px;
    line-height: 1.4;
}

.answers-view__question-label strong {
    color: var(--md-sys-color-primary);
}

.answers-view__options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.answers-view__option-btn {
    background: #fff;
    border: 2px solid var(--md-sys-color-primary);
    border-radius: 6px;
    color: var(--md-sys-color-primary);
    font-size: 0.85em;
    font-weight: 500;
    padding: 10px 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-align: center;
}

.answers-view__option-btn:hover {
    background: var(--md-sys-color-primary-container);
}

.answers-view__option-btn--selected {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.answers-view__option-btn--selected:hover {
    background: var(--md-sys-color-primary);
}

/* ── Confirm Booking popup ─────────────────────────────────────────────── */
dialog#confirmBooking {
    font-size: 14px;
    font-family: inherit;
    border-radius: 12px !important;
    padding: 0;
    min-width: 340px;
    max-width: 460px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}
dialog#confirmBooking .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 500;
    cursor: default;
}
dialog#confirmBooking .fw-view__main-container {
    padding: 20px 20px 8px;
}
dialog#confirmBooking .dialog-footer {
    border-top: 1px solid var(--md-sys-color-outline-variant);
    padding: 12px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
dialog#confirmBooking .dialog-footer .fw-button {
    padding: 8px 20px;
    border-radius: 6px;
    border: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}
dialog#confirmBooking .dialog-footer .fw-button.save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
dialog#confirmBooking .dialog-footer .fw-button.save:hover {
    filter: brightness(1.1);
}
dialog#confirmBooking .dialog-footer .fw-button.cancel {
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    border: 1px solid var(--md-sys-color-outline-variant) !important;
}
dialog#confirmBooking .dialog-footer .fw-button.cancel:hover {
    background: var(--md-sys-color-surface-variant);
}

.confirm-booking {
    padding: 4px 0 8px;
}

.confirm-booking__summary {
    font-size: 14px;
    line-height: 1.55;
    color: var(--md-sys-color-on-surface);
    margin: 0 0 14px;
}

.confirm-booking__summary em {
    font-style: italic;
    color: var(--md-sys-color-primary);
}

.confirm-booking__notice-text {
    font-size: 13px;
    color: var(--md-sys-color-on-surface-variant);
    margin: 0 0 12px;
    line-height: 1.4;
}

.confirm-booking__checklist {
    display: flex;
    flex-direction: column;
}

.confirm-booking__check-item {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    cursor: pointer;
}

.confirm-booking__check-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.confirm-booking__checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--md-sys-color-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.confirm-booking__check-label {
    font-size: 14px;
    color: var(--md-sys-color-on-surface);
    font-weight: 500;
}

.confirm-booking__check-subtitle {
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 2px;
    padding-left: 26px;
}

/* ── PENDING JOBS VIEW ──────────────────────────────────────────────── */

.pending-view {
    display: grid;
    grid-template-rows: 50px 1fr;
    max-height: 100vh;
    padding: 20px;
    gap: 16px;
    overflow: hidden;
    box-sizing: border-box;
}
.pending-view__main {
    display: grid;
    grid-column-gap: 16px;
    grid-template-columns: auto 64px;
    grid-template-rows: calc(100vh - 102px);
    transition: grid-template-columns .35s ease-in-out;
}
.pending-view__main.open {
    grid-template-columns: auto 400px;  
}
.pending-view__main .fw-view__drawer-container-right.right-drawer .right-drawer__panel-close {
    grid-column: 6;
}

.pending-view__header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.pending-view__header-icon {
    font-size: 28px;
    color: var(--md-sys-color-on-primary);
}

.pending-view__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--md-sys-color-on-primary);
    margin: 0;
}

.pending-view__count {
    margin-left: auto;
    font-size: 18px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    white-space: nowrap;
}

.pending-view__count .fw-card-list__base-count {
    font-weight: 700;
    font-size: 20px;
    color: #1B1C1C;
}

.pending-view__search {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 2em;
    padding: 5px 12px 5px 10px;
}

.pending-view__search .material-symbols-outlined {
    font-size: 18px;
    color: var(--md-sys-color-on-primary);
    opacity: 0.7;
}

.pending-view__search-input {
    background: transparent;
    border: none;
    outline: none;
    font-size: 13px;
    color: var(--md-sys-color-on-primary);
    width: 200px;
}

.pending-view__search-input::placeholder {
    color: var(--md-sys-color-on-primary);
    opacity: 0.5;
}

.pending-view__table-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: #F9F9FF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(27,28,28,0.06);
    overflow: hidden;
}

.pending-view__table-header,
.pending-view__row {
    display: grid;
    /* Fixed last column rather than auto: the header and each row are separate grid containers,
       so an auto track sizes independently per container - the header's plain "Action" text is
       narrower than a row's Approve+Cancel buttons, which threw the other columns out of
       alignment between the two. A shared fixed width keeps every column identical across both. */
    grid-template-columns: 3fr 1.5fr 1fr 190px;
    align-items: center;
    padding: 10px 16px;
}

.pending-view__table-header {
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.pending-view__table-header--action {
    padding-left: 16px;
    border-left: 2px solid var(--md-sys-color-outline-variant);
}

.pending-view__table-wrap [data-widget="FWCardList"] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pending-view__table-wrap .fw-card-list__card-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
}

/* scrollbar-width:none only hides Firefox's scrollbar - without this, Chrome/Safari/Edge still
   reserve space for one once the card list is tall enough to scroll (e.g. a busy agency's job
   list), which shifts the cards left of the fixed (non-scrolling) table header above it and
   throws the columns out of alignment. */
.pending-view__table-wrap .fw-card-list__card-container::-webkit-scrollbar {
    display: none;
}

.pending-view__table-wrap .fw-card-list__search-row {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px 0;
}

.pending-view__table-wrap .fw-card-list__search {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 2em;
    padding: 6px 14px;
    flex: 1 1 auto;
    max-width: 480px;
}

.pending-view__table-wrap .fw-card-list__search .material-symbols-outlined {
    font-size: 18px;
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.7;
}

.pending-view__table-wrap .fw-card-list__search-input {
    background: transparent;
    border: none;
    outline: none;
    font-size: 13px;
    flex: 1;
    color: #1B1C1C;
}

.pending-view__table-wrap .fw-card-list__tiles {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pending-view__table-wrap .fw-card-list__tile {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 2em;
    padding: 6px 14px;
    cursor: pointer;
    font: inherit;
    white-space: nowrap;
}

.pending-view__table-wrap .fw-card-list__tile:hover {
    background: var(--rs-container-hover);
}

.pending-view__table-wrap .fw-card-list__tile.active {
    border-color: var(--md-sys-color-primary);
    background: rgba(0, 62, 126, 0.06);
}

.pending-view__table-wrap .fw-card-list__tile-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pending-view__table-wrap .fw-card-list__tile-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--md-sys-color-primary);
}

.pending-view__table-wrap .fw-card-list__banners {
    flex-shrink: 0;
    display: flex;
}

.pending-view__table-wrap .fw-card-list__banners:empty {
    display: none;
}

.pending-view__table-wrap .fw-card-list__banner {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 14px;
    background: rgba(0, 62, 126, 0.06);
    border-radius: 2em;
    font-size: 12px;
    color: var(--md-sys-color-primary);
    white-space: nowrap;
}

.pending-view__table-wrap .fw-card-list__banner-value {
    font-weight: 700;
    color: #1B1C1C;
    background: #fff;
    padding: 2px 8px;
    border-radius: 1em;
    margin-left: 2px;
}

.pending-view__table-wrap .fw-card-list__banner-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: inherit;
    padding: 0;
}

.pending-view__table-wrap .fw-card-list__banner-btn:hover {
    background: rgba(0, 62, 126, 0.12);
}

.pending-view__table-wrap .fw-card-list__banner-btn .material-symbols-outlined {
    font-size: 16px;
}

.pending-view__table-wrap .fw-card-list__group-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #eef0f4;
    cursor: pointer;
    font-size: 13px;
    color: #1B1C1C;
}

.pending-view__table-wrap .fw-card-list__group-row:last-child { border-bottom: none; }
.pending-view__table-wrap .fw-card-list__group-row:hover { background: var(--rs-container-hover); }

.pending-view__table-wrap .fw-card-list__row-label {
    font-weight: 600;
}

/* Jobs whose property has no agency (a left join through properties -> agencies) come back
   from the metadata endpoint with a null group value/label - give that row a readable name
   rather than showing a blank one. */
.pending-view__table-wrap .fw-card-list__row-label:empty::before {
    content: 'No Agency';
    font-style: italic;
    opacity: 0.7;
}

.pending-view__table-wrap .fw-card-list__row-count {
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
}

.pending-view__row {
    border-bottom: 1px solid #eef0f4;
    font-size: 13px;
    color: #1B1C1C;
    cursor: pointer;
    transition: background 0.1s;
}

.pending-view__row:last-child { border-bottom: none; }
.pending-view__row:hover { background: var(--rs-container-hover); }

.pending-view__row--approving {
    background: var(--rs-container-hover);
    opacity: 0.7;
    pointer-events: none;
}

.pending-view__cell--key {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-primary);
}

.pending-view__cell--services {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pending-view__cell--services img {
    height: 20px;
}

.pending-view__cell--action {
    padding-left: 16px;
    border-left: 2px solid var(--md-sys-color-outline-variant);
    display: flex;
    align-items: center;
    gap: 8px;
}

.pending-view__cell--tenants {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-self: stretch;
    min-width: 0;
    cursor: pointer;
    border-radius: 4px;
    padding: 4px 6px;
    margin: -4px -6px;
    transition: background 0.1s;
}

.pending-view__cell--tenants:hover {
    background: var(--rs-container-hover);
}

.pending-view__tenants-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 70px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pending-view__tenants-list::-webkit-scrollbar {
    display: none;
}

.pending-view__tenants-list .ap-contact-row {
    padding: 2px 0;
    gap: 6px;
}

.pending-view__tenants-list .ap-contact__avatar {
    width: 22px;
    height: 22px;
    min-width: 22px;
    font-size: 9px;
    margin-top: 0;
}

.pending-view__tenants-list .ap-contact__name,
.pending-view__tenants-list .ap-contact__detail {
    font-size: 11px;
}

.pending-view__approve-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--md-sys-color-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.pending-view__approve-btn .material-symbols-outlined {
    font-size: 16px;
}

.pending-view__approve-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.pending-view__approve-btn--busy .material-symbols-outlined {
    animation: pending-approve-spin 0.8s linear infinite;
}

@keyframes pending-approve-spin {
    to { transform: rotate(360deg); }
}

.pending-view__cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--md-sys-color-error);
    border: 1px solid var(--md-sys-color-error);
    border-radius: 4px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    transition: background 0.15s;
}

.pending-view__cancel-btn .material-symbols-outlined {
    font-size: 18px;
}

.pending-view__cancel-btn:hover {
    background: color-mix(in srgb, var(--md-sys-color-error) 10%, transparent);
}

.pending-view__cancel-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.pending-view__cancel-btn--busy .material-symbols-outlined {
    animation: pending-approve-spin 0.8s linear infinite;
}

/* ── SETTINGS VIEW ──────────────────────────────────────────────── */

.fw-view .settings-view__drawer-inner {
    grid-template-rows: 35px 1fr;
}

.settings-view__nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    overflow-y: auto;
}

.settings-view__nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    background: none;
    color: var(--rs-header-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.settings-view__nav-item:hover {
    background: rgba(0, 62, 126, 0.06);
}

.settings-view__nav-item .material-symbols-outlined {
    font-size: 20px;
    color: var(--md-sys-color-primary);
}

.settings-view__nav-item.highlight {
    background: var(--md-sys-color-primary);
    color: #fff;
}

.settings-view__nav-item.highlight .material-symbols-outlined {
    color: #fff;
}

.pending-view__approve-btn:hover { opacity: 0.88; }

/* ── SETTINGS ALERTS VIEW ───────────────────────────────────────── */

.settings-alerts-view {
    display: grid;
    grid-template-rows: 50px 1fr;
    max-height: 100vh;
    gap: 16px;
    overflow: hidden;
    box-sizing: border-box;
}

.settings-alerts-view__header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.settings-alerts-view__header-icon {
    font-size: 28px;
    color: var(--md-sys-color-on-primary);
}

.settings-alerts-view__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--md-sys-color-on-primary);
    margin: 0;
}

.settings-alerts-view__table-wrap {
    display: flex;
    flex-direction: column;
    background: #F9F9FF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(27,28,28,0.06);
    overflow: hidden;
}

.settings-alerts-view__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.settings-alerts-view__search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 8px 12px;
    color: #888;
    font-size: 14px;
}

.settings-alerts-view__search .material-symbols-outlined { font-size: 18px; color: #888; }

.settings-alerts-view__search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: inherit;
}

.settings-alerts-view__search-input::placeholder { color: #aaa; }

.settings-alerts-view__add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--md-sys-color-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.settings-alerts-view__add-btn .material-symbols-outlined { font-size: 18px; }
.settings-alerts-view__add-btn:hover { opacity: 0.9; }

.settings-alerts-view__table {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.settings-alerts-view__table-header {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
    padding: 10px 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.settings-alerts-view__table-header span:not(:first-child) {
    text-align: center;
}

.settings-alerts-view__table [data-widget="FWCardList"] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.settings-alerts-view__table .fw-card-list__card-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.settings-alerts-view__row {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #eef0f4;
    font-size: 13px;
    color: #1B1C1C;
    transition: background 0.1s;
}

.settings-alerts-view__row:last-child { border-bottom: none; }
.settings-alerts-view__row:hover { background: var(--rs-container-hover); }

.settings-alerts-view__row-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.settings-alerts-view__row .fw-toggle-switch {
    width: 30px;
    height: 17px;
    border-radius: 17px;
    justify-self: center;
}
.settings-alerts-view__row .fw-toggle-switch:before {
    width: 13px;
    height: 13px;
}
.settings-alerts-view__row .fw-toggle-switch:checked {
    background-color: var(--md-sys-color-primary);
}
.settings-alerts-view__row .fw-toggle-switch:checked:before {
    transform: translateX(13px);
}

/* ── ALERT EDITOR POPUP ─────────────────────────────────────────── */

#alertEditor {
    width: 520px;
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
}

#alertEditor .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 16px;
    margin: 0;
    cursor: pointer;
}

#alertEditor .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

#alertEditor .dialog-footer .fw-button {
    padding: 8px 24px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#alertEditor .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

#alertEditor .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant);
}

.alert-editor {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    overflow-y: auto;
}

.alert-editor__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.alert-editor__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.alert-editor__input {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.alert-editor__input:focus {
    border-color: var(--md-sys-color-primary);
}

.alert-editor__toggles {
    display: flex;
    gap: 32px;
}

.alert-editor__toggle-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-editor__toggle-label {
    font-size: 13px;
    color: #1B1C1C;
}

.alert-editor .fw-toggle-switch {
    width: 30px;
    height: 17px;
    border-radius: 17px;
    flex-shrink: 0;
}
.alert-editor .fw-toggle-switch:before {
    width: 13px;
    height: 13px;
}
.alert-editor .fw-toggle-switch:checked {
    background-color: var(--md-sys-color-primary);
}
.alert-editor .fw-toggle-switch:checked:before {
    transform: translateX(13px);
}

/* ── SETTINGS PARTS VIEW ─────────────────────────────────────────── */

.settings-parts-view {
    display: grid;
    grid-template-rows: 50px 1fr;
    max-height: 100vh;
    gap: 16px;
    overflow: hidden;
    box-sizing: border-box;
}

.settings-parts-view__header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.settings-parts-view__header-icon {
    font-size: 28px;
    color: var(--md-sys-color-on-primary);
}

.settings-parts-view__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--md-sys-color-on-primary);
    margin: 0;
}

.settings-parts-view__table-wrap {
    display: flex;
    flex-direction: column;
    background: #F9F9FF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(27,28,28,0.06);
    overflow: hidden;
}

.settings-parts-view__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.settings-parts-view__search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 8px 12px;
    color: #888;
    font-size: 14px;
}

.settings-parts-view__search .material-symbols-outlined { font-size: 18px; color: #888; }

.settings-parts-view__search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: inherit;
}

.settings-parts-view__search-input::placeholder { color: #aaa; }

.settings-parts-view__add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--md-sys-color-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.settings-parts-view__add-btn .material-symbols-outlined { font-size: 18px; }
.settings-parts-view__add-btn:hover { opacity: 0.9; }

.settings-parts-view__table {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.settings-parts-view__table-header {
    display: grid;
    grid-template-columns: 1fr 3fr 2fr 1fr;
    padding: 10px 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.settings-parts-view__table [data-widget="FWCardList"] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.settings-parts-view__table .fw-card-list__card-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.settings-parts-view__row {
    display: grid;
    grid-template-columns: 1fr 3fr 2fr 1fr;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #eef0f4;
    font-size: 13px;
    color: #1B1C1C;
    transition: background 0.1s;
}

.settings-parts-view__row:last-child { border-bottom: none; }
.settings-parts-view__row:hover { background: var(--rs-container-hover); }

/* ── RIGHT DRAWER SETTINGS ACTIONS ───────────────────────────────── */
.right-drawer__card--action {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--md-sys-color-surface-variant);
    font-family: inherit;
    cursor: pointer;
}
.right-drawer__card--action:hover { background: var(--rs-container-hover); }
.right-drawer__card--action .right-drawer__card-header { margin-bottom: 0; }
.right-drawer__settings-select {
    margin-left: 26px;
    width: calc(100% - 26px);
    padding: 6px 8px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    color: var(--md-sys-color-on-surface-variant);
    background: #fff;
}

/* ── RIGHT DRAWER SETTINGS: PARTS/SERVICES COLLAPSIBLE SECTIONS ──── */
.right-drawer__collapsible-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 0;
    font-family: inherit;
    cursor: pointer;
}
.right-drawer__collapsible-toggle:hover { background: var(--rs-container-hover); }
.right-drawer__collapsible-chevron {
    font-size: 20px;
    color: var(--rs-subtext);
    transition: transform 0.15s ease;
}
.right-drawer__collapsible--expanded .right-drawer__collapsible-chevron {
    transform: rotate(180deg);
}
.right-drawer__collapsible-body {
    margin-top: 10px;
    padding-left: 26px;
}
.right-drawer__settings-toolbar {
    margin-bottom: 8px;
}
.right-drawer__settings-add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--md-sys-color-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.right-drawer__settings-add-btn .material-symbols-outlined { font-size: 16px; }
.right-drawer__settings-add-btn:hover { opacity: 0.9; }
.right-drawer__settings-table {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    overflow: hidden;
}
.right-drawer__settings-table-header {
    display: grid;
    align-items: center;
    padding: 8px 10px;
    background: var(--rs-container-hover);
    font-size: 11px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.right-drawer__settings-row {
    padding: 8px 10px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    font-size: 13px;
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
}
.right-drawer__settings-row:hover { background: var(--rs-container-hover); }

/* Parts: single-line, 3-column grid row (Part / Price / Discount) */
.right-drawer__settings-table--parts .right-drawer__settings-table-header,
.right-drawer__settings-row--parts {
    display: grid;
    align-items: center;
    grid-template-columns: 3fr 1fr 1fr;
}
.right-drawer__settings-table-header span:nth-child(2),
.right-drawer__settings-table-header span:nth-child(3),
.right-drawer__settings-row--parts span:nth-child(2),
.right-drawer__settings-row--parts span:nth-child(3) {
    text-align: right;
}

/* Services: two-line card - title + auto icon on top, price/discount/repeat below */
.right-drawer__settings-row--services {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.right-drawer__settings-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.right-drawer__settings-row-title {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.right-drawer__settings-row-bottom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    font-size: 12px;
    color: var(--rs-subtext);
}
.right-drawer__settings-row-unit {
    margin-left: -8px;
}
.right-drawer__settings-auto-icon { font-size: 16px; color: var(--rs-primary-gray-text); flex-shrink: 0; }

/* ── PART EDITOR POPUP ───────────────────────────────────────────── */

#partEditor {
    width: 480px;
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
}

#partEditor .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 16px;
    margin: 0;
    cursor: pointer;
}

#partEditor .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

#partEditor .dialog-footer .fw-button {
    padding: 8px 24px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#partEditor .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

#partEditor .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant);
}

.part-editor {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    overflow-y: auto;
}

.part-editor__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.part-editor__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.part-editor__input {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.part-editor__input:focus {
    border-color: var(--md-sys-color-primary);
}

.part-editor__textarea {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 64px;
    font-family: inherit;
}

/* ── SCHEDULE QUOTE POPUP ────────────────────────────────────────── */

#scheduleQuote {
    width: 560px;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

#scheduleQuote .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 16px;
    margin: 0;
    cursor: pointer;
}

#scheduleQuote .fw-view__main-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    overflow-y: auto;
}

#scheduleQuote .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

#scheduleQuote .dialog-footer .fw-button {
    padding: 8px 24px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#scheduleQuote .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

#scheduleQuote .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant);
}

.schedule-quote__summary {
    font-size: 14px;
    line-height: 1.55;
    color: var(--md-sys-color-on-surface);
    margin: 0;
}

.schedule-quote__summary em {
    font-style: italic;
    color: var(--md-sys-color-primary);
}

.schedule-quote__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.schedule-quote__field-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
}

.schedule-quote__field input {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    font-family: inherit;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    width: 100%;
    box-sizing: border-box;
}

.schedule-quote__field input:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
}

.schedule-quote__toggle-row {
    display: flex;
    gap: 20px;
}

.schedule-quote__toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
}

/* scheduleQuote's rows only carry code + description (no qty/discount/price), unlike job.html's
   6-column jobItems table that this markup and CSS are cloned from - override the shared grid so
   the description column isn't split across empty qty/discount/price tracks. */
#scheduleQuote .job-items__header,
#scheduleQuote .job-item-row {
    grid-template-columns: 150px 1fr 28px;
}

.part-editor__textarea:focus {
    border-color: var(--md-sys-color-primary);
}

.part-editor__row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.part-editor__toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.part-editor__toggle-label {
    font-size: 13px;
    color: #1B1C1C;
}

.part-editor .fw-toggle-switch {
    width: 30px;
    height: 17px;
    border-radius: 17px;
    flex-shrink: 0;
}
.part-editor .fw-toggle-switch:before {
    width: 13px;
    height: 13px;
}
.part-editor .fw-toggle-switch:checked {
    background-color: var(--md-sys-color-primary);
}
.part-editor .fw-toggle-switch:checked:before {
    transform: translateX(13px);
}

/* ── COMPANY DETAILS VIEW ────────────────────────────────────────── */

.settings-company-details-view {
    display: grid;
    grid-template-rows: 50px 1fr;
    max-height: 100vh;
    gap: 16px;
    overflow: hidden;
    box-sizing: border-box;
}

.settings-company-details-view__header,
.settings-global-view__header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.settings-company-details-view__header-icon,
.settings-global-view__header-icon {
    font-size: 28px;
    color: var(--md-sys-color-on-primary);
}

.settings-company-details-view__title,
.settings-global-view__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--md-sys-color-on-primary);
    margin: 0;
}

.settings-company-details-view__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    padding-right: 4px;
}

.company-details__section,
.settings-global-view__section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
}

.company-details__section,
.settings-global-view__panel > .settings-global-view__section {
    background: #F9F9FF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(27,28,28,0.06);
}

/* Sections nested inside a group (Job Bookings) get their card look from the group instead. */
.settings-global-view__group > .settings-global-view__section {
    padding: 0;
}

.company-details__section-title,
.settings-global-view__section-title {
    font-size: 15px;
    font-weight: 600;
    color: #1B1C1C;
    margin: 0;
}

.company-details__field,
.settings-global-view__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.company-details__label,
.settings-global-view__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.company-details__input,
.settings-global-view__input {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
}

.company-details__input:focus,
.settings-global-view__input:focus {
    border-color: var(--md-sys-color-primary);
}

.settings-global-view__input:disabled {
    background: var(--md-sys-color-surface-variant, #F1F1F5);
    color: var(--md-sys-color-on-surface-variant);
    cursor: not-allowed;
}

.company-details__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.company-details__row--4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.company-details__row--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.company-details__two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.company-details__org-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
}

.company-details__logo-cell {
    grid-row: 1 / 3;
    grid-column: 2;
    align-self: end;
}

.company-details__logo-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.company-details__logo-preview {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    background: #fff;
}

.company-details__logo-upload-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--md-sys-color-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    width: fit-content;
}

.company-details__logo-upload-btn .material-symbols-outlined { font-size: 18px; }
.company-details__logo-upload-btn:hover { opacity: 0.9; }

.company-details__save-btn {
    align-self: flex-start;
    background: var(--md-sys-color-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.company-details__save-btn:hover { opacity: 0.9; }

.company-details__bank-save-row {
    padding-top: 22px;
}

/* ── SETTINGS GLOBAL VIEW ────────────────────────────────────────── */
/* Layout/typography reuses .company-details__section/__field/__label/__input above via
   combined selectors - the landing tile grid, breadcrumb, pills, and toggle rows are new. */

.settings-global-view {
    display: grid;
    grid-template-rows: 50px 1fr;
    max-height: calc(100vh - 32px);
    gap: 16px;
    overflow: hidden;
    box-sizing: border-box;
}

.settings-global-view__header-crumb {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.settings-global-view__header-crumb-label {
    font-size: 20px;
    font-weight: 600;
    color: var(--md-sys-color-on-primary);
}

.settings-global-view__header-sep {
    margin: 0 8px;
    color: var(--md-sys-color-on-primary);
    opacity: 0.6;
}

.settings-global-view__header-current {
    font-size: 20px;
    font-weight: 600;
    color: var(--md-sys-color-on-primary);
}

.settings-global-view__body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* Several conditionally-shown elements below also carry a display:flex/grid utility class -
   without this, that class's specificity beats the UA [hidden] rule and the element never
   actually hides. */
.settings-global-view [hidden] {
    display: none !important;
}

/* ── Landing tile grid ────────────────────────────────────────────── */

.settings-global-view__landing {
    overflow-y: auto;
    padding-right: 4px;
    min-height: 0;
}

.settings-global-view__tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    max-width: 1080px;
}

.settings-global-view__tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
    background: #F9F9FF;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(27,28,28,0.06);
    padding: 18px 20px;
    cursor: pointer;
    font-family: inherit;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.settings-global-view__tile:hover {
    box-shadow: 0 4px 14px rgba(27,28,28,0.12);
    border-color: var(--md-sys-color-primary);
}

.settings-global-view__tile-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 10px;
}

.settings-global-view__tile-icon--jobCreation        { background: #3f5fac; }
.settings-global-view__tile-icon--jobApproval        { background: #4c7a9e; }
.settings-global-view__tile-icon--jobBookings        { background: #5a6fae; }
.settings-global-view__tile-icon--jobCompletion      { background: #3a8f7f; }
.settings-global-view__tile-icon--invoicing          { background: #b08a3e; }
.settings-global-view__tile-icon--agencyPortals      { background: #8a5aa8; }
.settings-global-view__tile-icon--emailConfiguration { background: #c65b4e; }
.settings-global-view__tile-icon--notifications      { background: #c17f3e; }

.settings-global-view__tile-title {
    font-size: 15px;
    font-weight: 700;
    color: #1B1C1C;
}

.settings-global-view__tile-desc {
    font-size: 12.5px;
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1.5;
}

/* ── Detail panels ────────────────────────────────────────────────── */

.settings-global-view__panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    padding-right: 4px;
    max-width: 640px;
    min-height: 0;
}

.settings-global-view__panel[hidden] {
    display: none;
}

.settings-global-view__section-hint {
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
    margin: -6px 0 0;
}

.settings-global-view__group {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #F9F9FF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(27,28,28,0.06);
    padding: 20px;
}

.settings-global-view__group-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}

.settings-global-view__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
}

.settings-global-view__field--toggle,
.settings-global-view__toggle-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.settings-global-view__toggle-row__text {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* Framework's base .fw-toggle-switch is a flex item like any other, so with no flex-shrink of
   its own the row above squeezes it to fit alongside long hint text - shrinking the 60px track
   without shrinking the checked knob's fixed 26px translateX, pushing the knob out past the
   now-narrower track's right edge. Keep it at its intrinsic width; let the text wrap instead. */
.settings-global-view__toggle-row .fw-toggle-switch,
.settings-global-view__field--toggle .fw-toggle-switch {
    flex-shrink: 0;
}

.settings-global-view__field--toggle .settings-global-view__label,
.settings-global-view__label--plain {
    text-transform: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: normal;
    color: var(--md-sys-color-on-surface);
}

.settings-global-view__toggle-row--compact {
    padding: 4px 0;
}

.settings-global-view__toggle-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-global-view__input--narrow {
    width: 240px;
}

.settings-global-view__inline {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-global-view__inline--wrap {
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
}

.settings-global-view__inline-label {
    font-size: 13px;
    color: var(--md-sys-color-on-surface-variant);
    white-space: nowrap;
}

/* ── Pill groups (FWRadioButton) ──────────────────────────────────── */

.settings-global-view__pills {
    display: flex;
    flex-wrap: wrap;
}

/* Same joined-segment/checkmark recipe as the FWOptionList checklist below (framework's
   .fw-option-list__option / --selected in widgets.css) so single-select pill groups and
   multi-select checklists look consistent - the previous solid-fill selected state relied on
   the generic unscoped .fw-radio-button.selected framework rule as a fallback whenever this
   scoping class was missing (e.g. after FWRadioButton.setOptions() rebuilds the pills), and that
   generic rule references undefined CSS vars, rendering as unreadable light text on no background. */
.settings-global-view__pill.fw-radio-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0 0 0 -1px;
    padding: 8px 16px;
    border-radius: 0;
    border: 1px solid var(--md-sys-color-outline-variant);
    background: transparent;
    color: var(--md-sys-color-on-surface);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.settings-global-view__pill.fw-radio-button:first-child {
    margin-left: 0;
    border-radius: 20px 0 0 20px;
}

.settings-global-view__pill.fw-radio-button:last-child {
    border-radius: 0 20px 20px 0;
}

.settings-global-view__pill.fw-radio-button:only-child {
    border-radius: 20px;
}

.settings-global-view__pill.fw-radio-button:hover {
    background: var(--md-sys-color-surface-variant);
    z-index: 1;
}

.settings-global-view__pill.fw-radio-button::before {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    content: "check";
    width: 0;
    overflow: hidden;
    transition: width 0.15s;
    display: inline-block;
}

.settings-global-view__pill.fw-radio-button.selected {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font-weight: 500;
    z-index: 1;
    padding: 8px 16px;
}

.settings-global-view__pill.fw-radio-button.selected::before {
    width: 18px;
    min-width:25px;
}

/* Framework FWRadioButton clicking the already-selected pill toggles it back to null - not a
   valid state for these required enum fields, so the selected pill simply isn't clickable. */
.settings-global-view__pill.fw-radio-button.selected {
    pointer-events: none;
}

/* Long option labels (e.g. "Show the following start and end times") wrap badly while still
   visually joined into one segmented control - render these as individual spaced pills instead,
   keeping the same colors/checkmark as the joined variant above. */
.settings-global-view__pills--stacked {
    gap: 8px;
}

.settings-global-view__pills--stacked .settings-global-view__pill.fw-radio-button {
    margin-left: 0;
    border-radius: 20px;
}

/* Derived (non-field) pill pair, e.g. Immediately/Scheduled - styled the same but state is
   toggled manually in ViewSettingsGlobal.js rather than via FWRadioButton. */
.settings-global-view__pill--plain {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--md-sys-color-outline-variant);
    background: #fff;
    color: var(--md-sys-color-on-surface);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.settings-global-view__pill--plain.settings-global-view__pill--selected {
    background: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

/* ── Multi-select checklist (FWOptionList) ────────────────────────── */

.settings-global-view__checklist.fw-option-list {
    display: flex;
    flex-wrap: wrap;
}

/* Day-of-month picker for the "Specific days of month" overdue reminder schedule - calendar-style
   grid of circular toggles rather than the default joined pill row (31 items wrap untidily as
   pills). No check icon - the filled circle already carries the selected state. */
.settings-global-view__days-grid.fw-option-list {
    display: grid;
    grid-template-columns: repeat(7, 36px);
    gap: 6px;
    margin-top: 8px;
}

.settings-global-view__days-grid .fw-option-list__option {
    margin-left: 0;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    width: 36px;
    height: 36px;
}

.settings-global-view__days-grid .fw-option-list__option::before {
    display: none;
}

/* ── JOB TYPES MAINTENANCE LIST (inside Job Creation panel) ───────── */

.settings-global-view__job-types-toolbar {
    display: flex;
    justify-content: flex-end;
}

.settings-global-view__add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.settings-global-view__add-btn .material-symbols-outlined { font-size: 18px; }
.settings-global-view__add-btn:hover { opacity: 0.9; }

.settings-global-view__section [data-field="JobTypesAll"] .fw-card-list__card-container {
    border: 1px solid #eef0f4;
    border-radius: 8px;
    overflow: hidden;
}

.settings-global-view__job-type-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #eef0f4;
    font-size: 13px;
    color: #1B1C1C;
    cursor: pointer;
    transition: background 0.1s;
}

.settings-global-view__job-type-row:last-child { border-bottom: none; }
.settings-global-view__job-type-row:hover { background: var(--rs-container-hover); }

.settings-global-view__job-type-row::after {
    content: "chevron_right";
    font-family: "Material Symbols Outlined";
    font-size: 18px;
    color: var(--md-sys-color-on-surface-variant);
}

/* ── JOB TYPE EDITOR POPUP ─────────────────────────────────────────── */

#jobTypeEditor {
    width: 420px;
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
}

#jobTypeEditor .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 16px;
    margin: 0;
    cursor: pointer;
}

#jobTypeEditor .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

#jobTypeEditor .dialog-footer .fw-button {
    padding: 8px 24px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#jobTypeEditor .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

#jobTypeEditor .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant);
}

#jobTypeEditor .dialog-footer .delete {
    background: transparent;
    color: var(--md-sys-color-error);
    border: 1px solid var(--md-sys-color-error);
    margin-right: auto;
}

.job-type-editor {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    overflow-y: auto;
}

.job-type-editor__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.job-type-editor__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.job-type-editor__input {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.job-type-editor__input:focus {
    border-color: var(--md-sys-color-primary);
}

/* ── EMAIL CONFIGURATION (Global Settings) ────────────────────────── */

/* Unlike its sibling .settings-global-view__section cards, this sits directly on
   .settings-global-view__panel with no opaque background of its own - against the view's
   decorative background art (behind the panel, same as every other Global Settings panel) its
   dark hint-text colour became unreadable. Give it the same opaque card treatment the sections
   use instead of just a bare margin tweak. */
.settings-global-view__panel-intro {
    margin: 0 0 4px;
    padding: 14px 20px;
    background: #F9F9FF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(27,28,28,0.06);
}

.settings-global-view__email-row {
    display: flex;
    gap: 8px;
}

.settings-global-view__email-row .settings-global-view__input {
    flex: 1;
}

.settings-global-view__save-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.settings-global-view__save-btn:hover {
    opacity: 0.9;
}

.settings-global-view__email-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
}

.settings-global-view__email-status[data-status="unset"] {
    font-style: italic;
    opacity: 0.75;
}

.settings-global-view__email-status[data-status="verified"] {
    color: #1b7f3a;
    font-style: normal;
}

.settings-global-view__email-status[data-status="pending"] {
    color: #b8860b;
    font-style: normal;
}

.settings-global-view__email-status[data-status="failed"] {
    color: var(--md-sys-color-error);
    font-style: normal;
}

.settings-global-view__email-status-resend {
    background: none;
    border: none;
    padding: 0;
    color: var(--md-sys-color-primary);
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

/* ── SETTINGS FLAGS VIEW ─────────────────────────────────────────── */

.settings-flags-view {
    display: grid;
    grid-template-rows: 50px 1fr;
    max-height: 100vh;
    gap: 16px;
    overflow: hidden;
    box-sizing: border-box;
}

.settings-flags-view__header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.settings-flags-view__header-icon {
    font-size: 28px;
    color: var(--md-sys-color-on-primary);
}

.settings-flags-view__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--md-sys-color-on-primary);
    margin: 0;
}

.settings-flags-view__table-wrap {
    display: flex;
    flex-direction: column;
    background: #F9F9FF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(27,28,28,0.06);
    overflow: hidden;
}

.settings-flags-view__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.settings-flags-view__search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 8px 12px;
    color: #888;
    font-size: 14px;
}

.settings-flags-view__search .material-symbols-outlined { font-size: 18px; color: #888; }

.settings-flags-view__search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: inherit;
}

.settings-flags-view__search-input::placeholder { color: #aaa; }

.settings-flags-view__add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--md-sys-color-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.settings-flags-view__add-btn .material-symbols-outlined { font-size: 18px; }
.settings-flags-view__add-btn:hover { opacity: 0.9; }

.settings-flags-view__table {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.settings-flags-view__table-header {
    display: grid;
    grid-template-columns: 3fr 1fr;
    padding: 10px 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.settings-flags-view__table-header span:not(:first-child) {
    text-align: center;
}

.settings-flags-view__table [data-widget="FWCardList"] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.settings-flags-view__table .fw-card-list__card-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.settings-flags-view__row {
    display: grid;
    grid-template-columns: 3fr 1fr;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #eef0f4;
    font-size: 13px;
    color: #1B1C1C;
    cursor: pointer;
    transition: background 0.1s;
}

.settings-flags-view__row:last-child { border-bottom: none; }
.settings-flags-view__row:hover { background: var(--rs-container-hover); }

.settings-flags-view__row-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

/* ── FLAG EDITOR POPUP ───────────────────────────────────────────── */

#flagEditor {
    width: 520px;
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
}

#flagEditor .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 16px;
    margin: 0;
    cursor: pointer;
}

#flagEditor .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

#flagEditor .dialog-footer .fw-button {
    padding: 8px 24px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#flagEditor .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

#flagEditor .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant);
}

.flag-editor {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    overflow-y: auto;
}

.flag-editor__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.flag-editor__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.flag-editor__input {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.flag-editor__input:focus {
    border-color: var(--md-sys-color-primary);
}

.flag-editor .fw-toggle-switch {
    width: 30px;
    height: 17px;
    border-radius: 17px;
    flex-shrink: 0;
}
.flag-editor .fw-toggle-switch:before {
    width: 13px;
    height: 13px;
}
.flag-editor .fw-toggle-switch:checked {
    background-color: var(--md-sys-color-primary);
}
.flag-editor .fw-toggle-switch:checked:before {
    transform: translateX(13px);
}

/* ── SERVICES LIST (drawer card) ─────────────────────────────────────────── */

.service-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
}

.service-card__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e8f0fe;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--md-sys-color-primary);
    overflow: hidden;
}

.service-card__info {
    min-width: 0;
}

.service-card__code {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.service-card__title {
    font-size: 14px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── TEMPLATE CARD (drawer) ─────────────────────────────────────────────── */

.template-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
}

.template-card__icon {
    flex-shrink: 0;
    color: var(--md-sys-color-primary);
    font-size: 20px;
}

.template-card__info {
    min-width: 0;
}

.template-card__title {
    font-size: 14px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.template-card__category {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── SETTINGS SERVICES LIST ──────────────────────────────────────────────── */

.settings-services-view {
    display: grid;
    grid-template-rows: 50px 1fr;
    max-height: calc(100vh - 32px);
    gap: 16px;
    overflow: hidden;
    box-sizing: border-box;
}

.settings-services-view__header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.settings-services-view__header-icon {
    font-size: 28px;
    color: var(--md-sys-color-on-primary);
}

.settings-services-view__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--md-sys-color-on-primary);
    margin: 0;
}

.settings-services-view__table-wrap {
    display: flex;
    flex-direction: column;
    background: #F9F9FF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(27,28,28,0.06);
    overflow: hidden;
}

.settings-services-view__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.settings-services-view__search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 8px 12px;
    color: #888;
    font-size: 14px;
}

.settings-services-view__search .material-symbols-outlined { font-size: 18px; color: #888; }

.settings-services-view__search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: inherit;
}

.settings-services-view__search-input::placeholder { color: #aaa; }

.settings-services-view__add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--md-sys-color-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.settings-services-view__add-btn .material-symbols-outlined { font-size: 18px; }
.settings-services-view__add-btn:hover { opacity: 0.9; }

.settings-services-view__table {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.settings-services-view__table .fw-card-list__card-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.settings-services-view__row {
    border-bottom: 1px solid #eef0f4;
    cursor: pointer;
}

.settings-services-view__row:last-child { border-bottom: none; }
.settings-services-view__row:hover { background: var(--rs-container-hover); }

/* ── SETTINGS SERVICE PACKAGES LIST ──────────────────────────────────────── */

.settings-service-packages-view {
    display: grid;
    grid-template-rows: 50px 1fr;
    max-height: calc(100vh - 32px);
    gap: 16px;
    overflow: hidden;
    box-sizing: border-box;
}

.settings-service-packages-view__header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.settings-service-packages-view__header-icon {
    font-size: 28px;
    color: var(--md-sys-color-on-primary);
}

.settings-service-packages-view__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--md-sys-color-on-primary);
    margin: 0;
}

.settings-service-packages-view__table-wrap {
    display: flex;
    flex-direction: column;
    background: #F9F9FF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(27,28,28,0.06);
    overflow: hidden;
}

.settings-service-packages-view__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.settings-service-packages-view__search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 8px 12px;
    color: #888;
    font-size: 14px;
}

.settings-service-packages-view__search .material-symbols-outlined { font-size: 18px; color: #888; }

.settings-service-packages-view__search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: inherit;
}

.settings-service-packages-view__search-input::placeholder { color: #aaa; }

.settings-service-packages-view__add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--md-sys-color-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.settings-service-packages-view__add-btn .material-symbols-outlined { font-size: 18px; }
.settings-service-packages-view__add-btn:hover { opacity: 0.9; }

.settings-service-packages-view__table {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.settings-service-packages-view__table .fw-card-list__card-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.settings-service-packages-view__row {
    border-bottom: 1px solid #eef0f4;
    cursor: pointer;
}

.settings-service-packages-view__row:last-child { border-bottom: none; }
.settings-service-packages-view__row:hover { background: var(--rs-container-hover); }

/* ── SETTINGS DOCUMENT TEMPLATES LIST ────────────────────────────────────── */

.settings-document-templates-view {
    display: grid;
    grid-template-rows: 50px 1fr;
    max-height: calc(100vh - 32px);
    gap: 16px;
    overflow: hidden;
    box-sizing: border-box;
}

.settings-document-templates-view__header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.settings-document-templates-view__header-icon {
    font-size: 28px;
    color: var(--md-sys-color-on-primary);
}

.settings-document-templates-view__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--md-sys-color-on-primary);
    margin: 0;
}

.settings-document-templates-view__table-wrap {
    display: flex;
    flex-direction: column;
    background: #F9F9FF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(27,28,28,0.06);
    overflow: hidden;
}

.settings-document-templates-view__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.settings-document-templates-view__search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 8px 12px;
    color: #888;
    font-size: 14px;
}

.settings-document-templates-view__search .material-symbols-outlined { font-size: 18px; color: #888; }

.settings-document-templates-view__search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: inherit;
}

.settings-document-templates-view__search-input::placeholder { color: #aaa; }

.settings-document-templates-view__add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--md-sys-color-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.settings-document-templates-view__add-btn .material-symbols-outlined { font-size: 18px; }
.settings-document-templates-view__add-btn:hover { opacity: 0.9; }

.settings-document-templates-view__table {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.settings-document-templates-view__table .fw-card-list__card-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.settings-document-templates-view__row {
    border-bottom: 1px solid #eef0f4;
    cursor: pointer;
}

.settings-document-templates-view__row:last-child { border-bottom: none; }
.settings-document-templates-view__row:hover { background: var(--rs-container-hover); }

/* ── SETTINGS EMAIL TEMPLATES LIST ───────────────────────────────────────── */

.settings-email-templates-view {
    display: grid;
    grid-template-rows: 50px 1fr;
    max-height: calc(100vh - 32px);
    gap: 16px;
    overflow: hidden;
    box-sizing: border-box;
}

.settings-email-templates-view__header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.settings-email-templates-view__header-icon {
    font-size: 28px;
    color: var(--md-sys-color-on-primary);
}

.settings-email-templates-view__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--md-sys-color-on-primary);
    margin: 0;
}

.settings-email-templates-view__table-wrap {
    display: flex;
    flex-direction: column;
    background: #F9F9FF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(27,28,28,0.06);
    overflow: hidden;
}

.settings-email-templates-view__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.settings-email-templates-view__search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 8px 12px;
    color: #888;
    font-size: 14px;
}

.settings-email-templates-view__search .material-symbols-outlined { font-size: 18px; color: #888; }

.settings-email-templates-view__search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: inherit;
}

.settings-email-templates-view__search-input::placeholder { color: #aaa; }

.settings-email-templates-view__add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--md-sys-color-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.settings-email-templates-view__add-btn .material-symbols-outlined { font-size: 18px; }
.settings-email-templates-view__add-btn:hover { opacity: 0.9; }

.settings-email-templates-view__table {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.settings-email-templates-view__table .fw-card-list__card-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.settings-email-templates-view__row {
    border-bottom: 1px solid #eef0f4;
    cursor: pointer;
}

.settings-email-templates-view__row:last-child { border-bottom: none; }
.settings-email-templates-view__row:hover { background: var(--rs-container-hover); }

/* ── SETTINGS SMS TEMPLATES LIST ─────────────────────────────────────────── */

.settings-sms-templates-view {
    display: grid;
    grid-template-rows: 50px 1fr;
    max-height: calc(100vh - 32px);
    gap: 16px;
    overflow: hidden;
    box-sizing: border-box;
}

.settings-sms-templates-view__header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.settings-sms-templates-view__header-icon {
    font-size: 28px;
    color: var(--md-sys-color-on-primary);
}

.settings-sms-templates-view__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--md-sys-color-on-primary);
    margin: 0;
}

.settings-sms-templates-view__table-wrap {
    display: flex;
    flex-direction: column;
    background: #F9F9FF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(27,28,28,0.06);
    overflow: hidden;
}

.settings-sms-templates-view__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.settings-sms-templates-view__search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 8px 12px;
    color: #888;
    font-size: 14px;
}

.settings-sms-templates-view__search .material-symbols-outlined { font-size: 18px; color: #888; }

.settings-sms-templates-view__search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: inherit;
}

.settings-sms-templates-view__search-input::placeholder { color: #aaa; }

.settings-sms-templates-view__add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--md-sys-color-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.settings-sms-templates-view__add-btn .material-symbols-outlined { font-size: 18px; }
.settings-sms-templates-view__add-btn:hover { opacity: 0.9; }

.settings-sms-templates-view__table {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.settings-sms-templates-view__table .fw-card-list__card-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.settings-sms-templates-view__row {
    border-bottom: 1px solid #eef0f4;
    cursor: pointer;
}

.settings-sms-templates-view__row:last-child { border-bottom: none; }
.settings-sms-templates-view__row:hover { background: var(--rs-container-hover); }

/* ── NEW SERVICE DIALOG ──────────────────────────────────────────────────── */

.services-new-dialog {
    border: none;
    border-radius: 16px;
    padding: 0;
    width: 360px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    overflow: hidden;
}

.services-new-dialog::backdrop {
    background: rgba(0,0,0,0.32);
}

.services-new-dialog__header {
    padding: 20px 24px 12px;
    font-size: 18px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}

.services-new-dialog__body {
    padding: 4px 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.services-new-dialog__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.services-new-dialog__input {
    border: none;
    border-bottom: 2px solid var(--md-sys-color-outline-variant);
    background: transparent;
    font-size: 15px;
    padding: 6px 0;
    outline: none;
    color: var(--md-sys-color-on-surface);
    width: 100%;
}

.services-new-dialog__input:focus {
    border-bottom-color: var(--md-sys-color-primary);
}

.services-new-dialog__select {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    border-bottom: 2px solid var(--md-sys-color-outline-variant);
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='rgb(65,71,77)' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 0 center;
    background-size: 18px;
    font-size: 15px;
    padding: 6px 22px 6px 6px;
    outline: none;
    color: var(--md-sys-color-on-surface);
    width: 100%;
    cursor: pointer;
    font-family: inherit;
}

.services-new-dialog__select:focus {
    border-bottom-color: var(--md-sys-color-primary);
}

.services-new-dialog__type-group {
    display: flex;
    border-radius: 20px;
    border: 1.5px solid var(--md-sys-color-outline-variant);
    overflow: hidden;
}

.services-new-dialog__type-btn {
    flex: 1;
    border: none;
    border-left: 1.5px solid var(--md-sys-color-outline-variant);
    padding: 7px 12px;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.services-new-dialog__type-btn:first-child {
    border-left: none;
}

.services-new-dialog__type-btn.active {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.services-new-dialog__type-btn:hover:not(.active) {
    background: var(--md-sys-color-surface-variant);
}

.services-new-dialog__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 16px 16px;
}

.services-new-dialog__cancel-btn,
.services-new-dialog__create-btn {
    padding: 8px 20px;
    border-radius: 20px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.services-new-dialog__cancel-btn {
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
}

.services-new-dialog__cancel-btn:hover {
    background: var(--md-sys-color-surface-variant);
}

.services-new-dialog__create-btn {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.services-new-dialog__create-btn:hover:not(:disabled) {
    opacity: 0.88;
}

.services-new-dialog__create-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

/* ── SERVICE DETAIL VIEW ─────────────────────────────────────────────────── */

.service-view {
    display: grid;
    grid-template-rows: 50px 1fr;
    gap: 16px;
    height: 100%;
    max-height: calc(100vh - 40px);
    overflow: hidden;
}

.service-view__header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.service-view__header-icon {
    font-size: 28px;
    color: var(--md-sys-color-on-primary);
}

.service-view__header-text {
    min-width: 0;
}

.service-view__title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--md-sys-color-on-primary);
}

.service-view__breadcrumb-parent {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.service-view__breadcrumb-parent:hover {
    text-decoration: underline;
}

.service-view__breadcrumb-sep {
    margin: 0 6px;
    opacity: 0.6;
}

.service-view__code {
    font-size: 11px;
    opacity: 0.8;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--md-sys-color-on-primary);
}

.service-view__body {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.service-view__section {
    background: #F9F9FF;
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.service-view__section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--md-sys-color-primary);
}

.service-view__field-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.service-view__field-row:last-child {
    border-bottom: none;
}

.service-view__field-row--textarea {
    align-items: flex-start;
    padding-top: 8px;
}

.service-view__field-label {
    font-size: 12px;
    color: #888;
    flex-shrink: 0;
    width: 140px;
}

.service-view__field-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: var(--md-sys-color-on-surface);
    font-family: inherit;
    padding: 6px 0;
}

.service-view__field-input--right {
    text-align: right;
}

.service-view__field-icon-picker {
    flex: 0 0 auto;
}

.service-view__icon-calendar-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.service-view__icon-calendar-toggle-label {
    font-size: 12px;
    color: #888;
}

.service-view__field-icon-picker.fw-icon-picker {
    flex-wrap: nowrap;
}

.service-view__field-input:focus {
    color: var(--md-sys-color-primary);
}

.service-view__field-textarea {
    resize: vertical;
    min-height: 60px;
    padding: 6px 0;
    line-height: 1.5;
}

.service-view__fields-inline {
    display: flex;
}

.service-view__field-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 16px;
    border-right: 1px solid var(--md-sys-color-outline-variant);
}

.service-view__field-col:first-child {
    padding-left: 0;
}

.service-view__field-col:last-child {
    border-right: none;
    padding-right: 0;
}

.service-view__field-col--toggle {
    align-items: flex-start;
}

.service-view__field-col .service-view__field-input {
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    padding-bottom: 4px;
}

.service-view__field-col .service-view__field-input:focus {
    border-bottom-color: var(--md-sys-color-primary);
}

.service-view__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 4px 0 8px;
}

.service-view__question-sets-btn,
.service-view__service-report-btn,
.service-view__service-summary-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 20px;
    border: 1px solid var(--md-sys-color-primary);
    background: transparent;
    color: var(--md-sys-color-primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.service-view__question-sets-btn:hover,
.service-view__service-report-btn:hover,
.service-view__service-summary-btn:hover {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.service-view .fw-toggle-switch {
    width: 30px;
    height: 17px;
    border-radius: 17px;
    flex-shrink: 0;
}

.service-view .fw-toggle-switch:before {
    width: 13px;
    height: 13px;
}

.service-view .fw-toggle-switch:checked {
    background-color: var(--md-sys-color-primary);
}

.service-view .fw-toggle-switch:checked:before {
    transform: translateX(13px);
}

.service-view__inv-desc-label {
    width: 140px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}

.service-view__insert-token-btn {
    background: transparent;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    cursor: pointer;
    color: var(--md-sys-color-on-surface-variant);
    font-family: inherit;
    text-align: left;
}

.service-view__insert-token-btn:hover {
    background: var(--md-sys-color-surface-variant);
}

.service-view__token-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 100;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 220px;
    overflow: hidden;
}

.service-view__token-dropdown-group {
    padding: 6px 0 2px;
}

.service-view__token-dropdown-group + .service-view__token-dropdown-group {
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

.service-view__token-dropdown-group-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
    padding: 0 12px 4px;
}

.service-view__token-dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 12px;
    font-size: 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--md-sys-color-on-surface);
    font-family: inherit;
}

.service-view__token-dropdown-item:hover {
    background: var(--md-sys-color-surface-variant);
}

/* ── SERVICE PACKAGE VIEW (package/service linking) ─────────────────────── */

.service-view__services-picker {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.service-view__services-picker-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.service-view__services-picker-label {
    font-size: 12px;
    color: #888;
}

.service-view__services-picker-list {
    flex: 1;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 6px;
    padding: 4px;
    font-size: 14px;
    background: #fff;
    color: var(--md-sys-color-on-surface);
    font-family: inherit;
}

.service-view__services-picker-list option {
    padding: 6px 8px;
    border-radius: 4px;
}

.service-view__services-picker-list option:checked {
    background: var(--md-sys-color-primary);
    color: #fff;
}

.service-view__services-picker-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.service-view__services-picker-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 50%;
    background: #fff;
    color: var(--md-sys-color-primary);
    cursor: pointer;
}

.service-view__services-picker-btn:hover:not(:disabled) {
    background: var(--md-sys-color-primary);
    color: #fff;
}

.service-view__services-picker-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── SERVICE QUESTION SETS VIEW ─────────────────────────────────────────── */
#serviceQuestionSets .fw-view__main-container {
	max-height: 100vh;
	overflow: auto;
}
.fw-view .service-qsets-view__drawer {
    border-right: var(--rs-primary-border);
    border-radius: var(--rs-drawer-border-radius);
}

.fw-view .service-qsets-view__drawer .fw-view__drawer-container-inner {
    display: flex;
    flex-direction: column;
    grid-template-rows: unset;
    grid-row-gap: unset;
    padding: 0;
    overflow: hidden;
    border-bottom-right-radius: 16px;
}

.fw-view .service-qsets-view__drawer .fw-view__drawer-container-inner .fw-card-list__card-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border: var(--rs-primary-no_border);
    border-width: 1px 1px 1px 0;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

.service-qsets-view__header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 16px;
    flex-shrink: 0;
}

.service-qsets-view__service-title {
    display: block;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.4;
}

.sqset-drawer__new-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: calc(100% - 24px);
    margin: 15px 12px 10px;
    padding: 6px 12px;
    border: none;
    border-radius: 20px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
}

.sqset-drawer__new-btn:hover { opacity: 0.88; }

.sqset-drawer__new-btn .material-symbols-outlined { font-size: 18px; }

/* ── NEW QUESTION SET DIALOG ─────────────────────────────────────────────── */

.sqset-new-dialog {
    border: none;
    border-radius: 16px;
    padding: 0;
    width: 380px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    overflow: hidden;
}

.sqset-new-dialog::backdrop { background: rgba(0,0,0,0.32); }

.sqset-new-dialog__header {
    padding: 20px 24px 12px;
    font-size: 18px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}

.sqset-new-dialog__body {
    padding: 4px 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sqset-new-dialog__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 8px;
}

.sqset-new-dialog__label:first-child { margin-top: 0; }

.sqset-new-dialog__input {
    border: none;
    border-bottom: 2px solid var(--md-sys-color-outline-variant);
    background: transparent;
    font-size: 15px;
    padding: 6px 0;
    outline: none;
    color: var(--md-sys-color-on-surface);
    width: 100%;
    resize: none;
    font-family: inherit;
}

.sqset-new-dialog__input:focus { border-bottom-color: var(--md-sys-color-primary); }

.sqset-new-dialog__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 16px 16px;
}

.sqset-new-dialog__cancel-btn,
.sqset-new-dialog__save-btn {
    padding: 8px 20px;
    border-radius: 20px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.sqset-new-dialog__cancel-btn {
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
}

.sqset-new-dialog__cancel-btn:hover { background: var(--md-sys-color-surface-variant); }

.sqset-new-dialog__save-btn {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.sqset-new-dialog__save-btn:hover:not(:disabled) { opacity: 0.88; }

.sqset-new-dialog__save-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.service-qsets-view__card {
    padding: 8px 12px;
    border-bottom: var(--rs-primary-border);
    overflow: hidden;
}

.service-qsets-view__card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.service-qsets-view__card-row1 {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}

.service-qsets-view__card-edit-btn {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    opacity: 0.45;
    color: inherit;
}

.service-qsets-view__card-edit-btn:hover { opacity: 1; }

.service-qsets-view__card-edit-btn .material-symbols-outlined { font-size: 18px; }

.service-qsets-view__card-title {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    max-width: 194px;
}

.service-qsets-view__card-position {
    font-size: 11px;
    opacity: 0.55;
    flex-shrink: 0;
}

.service-qsets-view__card-desc {
    font-size: 15px;
    font-style: italic;
    opacity: 0.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 255px;
}

.service-qsets-view__card-row2 {
    display: flex;
    gap: 0;
    overflow: hidden;
}

.sqset-class-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    height: 28px;
    border-radius: 0;
    border: 1.5px solid var(--md-sys-color-primary);
    background: transparent;
    color: var(--md-sys-color-primary);
    font-size: 10px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    opacity: 0.3;
    overflow: hidden;
    padding: 0 6px;
    transition: background 0.15s, color 0.15s, opacity 0.15s, padding 0.15s;
    white-space: nowrap;
}

.sqset-class-btn + .sqset-class-btn {
    border-left: none;
}

.sqset-class-btn.fw-radio-button {
    margin: 0;
}

.sqset-class-btn:first-child { border-radius: 6px 0 0 6px; }
.sqset-class-btn:last-child  { border-radius: 0 6px 6px 0; }

.sqset-class-btn::before {
    content: '✓';
    position: absolute;
    left: 0px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s;
}

.sqset-class-btn:hover { opacity: 0.6; }

.sqset-class-btn.selected {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    opacity: 1;
    padding-left: 22px;
}

.sqset-class-btn.selected::before { 
	opacity: 1;
	font-size: 15px;
}

/* ── SERVICE QUESTION SET — QUESTIONS VIEW ───────────────────────────────── */

#serviceQuestionSet {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.sqset-questions-view__header {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
    flex-shrink: 0;
}

.sqset-questions-view__name {
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    outline: none;
    font-size: 20px;
    font-weight: 600;
    font-family: inherit;
    color: var(--md-sys-color-on-primary);
    padding: 14px 0 10px;
}

.sqset-questions-view__name::placeholder {
    color: var(--md-sys-color-outline);
    font-weight: 400;
}

.sqset-questions-view__desc {
    width: 100%;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: var(--md-sys-color-on-primary);
    font-family: inherit;
    padding: 4px 0 10px;
}

.sqset-questions-view__desc::placeholder { color: var(--md-sys-color-outline); }


.sqset-questions-view__toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 0 14px 8px 14px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.sqset-questions-view__config {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
}

.sqset-config-field {
    --md-filled-text-field-container-color: transparent;
    --md-filled-text-field-label-text-color: var(--md-sys-color-on-primary);
    --md-filled-text-field-input-text-color: var(--md-sys-color-on-primary);
    --md-filled-text-field-hover-label-text-color: var(--md-sys-color-on-primary);
    --md-filled-text-field-focus-label-text-color: var(--md-sys-color-on-primary);
    --md-filled-text-field-hover-input-text-color: var(--md-sys-color-on-primary);
    --md-filled-text-field-focus-input-text-color: var(--md-sys-color-on-primary);
    --md-filled-text-field-active-indicator-color: var(--md-sys-color-on-primary);
    --md-filled-text-field-bottom-space: 4px;
    --md-filled-text-field-with-label-bottom-space: 4px;
    width: 180px;
    align-self: end;
}

/* Asset tracking + template builder config block.
   It carries its own translucent panel because the header's white-on-blue contrast comes from
   workspace-bgnd.svg, a fixed-height background on .fw-view - once this block grows past the
   dark part of that artwork, white text would be sitting on a pale wave. The panel keeps it
   legible at any height instead of depending on how tall the artwork happens to be. */
.sqset-questions-view__config {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 12px 18px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 16px 20px;
    border-radius: 10px;
    background: rgba(11, 37, 71, 0.72);
}

.sqset-questions-view__toolbar {
    align-items: stretch;
    gap: 16px;
    padding: 0 14px 12px 14px;
}

/* display:contents so the label and control cell below become items of the config grid, which is
   what aligns every control on one edge no matter how long its label is. */
.sqset-config-row { display: contents; }

.sqset-config-label {
    color: var(--md-sys-color-on-primary);
    font-size: 12.5px;
    opacity: 0.85;
    white-space: nowrap;
}

.sqset-config-control {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    min-width: 0;
}

/* The hint takes the leftover width and wraps, rather than running off the edge of the panel. */
.sqset-config-hint {
    flex: 1 1 180px;
    min-width: 0;
}

.sqset-config-hint,
.sqset-config-note {
    color: var(--md-sys-color-on-primary);
    font-size: 11.5px;
    line-height: 1.35;
    opacity: 0.6;
    margin: 0;
}

.sqset-config-note {
    grid-column: 1 / -1;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Hidden until the set is marked as tracking an asset. assetTracked reads 0/1 (see QuestionSet.js),
   and attachClassListener stamps assetTracked-0 / assetTracked-1 for a numeric value. */
.sqset-config-row--asset-label { display: none; }
.sqset-config-row--asset-label.assetTracked-1 { display: contents; }

/* Publish top, Add Question bottom, in a column beside the config block. space-between spreads
   them over the block's full height, which is why the toolbar stretches its items. */
.sqset-questions-view__actions {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: 10px;
    flex-shrink: 0;
}

.rs-template-builder {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.rs-template-builder__chips {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    min-height: 26px;
}

.rs-template-builder__empty {
    color: var(--md-sys-color-on-primary);
    opacity: 0.5;
    font-size: 11px;
    font-style: italic;
}

.rs-template-builder__chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 24px;
    padding: 0 2px 0 8px;
    border-radius: 12px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.18);
    color: var(--md-sys-color-on-primary);
}

.rs-template-builder__chip--text {
    padding-left: 4px;
    background: rgba(255, 255, 255, 0.08);
}

/* A token whose question no longer exists (or has not loaded yet) - still removable. */
.rs-template-builder__chip--unknown {
    background: rgba(255, 255, 255, 0.08);
    outline: 1px dashed rgba(255, 255, 255, 0.5);
}

.rs-template-builder__chip-label { white-space: nowrap; }

.rs-template-builder__chip-input {
    background: transparent;
    border: none;
    outline: none;
    color: inherit;
    font: inherit;
    padding: 0 4px;
    min-width: 16px;
}

.rs-template-builder__chip-remove {
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 4px;
    opacity: 0.7;
}

.rs-template-builder__chip-remove:hover { opacity: 1; }

.rs-template-builder__picker,
.rs-template-builder__add-text,
.rs-question-select__picker {
    height: 24px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: var(--md-sys-color-on-primary);
    font-size: 12px;
    padding: 0 6px;
    cursor: pointer;
}

.rs-template-builder__picker option,
.rs-question-select__picker option { color: initial; }

.rs-template-builder__picker:disabled,
.rs-question-select__picker:disabled { opacity: 0.4; cursor: default; }

.rs-question-select__picker { min-width: 220px; }

.sqset-questions-view__add-btn,
.sqset-questions-view__publish-btn {
    display: flex;
    align-items: center;
    justify-content: center;   /* stretched to the actions column width, so centre the contents */
    gap: 5px;
    white-space: nowrap;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.sqset-questions-view__add-btn:hover,
.sqset-questions-view__publish-btn:hover {
    background: color-mix(in srgb, var(--md-sys-color-primary) 85%, #000);
}

.sqset-questions-view__add-btn .material-symbols-outlined,
.sqset-questions-view__publish-btn .material-symbols-outlined {
    font-size: 18px;
}

.sqset-questions-view__list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: none;
}

.sqset-questions-view__list::-webkit-scrollbar {
    display: none;
}

.sqset-questions-view__list .fw-card-list__card-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sqset-questions-view__card {
    padding: 12px 14px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    cursor: pointer;
}

.sqset-questions-view__card::after {
    content: 'Click to edit';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--md-sys-color-primary) 60%, transparent);
    color: var(--md-sys-color-on-primary);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0;
    transition: opacity 150ms ease;
    pointer-events: none;
}

.sqset-questions-view__card:hover::after {
    opacity: 1;
}


#serviceQuestionSet .fw-question-single__option { pointer-events: none; }

.sqset-questions-view__card-ref {
    font-size: 11px; font-weight: 600; opacity: 0.5; text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sqset-questions-view__card-question {
    font-size: 13px; line-height: 1.4;
}

/* ── QUESTION EDITOR POPUP ───────────────────────────────────────────────── */

#questionEditor {
    min-width: 480px;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    border: none;
    padding: 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

#questionEditor .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 16px;
    border-radius: 12px 12px 0 0;
    cursor: default;
}

#questionEditor .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

#questionEditor .dialog-footer .fw-button {
    padding: 8px 24px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    height: auto;
}

#questionEditor .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border: none;
}

#questionEditor .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant);
}

.question-editor-dialog {
    width: 520px;
    display: flex;
    flex-direction: column;
}

.question-editor-dialog .fw-view__main-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.question-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    overflow-y: auto;
}

.question-editor__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.question-editor__row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.question-editor__row .question-editor__field {
    flex: 1;
}

/* Boolean options read as "Label [switch]" on one left-aligned line, rather than a centred
   label-above-control stack. The switch itself is styled in questionEditor.html. */
.question-editor__field--checkbox {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.question-editor__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
}

.question-editor__label-hint {
    font-weight: 400;
    font-size: 12px;
}

.question-editor__input,
.question-editor__select,
.question-editor__textarea {
    flex: 1;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    font-family: inherit;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    width: 100%;
    box-sizing: border-box;
}

.question-editor__input:focus,
.question-editor__select:focus,
.question-editor__textarea:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
}

.question-editor__textarea {
    resize: vertical;
    min-height: 70px;
}

.question-editor__field--options .question-editor__textarea {
    min-height: 90px;
}

/* ── FWQuestionPart (RentSafe-specific question-set widget) ────────────────── */

.fw-question-part {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fw-question-part__header {
    font-size: 14px;
    color: var(--md-sys-color-on-surface, #1c1b1f);
    line-height: 1.4;
}

.fw-question-part__ref {
    font-weight: 700;
    margin-right: 4px;
    color: var(--md-sys-color-primary, #3d5fa8);
}

.fw-question-part__question {
    font-weight: 400;
    color: var(--md-sys-color-on-surface-variant, #49454f);
}

.fw-question-part__options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fw-question-part__option {
    padding: 14px 8px;
    border: 1.5px solid var(--md-sys-color-primary, #3d5fa8);
    border-radius: 8px;
    background: transparent;
    color: var(--md-sys-color-primary, #3d5fa8);
    font-size: 14px;
    font-family: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.fw-question-part__option:hover:not(.fw-question-part__option--selected) {
    background: var(--md-sys-color-surface-variant, #f0ecf8);
}

.fw-question-part__option--selected {
    background: var(--md-sys-color-primary, #3d5fa8);
    color: var(--md-sys-color-on-primary, #ffffff);
}

.fw-question-part__warranty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
}

.fw-question-part__warranty-options {
    display: flex;
    border: 1.5px solid var(--md-sys-color-primary, #3d5fa8);
    border-radius: 20px;
    overflow: hidden;
}

.fw-question-part__warranty-option {
    padding: 6px 16px;
    border: none;
    border-left: 1.5px solid var(--md-sys-color-primary, #3d5fa8);
    background: transparent;
    color: var(--md-sys-color-primary, #3d5fa8);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.fw-question-part__warranty-option:first-child {
    border-left: none;
}

.fw-question-part__warranty-option--selected {
    background: var(--md-sys-color-primary, #3d5fa8);
    color: var(--md-sys-color-on-primary, #ffffff);
}

/* ── TEAMS CARD ──────────────────────────────────────────────────────────── */

.team-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.team-card__avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #e8f0fe;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--md-sys-color-primary);
    overflow: hidden;
}

.team-card__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.team-card__role-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.team-card__role {
    font-size: 11px;
    color: #69D98C;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.team-card__updated {
    font-size: 11px;
    color: var(--rs-subtext);
}

.team-card__name {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-card__activity {
    font-size: 12px;
    color: var(--rs-subtext);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.team-card__load {
    flex-shrink: 0;
    width: 12px;
}

.team-card__load-track {
    width: 12px;
    height: 60px;
    background-color: rgba(255,255,255,0.12);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.team-card__load-fill {
    width: 100%;
    border-radius: 6px;
    transition: height 0.3s ease;
}

/* ── Teams view ──────────────────────────────────────────────────────────── */

.teams-view-main {
    padding: 0 !important;
    position: relative;
    display: grid;
    grid-template-rows: 60px auto;
    height: 100%;
    overflow: hidden;
}
.teams-view-main .scheduling-view__body {
    display: grid;
    grid-template-columns: auto 64px;
    grid-template-rows: calc(100vh - 62px);
    transition: grid-template-columns .35s ease-in-out;
}
.teams-view-main .scheduling-view__body.open {
    grid-template-columns: auto 400px;
}
.teams-view-main .scheduling-view__body .fw-view__drawer-container-right.right-drawer {
    background: transparent;
}
.teams-view-main .scheduling-view__body .fw-view__drawer-container-right.right-drawer .right-drawer__panel-close {
    grid-column: 6;
}
.teams-view-main .job-view .fw-view__drawer-container-right.right-drawer{
    display: none;
}
.teams-view-main .job-view .job-view__main {
    grid-template-columns: auto;
    grid-template-rows: calc(100vh - 192px);
}

.teams-map {
    flex: 1;
    min-height: 0;
    border-radius: var(--rs-drawer-border-radius);
}

.teams-map .gm-style-iw-c { padding: 0 !important; }
.teams-map .gm-style-iw-d { overflow: hidden !important; }
.teams-map .gm-ui-hover-effect { display: none !important; }

.teams-calendar {
    display: none;
    flex: 1;
    min-height: 0;
    /* See .scheduling-calendar - shares the same __header/__allday/__body/__grid/__col
       classes, so the same shrink/scroll behavior (and the same reason row 3 must be
       minmax(max-content, max-content) rather than bare auto) applies here. */
    grid-template-rows: max-content max-content minmax(max-content, max-content) minmax(360px, 720px);
    overflow: auto;
    background: #fff;
    border-radius: var(--rs-drawer-border-radius);
    padding-bottom: 16px;
}

.teams-view-main .scheduling-header__tech-avatar {
    width: 11px;
    height: 11px;
    font-size: 0;
}

/* ── jobServiceQSet view ──────────────────────────────────── */

#jobServiceQSet {
	grid-template-rows: 80px auto;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
#jobServiceQSet .fw-view__main-container {
    display: flex;
    justify-content: center;
    flex-grow: 1;
    padding: 0;	
}
.jssqset-view__header {
    flex-shrink: 0;
}

.jssqset-view__breadcrumb {
    padding: 16px;
}

.jssqset-view__crumb-title {
    color: var(--md-sys-color-surface);
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jssqset-view__body {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

.jssqset-view__left {
    width: 280px;
    flex-shrink: 0;
    border-right: var(--rs-primary-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.jssqset-view__response-list {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.jssqset-view__response-list .fw-card-list__card-container {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px 8px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: none;
}
.jssqset-view__response-list.fw-card-list--empty .fw-card-list__card-container {
    display: none;
}
.jssqset-view__response-list .fw-card-list__empty-indicator {
    flex: 1;
}

.jssqset-view__response-card {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
    background: var(--md-sys-color-surface);
    transition: background 0.15s;
}

.jssqset-view__response-icon {
    grid-row: 1 / span 2;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    overflow: hidden;
    flex-shrink: 0;
}

.jssqset-view__response-card:hover,
.jssqset-view__response-card.highlight {
    background: var(--rs-left-drawer-hover);
}

.jssqset-view__response-card.hasUnanswered-true {
    border-color: var(--md-sys-color-error);
}

.jssqset-view__response-count.hasUnanswered-true {
    color: var(--md-sys-color-error);
}

.jssqset-view__response-name {
    font-size: 0.9em;
    color: var(--rs-header-text);
}

.jssqset-view__response-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.jssqset-view__response-by {
    font-size: 0.75em;
    color: var(--md-sys-color-outline);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jssqset-view__response-progress {
    font-size: 0.75em;
    font-weight: 600;
    color: var(--md-sys-color-primary);
    flex-shrink: 0;
}

.jssqset-view__response-count {
    font-size: 0.85em;
    color: var(--md-sys-color-outline);
}

.jssqset-view__response-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.jssqset-view__copy-btn,
.jssqset-view__delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    color: var(--md-sys-color-outline);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.jssqset-view__copy-btn:hover {
    background: var(--md-sys-color-surface-container);
}

.jssqset-view__delete-btn:hover {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-error);
}

.jssqset-view__copy-btn .material-symbols-outlined,
.jssqset-view__delete-btn .material-symbols-outlined {
    font-size: 18px;
}

/* ── Inspection lockdown (job not Active) ───────────────────────────────────
   data-toggle-class-field="isJobLocked" (Job/JobServiceQuestionSet/QuestionSetResponse)
   adds/removes a bare "locked" class on the services/qsets/responses views' content
   containers. Buttons stay visible but inert (opacity + pointer-events:none, matching
   the .job-btn--disabled convention). The shade+watermark uses the app's own primary
   blue (not the error/red token) so it doesn't read as the same signal as the scheduling
   "URGENT" card treatment (.scheduling-jobs-drawer .isUrgent-1::after, which does use red).
   Scoped to .jobservices-cards specifically (not the whole drawer) so it never touches
   the Complete/Uncomplete buttons above it. The qsets view (.jssqset-view__body) only
   gets its buttons disabled, no shade/watermark - it already shows a "Select an
   inspection..." placeholder, and stacking its watermark under the response-answers
   view's own watermark made "COMPLETED" visibly double up. */

.jobservices-cards.locked .jobservices-view__qset-add-btn {
    pointer-events: none;
    opacity: 0.4;
}

.jssqset-view__body.locked .jssqset-view__copy-btn,
.jssqset-view__body.locked .jssqset-view__delete-btn {
    pointer-events: none;
    opacity: 0.4;
}

.jobResponseAnswers-view__answers-panel.locked .jobResponseAnswers-view__questions-container {
    pointer-events: none;
    opacity: 0.5;
}

.jobservices-cards.locked,
.jobResponseAnswers-view__answers-panel.locked {
    position: relative;
    background: color-mix(in srgb, var(--md-sys-color-primary, #3c6090) 6%, transparent);
}

.jobservices-cards.locked::after,
.jobResponseAnswers-view__answers-panel.locked::after {
    content: 'COMPLETED';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-18deg);
    font-size: 2.6em;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--md-sys-color-primary, #3c6090);
    opacity: 0.16;
    pointer-events: none;
    white-space: nowrap;
    z-index: 5;
}

/* ── Quotes ──────────────────────────────────────────────────────────────── */

/* A4 page canvas */
/* Canvas column: wraps the subject bar and the canvas so they stack, while
   the column as a whole still sits beside the palette and preview pane. */
.template-editor-canvas-column {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;

    /* Shared by the subject bar and the email canvas so the body's left edge
       lines up under the subject input rather than under the label. Changing
       the label width here keeps both in step. */
    --te-gutter: 24px;
    --te-label-w: 64px;
    --te-label-gap: 8px;
}

/* Subject line - email templates only (see TEMPLATE_CAPABILITIES). */
/* An author `display` beats the UA stylesheet's [hidden] { display: none },
   so the flex rule below would keep the bar on screen for document templates
   even with the attribute set. This wins it back on specificity. */
.template-editor-subject[hidden] {
    display: none;
}
.template-editor-subject {
    display: flex;
    align-items: center;
    gap: var(--te-label-gap);
    padding: 8px var(--te-gutter);
    background: var(--md-sys-color-surface-container);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    flex-shrink: 0;
}
.template-editor-subject__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    flex-shrink: 0;
    /* Fixed, so the canvas below can offset by a known amount to match. */
    width: var(--te-label-w);
}
.template-editor-subject__input {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
    /* A subject is one line - stop Enter turning it into a paragraph stack. */
    white-space: nowrap;
    overflow-x: auto;
}
.template-editor-subject__input:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
}
.template-editor-subject__field {
    flex-shrink: 0;
    max-width: 160px;
    padding: 6px 8px;
    font-size: 13px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    background: var(--md-sys-color-surface);
}
/* Merge-field chip, in the subject bar and inline in the body. */
.template-editor-subject__input [data-widget] {
    display: inline-block;
    padding: 1px 6px;
    margin: 0 1px;
    border-radius: 3px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.template-editor-page-canvas {
    background: #e8e8e8;
    padding: 32px 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    position: relative;
}

.template-editor__document {
    width: 210mm;
    min-height: 297mm;
    background: #fff;
    margin: 0 auto 32px;
    padding: 48px 56px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.18);
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
}

.template-editor-page-canvas--snippet .template-editor__document {
    width: 100%;
    min-height: 400px;
    min-width: unset;
    margin: 0;
    box-shadow: none;
}

/* ── SMS editor: message bubble in a phone ──────────────────────────────── */

/* The palette and block canvas have author `display` values, so [hidden] alone
   would not take them off screen - they are switched off by class instead. */
.template-editor-editor--sms .template-editor-editor__palette,
.template-editor-editor--sms .template-editor-page-canvas {
    display: none;
}

.template-editor-sms {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 48px;
    padding: 32px 24px;
    overflow-y: auto;
    background: var(--md-sys-color-surface-container-low);
}
.template-editor-sms[hidden] { display: none; }

.template-editor-sms__phone {
    position: relative;
    flex-shrink: 0;
    width: 320px;
    background: #1c1c1e;
    border-radius: 42px;
    padding: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.28), 0 0 0 2px #2c2c2e inset;
}

.template-editor-sms__notch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 112px;
    height: 26px;
    background: #1c1c1e;
    border-radius: 0 0 16px 16px;
    z-index: 2;
}

.template-editor-sms__screen {
    background: #f2f2f7;
    border-radius: 32px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 640px;
}

.template-editor-sms__status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 22px 4px;
    font-size: 13px;
    font-weight: 600;
    color: #000;
}
.template-editor-sms__icons {
    display: flex;
    align-items: center;
    gap: 3px;
}
.template-editor-sms__icons .material-symbols-outlined { font-size: 15px; }

.template-editor-sms__thread-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0 10px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    background: rgba(249,249,249,.94);
    color: #000;
}
.template-editor-sms__thread-header .material-symbols-outlined {
    font-size: 34px;
    color: #8e8e93;
}
.template-editor-sms__contact { font-size: 11px; }

.template-editor-sms__thread {
    flex: 1;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Outgoing bubble, with the tail the real client draws. */
.template-editor-sms__bubble {
    position: relative;
    max-width: 84%;
    background: #34c759;
    color: #fff;
    border-radius: 18px;
    padding: 8px 13px;
    font-size: 14px;
    line-height: 1.35;
}
.template-editor-sms__bubble::after {
    content: '';
    position: absolute;
    right: -5px;
    bottom: 0;
    width: 14px;
    height: 18px;
    background: #34c759;
    border-bottom-left-radius: 14px;
    clip-path: polygon(0 60%, 55% 100%, 0 100%);
}

.template-editor-sms__input {
    min-width: 40px;
    outline: none;
    white-space: pre-wrap;
    word-break: break-word;
}
.template-editor-sms__input:empty::before {
    content: attr(data-placeholder);
    color: rgba(255,255,255,.7);
}

/* Merge-field chip - lighter than the bubble so it reads as a placeholder
   rather than as literal message text. */
.template-editor-sms__input [data-widget] {
    display: inline-block;
    padding: 0 5px;
    border-radius: 4px;
    background: rgba(255,255,255,.28);
    font-weight: 600;
    white-space: nowrap;
}

.template-editor-sms__meta {
    margin-top: 6px;
    font-size: 11px;
    color: #8e8e93;
}
/* Turns amber once the message costs more than one segment to send. */
.template-editor-sms__count--multi { color: #b26a00; font-weight: 600; }

.template-editor-sms__home-bar {
    width: 130px;
    height: 5px;
    margin: 10px auto 4px;
    border-radius: 3px;
    background: #48484a;
}

.template-editor-sms__tools {
    flex-shrink: 0;
    width: 260px;
    padding-top: 8px;
}
.template-editor-sms__tools-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
}
.template-editor-sms__field {
    width: 100%;
    padding: 6px 8px;
    font-size: 13px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    background: var(--md-sys-color-surface);
}
.template-editor-sms__hint {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--md-sys-color-on-surface-variant);
}

/* Email canvas: no page.
   An email has no sheet size, no margins to respect and no fold, so the paper
   metaphor would imply constraints that do not exist. What is left is a plain
   centred column at roughly the width EmailRenderer wraps the sent message to
   (600px), so the editing width matches the delivered width. */
/* Left inset matches the subject bar's gutter plus its label, so the body
   starts directly beneath the subject input. */
.template-editor-page-canvas--email {
    background: var(--md-sys-color-surface);
    padding: 24px var(--te-gutter) 24px
             calc(var(--te-gutter) + var(--te-label-w) + var(--te-label-gap));
}

.template-editor-page-canvas--email .template-editor__document {
    width: 100%;
    max-width: 640px;
    min-width: unset;
    /* Not sized to content: the document is also the drop target, so it needs
       enough height to aim at while the template is still short. Matches the
       snippet canvas. */
    min-height: 400px;
    /* Left-aligned, not centred: the canvas inset above already places it
       under the subject input, and auto margins would pull it back off. */
    margin: 0;
    /* No horizontal padding: the dashed body zone sits inside this element, so
       any would inset the visible edit region from the subject input above. */
    padding: 16px 0;
    background: transparent;
    box-shadow: none;
}

.template-editor-editor--snippet .template-editor-editor__palette-section--hf {
    display: none;
}

.template-editor-editor--snippet [data-action="page-format"] { display: none; }

.template-editor-editor--snippet {
    height: 100%;
}

/* Torn paper effect — snippet canvas top and bottom edges */
.template-editor-page-canvas--snippet .template-editor__document::before,
.template-editor-page-canvas--snippet .template-editor__document::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 24px;
    background: #e8e8e8;
    pointer-events: none;
    z-index: 2;
}

.template-editor-page-canvas--snippet .template-editor__document::before {
    top: 0;
    clip-path: polygon(
        0% 0%, 100% 0%,
        100% 50%,
        96% 100%, 92% 48%, 88% 95%, 84% 42%, 80% 100%,
        76% 55%, 72% 90%, 68% 45%, 64% 100%, 60% 38%,
        56% 92%, 52% 50%, 48% 100%, 44% 42%, 40% 88%,
        36% 55%, 32% 100%, 28% 45%, 24% 92%, 20% 38%,
        16% 100%, 12% 48%, 8% 95%, 4% 42%, 0% 50%
    );
    filter: drop-shadow(0 3px 3px rgba(0,0,0,0.10));
}

.template-editor-page-canvas--snippet .template-editor__document::after {
    bottom: 0;
    clip-path: polygon(
        0% 100%, 100% 100%,
        100% 50%,
        96% 0%, 92% 52%, 88% 5%, 84% 58%, 80% 0%,
        76% 45%, 72% 10%, 68% 55%, 64% 0%, 60% 62%,
        56% 8%, 52% 50%, 48% 0%, 44% 58%, 40% 12%,
        36% 45%, 32% 0%, 28% 55%, 24% 8%, 20% 62%,
        16% 0%, 12% 52%, 8% 5%, 4% 58%, 0% 50%
    );
    filter: drop-shadow(0 -3px 3px rgba(0,0,0,0.10));
}


/* Quote viewer action bar */
.quote-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.quote-view__sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--md-sys-color-surface-container-lowest);
    border-right: 1px solid var(--md-sys-color-outline-variant);
    overflow-y: auto;
    padding: 12px 0;
}
.quote-view__sidebar-value {
    font-size: 0.85rem;
    color: var(--md-sys-color-on-surface);
    line-height: 1.4;
}

.quote-status-chip {
    margin-left: auto;
    padding: 2px 12px;
    border-radius: 12px;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font-size: 0.8rem;
    font-weight: 600;
}

/* Quote/template buttons */
.template-editor-btn[hidden] { display: none; }
.template-editor-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border: 1.5px solid var(--md-sys-color-outline);
    border-radius: 20px;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s;
}

.template-editor-btn:hover { background: var(--md-sys-color-surface-container); }
.template-editor-btn--primary { border-color: var(--md-sys-color-primary); color: var(--md-sys-color-primary); }
.template-editor-btn--primary:hover { background: var(--md-sys-color-primary-container); }
.template-editor-btn--accept { border-color: #2e7d32; color: #2e7d32; }
.template-editor-btn--accept:hover { background: #e8f5e9; }
.template-editor-btn--cancel { border-color: var(--md-sys-color-outline); color: var(--md-sys-color-outline); }
.template-editor-btn--danger { border-color: var(--md-sys-color-error); color: var(--md-sys-color-error); }
.template-editor-btn--danger:hover { background: var(--md-sys-color-error-container); }

.template-editor-save-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #81c784;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.2s, transform 0.2s;
}
.template-editor-save-status .material-symbols-outlined { font-size: 18px; }
.template-editor-save-status--visible { opacity: 1; transform: translateY(0); }
.template-editor-save-status--error { color: #ff8a80; }
.template-editor-btn .material-symbols-outlined { font-size: 16px; }

.template-editor-preview-group {
    display: inline-flex;
    align-items: center;
}

.template-editor-preview-group .template-editor-preview-btn {
    border-radius: 20px 0 0 20px;
}

.template-editor-preview-chip {
    height: 30px;
    padding: 0 12px;
    border-radius: 0 20px 20px 0;
    border: 1px solid rgba(255,255,255,0.5);
    border-left: none;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}
.template-editor-preview-chip:hover { background: rgba(255,255,255,0.22); }

/* Toolbar action buttons sit on the transparent blue header - override the
   light-surface styling that .template-editor-btn uses elsewhere (calc-field
   editor, image config dialogs, which are on white backgrounds). */
.template-editor-editor__toolbar-actions .template-editor-btn {
    border-color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.12);
    color: #fff;
}
.template-editor-editor__toolbar-actions .template-editor-btn:hover {
    background: rgba(255,255,255,0.22);
}
.template-editor-editor__toolbar-actions .template-editor-btn--primary {
    border-color: #fff;
    background: #fff;
    color: var(--md-sys-color-primary);
}
.template-editor-editor__toolbar-actions .template-editor-btn--primary:hover {
    background: rgba(255,255,255,0.85);
}
.template-editor-editor__toolbar-actions .template-editor-btn--danger {
    border-color: rgba(255,255,255,0.5);
    color: #ffcdd2;
}
.template-editor-editor__toolbar-actions .template-editor-btn--danger:hover {
    background: rgba(255,82,82,0.3);
}

/* In preview mode: hide palette, canvas, page-format and save buttons.
   canvas-column (not just the inner page-canvas) must be hidden - it's the
   flex:1 sibling that shares the row with the preview pane, so leaving it
   present (even empty) squeezes the preview pane into half the row instead
   of letting it take the full width. */
.template-editor-workspace--preview .template-editor-editor__palette { display: none; }
.template-editor-workspace--preview .template-editor-canvas-column   { display: none; }
.template-editor-editor:has(.template-editor-workspace--preview) [data-action="page-format"] { display: none; }
.template-editor-editor:has(.template-editor-workspace--preview) [data-action="save"]        { display: none; }

.template-editor-preview-pane {
    display: none;
    flex: 1;
    overflow: hidden;
}
.template-editor-workspace--preview .template-editor-preview-pane { display: flex; }

.template-editor-preview-pane__frame {
    flex: 1;
    border: none;
    width: 100%;
    height: 100%;
}

/* ── Template editor ─────────────────────────────────────────────────────── */

.template-editor-editor {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 40px);
    overflow: hidden;
}

.template-editor-editor__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0 20px 0;
    background: transparent;
    flex-shrink: 0;
}

.template-editor-editor__toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.template-editor-editor__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--md-sys-color-on-primary);
}

.template-editor-editor__breadcrumb-parent {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 600;
    color: var(--md-sys-color-on-primary);
    cursor: pointer;
    letter-spacing: 0.5px;
}

.template-editor-editor__breadcrumb-parent:hover {
    text-decoration: underline;
}

.template-editor-editor__breadcrumb-icon {
    font-size: 28px;
}

.template-editor-editor__breadcrumb-sep {
    color: var(--md-sys-color-on-primary);
    opacity: 0.6;
}

.template-editor-editor__rename-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--md-sys-color-on-primary);
    opacity: 0.75;
    cursor: pointer;
}
.template-editor-editor__rename-btn:hover { opacity: 1; background: rgba(255,255,255,0.15); }
.template-editor-editor__rename-btn .material-symbols-outlined { font-size: 18px; }

.template-editor-editor__datatype-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.4);
    color: var(--md-sys-color-on-primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.template-editor-editor__toolbar-actions {
    display: flex;
    gap: 8px;
}

.template-editor-editor__workspace {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Element palette sidebar */
.template-editor-editor__palette {
    width: 220px;
    flex-shrink: 0;
    background: var(--md-sys-color-surface-container-lowest);
    border-right: 1px solid var(--md-sys-color-outline-variant);
    overflow: hidden;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
}

.template-editor-editor__palette-section { padding: 0 12px 16px; flex-shrink: 0; }

.template-editor-editor__palette-section--scrollable {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

.template-editor-editor__palette-section--scrollable .template-editor-editor__fields-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 12px;
}

.template-editor-editor__palette-heading {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--md-sys-color-outline);
    margin: 0 0 8px;
}

.template-editor-block {
    min-height: 48px;
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
    background: var(--md-sys-color-surface-container);
    border-radius: 6px;
    border: 1px dashed var(--md-sys-color-outline-variant);
    position: relative;
}

.template-editor-block__config-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0;
    transition: opacity 0.15s;
    padding: 0;
    line-height: 1;
    z-index: 1;
}
.template-editor-block:hover:not(:has(> .template-editor-row:hover)) > .template-editor-block__config-btn { opacity: 1; }
.template-editor-block__config-btn:hover {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
}

/* Rich text toolbar (floats above focused static text elements) */
.template-editor-text-toolbar {
    position: fixed;
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    padding: 4px 6px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
    z-index: 150;
}

.template-editor-text-toolbar[hidden] { display: none; }

.template-editor-text-toolbar__btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    color: var(--md-sys-color-on-surface);
    padding: 0;
    flex-shrink: 0;
}

.template-editor-text-toolbar__btn:hover {
    background: var(--md-sys-color-surface-container-highest);
}

.template-editor-text-toolbar__btn--active {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.template-editor-text-toolbar__btn .material-symbols-outlined {
    font-size: 18px;
}

.template-editor-text-toolbar__sep {
    width: 1px;
    height: 20px;
    background: var(--md-sys-color-outline-variant);
    margin: 0 2px;
    flex-shrink: 0;
}

.template-editor-text-toolbar__font-size {
    width: 44px;
    padding: 4px 4px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 4px;
    font-size: 0.8rem;
    text-align: center;
    flex-shrink: 0;
}

.template-editor-text-toolbar__btn--delete {
    color: var(--md-sys-color-error);
}

.template-editor-text-toolbar__btn--delete:hover {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
}

.template-editor-text-toolbar__font-color {
    width: 28px;
    height: 28px;
    padding: 2px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
}

/* Block config popup */
.template-editor-block-config {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}
.template-editor-block-config[hidden] { display: none; }

.template-editor-block-config__panel {
    background: var(--md-sys-color-surface);
    border-radius: 12px;
    padding: 24px;
    width: 380px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}

.template-editor-block-config__title { margin: 0; font-size: 1rem; font-weight: 600; }

.template-editor-block-config__row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.template-editor-block-config__columns-row { flex-direction: column; align-items: flex-start; }

.template-editor-block-config__label {
    font-size: 0.82rem;
    color: var(--md-sys-color-on-surface-variant);
    min-width: 82px;
}

.template-editor-block-config__alignment { display: flex; gap: 4px; }

.template-editor-block-config__align-btn {
    background: none;
    border: 1.5px solid var(--md-sys-color-outline-variant);
    border-radius: 6px;
    cursor: pointer;
    padding: 4px 8px;
    color: var(--md-sys-color-on-surface-variant);
    display: flex;
    align-items: center;
}
.template-editor-block-config__align-btn .material-symbols-outlined { font-size: 18px; }
.template-editor-block-config__align-btn--active {
    border-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container);
}

.template-editor-block-config__input-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--md-sys-color-on-surface-variant);
}

.template-editor-block-config__padding,
.template-editor-block-config__font-size {
    width: 64px;
    padding: 4px 8px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 6px;
    font-size: 0.9rem;
}

.template-editor-block-config__font-color {
    width: 44px;
    height: 32px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 6px;
    cursor: pointer;
    padding: 2px;
}

.template-editor-block-config__columns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.template-editor-block-config__col-btn {
    padding: 5px;
    border: 1.5px solid var(--md-sys-color-outline-variant);
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
}
.template-editor-block-config__col-btn:hover { border-color: var(--md-sys-color-primary); }
.template-editor-block-config__col-btn--selected {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container);
}

.template-editor-block-config__col-preview {
    display: flex;
    gap: 2px;
    height: 28px;
    width: 52px;
}
.template-editor-block-config__col-preview > div {
    background: var(--md-sys-color-primary);
    border-radius: 2px;
    min-width: 4px;
    opacity: 0.5;
}
.template-editor-block-config__col-btn--selected .template-editor-block-config__col-preview > div { opacity: 1; }

.template-editor-block-config__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 4px;
}

.template-editor-block-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--md-sys-color-on-surface);
    user-select: none;
    margin-bottom: 2px;
}
.template-editor-block-toggle:hover { background: var(--md-sys-color-surface-container); }
.template-editor-block-toggle__icon { font-size: 22px; color: var(--md-sys-color-primary); }
.template-editor-block-toggle--off .template-editor-block-toggle__icon { color: var(--md-sys-color-outline); }
.template-editor-block-toggle--off { color: var(--md-sys-color-outline); }

.template-editor-palette-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--md-sys-color-on-surface);
    user-select: none;
    margin-bottom: 2px;
}

.template-editor-palette-item:hover { background: var(--md-sys-color-surface-container); }
.template-editor-palette-item .material-symbols-outlined { font-size: 18px; color: var(--md-sys-color-primary); }

.template-editor-field-accordion__section { margin-bottom: 2px; }

.template-editor-field-accordion__header {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 4px 6px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    border-radius: 4px;
}

.template-editor-field-accordion__header:hover { background: var(--md-sys-color-surface-container); }

.template-editor-field-accordion__header .material-symbols-outlined {
    font-size: 16px;
    transition: transform 0.15s;
    flex-shrink: 0;
}

.template-editor-field-accordion__section--open .template-editor-field-accordion__header .material-symbols-outlined {
    transform: rotate(90deg);
}

.template-editor-field-accordion__body {
    padding: 2px 4px 4px 16px;
    display: none;
    flex-direction: column;
    gap: 2px;
}

.template-editor-field-accordion__section--open .template-editor-field-accordion__body {
    display: flex;
}

.template-editor-field-accordion__body .template-editor-field-ref { margin-bottom: 0; }

.template-editor-editor__fields-empty {
    font-size: 0.8rem;
    color: var(--md-sys-color-error);
    padding: 4px 6px;
    margin: 0;
}

.template-editor-field-ref {
    font-size: 0.78rem;
    font-family: monospace;
    padding: 3px 6px;
    background: var(--md-sys-color-surface-container);
    border-radius: 4px;
    margin-bottom: 3px;
    color: var(--md-sys-color-on-surface-variant);
    cursor: default;
}

/* Calculated Fields palette section */
.template-editor-editor__calc-fields-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 8px;
}
.template-editor-calc-field-entry {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
}
.template-editor-calc-field-entry:hover { background: var(--md-sys-color-surface-container); }
.template-editor-calc-field-entry__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.template-editor-calc-field-entry__delete {
    display: flex;
    align-items: center;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.1s;
    color: var(--md-sys-color-outline);
    flex-shrink: 0;
}
.template-editor-calc-field-entry__delete .material-symbols-outlined { font-size: 16px; }
.template-editor-calc-field-entry__delete:hover { color: var(--md-sys-color-error); }
.template-editor-calc-field-entry:hover .template-editor-calc-field-entry__delete { opacity: 1; }
.template-editor-calc-field-new-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 8px;
    background: none;
    border: 1px dashed var(--md-sys-color-outline-variant);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--md-sys-color-primary);
    margin-top: 4px;
}
.template-editor-calc-field-new-btn:hover { background: var(--md-sys-color-surface-container); }
.template-editor-calc-field-new-btn .material-symbols-outlined { font-size: 16px; }
.template-editor-calc-fields-empty {
    font-size: 0.78rem;
    color: var(--md-sys-color-outline);
    padding: 4px 6px;
    margin: 0;
    font-style: italic;
}

/* ── Calculated field editor — canvas-based redesign ─────────────────────── */
.template-editor-calc-editor {
    position: absolute;
    inset: 0;
    background: var(--md-sys-color-surface);
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.template-editor-calc-editor[hidden] { display: none; }
.template-editor-calc-editor__header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface);
    z-index: 1;
    flex-shrink: 0;
}
.template-editor-calc-editor__name-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.template-editor-calc-editor__name-input {
    flex: 1;
    min-width: 0;
    padding: 5px 10px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--md-sys-color-surface-container-lowest);
}
.template-editor-calc-editor__key-display {
    font-family: monospace;
    font-size: 0.78rem;
    color: var(--md-sys-color-outline);
    background: var(--md-sys-color-surface-container);
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.template-editor-calc-editor__context-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-left: 1px solid var(--md-sys-color-outline-variant);
    padding-left: 12px;
}
.template-editor-calc-editor__context-label {
    font-size: 0.8rem;
    color: var(--md-sys-color-outline);
    white-space: nowrap;
}
.template-editor-calc-editor__context-sel {
    padding: 4px 8px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 6px;
    font-size: 0.82rem;
    background: var(--md-sys-color-surface-container-lowest);
    cursor: pointer;
}
.template-editor-calc-fields-subtitle {
    font-size: 0.67rem;
    font-weight: 600;
    color: var(--md-sys-color-outline);
    padding: 6px 6px 2px;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.template-editor-calc-editor__header-actions { display: flex; gap: 8px; flex-shrink: 0; }
.template-editor-calc-editor__layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── Operation palette ──────────────────────────────────────────────────── */
.template-editor-calc-editor__op-palette {
    width: 148px;
    flex-shrink: 0;
    border-right: 1px solid var(--md-sys-color-outline-variant);
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    background: var(--md-sys-color-surface-container-lowest);
}
.template-editor-calc-editor__op-palette-heading {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--md-sys-color-outline);
    padding: 0 4px 4px;
}
.calc-op-palette-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 8px 10px;
    background: none;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s, border-color 0.1s;
}
.calc-op-palette-btn:hover {
    background: var(--md-sys-color-primary-container);
    border-color: var(--md-sys-color-primary);
}
.calc-op-palette-btn .material-symbols-outlined {
    font-size: 18px;
    color: var(--md-sys-color-primary);
    margin-bottom: 2px;
}
.calc-op-palette-btn__label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
    line-height: 1.2;
}
.calc-op-palette-btn__hint {
    font-size: 0.7rem;
    color: var(--md-sys-color-outline);
    line-height: 1.2;
}

/* ── Canvas area ────────────────────────────────────────────────────────── */
.template-editor-calc-editor__canvas-area {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 16px;
}

/* ── Workspaces ─────────────────────────────────────────────────────────── */
.calc-workspace {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 60px;
}
.calc-workspace--root:empty::after {
    content: '← Click an operation from the palette to build this field';
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    border: 2px dashed var(--md-sys-color-outline-variant);
    border-radius: 10px;
    color: var(--md-sys-color-outline);
    font-size: 0.82rem;
    font-style: italic;
}
.calc-workspace--loop-child,
.calc-workspace--pick-child {
    padding: 8px;
    border: 1px dashed var(--md-sys-color-outline-variant);
    border-radius: 8px;
    background: var(--md-sys-color-surface-container-lowest);
    min-height: 50px;
}
.calc-workspace--loop-child:empty::after {
    content: '← Add operations for each row';
    display: flex;
    align-items: center;
    height: 40px;
    color: var(--md-sys-color-outline);
    font-size: 0.78rem;
    font-style: italic;
    padding: 0 8px;
}
.calc-workspace--pick-child:empty::after {
    content: '← Add operations for the selected record';
    display: flex;
    align-items: center;
    height: 40px;
    color: var(--md-sys-color-outline);
    font-size: 0.78rem;
    font-style: italic;
    padding: 0 8px;
}

/* ── Join pill ──────────────────────────────────────────────────────────── */
.calc-join {
    display: flex;
    justify-content: center;
    padding: 4px 0;
    position: relative;
}
.calc-join::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 1px;
    height: 100%;
    background: var(--md-sys-color-outline-variant);
    z-index: 0;
}
.calc-join__select {
    position: relative;
    z-index: 1;
    padding: 2px 8px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-primary);
    cursor: pointer;
    letter-spacing: 0.04em;
}

/* ── Operation blocks ───────────────────────────────────────────────────── */
.calc-op-block {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 10px;
    background: var(--md-sys-color-surface);
    overflow: hidden;
}
.calc-op-block + .calc-op-block { margin-top: 0; }
.calc-op-block__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--md-sys-color-surface-container-low);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.calc-op-block--field    .calc-op-block__header { background: color-mix(in srgb, var(--md-sys-color-primary-container) 30%, var(--md-sys-color-surface)); }
.calc-op-block--aggregate .calc-op-block__header { background: color-mix(in srgb, var(--md-sys-color-secondary-container) 35%, var(--md-sys-color-surface)); }
.calc-op-block--concat   .calc-op-block__header { background: color-mix(in srgb, var(--md-sys-color-tertiary-container) 30%, var(--md-sys-color-surface)); }
.calc-op-block--conditional .calc-op-block__header { background: color-mix(in srgb, var(--md-sys-color-tertiary-container) 30%, var(--md-sys-color-surface)) }
.calc-op-block--loop     .calc-op-block__header { background: color-mix(in srgb, var(--md-sys-color-surface-variant) 60%, var(--md-sys-color-surface)); }
.calc-op-block--pick     .calc-op-block__header { background: color-mix(in srgb, var(--md-sys-color-tertiary-container) 50%, var(--md-sys-color-surface)); }
.calc-op-block--count    .calc-op-block__header { background: color-mix(in srgb, var(--md-sys-color-secondary-container) 55%, var(--md-sys-color-surface)); }
.calc-op-block--date     .calc-op-block__header { background: color-mix(in srgb, var(--md-sys-color-primary-container) 55%, var(--md-sys-color-surface)); }
.calc-op-block--loop .calc-op-block__type-label { flex: 0 0 auto; }
.calc-op-block--aggregate .calc-op-block__type-label { flex: 0 0 auto; }
.calc-op-block--pick .calc-op-block__type-label { flex: 0 0 auto; }
.calc-op-block--count .calc-op-block__type-label { flex: 0 0 auto; }
.calc-op-block--date .calc-op-block__type-label { flex: 0 0 auto; }
.calc-op-block--aggregate .calc-op-block__agg-source,
.calc-op-block--count .calc-op-block__count-source {
    flex: 0 0 auto;
    min-width: 0;
    padding: 3px 8px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    font-size: 0.82rem;
    background: var(--md-sys-color-surface-container-lowest);
}
.calc-op-block--loop .calc-op-block__loop-source,
.calc-op-block--pick .calc-op-block__pick-source {
    flex: 0 0 auto;
    min-width: 0;
    padding: 3px 8px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    font-size: 0.82rem;
    background: var(--md-sys-color-surface-container-lowest);
}
.calc-op-block__icon {
    font-size: 18px;
    color: var(--md-sys-color-primary);
    flex-shrink: 0;
}
.calc-op-block__type-label {
    flex: 0 0 auto;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--md-sys-color-on-surface-variant);
}
.calc-op-block__header-hint {
    font-size: 0.72rem;
    font-weight: 400;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.7;
    flex: 0 0 auto;
}
.calc-op-block__delete {
    display: flex;
    align-items: center;
    padding: 3px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--md-sys-color-outline);
    border-radius: 4px;
    flex-shrink: 0;
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.15s;
}
.calc-op-block:hover .calc-op-block__delete { opacity: 1; }
.calc-op-block__delete:hover { color: var(--md-sys-color-error); background: var(--md-sys-color-error-container); }
.calc-op-block__delete .material-symbols-outlined { font-size: 16px; }
.calc-op-block__body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.calc-op-block__row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.calc-op-block__row-label {
    font-size: 0.78rem;
    color: var(--md-sys-color-outline);
    min-width: 60px;
    flex-shrink: 0;
}
.calc-op-block__of-label {
    font-size: 0.78rem;
    color: var(--md-sys-color-outline);
    flex-shrink: 0;
}
.calc-op-block__section-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--md-sys-color-outline);
    margin-bottom: 2px;
}
.calc-op-block__parts,
.calc-op-block__conditions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.calc-op-block__add-row-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: none;
    border: 1px dashed var(--md-sys-color-outline-variant);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--md-sys-color-primary);
    align-self: flex-start;
}
.calc-op-block__add-row-btn:hover { background: var(--md-sys-color-primary-container); }
.calc-op-block__add-row-btn .material-symbols-outlined { font-size: 15px; }
.calc-op-block__else-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
.calc-op-block__else-input {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    font-size: 0.82rem;
    background: var(--md-sys-color-surface-container-lowest);
}

/* ── Loop block specifics ───────────────────────────────────────────────── */
.calc-op-block__child-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: var(--md-sys-color-surface-container-lowest);
    border-radius: 6px;
    border: 1px solid var(--md-sys-color-outline-variant);
}
.calc-op-block__child-add-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.calc-op-block__child-add-btn {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    font-size: 0.75rem;
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 20px;
    cursor: pointer;
    color: var(--md-sys-color-on-surface-variant);
}
.calc-op-block__child-add-btn:hover { background: var(--md-sys-color-primary-container); border-color: var(--md-sys-color-primary); color: var(--md-sys-color-primary); }
.calc-op-block__child-add-btn .material-symbols-outlined { font-size: 13px; }
.calc-op-block__agg-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px 0;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
.calc-op-block__loop-agg-fn,
.calc-op-block__loop-sep {
    padding: 4px 8px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    font-size: 0.82rem;
    background: var(--md-sys-color-surface-container-lowest);
}
.calc-op-block__loop-sep { flex: 1; min-width: 0; }

/* ── Concat part rows ───────────────────────────────────────────────────── */
.calc-part-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    background: var(--md-sys-color-surface-container);
    border-radius: 6px;
}
.calc-part-toggle { display: flex; border: 1px solid var(--md-sys-color-outline-variant); border-radius: 4px; overflow: hidden; flex-shrink: 0; }
.calc-part-toggle__btn {
    padding: 2px 8px;
    font-size: 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--md-sys-color-outline);
}
.calc-part-toggle__btn--active { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-primary); font-weight: 600; }
.calc-part-row__field-sel,
.calc-part-row__text {
    min-width: 0;
    padding: 3px 6px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    font-size: 0.82rem;
    background: var(--md-sys-color-surface-container-lowest);
}
.calc-part-row__field-sel { flex: 0 0 auto; }
.calc-part-row__text { flex: 1; }

/* ── Condition rows ─────────────────────────────────────────────────────── */
.calc-pick-cond-row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 6px;
    background: var(--md-sys-color-surface-container);
    border-radius: 6px;
    flex-wrap: wrap;
}
.calc-pick-cond-row__field,
.calc-pick-cond-row__op {
    padding: 3px 6px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    font-size: 0.82rem;
    background: var(--md-sys-color-surface-container-lowest);
    flex-shrink: 0;
}
.calc-pick-cond-row__value {
    flex: 1;
    min-width: 60px;
    padding: 3px 6px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    font-size: 0.82rem;
    background: var(--md-sys-color-surface-container-lowest);
}
.calc-op-block__pick-conditions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.calc-cond-row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 6px;
    background: var(--md-sys-color-surface-container);
    border-radius: 6px;
    flex-wrap: wrap;
}
.calc-cond-row__field,
.calc-cond-row__op {
    padding: 3px 6px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    font-size: 0.82rem;
    background: var(--md-sys-color-surface-container-lowest);
    flex-shrink: 0;
}
.calc-cond-row__value,
.calc-cond-row__result {
    flex: 1;
    min-width: 60px;
    padding: 3px 6px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    font-size: 0.82rem;
    background: var(--md-sys-color-surface-container-lowest);
}
.calc-cond-row__arrow {
    color: var(--md-sys-color-outline);
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* ── Date expressions ───────────────────────────────────────────────────────
   Used on condition rows (the Date alternative to a typed value) and in both modes of the Date
   block. Kept as inline groups so a date expression reads as one phrase - "Today + 12 months" -
   rather than as three unrelated controls, and so it wraps as a unit on a narrow canvas. */
.calc-date-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Wraps between the operand and the offset when the row is narrow - never inside either. */
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}
.calc-date-operand,
.calc-date-offset {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}
/* Any class that sets `display` outranks the UA stylesheet's [hidden] rule, so the groups this
   editor hides imperatively - the date expression on a Text-mode condition row, and whichever of
   the Date block's two modes is inactive - need it restated. Same pattern used elsewhere in this
   file for the same reason. */
.calc-date-value[hidden],
.calc-op-block__date-shift[hidden],
.calc-op-block__date-diff[hidden] { display: none !important; }
.calc-date-offset__sign {
    color: var(--md-sys-color-outline);
    font-size: 0.82rem;
    flex-shrink: 0;
}
.calc-date-value__base,
.calc-date-value__field,
.calc-date-value__literal,
.calc-date-value__offset,
.calc-date-value__unit,
.calc-date-base__base,
.calc-date-base__field,
.calc-date-base__literal,
.calc-date-from__base,
.calc-date-from__field,
.calc-date-from__literal,
.calc-date-to__base,
.calc-date-to__field,
.calc-date-to__literal,
.calc-date-shift__offset,
.calc-date-shift__unit,
.calc-date-diff__unit,
.calc-op-block__date-mode {
    padding: 3px 6px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    font-size: 0.82rem;
    background: var(--md-sys-color-surface-container-lowest);
    flex-shrink: 0;
}
.calc-date-value__literal,
.calc-date-base__literal,
.calc-date-from__literal,
.calc-date-to__literal { width: 8.5rem; }
.calc-date-value__offset,
.calc-date-shift__offset { width: 4rem; }

/* ── Generic select/input inside blocks ─────────────────────────────────── */
.calc-op-block__field-sel,
.calc-op-block__agg-source,
.calc-op-block__agg-fn,
.calc-op-block__agg-field,
.calc-op-block__count-source,
.calc-op-block__count-field,
.calc-op-block__count-sep {
    padding: 4px 8px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    font-size: 0.82rem;
    background: var(--md-sys-color-surface-container-lowest);
}
.calc-op-block__field-sel,
.calc-op-block__agg-fn,
.calc-op-block__agg-field,
.calc-op-block__count-field,
.calc-op-block__count-sep { flex: 0 0 auto; min-width: 0; }

/* ── Row action buttons (move up/down, delete) ──────────────────────────── */
.calc-row-btn {
    display: flex;
    align-items: center;
    padding: 3px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--md-sys-color-outline);
    border-radius: 4px;
    flex-shrink: 0;
}
.calc-row-btn:hover { background: var(--md-sys-color-surface-container-high); }
.calc-row-btn .material-symbols-outlined { font-size: 15px; }
.calc-row-btn--delete:hover { color: var(--md-sys-color-error); }

/* ── Error bar ──────────────────────────────────────────────────────────── */
.template-editor-calc-editor__error {
    padding: 8px 16px;
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
    font-size: 0.82rem;
    flex-shrink: 0;
}
.template-editor-calc-editor__error[hidden] { display: none; }

/* ── Output Transform ───────────────────────────────────────────────────── */
.calc-output-transform {
    margin-top: 20px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 10px;
    overflow: hidden;
}
.calc-output-transform__heading {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--md-sys-color-surface-container-low);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--md-sys-color-on-surface-variant);
}
.calc-output-transform__heading .material-symbols-outlined { font-size: 16px; }
.calc-output-transform__optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-style: italic;
    opacity: 0.7;
}
.calc-output-transform__rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px 0;
}
.calc-output-transform__row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.calc-output-transform__row-value,
.calc-output-transform__row-label {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    font-size: 0.82rem;
    background: var(--md-sys-color-surface-container-lowest);
    min-width: 0;
}
.calc-output-transform__row-arrow {
    color: var(--md-sys-color-outline);
    font-size: 0.9rem;
    flex-shrink: 0;
}
.calc-output-transform__add-btn {
    margin: 8px 12px 0;
}
.calc-output-transform__else-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    margin-top: 6px;
    border-top: 1px dashed var(--md-sys-color-outline-variant);
}
.calc-output-transform__else-label {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--md-sys-color-on-surface-variant);
    flex-shrink: 0;
    width: 28px;
    text-align: right;
}
.calc-output-transform__else-input {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    font-size: 0.82rem;
    background: var(--md-sys-color-surface-container-lowest);
    min-width: 0;
}

/* Insert hint bar */
.template-editor-insert-hint {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font-size: 0.85rem;
    font-weight: 500;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.template-editor-insert-hint[hidden] { display: none; }
.template-editor-insert-hint .material-symbols-outlined { font-size: 18px; }

/* Named zones — permanent faint border */
.template-editor-zone--header,
.template-editor-zone--body,
.template-editor-zone--footer {
    outline: 1px dashed var(--md-sys-color-outline-variant);
    outline-offset: -1px;
}

.template-editor-zone--body { flex: 1; }

.template-editor-zone--header,
.template-editor-zone--footer {
    min-height: 60px;
}

/* Selection mode — zones become click targets */
.template-editor-page-canvas--selecting { cursor: crosshair; }

.template-editor-page-canvas--selecting .template-editor-zone {
    outline: 2px dashed var(--md-sys-color-outline);
    outline-offset: -2px;
    min-height: 40px;
    cursor: copy;
}

.template-editor-page-canvas--selecting .template-editor-zone:hover {
    outline-color: var(--md-sys-color-primary);
    background: color-mix(in srgb, var(--md-sys-color-primary-container) 50%, transparent);
}

/* Drag handles and editable rows */
.template-editor-drag-handle {
    position: absolute;
    left: -28px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--md-sys-color-outline-variant);
    cursor: grab;
    opacity: 0;
    transition: opacity 0.15s;
    user-select: none;
}

.template-editor-row--editable { position: relative; }
.template-editor-row--editable:hover .template-editor-drag-handle { opacity: 1; }
.template-editor-row--editable:hover { outline: 1px dashed var(--md-sys-color-outline-variant); outline-offset: 2px; }
.template-editor-row--dragging { opacity: 0.4; }
.template-editor-row--drag-over { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }

.template-editor-row__delete-btn {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    color: var(--md-sys-color-error);
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s;
}

.template-editor-row__delete-btn .material-symbols-outlined { font-size: 16px; }

.template-editor-row--editable:hover .template-editor-row__delete-btn { opacity: 1; }

.template-editor-row__delete-btn:hover {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
    opacity: 1;
}

.template-editor-field-pair--editable,
.template-editor-static-text--editable {
    cursor: pointer;
}
.template-editor-field-pair--editable:hover { background: var(--md-sys-color-primary-container); border-radius: 4px; padding: 1px 4px; }

/* Inline field chip (editor-only; class is stripped on save) */
.template-editor-inline-field {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-radius: 3px;
    padding: 0 4px;
    cursor: pointer;
    font-style: italic;
    white-space: nowrap;
    user-select: none;
}

.template-editor-inline-field:empty::before {
    content: '⋯';
    opacity: 0.6;
}

/* Ensure list markers are always visible inside template document content */
.template-editor__document ul,
.template-editor-static-text ul {
    list-style: disc;
    padding-left: 1.5em;
}
.template-editor__document ol,
.template-editor-static-text ol {
    list-style: decimal;
    padding-left: 1.5em;
}


/* Element config panel */
.template-editor-element-config {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.template-editor-element-config[hidden] { display: none; }

.template-editor-element-config__panel {
    background: var(--md-sys-color-surface);
    border-radius: 12px;
    padding: 24px;
    width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}

.template-editor-element-config__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.template-editor-element-config__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.template-editor-element-config__col-label {
    font-size: 0.8rem;
    color: var(--md-sys-color-on-surface-variant);
    white-space: nowrap;
    flex-shrink: 0;
}

.template-editor-element-config__field,
.template-editor-element-config__label-text {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 6px;
    font-size: 0.9rem;
}

.template-editor-element-config__format {
    padding: 6px 10px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 6px;
    font-size: 0.9rem;
}

.template-editor-element-config__section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-top: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.template-editor-element-config__disable-label-toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
    margin-left: auto;
    cursor: pointer;
}

.template-editor-element-config__label-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: opacity 0.15s;
}

.template-editor-element-config__label-section--disabled {
    opacity: 0.35;
    pointer-events: none;
}

.template-editor-element-config__style-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.template-editor-element-config__align-group {
    display: flex;
    align-items: center;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 6px;
    overflow: hidden;
}

.template-editor-element-config__align-btn,
.template-editor-element-config__style-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--md-sys-color-on-surface-variant);
    padding: 0;
    flex-shrink: 0;
}

.template-editor-element-config__style-btn {
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 6px;
}

.template-editor-element-config__align-btn .material-symbols-outlined,
.template-editor-element-config__style-btn .material-symbols-outlined {
    font-size: 16px;
}

.template-editor-element-config__align-btn--active {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.template-editor-element-config__style-btn--active {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.template-editor-element-config__font-size {
    width: 48px;
    padding: 4px 6px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 6px;
    font-size: 0.85rem;
    text-align: center;
    flex-shrink: 0;
}

.template-editor-element-config__px-label {
    font-size: 0.8rem;
    color: var(--md-sys-color-on-surface-variant);
}

.template-editor-element-config__font-color {
    width: 28px;
    height: 28px;
    padding: 2px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
}

.template-editor-element-config__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 4px;
}

/* Image element in canvas */
.template-editor-image-el {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 4px;
    transition: outline 0.1s;
}
.template-editor-row--editable .template-editor-image-el:hover {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}
.template-editor-image-el {
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 80px;
}

/* Image config popup */
.template-editor-image-config {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}
.template-editor-image-config[hidden] { display: none; }

.template-editor-image-config__panel {
    background: var(--md-sys-color-surface);
    border-radius: 12px;
    padding: 24px;
    width: 440px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}

.template-editor-image-config__title { margin: 0; font-size: 1rem; font-weight: 600; }

.template-editor-image-config__source-tabs {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    padding-bottom: 12px;
}
.template-editor-image-config__source-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1.5px solid var(--md-sys-color-outline-variant);
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    background: none;
    color: var(--md-sys-color-on-surface-variant);
}
.template-editor-image-config__source-tab .material-symbols-outlined { font-size: 16px; }
.template-editor-image-config__source-tab--active {
    border-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container);
}

.template-editor-image-config__section {
    min-height: 100px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.template-editor-image-config__section[hidden] { display: none; }

.template-editor-image-config__upload-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.template-editor-image-config__upload-name {
    font-size: 0.82rem;
    color: var(--md-sys-color-on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.template-editor-image-config__upload-preview {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    background: var(--md-sys-color-surface-variant);
}
.template-editor-image-config__preview-img {
    max-width: 100%;
    max-height: 160px;
    object-fit: contain;
    display: block;
}

.template-editor-image-config__icon-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.template-editor-image-config__icon-sub {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.template-editor-image-config__icon-sub--center { align-items: center; }
.template-editor-image-config__sub-label {
    font-size: 0.75rem;
    color: var(--md-sys-color-on-surface-variant);
}
.template-editor-image-config__icon-name-group {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 6px;
    overflow: hidden;
    width: 140px;
}
.template-editor-image-config__icon-name {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    border: none;
    font-size: 0.9rem;
}
.template-editor-image-config__icon-browse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-left: 1px solid var(--md-sys-color-outline);
    background: var(--md-sys-color-surface-variant);
    cursor: pointer;
    padding: 0 8px;
}
.template-editor-image-config__icon-browse-btn:hover {
    background: var(--md-sys-color-secondary-container);
}
.template-editor-image-config__icon-browse-btn .material-symbols-outlined {
    font-size: 18px;
}
.template-editor-image-config__icon-colour {
    width: 44px;
    height: 34px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 6px;
    padding: 2px;
    cursor: pointer;
}
.template-editor-image-config__icon-preview {
    margin-left: auto;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    background: var(--md-sys-color-surface-variant);
}
.template-editor-image-config__icon-preview-icon { font-size: 32px; }

.template-editor-image-config__library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
    max-height: 180px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    background: var(--md-sys-color-surface-variant);
}
.template-editor-image-config__library-thumb {
    aspect-ratio: 1;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: var(--md-sys-color-surface);
}
.template-editor-image-config__library-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.template-editor-image-config__library-thumb--selected {
    border-color: var(--md-sys-color-primary);
}
.template-editor-image-config__library-loading,
.template-editor-image-config__library-empty {
    grid-column: 1/-1;
    text-align: center;
    padding: 24px;
    font-size: 0.85rem;
    color: var(--md-sys-color-on-surface-variant);
}

.template-editor-image-config__row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.template-editor-image-config__label {
    font-size: 0.82rem;
    color: var(--md-sys-color-on-surface-variant);
    min-width: 40px;
}
.template-editor-image-config__input-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--md-sys-color-on-surface-variant);
}
.template-editor-image-config__size {
    width: 72px;
    padding: 4px 8px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 6px;
    font-size: 0.9rem;
}

.template-editor-image-config__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 4px;
}
.template-editor-image-config__remove { margin-right: auto; }
.template-editor-image-config__remove[hidden] { display: none; }

/* ── Table element ─────────────────────────────────────────────────────────── */

.template-editor-table-el {
    position: relative;
    border: 1px dashed transparent;
    transition: border-color 0.15s;
    overflow: hidden;
    width: 100%;
}
.template-editor-table-el:hover { border-color: var(--md-sys-color-outline, #ccc); }

.template-editor-table__config-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #fff;
    border: 1px solid var(--md-sys-color-outline, #ccc);
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.15s;
    padding: 0;
}
.template-editor-table-el:hover .template-editor-table__config-btn { opacity: 1; }
.template-editor-table__config-btn:hover { background: var(--md-sys-color-surface-variant, #f0f0f0); }

.template-editor-table-el__header,
.template-editor-table-el__row { display: flex; }
.template-editor-table-el__header[hidden] { display: none; }
/* Border preset: none */
.template-editor-table-el--border-none .template-editor-table-el__th,
.template-editor-table-el--border-none .template-editor-table-el__td { border: none; background: none; }
.template-editor-table-el--border-none .template-editor-table-el__footer-cell { border: none; }
.template-editor-table-el--border-none .template-editor-table-el__footer-row:first-child { border-top: none; }

/* Border preset: hlines — horizontal dividers between header/body and body/footer only */
.template-editor-table-el--border-hlines .template-editor-table-el__th,
.template-editor-table-el--border-hlines .template-editor-table-el__td { border: none; background: none; }
.template-editor-table-el--border-hlines .template-editor-table-el__footer-cell { border: none; }
.template-editor-table-el--border-hlines .template-editor-table-el__header { border-bottom: 1px solid #e0e0e0; }
.template-editor-table-el--border-hlines .template-editor-table-el__footer-row:first-child { border-top: 1px solid #e0e0e0; }

/* Border preset: rows — horizontal lines top, between sections, and bottom */
.template-editor-table-el--border-rows .template-editor-table-el__th,
.template-editor-table-el--border-rows .template-editor-table-el__td { border: none; background: none; }
.template-editor-table-el--border-rows .template-editor-table-el__footer-cell { border: none; }
.template-editor-table-el--border-rows { border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; }
.template-editor-table-el--border-rows .template-editor-table-el__header { border-bottom: 1px solid #e0e0e0; }
.template-editor-table-el--border-rows .template-editor-table-el__footer-row:first-child { border-top: 1px solid #e0e0e0; }

/* Border preset: box — outer border only */
.template-editor-table-el--border-box .template-editor-table-el__th,
.template-editor-table-el--border-box .template-editor-table-el__td { border: none; background: none; }
.template-editor-table-el--border-box .template-editor-table-el__footer-cell { border: none; }
.template-editor-table-el--border-box .template-editor-table-el__footer-row:first-child { border-top: none; }
.template-editor-table-el--border-box { border: 1px solid #e0e0e0; }

/* Legacy no-border class maps to none */
.template-editor-table-el--no-border .template-editor-table-el__th,
.template-editor-table-el--no-border .template-editor-table-el__td { border: none; background: none; }
.template-editor-table-el--no-border .template-editor-table-el__footer-cell { border: none; }
.template-editor-table-el--no-border .template-editor-table-el__footer-row:first-child { border-top: none; }

/* Border preset selector UI */
.template-editor-table-config__border-presets { display: flex; gap: 4px; padding: 4px 0; }
.template-editor-table-config__border-preset {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 2px;
    border: 2px solid transparent; border-radius: 4px;
    background: none; cursor: pointer;
    color: var(--md-sys-color-on-surface, #1c1b1f);
    transition: border-color 0.15s, background 0.15s;
}
.template-editor-table-config__border-preset:hover { background: var(--md-sys-color-surface-variant, #f0f0f0); }
.template-editor-table-config__border-preset--selected {
    border-color: var(--md-sys-color-primary, #6750a4);
    background: var(--md-sys-color-primary-container, #eaddff);
}

.template-editor-table-el--wrap .template-editor-table-el__th,
.template-editor-table-el--wrap .template-editor-table-el__td { white-space: normal; overflow: visible; text-overflow: clip; }

.template-editor-table-el__th,
.template-editor-table-el__td {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid #e0e0e0;
    min-width: 0;
    white-space: nowrap;
    box-sizing: border-box;
}
.template-editor-table-el__th {
    position: relative;
    overflow: visible;
    background: #f5f5f5;
    font-weight: 600;
    font-size: 0.8em;
    cursor: pointer;
}
.template-editor-table-el__th:hover,
.template-editor-table-el__td:hover { background: rgba(0,0,0,0.04); }
.template-editor-table-el__td {
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.template-editor-table-el__resize-handle {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    bottom: 0;
    cursor: col-resize;
    z-index: 3;
    background: transparent;
    transition: background 0.15s;
}
.template-editor-table-el__resize-handle:hover,
.template-editor-table-el__resize-handle:active {
    background: var(--md-sys-color-primary, #1976d2);
    opacity: 0.35;
}

/* Table footer row */
.template-editor-table-el__footer:empty::after {
    content: 'Click to add footer row';
    display: block;
    padding: 6px 8px;
    font-size: 0.8em;
    font-style: italic;
    color: var(--md-sys-color-outline, #aaa);
    border-top: 2px solid var(--md-sys-color-outline-variant, #ccc);
    min-height: 32px;
    box-sizing: border-box;
    cursor: pointer;
}
.template-editor-table-el__footer-row {
    display: flex;
    align-items: center;
    cursor: default;
    transition: background 0.1s;
    min-height: 24px;
    position: relative;
}

.template-editor-table-el__footer-row:first-child {
    border-top: 2px solid var(--md-sys-color-outline-variant, #ccc);
}

.template-editor-table-el__footer-cell {
    flex: 1;
    padding: 0 8px;
    border: 1px solid #e0e0e0;
    min-width: 0;
    min-height: 24px;
    box-sizing: border-box;
    font-size: 0.8em;
    display: flex;
    align-items: center;
    position: relative;
    overflow: visible;
    cursor: pointer;
}
.template-editor-table-el__footer-cell:hover { background: rgba(0,0,0,0.04); }

.template-editor-footer__resize-handle {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    bottom: 0;
    cursor: col-resize;
    z-index: 3;
    background: transparent;
    transition: background 0.15s;
}
.template-editor-footer__resize-handle:hover,
.template-editor-footer__resize-handle:active {
    background: var(--md-sys-color-primary, #1976d2);
    opacity: 0.35;
}

.template-editor-footer__edit-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 4;
    padding: 2px 4px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    background: var(--md-sys-color-surface, #fff);
    border: 1px solid var(--md-sys-color-outline-variant, #ccc);
    border-radius: 4px;
    color: var(--md-sys-color-on-surface-variant, #555);
}
.template-editor-table-el__footer-row:hover .template-editor-footer__edit-btn {
    opacity: 1;
}

/* Table config header/footer option toggles */
.template-editor-table-config__options {
    padding: 0 16px 8px;
    display: flex;
    gap: 20px;
}
.template-editor-table-config__option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    user-select: none;
}
.template-editor-table-config__option input[type="checkbox"] { cursor: pointer; }

/* Footer row editor popup */
.template-editor-footer-editor {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.25);
    z-index: 200;
}
.template-editor-footer-editor[hidden] { display: none; }

.template-editor-footer-editor__panel {
    background: #fff;
    border-radius: 8px;
    padding: 18px 20px;
    width: 560px;
    max-width: 95vw;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.template-editor-footer-editor__title { margin: 0; font-size: 1rem; font-weight: 600; }

.template-editor-footer-editor__picker {
    display: flex;
    gap: 12px;
}
.template-editor-footer-editor__picker-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.template-editor-footer-editor__picker-heading {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--md-sys-color-on-surface-variant, #555);
    margin-bottom: 6px;
}
.template-editor-footer-editor__available-list,
.template-editor-footer-editor__selected-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    max-height: 200px;
    border: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);
    border-radius: 6px;
    padding: 4px;
    min-height: 80px;
}
.template-editor-footer-editor__avail-item {
    text-align: left;
    padding: 5px 8px;
    border: 1px solid var(--md-sys-color-outline, #ccc);
    border-radius: 4px;
    background: transparent;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.12s;
}
.template-editor-footer-editor__avail-item:hover { background: var(--md-sys-color-surface-container, #f0f0f0); }
.template-editor-footer-editor__avail-item--text {
    color: var(--md-sys-color-primary, #1976d2);
    border-color: var(--md-sys-color-primary, #1976d2);
    font-weight: 600;
}

.template-editor-footer-editor__sel-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
}
.template-editor-footer-editor__field-input,
.template-editor-footer-editor__text-input {
    flex: 1;
    height: 28px;
    padding: 0 6px;
    border: 1px solid var(--md-sys-color-outline, #ccc);
    border-radius: 4px;
    font-size: 0.82rem;
    min-width: 0;
}
.template-editor-footer-editor__format-select {
    height: 28px;
    padding: 0 4px;
    border: 1px solid var(--md-sys-color-outline, #ccc);
    border-radius: 4px;
    font-size: 0.82rem;
    flex-shrink: 0;
}
.template-editor-footer-editor__sel-btn {
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 16px;
    color: var(--md-sys-color-on-surface-variant, #555);
    flex-shrink: 0;
}
.template-editor-footer-editor__sel-btn:hover { background: var(--md-sys-color-surface-container, #f0f0f0); }
.template-editor-footer-editor__sel-btn--remove:hover { color: var(--md-sys-color-error, #ba1a1a); }

.template-editor-footer-editor__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ── Cell style popup ──────────────────────────────────────────────────────── */

.template-editor-cell-config {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.25);
    z-index: 200;
}
.template-editor-cell-config[hidden] { display: none; }

.template-editor-cell-config__panel {
    background: #fff;
    border-radius: 8px;
    padding: 18px 20px;
    width: 400px;
    max-width: 95vw;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.template-editor-cell-config__title { margin: 0; font-size: 1rem; font-weight: 600; }

.template-editor-cell-config__label-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.template-editor-cell-config__label-row[hidden] { display: none; }
.template-editor-cell-config__format-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.template-editor-cell-config__format-row[hidden] { display: none; }
.template-editor-cell-config__format {
    height: 30px;
    padding: 0 6px;
    border: 1px solid var(--md-sys-color-outline, #ccc);
    border-radius: 4px;
    font-size: 0.85rem;
}
.template-editor-cell-config__col-label { font-size: 0.8rem; color: var(--md-sys-color-on-surface-variant, #555); white-space: nowrap; }
.template-editor-cell-config__label-text {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--md-sys-color-outline, #ccc);
    border-radius: 4px;
    font-size: 0.9rem;
}

.template-editor-cell-config__style-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.template-editor-cell-config__align-group { display: flex; gap: 2px; }

.template-editor-cell-config__align-btn,
.template-editor-cell-config__style-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.12s;
}
.template-editor-cell-config__align-btn .material-symbols-outlined,
.template-editor-cell-config__style-btn .material-symbols-outlined { font-size: 18px; }
.template-editor-cell-config__align-btn:hover,
.template-editor-cell-config__style-btn:hover { background: var(--md-sys-color-surface-variant, #f0f0f0); }
.template-editor-cell-config__align-btn--active { background: var(--md-sys-color-primary-container, #d0e4ff); }
.template-editor-cell-config__style-btn--active { background: var(--md-sys-color-primary-container, #d0e4ff); }

.template-editor-cell-config__font-size {
    width: 52px;
    padding: 4px 6px;
    border: 1px solid var(--md-sys-color-outline, #ccc);
    border-radius: 4px;
    font-size: 0.85rem;
    text-align: center;
}
.template-editor-cell-config__font-color,
.template-editor-cell-config__bg-color {
    width: 34px;
    height: 30px;
    padding: 2px;
    border: 1px solid var(--md-sys-color-outline, #ccc);
    border-radius: 4px;
    cursor: pointer;
}

.template-editor-cell-config__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ── Table config popup ────────────────────────────────────────────────────── */

.template-editor-table-config {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.35);
    z-index: 200;
}
.template-editor-table-config[hidden] { display: none; }

.template-editor-table-config__panel {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    width: 480px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}

.template-editor-table-config__title { margin: 0 0 16px; font-size: 1rem; font-weight: 600; }

.template-editor-table-config__section-label {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--md-sys-color-on-surface-variant, #555);
    margin: 14px 0 6px;
}
.template-editor-table-config__section-label:first-of-type { margin-top: 0; }

.template-editor-table-config__relations { display: flex; flex-wrap: wrap; gap: 6px; }

.template-editor-table-config__relation-btn {
    padding: 6px 14px;
    border: 1px solid var(--md-sys-color-outline, #ccc);
    border-radius: 20px;
    background: transparent;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.template-editor-table-config__relation-btn:hover { border-color: var(--md-sys-color-primary); }
.template-editor-table-config__relation-btn--selected {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary, #fff);
    border-color: var(--md-sys-color-primary);
}

/* Two-column field picker */
.template-editor-table-config__picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    min-height: 160px;
}
.template-editor-table-config__picker-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}
.template-editor-table-config__picker-heading {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--md-sys-color-on-surface-variant, #666);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant, #ddd);
}
.template-editor-table-config__available-list,
.template-editor-table-config__selected-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
    max-height: 200px;
}
.template-editor-table-config__avail-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 4px 8px;
    border: 1px solid var(--md-sys-color-outline, #ccc);
    border-radius: 4px;
    background: none;
    font-size: 0.83rem;
    cursor: pointer;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 28px;
}
.template-editor-table-config__avail-item:hover {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container, #e8f0fe);
}
.template-editor-table-config__sel-item {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px 6px;
    border: 1px solid var(--md-sys-color-primary);
    border-radius: 4px;
    background: var(--md-sys-color-primary-container, #e8f0fe);
    font-size: 0.83rem;
}
.template-editor-table-config__sel-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.template-editor-table-config__sel-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--md-sys-color-on-surface-variant, #666);
    padding: 1px;
    line-height: 1;
}
.template-editor-table-config__sel-btn:hover { color: var(--md-sys-color-primary); }
.template-editor-table-config__sel-btn--remove:hover { color: var(--md-sys-color-error, #ba1a1a); }

.template-editor-table-config__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 16px;
}
.template-editor-table-config__remove { margin-right: auto; }
.template-editor-table-config__remove[hidden] { display: none; }

/* ── FWReportObject field placeholder (in canvas) ───────────────── */

[data-widget="FWReportObject"][data-field] {
    display: inline-block;
    padding: 2px 6px;
    font-size: 11px;
    font-style: italic;
    color: var(--md-sys-color-on-surface-variant);
    background: var(--md-sys-color-surface-container-low);
    border: 1px dashed var(--md-sys-color-outline);
    border-radius: 4px;
    cursor: pointer;
}

/* Print styles */
@media print {
    .template-editor-page-canvas {
        background: none;
        padding: 0;
    }

    .template-editor__document {
        width: 210mm;
        min-height: 297mm;
        margin: 0;
        padding: 15mm 18mm;
        box-shadow: none;
    }

    .quote-action-bar,
    .template-editor-drag-handle,
    .template-editor-editor__toolbar,
    .template-editor-editor__palette,
    .template-editor-element-config,
    .fw-card-list__item-delete {
        display: none !important;
    }

    [data-editable-id][contenteditable] { outline: none !important; }

    @page { size: A4; margin: 0; }
}

/* Editable card list items */
.fw-card-list__card { position: relative; }

.fw-card-list__item-delete {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--md-sys-color-surface, #fff);
    border: none;
    cursor: pointer;
    color: var(--md-sys-color-error);
    padding: 0;
    opacity: 0;
    transition: opacity .15s;
    z-index: 1;
}
.fw-card-list__item-delete .material-symbols-outlined { font-size: 18px; }
.fw-card-list__card:hover .fw-card-list__item-delete { opacity: 1; }
.fw-card-list__card--new { opacity: .5; }
.fw-card-list__card--new:focus-within { opacity: 1; }

/* Editable card-list inputs — invisible on existing rows, underline only on blank row */
.fw-card-list__card input,
.fw-card-list__card textarea,
.fw-card-list__card select {
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
    font: inherit;
    color: inherit;
    padding: 0;
}
.fw-card-list__card--new input:not(.fw-autocomplete__input):not(.vr-draft-input),
.fw-card-list__card--new textarea,
.fw-card-list__card--new select {
    border-bottom: 1px solid var(--md-sys-color-outline);
    padding-bottom: 2px;
}
.fw-card-list__card--new input:focus:not(.fw-autocomplete__input):not(.vr-draft-input),
.fw-card-list__card--new textarea:focus,
.fw-card-list__card--new select:focus {
    border-bottom-color: var(--md-sys-color-primary);
    border-bottom-width: 2px;
}

/* Quote template list (settings page) */
.qt-templates-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.qt-templates-view__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    flex-shrink: 0;
}

.qt-templates-view__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.qt-templates-view__list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px;
}

.qt-template-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
}

.qt-template-card:hover { background: var(--md-sys-color-surface-container); }

.qt-template-card__icon { color: var(--md-sys-color-primary); }

.qt-template-card__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.qt-template-card__title {
    font-weight: 600;
    font-size: 0.9rem;
}

.qt-template-card__updated {
    font-size: 0.78rem;
    color: var(--md-sys-color-outline);
}

/* Outbox */
.fw-view .fw-view__drawer-container-left .fw-view__drawer-container-inner .fw-card-list__card.outgoing-card {
    position: relative;
    margin: 16px 8px 0;
    padding: 8px 10px 10px;
    background: #ffefc9;
    border: 1px solid var(--rs-primary-border-color);
    border-radius: 0 6px 6px 6px;
}
.fw-view .fw-view__drawer-container-left .fw-view__drawer-container-inner .fw-card-list__card.outgoing-card:first-child {
    border-top-right-radius: 6px;
}
.fw-view .fw-view__drawer-container-left .fw-view__drawer-container-inner .fw-card-list__card.outgoing-card::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -1px;
    width: 45%;
    height: 8px;
    background: #ffefc9;
    border: 1px solid var(--rs-primary-border-color);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}
.fw-view .fw-view__drawer-container-left .fw-view__drawer-container-inner .fw-card-list__card.outgoing-card.highlight,
.fw-view .fw-view__drawer-container-left .fw-view__drawer-container-inner .fw-card-list__card.outgoing-card:hover {
    background: #e8c870;
}
.fw-view .fw-view__drawer-container-left .fw-view__drawer-container-inner .fw-card-list__card.outgoing-card.highlight::before,
.fw-view .fw-view__drawer-container-left .fw-view__drawer-container-inner .fw-card-list__card.outgoing-card:hover::before {
    background: #e8c870;
}
.outgoing-card { display: flex; flex-direction: column; gap: 3px; }
.outgoing-card__address { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outgoing-card__status { font-size: 0.82em; }
.outgoing-card__refs-row { display: flex; align-items: baseline; gap: 6px; min-width: 0; padding-right: 26px; }
.outgoing-card__refs { font-size: 0.75em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
/* invoiceTotal (see OutGoing.js) is null, not 0, when the record has no invoice - FWLabel then
   renders this div with no text, and :empty hides it entirely (the "$" is a ::before, which :empty
   ignores, so it never counts as content on its own). Sits at the end of the refs line - the
   bottom-most text row on the card - so it reads as a total for the doc refs shown just to its left. */
.outgoing-card__invoice-total { font-size: 0.75em; font-weight: 700; color: #B35900; white-space: nowrap; flex-shrink: 0; margin-left: auto; text-align: right; }
.outgoing-card__invoice-total::before { content: '$'; }
.outgoing-card__invoice-total:empty { display: none; }
.outgoing-card__paused-icon {
    position: absolute;
    bottom: 6px;
    right: 8px;
    font-size: 28px;
    color: #BA1A1A;
}
.outgoing-card__paused-icon:empty { display: none; }

/* Outgoing detail view */
.outgoing-detail {
    display: grid;
    grid-template-rows: auto 1fr;
    height: calc(100vh - 40px);
    box-sizing: border-box;
    overflow: hidden;
}
.outgoing-detail--loading {
    align-items: center;
    justify-content: center;
    color: var(--rs-primary-gray-text);
    font-size: 2em;
}
.outgoing-detail__header {
    display: flex;
    flex-direction: column;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(245, 248, 253, 0.2);
}
.outgoing-detail__header-row {
    display: flex;
    align-items: center;
    gap: 16px;
}
.outgoing-detail__address {
    flex: 1;
    font-size: 24px;
    font-weight: 400;
    color: #F5F8FD;
    line-height: 32px;
    margin: 0;
}
.outgoing-detail__add-wrap { position: relative; }
.outgoing-detail__add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 1px solid rgba(245, 248, 253, 0.4);
    border-radius: 6px;
    background: transparent;
    color: #F5F8FD;
    cursor: pointer;
    font-size: 0.875em;
    white-space: nowrap;
}
.outgoing-detail__add-btn:hover { background: rgba(245, 248, 253, 0.1); }
.outgoing-detail__add-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    min-width: 148px;
    z-index: 100;
}
.outgoing-detail__add-menu-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    color: #1B2E4D;
}
.outgoing-detail__add-menu-item:hover { background: #EEF4FF; }
.outgoing-detail__send-btn,
.outgoing-detail__mark-sent-btn,
.outgoing-detail__pause-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 1px solid rgba(245, 248, 253, 0.4);
    border-radius: 6px;
    background: transparent;
    color: #F5F8FD;
    cursor: pointer;
    font-size: 0.875em;
    white-space: nowrap;
}
.outgoing-detail__send-btn:hover,
.outgoing-detail__mark-sent-btn:hover,
.outgoing-detail__pause-btn:hover { background: rgba(245, 248, 253, 0.1); }
.outgoing-detail__pause-btn.is-paused {
    border-color: #BA1A1A;
    color: #FFB4AB;
}
.outgoing-detail__pause-btn.is-paused:hover { background: rgba(186, 26, 26, 0.15); }
.outgoing-detail__items .fw-card-list__card-container {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
}
.outgoing-detail__view-space {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.outgoing-detail__view-space:not(:has(.fw-active-view)) {
    display: none;
}
/* The framework wraps whatever child route loads here (report.html among others) in its own
   .fw-view.fw-active-view element, which is display:grid with no height/min-height override of
   its own - a grid container sizes to its content by default, so it took on report.html's own
   .report-view's full, unclipped content height instead of shrinking to the space actually
   available (this .view-space is already a bounded flex column above), and nothing below it ever
   got a chance to establish a scrollable region. Forcing it into the same flex-column/min-height:0
   idiom as its own parent lets that height constraint keep passing down through to .report-view
   (rentsafe.css's own .report-view rule) and from there to .qt-page-canvas's internal scrollbar,
   the same way it already does on the standalone (non-outbox) report/quote/invoice routes.
   Reported 2026-09-10. */
.outgoing-detail__view-space > .fw-view.fw-active-view {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.outgoing-doc-card {
    background: #F9F9FF;
    border-radius: 8px;
    padding: 0 8px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(27, 28, 28, 0.07);
    cursor: pointer;
}
.outgoing-doc-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.outgoing-doc-card__top .material-symbols-outlined { font-size: 28px; color: var(--md-sys-color-primary); opacity: 0.7; }
.outgoing-doc-card__number { flex: 1; padding: 0 8px; font-size: 13px; font-weight: 600; color: #1B2E4D; }
.outgoing-doc-card__badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: 600; }
.outgoing-doc-card__badge--red  { background: #FFDAD6; color: #BA1A1A; }
.outgoing-doc-card__badge--blue { background: #D4E3FF; color: #003062; }

/* ── File preview (outbox doc card click target) ──────────────────────── */
.file-preview {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
.file-preview__toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    flex-shrink: 0;
}
.file-preview__toolbar-icon { color: var(--md-sys-color-on-primary); }
.file-preview__toolbar-name {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--md-sys-color-on-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-preview__download-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--md-sys-color-on-primary);
    border-radius: 20px;
    background: transparent;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    color: var(--md-sys-color-on-primary);
}
.file-preview__download-btn:hover { background: rgba(255, 255, 255, 0.15); }
.file-preview__download-btn .material-symbols-outlined { font-size: 18px; }
.file-preview__delete-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(255, 100, 100, 0.5);
    border-radius: 20px;
    background: transparent;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    color: #ff9999;
}
.file-preview__delete-btn:hover { background: rgba(255, 100, 100, 0.15); }
.file-preview__delete-btn .material-symbols-outlined { font-size: 18px; }
.file-preview__delete-btn[hidden] { display: none; }
.file-preview__body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F4F5F8;
}
.file-preview__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.file-preview__pdf {
    width: 100%;
    height: 100%;
    border: none;
}
.file-preview__empty {
    color: var(--rs-subtext);
    font-size: 13px;
}

/* ── Change Password popup ──────────────────────────────────────────────── */
dialog#changePassword {
    min-width: 380px;
    max-width: 460px;
    border: none;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
}

#changePassword .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 16px;
    margin: 0;
    cursor: pointer;
}

#changePassword .dialog-header::before {
    content: "Change Password";
}

#changePassword .fw-view__main-container {
    padding: 24px 24px 8px;
}

#changePassword .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

#changePassword .dialog-footer .fw-button {
    padding: 8px 24px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: inherit;
}

#changePassword .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

#changePassword .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant) !important;
}

#changePassword .profile-questions {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#changePassword .profile-questions .section-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: center;
    gap: 16px;
}

#changePassword .profile-questions .profile-label {
    font-size: 13px;
    color: var(--md-sys-color-on-surface-variant);
    text-align: right;
}

#changePassword .profile-questions .profile-value {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    outline: none;
    padding: 6px 0;
    font-size: 14px;
    font-family: inherit;
    color: var(--md-sys-color-on-surface);
    width: 100%;
}

#changePassword .profile-questions .profile-value:focus {
    border-bottom-color: var(--md-sys-color-primary);
}

#changePassword .profile-questions .error-label {
    font-size: 13px;
    color: var(--md-sys-color-error);
    text-align: center;
    min-height: 1.2em;
}

/* ── Profile popup ──────────────────────────────────────────────────────── */
dialog#profile {
    min-width: 380px;
    max-width: 460px;
    border: none;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
}

#profile .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 16px;
    margin: 0;
    cursor: pointer;
}

#profile .dialog-header::before {
    content: "Edit Profile";
}

#profile .fw-view__main-container {
    padding: 24px 24px 8px;
}

#profile .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

#profile .dialog-footer .fw-button {
    padding: 8px 24px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: inherit;
}

#profile .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

#profile .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant) !important;
}

#profile .profile-questions {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#profile .profile-questions .section-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    gap: 16px;
}

#profile .profile-questions .profile-label {
    font-size: 13px;
    color: var(--md-sys-color-on-surface-variant);
    text-align: right;
}

#profile .profile-questions .profile-value {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    outline: none;
    padding: 6px 0;
    font-size: 14px;
    font-family: inherit;
    color: var(--md-sys-color-on-surface);
    width: 100%;
}

#profile .profile-questions .profile-value:focus {
    border-bottom-color: var(--md-sys-color-primary);
}

#profile .profile-colour-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

#profile .profile-colour-preview {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #184f8a;
    color: white;
    font-size: 11px;
    font-weight: 700;
    font-family: "Exo 2", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#profile .profile-colour-picker {
    width: 36px;
    height: 32px;
    padding: 2px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 6px;
    cursor: pointer;
    background: none;
}

#profile .change-password-btn {
    margin-top: 16px;
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant) !important;
}

/************************************************** |addProperty_popup| *********************************************/

#addProperty {
    width: 480px;
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
}

#addProperty .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 16px;
    margin: 0;
    cursor: pointer;
}

#addProperty .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

#addProperty .dialog-footer .fw-button {
    padding: 8px 24px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#addProperty .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

#addProperty .dialog-footer .save:disabled {
    background: var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
    cursor: not-allowed;
}

#addProperty .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant);
}

/* Keep Google Places dropdown above the dialog top layer after re-parenting */
.pac-container {
    position: fixed !important;
}

/* ── Add Property (IWLT popup) ───────────────────────────────────────────── */
#addPropertyIWLT {
    width: 480px;
    border: none;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
}
#addPropertyIWLT .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px 12px 0 0;
}
#addPropertyIWLT .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
#addPropertyIWLT .dialog-footer button {
    padding: 8px 20px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
#addPropertyIWLT .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
#addPropertyIWLT .dialog-footer .save:disabled {
    background: var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
    cursor: not-allowed;
}
#addPropertyIWLT .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant) !important;
}
.add-property-iwlt-view {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
}
.add-property-iwlt-view__field-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.add-property-iwlt-view__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.add-property-iwlt-view__required { color: var(--md-sys-color-error); }
.add-property-iwlt-view__hint {
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
    margin: 0;
}
.add-property-iwlt-view__address-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 6px;
}
.add-property-iwlt-view__duplicate-notice {
    flex: 1;
    min-width: 0;
}
.add-property-iwlt-view__search-btn {
    margin-left: auto;
    flex-shrink: 0;
    padding: 6px 14px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-transform: uppercase;
}
.add-property-iwlt-view__search-btn:hover {
    opacity: 0.9;
}
.add-property-iwlt-view__duplicate-warning {
    margin: 0;
    font-size: 12px;
    color: var(--md-sys-color-error, #b3261e);
}
.add-property-iwlt-view__duplicate-link {
    display: inline-block;
    margin-top: 2px;
    font-size: 12px;
    color: #1b8a3a;
    text-decoration: underline;
    cursor: pointer;
}
.add-property-iwlt-view__duplicate-link:hover {
    color: #146b2d;
}

/* ── Add Job (property view popup) ───────────────────────────────────────── */
#addJob {
    width: 400px;
    border: none;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
}
#addJob .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px 12px 0 0;
}
#addJob .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
#addJob .dialog-footer button {
    padding: 8px 20px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
#addJob .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
#addJob .dialog-footer .save:disabled {
    background: var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
    cursor: not-allowed;
}
#addJob .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant) !important;
}
.add-job-view {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
}
.add-job-view__field-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.add-job-view__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.add-job-view__required { color: var(--md-sys-color-error); }
.add-job-view__input {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 9px 12px;
    font-size: 0.9rem;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}
.add-job-view__input:focus {
    border-color: var(--md-sys-color-primary);
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: -1px;
}
.add-job-view__hint {
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
    margin: 0;
}

/* ── Create Job (IWLT popup) ─────────────────────────────────────────────── */
#createJobIWLT {
    width: 520px;
    border: none;
    border-radius: 12px;
    padding: 0;
    overflow: visible;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
}
#createJobIWLT .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px 12px 0 0;
}
#createJobIWLT .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
#createJobIWLT .dialog-footer button {
    padding: 8px 20px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
#createJobIWLT .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
#createJobIWLT .dialog-footer .save:disabled {
    background: var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
    cursor: not-allowed;
}
#createJobIWLT .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant) !important;
}
.create-job-iwlt-view {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    overflow: visible;
}
.create-job-iwlt-view__field-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.create-job-iwlt-view__row-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.create-job-iwlt-view__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.create-job-iwlt-view__required { color: var(--md-sys-color-error); }
.create-job-iwlt-view__date-input {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 9px 12px;
    font-size: 0.9rem;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}
.create-job-iwlt-view__date-input:focus {
    border-color: var(--md-sys-color-primary);
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: -1px;
}
.create-job-iwlt-view__hint {
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
    margin: 0;
}
.create-job-iwlt-view__loading,
.create-job-iwlt-view__empty {
    font-size: 13px;
    color: var(--md-sys-color-on-surface-variant);
    padding: 8px 12px;
    font-style: italic;
}
#createQuoteIWLT {
    width: 480px;
    border: none;
    border-radius: 12px;
    padding: 0;
    overflow: visible;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
}
#createQuoteIWLT .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px 12px 0 0;
}
#createQuoteIWLT .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
#createQuoteIWLT .dialog-footer button {
    padding: 8px 20px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
#createQuoteIWLT .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
#createQuoteIWLT .dialog-footer .save:disabled {
    background: var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
    cursor: not-allowed;
}
#createQuoteIWLT .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant) !important;
}
#createInvoiceIWLT {
    width: 480px;
    border: none;
    border-radius: 12px;
    padding: 0;
    overflow: visible;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
}
#createInvoiceIWLT .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px 12px 0 0;
}
#createInvoiceIWLT .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
#createInvoiceIWLT .dialog-footer button {
    padding: 8px 20px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
#createInvoiceIWLT .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
#createInvoiceIWLT .dialog-footer .save:disabled {
    background: var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
    cursor: not-allowed;
}
#createInvoiceIWLT .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant) !important;
}
.create-invoice-iwlt-view {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    overflow: visible;
}
.create-invoice-iwlt-view__field-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: visible;
}
.create-invoice-iwlt-view__row-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.create-invoice-iwlt-view__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.create-invoice-iwlt-view__required { color: var(--md-sys-color-error); }
.create-invoice-iwlt-view__date-input {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 9px 12px;
    font-size: 0.9rem;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}
.create-invoice-iwlt-view__date-input:focus {
    border-color: var(--md-sys-color-primary);
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: -1px;
}
.create-invoice-iwlt-view__hint {
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
    margin: 0;
}

.add-property-view {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    overflow-y: auto;
}

.add-property-view__hint {
    margin: 0;
    font-size: 13px;
    color: var(--md-sys-color-on-surface-variant);
}

.add-property-view__address-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: -8px;
}
.add-property-view__duplicate-notice {
    flex: 1;
    min-width: 0;
}
.add-property-view__search-btn {
    margin-left: auto;
    flex-shrink: 0;
    padding: 8px 16px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-transform: uppercase;
}
.add-property-view__search-btn:hover {
    opacity: 0.9;
}
.add-property-view__duplicate-warning {
    margin: 0;
    font-size: 13px;
    color: var(--md-sys-color-error, #b3261e);
}
.add-property-view__duplicate-link {
    display: inline-block;
    margin-top: 2px;
    font-size: 13px;
    color: #1b8a3a;
    text-decoration: underline;
    cursor: pointer;
}
.add-property-view__duplicate-link:hover {
    color: #146b2d;
}

.fw-address {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fw-address__search-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.fw-address__search-input {
    flex: 1;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
}

.fw-address__search-input:focus {
    border-color: var(--md-sys-color-primary);
}

.fw-address__field-row {
    display: flex;
    flex-direction: column;
}

.fw-address__csp-row {
    display: flex;
    gap: 8px;
}

.fw-address__field-inline {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.fw-address__field-inline:first-child {
    flex: 2;
}

.fw-address__street1,
.fw-address__street2,
.fw-address__city,
.fw-address__state,
.fw-address__postcode,
.fw-address__latitude,
.fw-address__longitude,
.fw-address__googleplaceid {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    background: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface);
    width: 100%;
    box-sizing: border-box;
}

.qt-template-card__arrow { color: var(--md-sys-color-outline); }


/* ── Add / Edit Tenant dialog ── */
#addTenant,
#editTenant,
#addOwner,
#editOwner {
    width: 420px;
    border: none;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
}

#addTenant .dialog-header,
#editTenant .dialog-header,
#addOwner .dialog-header,
#editOwner .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px 12px 0 0;
}

#addTenant .dialog-footer,
#editTenant .dialog-footer,
#addOwner .dialog-footer,
#editOwner .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

#addTenant .dialog-footer button,
#editTenant .dialog-footer button,
#addOwner .dialog-footer button,
#editOwner .dialog-footer button {
    padding: 8px 20px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#addTenant .dialog-footer .save,
#editTenant .dialog-footer .save,
#addOwner .dialog-footer .save,
#editOwner .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

#addTenant .dialog-footer .save:disabled,
#editTenant .dialog-footer .save:disabled,
#addOwner .dialog-footer .save:disabled,
#editOwner .dialog-footer .save:disabled {
    background: var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
    cursor: not-allowed;
}

#addTenant .dialog-footer .cancel,
#editTenant .dialog-footer .cancel,
#addOwner .dialog-footer .cancel,
#editOwner .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant) !important;
}

.add-tenant-view {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
}

.add-tenant-view__field-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.add-tenant-view__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.add-tenant-view__required {
    color: var(--md-sys-color-error);
}

.add-tenant-view__input {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 9px 12px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    background: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface);
    box-sizing: border-box;
    width: 100%;
}

.add-tenant-view__input:focus {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-surface);
}

.add-tenant-view__hint {
    margin: 0;
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
}

/* ── Property Tenants dialog (built by hand in ViewPending.js#editTenants) ──
   Same Tenants-card markup/classes as property.html's inline-editable tenant list, reused here so
   a property's tenants can be edited straight from wherever it's opened (e.g. Pending) without
   navigating through the full property view. Chrome mirrors #addTenant/#editTenant's own dialog
   styling below, just wider to fit the table, and with an icon/Add-Tenant button in the header
   instead of plain title text. */
dialog#propertyTenants {
    width: 640px;
    max-width: 90vw;
    border: none;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
}

/* The generic `dialog .dialog-header` rule (defaults.css) assumes a plain title plus a clickable
   ::after close icon - overridden/suppressed here since this header carries its own icon/title/Add
   Tenant layout instead, and closing only happens via the Save/Cancel footer buttons. */
dialog#propertyTenants .dialog-header {
    margin: 0;
    font-size: 1rem;
}
dialog#propertyTenants .dialog-header::after {
    content: none;
}
.property-tenants-header {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 16px 20px;
    border-radius: 12px 12px 0 0;
}
.property-tenants-header__icon-wrap {
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,0.18);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.property-tenants-header__icon-wrap .material-symbols-outlined {
    font-size: 18px;
}
.property-tenants-header__title {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
}
.property-tenants-header__add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.16);
    color: inherit;
    border: none;
    border-radius: 2em;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.property-tenants-header__add-btn:hover {
    background: rgba(255,255,255,0.26);
}
.property-tenants-header__add-btn .material-symbols-outlined {
    font-size: 16px;
}

.property-tenants-view {
    width: 100%;
    max-height: 60vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}

dialog#propertyTenants .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
dialog#propertyTenants .dialog-footer button {
    padding: 8px 20px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
dialog#propertyTenants .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
dialog#propertyTenants .dialog-footer .save:disabled {
    background: var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
    cursor: not-allowed;
}
dialog#propertyTenants .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant) !important;
}

/* ── Add Service dialog ── */
#addService,
#editService,
#addAgencyService,
#editAgencyService,
#addAgencyPart,
#editAgencyPart {
    width: 520px;
    border: none;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
}

#addService .dialog-header,
#editService .dialog-header,
#addAgencyService .dialog-header,
#editAgencyService .dialog-header,
#addAgencyPart .dialog-header,
#editAgencyPart .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px 12px 0 0;
}

#addService .dialog-footer,
#editService .dialog-footer,
#addAgencyService .dialog-footer,
#editAgencyService .dialog-footer,
#addAgencyPart .dialog-footer,
#editAgencyPart .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

#addService .dialog-footer button,
#editService .dialog-footer button,
#addAgencyService .dialog-footer button,
#editAgencyService .dialog-footer button,
#addAgencyPart .dialog-footer button,
#editAgencyPart .dialog-footer button {
    padding: 8px 20px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#addService .dialog-footer .save,
#editService .dialog-footer .save,
#addAgencyService .dialog-footer .save,
#editAgencyService .dialog-footer .save,
#addAgencyPart .dialog-footer .save,
#editAgencyPart .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

#addService .dialog-footer .save:disabled,
#editService .dialog-footer .save:disabled,
#addAgencyService .dialog-footer .save:disabled,
#editAgencyService .dialog-footer .save:disabled,
#addAgencyPart .dialog-footer .save:disabled,
#editAgencyPart .dialog-footer .save:disabled {
    background: var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
    cursor: not-allowed;
}

#addService .dialog-footer .cancel,
#editService .dialog-footer .cancel,
#addAgencyService .dialog-footer .cancel,
#editAgencyService .dialog-footer .cancel,
#addAgencyPart .dialog-footer .cancel,
#editAgencyPart .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant) !important;
}

.add-svc-view {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
}

.add-svc-view__row-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.add-svc-view__field-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.add-svc-view__field-row--inline {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.add-svc-view__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.add-svc-view__required {
    color: var(--md-sys-color-error);
}

.add-svc-view__label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.add-svc-view__system-hint {
    font-size: 11px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    white-space: nowrap;
}

.add-svc-view__input,
.add-svc-view__select {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 9px 12px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    background: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface);
    box-sizing: border-box;
    width: 100%;
}

.add-svc-view__input:focus,
.add-svc-view__select:focus {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-surface);
}

.add-svc-view__input--currency {
    text-align: right;
}

.add-svc-view__checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--md-sys-color-primary);
}

/* ── I Would Like To button ──────────────────────────────────────────────── */
/* ── Notifications sidebar button ────────────────────────────────────────── */
.notifications-sidebar-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--rs-left-sidebar-text);
    font-family: "Exo 2", sans-serif;
    font-size: 14px;
    padding: 10px 20px;
    width: 100%;
    text-align: left;
    white-space: nowrap;
    transition: background 0.15s;
}
.notifications-sidebar-btn .material-symbols-outlined { font-size: 22px; flex-shrink: 0; }
.notifications-sidebar-btn:hover { background: rgba(255,255,255,0.08); }
.left-sidebar__closed .notifications-sidebar-btn__label { display: none; }
.left-sidebar__closed .notifications-sidebar-btn { justify-content: center; padding: 10px 0; }

/* ── Notifications floating panel ────────────────────────────────────────── */
.notifications-panel {
    position: fixed;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.22);
    /* min-width, not width: the panel is positioned over its sidebar entry and sized from the
       trigger in JS, so a fixed width here would override the inline one. */
    min-width: 300px;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    z-index: 2000;
    overflow: hidden;
}
.notifications-panel[hidden] { display: none; }
.notifications-panel__header {
    padding: 14px 16px 12px;
    font-family: "Exo 2", sans-serif;
    font-weight: 700;
    font-size: 14px;
    border-bottom: 1px solid #eee;
    color: #1a2a4a;
}
.notifications-panel__body {
    overflow-y: auto;
    flex: 1;
}

.iwlt-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 12px;
    padding: 10px 14px;
    border-radius: 20px;
    border: none;
    background: #f5c842;
    color: #1a2a4a;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    width: calc(100% - 24px);
    justify-content: center;
    transition: opacity 0.15s;
    box-sizing: border-box;
}
.iwlt-btn:hover { opacity: 0.88; }
.iwlt-btn .material-symbols-outlined { font-size: 18px; }
.left-sidebar__closed .iwlt-btn__label { display: none; }

/* ── I Would Like To panel ───────────────────────────────────────────────── */
.iwlt-panel {
    position: fixed;
    width: 320px;
    background: url(../images/iwlt_bgd.png) no-repeat top right;
    background-size: cover;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.36);
    z-index: 1000;
    overflow: hidden;
}
.iwlt-panel__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.iwlt-panel__icon { color: #f5c842; font-size: 22px; }
.iwlt-panel__title {
    flex: 1;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    font-style: italic;
}
.iwlt-panel__close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
}
.iwlt-panel__close:hover { background: rgba(255,255,255,0.12); }
.iwlt-panel__list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}
.iwlt-panel__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    color: rgba(255,255,255,0.85);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.1s;
}
.iwlt-panel__item:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.iwlt-panel__item-icon { font-size: 20px; color: rgba(255,255,255,0.4); }
.iwlt-panel__item:hover .iwlt-panel__item-icon { color: #f5c842; }

/* ── Add Agency dialog ───────────────────────────────────────────────────── */
#addAgency {
    width: 440px;
    border: none;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
}
#addAgency .dialog-header:empty::before {
    content: 'New Agency';
}
#addAgency .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px 12px 0 0;
}
#addAgency .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
#addAgency .dialog-footer button {
    padding: 8px 20px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
#addAgency .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
#addAgency .dialog-footer .save:disabled {
    background: var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
    cursor: not-allowed;
}
#addAgency .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant) !important;
}
.add-agency-view {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
}
.add-agency-view__field-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.add-agency-view__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.add-agency-view__required { color: var(--md-sys-color-error); }
.add-agency-view__input {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 9px 12px;
    font-size: 0.9rem;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
.add-agency-view__input:focus {
    border-color: var(--md-sys-color-primary);
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: -1px;
}
.add-agency-view__hint {
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
    margin: 0;
}
.add-agency-view__icon-row {
    display: flex;
    justify-content: center;
    padding-bottom: 4px;
}
.add-agency-view__icon-wrap {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-variant);
}
.add-agency-view__icon {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: var(--md-sys-color-on-surface-variant);
}
.add-agency-view__icon-wrap--editable {
    cursor: pointer;
}
.add-agency-view__icon-wrap--editable::after {
    content: 'photo_camera';
    font-family: 'Material Symbols Outlined';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    transition: opacity 0.15s;
}
.add-agency-view__icon-wrap--editable:hover::after {
    opacity: 1;
}

/* ── Add / Edit Agency dialog ────────────────────────────────────────────── */
#addAgency,
#editAgency {
    width: 460px;
    border: none;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
}
#addAgency .dialog-header,
#editAgency .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px 12px 0 0;
}
#addAgency .dialog-footer,
#editAgency .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
#addAgency .dialog-footer button,
#editAgency .dialog-footer button {
    padding: 8px 20px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
#addAgency .dialog-footer .save,
#editAgency .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
#addAgency .dialog-footer .save:disabled,
#editAgency .dialog-footer .save:disabled {
    background: var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
    cursor: not-allowed;
}
#addAgency .dialog-footer .cancel,
#editAgency .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant) !important;
}

/* ── Comms contacts toolbar ──────────────────────────────────────────────── */
.comms-contacts-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--md-sys-color-surface-container-low);
    flex-shrink: 0;
}
.comms-contacts-toolbar[hidden] { display: none !important; }

/* Agency contact rows — clickable */
.agency-contact-row { cursor: pointer; }
.agency-contact-row:hover { background: var(--md-sys-color-surface-variant); border-radius: 6px; }

/* ── Add / Edit Agency Contact dialog ────────────────────────────────────── */
#addAgencyContact,
#editAgencyContact,
#addPropertyContact,
#editPropertyContact {
    width: 420px;
    border: none;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
}
#addAgencyContact .dialog-header,
#editAgencyContact .dialog-header,
#addPropertyContact .dialog-header,
#editPropertyContact .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px 12px 0 0;
}
#addAgencyContact .dialog-footer,
#editAgencyContact .dialog-footer,
#addPropertyContact .dialog-footer,
#editPropertyContact .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
#addAgencyContact .dialog-footer button,
#editAgencyContact .dialog-footer button,
#addPropertyContact .dialog-footer button,
#editPropertyContact .dialog-footer button {
    padding: 8px 20px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
#addAgencyContact .dialog-footer .save,
#editAgencyContact .dialog-footer .save,
#addPropertyContact .dialog-footer .save,
#editPropertyContact .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
#addAgencyContact .dialog-footer .save:disabled,
#editAgencyContact .dialog-footer .save:disabled,
#addPropertyContact .dialog-footer .save:disabled,
#editPropertyContact .dialog-footer .save:disabled {
    background: var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
    cursor: not-allowed;
}
#addAgencyContact .dialog-footer .cancel,
#editAgencyContact .dialog-footer .cancel,
#addPropertyContact .dialog-footer .cancel,
#editPropertyContact .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant) !important;
}
.edit-agency-contact-view {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
}
.edit-agency-contact-view__field-row {
    display: flex;
    flex-direction: column;
}
.edit-agency-contact-view__field {
    width: 100%;
    --md-filled-text-field-container-color: transparent;
}
.edit-agency-contact-view__section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--md-sys-color-on-surface-variant);
    border-top: 1px solid var(--md-sys-color-outline-variant);
    padding-top: 10px;
    margin-top: 4px;
}
.edit-agency-contact-view__portal-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
}
.edit-agency-contact-view__toggle-portal-btn,
.edit-agency-contact-view__resend-invite-btn,
.edit-agency-contact-view__send-password-reset-btn,
.edit-agency-contact-view__set-password-btn {
    align-self: flex-start;
    background: transparent;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--md-sys-color-primary);
    cursor: pointer;
}
.edit-agency-contact-view__toggle-portal-btn:hover,
.edit-agency-contact-view__resend-invite-btn:hover,
.edit-agency-contact-view__send-password-reset-btn:hover,
.edit-agency-contact-view__set-password-btn:hover {
    background: var(--rs-container-hover);
}
.edit-agency-contact-view__toggle-row {
    display: flex;
    gap: 20px;
    padding-top: 4px;
}
.edit-agency-contact-view__toggle-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.edit-agency-contact-view__toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
}
.edit-agency-contact-view .fw-toggle-switch {
    width: 30px;
    height: 17px;
    border-radius: 17px;
}
.edit-agency-contact-view .fw-toggle-switch:before {
    width: 13px;
    height: 13px;
}
.edit-agency-contact-view .fw-toggle-switch:checked {
    background-color: var(--md-sys-color-primary);
}
.edit-agency-contact-view .fw-toggle-switch:checked:before {
    transform: translateX(13px);
}

/* ── SETTINGS USERS VIEW ──────────────────────────────────────────── */

.settings-users-view {
    display: grid;
    grid-template-rows: 50px 1fr;
    max-height: calc(100vh - 32px);
    gap: 16px;
    overflow: hidden;
    box-sizing: border-box;
}
.settings-users-view__header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.settings-users-view__header-icon {
    font-size: 28px;
    color: var(--md-sys-color-on-primary);
}
.settings-users-view__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--md-sys-color-on-primary);
    margin: 0;
}
.settings-users-view__table-wrap {
    display: flex;
    flex-direction: column;
    background: #F9F9FF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(27,28,28,0.06);
    overflow: hidden;
}
.settings-users-view__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}
.settings-users-view__search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 8px 12px;
    color: #888;
    font-size: 14px;
}
.settings-users-view__search .material-symbols-outlined { font-size: 18px; color: #888; }
.settings-users-view__search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: inherit;
}
.settings-users-view__search-input::placeholder { color: #aaa; }
.settings-users-view__add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--md-sys-color-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.settings-users-view__add-btn .material-symbols-outlined { font-size: 18px; }
.settings-users-view__add-btn:hover { opacity: 0.9; }
.settings-users-view__table {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.settings-users-view__table-header {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr;
    padding: 10px 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.settings-users-view__table .fw-card-list__tiles {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
}
.settings-users-view__table .fw-card-list__tile {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 2em;
    padding: 6px 14px;
    cursor: pointer;
    font: inherit;
    white-space: nowrap;
}
.settings-users-view__table .fw-card-list__tile:hover {
    background: var(--rs-container-hover);
}
.settings-users-view__table .fw-card-list__tile.active {
    border-color: var(--md-sys-color-primary);
    background: rgba(0, 62, 126, 0.06);
}
.settings-users-view__table .fw-card-list__tile-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.settings-users-view__table .fw-card-list__tile-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--md-sys-color-primary);
}
.settings-users-view__table [data-widget="FWCardList"] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.settings-users-view__table .fw-card-list__card-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.settings-users-view__row {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #eef0f4;
    font-size: 13px;
    color: #1B1C1C;
    transition: background 0.1s;
}
.settings-users-view__row:last-child { border-bottom: none; }
.settings-users-view__row:hover { background: var(--rs-container-hover); }

/* ── INVITE / EDIT USER POPUPS ───────────────────────────────────────── */

#inviteUser,
#editUser {
    width: 420px;
    border: none;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
}
#inviteUser .dialog-header,
#editUser .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
}
#inviteUser .dialog-footer,
#editUser .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
#inviteUser .dialog-footer button,
#editUser .dialog-footer button {
    padding: 8px 20px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
#inviteUser .dialog-footer .save,
#editUser .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
#inviteUser .dialog-footer .save:disabled,
#editUser .dialog-footer .save:disabled {
    background: var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
    cursor: not-allowed;
}
#inviteUser .dialog-footer .cancel,
#editUser .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant);
}

.invite-user-view,
.edit-user-view {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
}
.invite-user-view__field-row,
.edit-user-view__field-row {
    display: flex;
    flex-direction: column;
}
.invite-user-view__field,
.edit-user-view__field {
    width: 100%;
    --md-filled-text-field-container-color: transparent;
}
.invite-user-view__section-label,
.edit-user-view__section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--md-sys-color-on-surface-variant);
    border-top: 1px solid var(--md-sys-color-outline-variant);
    padding-top: 10px;
    margin-top: 4px;
}
/* Role toolbar - a single role is selected at a time. Reuses the framework's
   .fw-option-list__option / --selected checkmark styling (widgets.css), sized here to split
   the row evenly rather than the framework's default shrink-to-content pill row. */
.invite-user-view__role-toolbar,
.edit-user-view__role-toolbar {
    display: flex;
}
.invite-user-view__role-toolbar .fw-option-list__option,
.edit-user-view__role-toolbar .fw-option-list__option {
    flex: 1;
    justify-content: center;
}
.edit-user-view__toggle-disabled-btn,
.edit-user-view__resend-invite-btn,
.edit-user-view__send-password-reset-btn,
.edit-user-view__set-password-btn {
    align-self: flex-start;
    background: transparent;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--md-sys-color-primary);
    cursor: pointer;
}
.edit-user-view__toggle-disabled-btn:hover,
.edit-user-view__resend-invite-btn:hover,
.edit-user-view__send-password-reset-btn:hover,
.edit-user-view__set-password-btn:hover {
    background: var(--rs-container-hover);
}
.edit-user-view__status-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
.edit-user-view__status-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    flex: 1;
}

/* ── Payments list (left drawer) ─────────────────────────────────────── */

.fw-view__drawer-container-left.payment-list .fw-view__drawer-container-inner {
    grid-template-rows: 35px auto auto 1fr;
}

.payment-card { display: flex; flex-direction: column; gap: 3px; }
.payment-card__top,
.payment-card__bottom { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.payment-card__agency { font-weight: 500; font-size: 13px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.payment-card__date   { font-size: 11px; color: var(--md-sys-color-on-surface-variant); white-space: nowrap; flex-shrink: 0; }
.payment-card__ref    { font-size: 11px; color: var(--md-sys-color-on-surface-variant); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.payment-card__amount { font-size: 12px; font-weight: 600; color: var(--md-sys-color-primary); white-space: nowrap; flex-shrink: 0; }

/* ── Payment detail view ─────────────────────────────────────────────── */
.payment-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.payment-view__header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding-bottom: 4px;
}
.payment-view__agency {
    font-size: 24px;
    font-weight: 400;
    color: #F5F8FD;
    line-height: 32px;
}
.payment-view__status-chip {
    font-size: 15px;
    font-weight: 500;
    color: #1a3a5c;
    background: #b8d4f0;
    border-radius: 20px;
    padding: 3px 14px;
    white-space: nowrap;
    flex-shrink: 0;
}

.payment-view__fields {
    display: flex;
    gap: 12px;
    padding: 12px 0 16px;
    flex-shrink: 0;
}
.payment-view__field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--md-sys-color-surface);
    flex: 1;
}
.payment-view__field-label {
    font-size: 12px;
    color: #F5F8FD;
    line-height: 1;
}
.payment-view__field-value {
    font-size: 14px;
    color: #F5F8FD;
}

.payment-view__type-select {
    display: block;
}
.payment-view__type-select .fw-option-list__trigger {
    background: transparent;
    border: none;
    border-radius: 0;
    color: #F5F8FD;
    padding: 2px 0;
    min-width: 0;
    width: 100%;
    font-size: 14px;
}
.payment-view__type-select .fw-option-list__trailing-icon {
    color: #F5F8FD;
}
.payment-view__type-select.fw-option-list--open .fw-option-list__panel {
    min-width: 160px;
}

.payment-view__reference-input {
    background: transparent;
    border: none;
    border-radius: 0;
    color: #F5F8FD;
    font-size: 14px;
    font-family: inherit;
    padding: 2px 0;
    outline: none;
    width: 100%;
}
.payment-view__reference-input::placeholder { color: rgba(245,248,253,0.4); }
.payment-view__paidon-input {
    background: transparent;
    border: none;
    border-radius: 0;
    color: #F5F8FD;
    font-size: 14px;
    font-family: inherit;
    padding: 2px 0;
    outline: none;
    width: 100%;
    color-scheme: dark;
}
.payment-view__total-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding-bottom: 12px;
}
.payment-view__field--total { flex: 0 0 160px; }
.payment-view__total-input {
    background: transparent;
    border: none;
    border-radius: 0;
    color: #F5F8FD;
    font-size: 14px;
    font-family: inherit;
    padding: 2px 0;
    outline: none;
    text-align: right;
    width: 100%;
}
.payment-view__mark-paid-btn {
    padding: 10px 28px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    background: #b8d4f0;
    color: #1a3a5c;
    border: 1px solid transparent;
}
.payment-view__mark-paid-btn:disabled {
    background: transparent;
    color: rgba(245,248,253,0.4);
    border-color: rgba(245,248,253,0.25);
    cursor: default;
}
.payment-view__mark-paid-btn:not(:disabled):hover {
    background: #a0c4e8;
}

.payment-view--paid .payment-view__fields,
.payment-view--paid .payment-view__total-row,
.payment-view--paid .payment-view__notes {
    pointer-events: none;
}
.payment-view--paid .payment-view__reference-input,
.payment-view--paid .payment-view__paidon-input,
.payment-view--paid .payment-view__total-input,
.payment-view--paid .payment-view__notes-text,
.payment-view--paid .payment-view__type-select .fw-option-list__trigger {
    opacity: 0.6;
    cursor: default;
}

.payment-view__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 16px;
    overflow: hidden;
}

.payment-view__items-section {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 150px;
    max-height: 55%;
    background: var(--md-sys-color-surface-container-lowest, #F9F9FF);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline-variant);
}
.payment-view__items-thead,
.payment-item-row {
    display: grid;
    grid-template-columns: 32px 100px 1fr 110px 110px 110px;
    align-items: center;
    padding: 8px 14px;
    gap: 8px;
}
.payment-view__items-thead {
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--md-sys-color-on-surface-variant);
    flex-shrink: 0;
}
.payment-view__invoice-list {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.payment-view__invoice-list .fw-card-list__card-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}
.payment-view__items-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
.payment-view__items-total-row {
    display: grid;
    grid-template-columns: 1fr 110px;
    padding: 8px 14px;
    gap: 8px;
}
.payment-view__items-total-label {
    font-size: 16px;
    color: var(--md-sys-color-on-surface-variant);
    text-align: right;
}
.payment-view__items-total-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.payment-view__items-section--hidden { display: none; }
.payment-view__items-section--readonly .payment-view__col--check { display: none; }
.payment-view__items-section--readonly .payment-view__items-thead,
.payment-view__items-section--readonly .payment-item-row { grid-template-columns: 100px 1fr 110px 110px 110px; }
.payment-view__col--check { display: flex; align-items: center; justify-content: center; }
.payment-item-row__check { width: 16px; height: 16px; cursor: pointer; accent-color: var(--md-sys-color-primary); }
.payment-item-row {
    border-bottom: 1px solid #eef0f4;
    font-size: 13px;
    color: var(--md-sys-color-on-surface);
    transition: background 0.1s;
}
.payment-item-row:last-child { border-bottom: none; }
.payment-item-row:hover { background: var(--rs-container-hover); }

.payment-view__col--invoice  { font-weight: 500; color: var(--md-sys-color-primary); }
.payment-view__col--property { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.payment-view__col--total,
.payment-view__col--owing,
.payment-view__col--paid     { text-align: right; font-variant-numeric: tabular-nums; }

.payment-view__notes { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 130px; }
.payment-view__notes .payment-view__field-label { color: var(--md-sys-color-on-surface-variant); }
.payment-view__notes-text {
    flex: 1;
    min-height: 0;
    font-size: 13px;
    color: var(--md-sys-color-on-surface);
    font-family: inherit;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 0;
    outline: none;
    resize: none;
    width: 100%;
    padding: 4px 0;
    line-height: 1.5;
    overflow-y: auto;
}
.payment-view__notes-text::placeholder { color: var(--md-sys-color-on-surface-variant); }

/* ── PAYMENT DRAWER NEW BUTTON ────────────────────────────────────────────── */

.payment-drawer__new-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: calc(100% - 10px);
    margin: 6px 12px 4px;
    padding: 6px 12px;
    border: none;
    border-radius: 20px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
    align-self: start;
}

.payment-drawer__new-btn:hover {
    opacity: 0.88;
}

.payment-drawer__new-btn .material-symbols-outlined {
    font-size: 18px;
}

/* ── ADD PAYMENT POPUP ────────────────────────────────────────────────────── */

#addPayment {
    width: 460px;
    border: none;
    border-radius: 12px;
    padding: 0;
    overflow: visible;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
}

#addPayment .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
}

#addPayment .dialog-header::after {
    color: var(--md-sys-color-on-primary);
    font-size: 22px;
    line-height: 1;
}

#addPayment .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

#addPayment .dialog-footer button {
    padding: 8px 20px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#addPayment .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

#addPayment .dialog-footer .save:disabled {
    background: var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
    cursor: not-allowed;
}

#addPayment .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant) !important;
}

/* ── ADD PAYMENT VIEW ─────────────────────────────────────────────────────── */

.add-payment-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    overflow: visible;
}

.add-payment-view__field-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.add-payment-view__row-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.add-payment-view__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.add-payment-view__required { color: var(--md-sys-color-error); }

.add-payment-view__input,
.add-payment-view__select {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 9px 12px;
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    color: var(--md-sys-color-on-surface);
}

.add-payment-view__input:focus,
.add-payment-view__select:focus {
    border-color: var(--md-sys-color-primary);
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: -1px;
}

.add-payment-view__agency-list {
    display: block;
}

.add-payment-view__agency-list .fw-option-list__trigger {
    width: 100%;
    box-sizing: border-box;
    border-color: var(--md-sys-color-outline-variant);
    padding: 9px 12px;
    font-size: 0.9rem;
    background: transparent;
}

.add-payment-view__agency-list .fw-option-list__panel {
    width: 100%;
    box-sizing: border-box;
}

.invoice-view {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100vh;
}
.qt-editor__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    flex-shrink: 0;
}
.qt-editor__toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.qt-template-select {
    --md-outlined-select-text-field-outline-color: rgba(245, 248, 253, 0.4);
    --md-outlined-select-text-field-hover-outline-color: rgba(245, 248, 253, 0.7);
    --md-outlined-select-text-field-focus-outline-color: #F5F8FD;
    --md-outlined-select-text-field-input-text-color: #F5F8FD;
    --md-outlined-select-text-field-input-text-size: 0.875rem;
    --md-outlined-select-text-field-trailing-icon-color: #F5F8FD;
    --md-menu-container-color: #2c2c2e;
    --md-menu-container-surface-tint-layer-color: transparent;
    --md-select-option-selected-container-color: rgba(245, 248, 253, 0.15);
    --md-menu-item-label-text-color: #F5F8FD;
    --md-menu-item-hover-state-layer-color: rgba(245, 248, 253, 0.15);
    --md-menu-item-container-color: transparent;
    min-width: 160px;
}
.qt-template-select::part(field) {
    --_top-space: 4px;
    --_bottom-space: 4px;
}
.qt-editor__toolbar-actions {
    display: flex;
    gap: 8px;
}
.qt-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 1px solid rgba(245, 248, 253, 0.4);
    border-radius: 6px;
    background: transparent;
    color: #F5F8FD;
    cursor: pointer;
    font-size: 0.875em;
    white-space: nowrap;
}
.qt-btn:hover { background: rgba(245, 248, 253, 0.1); }
.qt-btn:disabled, .qt-btn--disabled { opacity: 0.35; cursor: not-allowed; }
.qt-btn .material-symbols-outlined { font-size: 18px; }
.qt-btn--hidden { display: none; }
.qt-btn--danger { border-color: rgba(255, 100, 100, 0.4); color: #ff9999; }
.qt-btn--danger:hover { background: rgba(255, 100, 100, 0.1); }
/* display:flex/flex-direction:column here (not just on --standalone) is what makes
   .report-view__main's own flex:1/min-height:0 (below) mean anything at all - without a flex
   parent those two properties are simply ignored, .report-view__main sizes to its content instead
   of the space actually available, and .qt-page-canvas's overflow-y:auto never has anything to
   overflow against (its containing box just grows to fit instead of clipping/scrolling). flex:1;
   min-height:0 here (harmless no-ops unless the surrounding view space is ALSO a flex column,
   e.g. the outbox's .outgoing-detail__view-space) is what then lets THIS box itself take a bounded
   height from THAT parent, rather than only ever working for the standalone routes, whose own
   bounded height instead comes from --standalone's own height/max-height below. This is what makes
   a report/invoice/compliance-report opened from within the outbox scrollable the same way a
   standalone quote already was. Reported 2026-09-10.
*/
.report-view {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    box-sizing: border-box;
}
.report-view--standalone {
    padding: 16px 24px;
    height: 100%;
    max-height: calc(100vh - 40px);
    overflow: hidden;
}
.report-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
    flex-shrink: 0;
}
.report-header[hidden] {
    display: none;
}
.report-header__crumb {
    color: var(--md-sys-color-surface, #F5F8FD);
    font-size: 24px;
    line-height: 32px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
/* Agency/property share the available room; job number and doc-type label are
   short and fixed-width, so only the long free-text crumbs need to shrink. */
.report-header__job,
.report-header__doc {
    flex: 0 0 auto;
}
.report-header__agency,
.report-header__property,
.report-header__job {
    cursor: pointer;
}
.report-header__agency:hover,
.report-header__property:hover,
.report-header__job:hover {
    text-decoration: underline;
}
.report-header__sep {
    color: var(--md-sys-color-surface, #F5F8FD);
    font-size: 24px;
    white-space: nowrap;
}
.report-header__doc {
    font-weight: 700;
    cursor: default;
}
.report-header__status {
    flex: 0 0 auto;
    color: var(--md-sys-color-on-primary, #fff);
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 20px;
    padding: 3px 14px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.report-header__status:empty {
    display: none;
}
@container (max-width: 980px) {
    .qt-btn { padding: 6px; font-size: 0; gap: 0; }
    .qt-btn .material-symbols-outlined { font-size: 18px; }
}
/* Right drawer wrapper (standalone Quote page, and /agency/{agencyId}/quotes/{id} - see
   ViewReport.js#configureBreadcrumb's report-view--has-drawer toggle). Mirrors .job-view__main's
   grid mechanic exactly. For every other report.html use (Invoice, Job compliance report, a quote
   nested inside a property/outbox/scheduling) the drawer itself stays display:none and the grid
   collapses to its single (workspace) column, so nothing about their existing layout changes. */
.report-view__main {
    display: grid;
    grid-column-gap: 16px;
    grid-template-columns: auto 64px;
    transition: grid-template-columns .35s ease-in-out;
    flex: 1;
    min-height: 0;
}
.report-view__main.open {
    grid-template-columns: auto 400px;
}
.report-view__main .fw-view__drawer-container-right.right-drawer {
    display: none;
}
.report-view--has-drawer .report-view__main .fw-view__drawer-container-right.right-drawer {
    display: flex;
}
.report-view:not(.report-view--has-drawer) .report-view__main {
    grid-template-columns: auto;
}
.qt-editor__workspace {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
}
.qt-page-canvas {
    background: transparent;
    scrollbar-width: none;
    padding: 16px 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* ── Report view: strip editor chrome ──────────────────────────────── */
#report .template-editor-zone--header,
#report .template-editor-zone--body,
#report .template-editor-zone--footer {
    outline: none;
}
#report .template-editor-zone--header,
#report .template-editor-zone--footer {
    min-height: 0;
}
#report .template-editor-row--editable:hover {
    outline: none;
}
#report .template-editor-table-el {
    border: none;
}
#report .template-editor-table-el:hover {
    border-color: transparent;
}
#report .template-editor-image-el {
    cursor: default;
}
#report .template-editor-row--editable .template-editor-image-el:hover {
    outline: none;
}
#report .template-editor-field-pair--editable,
#report .template-editor-static-text--editable {
    cursor: default;
}
#report .template-editor-field-pair--editable:hover {
    background: none;
    padding: 0;
}
#report .template-editor-inline-field {
    background: none;
    color: inherit;
    padding: 0;
    font-style: normal;
    cursor: default;
}
#report .template-editor-block {
    border: none;
    padding: 0;
    background: none;
    min-height: 0;
}
#report .template-editor-table-el__th,
#report .template-editor-table-el__td,
#report .template-editor-table-el__footer-cell {
    cursor: default;
}
#report .template-editor-table-el__th:hover,
#report .template-editor-table-el__td:hover,
#report .template-editor-table-el__footer-cell:hover {
    background: none;
}
#report .template-editor-drag-handle,
#report .template-editor-row__delete-btn,
#report .template-editor-block__config-btn,
#report .template-editor-table__config-btn,
#report .template-editor-table-el__resize-handle,
#report .template-editor-footer__resize-handle {
    display: none;
}

/* ── Draft invoice editing (report view) ───────────────────────────── */
.qt-page-canvas .vr-draft-input {
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: inherit;
    padding: 0;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    cursor: text;
}
.qt-page-canvas .vr-draft-input:not(.template-editor-table-el__td .vr-draft-input) {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 2px;
    padding: 0 4px;
}
.qt-page-canvas .vr-draft-date:not(.template-editor-table-el__td .vr-draft-date) {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 2px;
    padding: 0 4px;
}
.qt-page-canvas .vr-draft-input:hover {
    border-bottom: 1px solid var(--md-sys-color-outline, silver);
}
.qt-page-canvas .vr-draft-input:focus {
    border-bottom: 1px solid var(--md-sys-color-primary, #6750a4);
}
.qt-page-canvas .vr-draft-date {
    cursor: pointer;
}
.qt-page-canvas .vr-draft-date:hover {
    border-bottom: 1px solid var(--md-sys-color-outline, silver);
}
.qt-page-canvas .vr-draft-date__picker {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}
.qt-page-canvas input[type="number"].vr-draft-input { -moz-appearance: textfield; }
.qt-page-canvas input[type="number"].vr-draft-input::-webkit-inner-spin-button { opacity: 0; width: 0; padding: 0; margin: 0; }
.qt-page-canvas input[type="number"].vr-draft-input:focus::-webkit-inner-spin-button { opacity: 1; width: auto; }

.qt-page-canvas .vr-draft-autocomplete { width: 100%; }
.qt-page-canvas .vr-draft-autocomplete .fw-autocomplete__input-wrap {
    border: none;
    border-radius: 0;
    background: transparent;
    transition: none;
}
.qt-page-canvas .vr-draft-autocomplete .fw-autocomplete__input-wrap:focus-within {
    border: none;
    background: transparent;
}
.qt-page-canvas .vr-draft-autocomplete .fw-autocomplete__input {
    padding: 0 2px;
    font: inherit;
    color: inherit;
}
.qt-page-canvas .vr-draft-autocomplete .fw-autocomplete__input-wrap {
    position: relative;
}
.qt-page-canvas .vr-draft-autocomplete .fw-autocomplete__clear {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 2px;
    margin-right: 0;
    visibility: hidden;
    background: var(--md-sys-color-surface, #fff);
}
.qt-page-canvas .vr-draft-autocomplete:hover .fw-autocomplete__clear,
.qt-page-canvas .vr-draft-autocomplete .fw-autocomplete__input-wrap:focus-within .fw-autocomplete__clear {
    visibility: visible;
}
.qt-page-canvas .vr-draft-autocomplete .fw-autocomplete__clear .material-symbols-outlined {
    font-size: 14px;
}
.fw-card-list__card:not(.fw-card-list__card--new) .vr-draft-autocomplete .fw-autocomplete__input::placeholder {
    color: transparent;
}
.fw-card-list__card:not(.fw-card-list__card--new) .vr-draft-input::placeholder {
    color: transparent;
}

.invoice-card__address,
.quote-card__address {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Agency Portal (roleAgency) sidebar ──────────────────────────────────── */
.roleAgency .portal-agency-logo {
    width: calc(100% - 32px);
    height: 52px;
    margin: 4px 16px 8px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center left;
}
.roleAgency .portal-agency-card {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 16px 4px;
}
.roleAgency .portal-agency-card__avatar {
    width: 64px;
    height: 64px;
    min-width: 64px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.roleAgency .portal-agency-card__avatar.material-symbols-outlined {
    font-size: 36px;
    color: var(--md-sys-color-primary);
}
.roleAgency .portal-agency-card__name {
    color: var(--rs-left-sidebar-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.roleAgency .portal-agency-card__sub {
    color: var(--rs-left-sidebar-text);
    font-size: 11px;
    opacity: 0.65;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.roleAgency .left-sidebar__closed .portal-agency-card {
    justify-content: center;
    padding: 8px 0 4px;
}
.roleAgency .left-sidebar__closed .portal-agency-card__info {
    display: none;
}
.roleAgency .portal-new-btn {
    margin: 4px 16px;
    width: calc(100% - 32px);
}
.roleAgency .left-sidebar__closed .portal-new-btn {
    width: auto;
    margin: 4px auto;
    padding: 6px;
}
.roleAgency .left-sidebar__closed .portal-new-btn__label {
    display: none;
}

/* ── Agency Portal dashboard ─────────────────────────────────────────────── */
/* Anchor the roleAgency workspace to 100vh so the property list scrolls internally */
.roleAgency #fwViewSpace {
    height: 100vh;
}
.roleAgency .fw-view.fw-active-view {
    grid-template-rows: 1fr;
}
.roleAgency .fw-view__main-container {
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Portal agency dashboard — theme variables (override per theme by redefining in :root or a theme class) */
:root {
    --ap-header-text:     var(--md-sys-color-on-primary);
    --ap-header-subtext:  rgb(from var(--md-sys-color-on-primary) r g b / 0.65);
    --ap-stat-bg:         var(--md-sys-color-surface-container-low);
    --ap-stat-icon-bg:    var(--md-sys-color-primary-container);
    --ap-stat-text:       var(--md-sys-color-on-surface);
    --ap-stat-subtext:    var(--md-sys-color-on-surface-variant);
    --ap-stat-icon-color: var(--md-sys-color-primary);
    --ap-stat-icon-error: var(--md-sys-color-error);
}

.ap-dashboard {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.ap-header {
    padding: 20px 28px 16px;
}
.prop-view .ap-header {
    margin: -16px -16px 0;
    padding: 20px 28px 16px;
}

.ap-properties {
    padding: 0 28px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ap-header__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ap-header-subtext);
    margin-bottom: 10px;
}
.ap-header__agency-logo {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}
.ap-header__agency-name {
    color: var(--ap-header-text);
    font-weight: 500;
}
.ap-header__main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}
.ap-header__title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ap-header__title {
    font-size: 28px;
    font-weight: 700;
    color: var(--ap-header-text);
    margin: 0;
    line-height: 1.2;
}
.ap-header__title-property {
    font-size: 24px;
    font-weight: 400;
}
.ap-header__title-property:not(:empty)::before {
    content: " — ";
}
.ap-header__sub {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--ap-header-subtext);
}
.ap-header__sub .material-symbols-outlined {
    font-size: 16px;
}
.ap-header__stats {
    display: flex;
    gap: 12px;
}
.ap-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--ap-stat-bg);
    border-radius: 10px;
    padding: 10px 16px;
    min-width: 130px;
}
.ap-stat__icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ap-stat__icon-wrap--blue {
    background: var(--ap-stat-icon-bg);
}
.ap-stat__icon-wrap--blue .material-symbols-outlined {
    color: var(--ap-stat-icon-color);
    font-size: 20px;
}
.ap-stat__icon-wrap--red {
    background: var(--ap-stat-icon-bg);
}
.ap-stat__icon-wrap--red .material-symbols-outlined {
    color: var(--ap-stat-icon-error);
    font-size: 20px;
}
.ap-stat__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ap-stat__label {
    font-size: 10px;
    font-weight: 600;
    color: var(--ap-stat-subtext);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
}
.ap-stat__value {
    font-size: 22px;
    font-weight: 700;
    color: var(--ap-stat-text);
    line-height: 1.1;
}
/* Grid: search right-aligned (row 1); card list (row 2) */
.ap-prop-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 14px;
    flex: 1;
    min-height: 0;
}
.ap-prop-list .fw-card-list__search {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: 300px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1.5px solid #E4E8F0;
    border-radius: 24px;
    padding: 10px 18px;
}
.ap-prop-list .fw-card-list__search .material-symbols-outlined {
    font-size: 20px;
    color: #6B7A99;
    flex-shrink: 0;
}
.ap-prop-list .fw-card-list__search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: #1B3878;
    min-width: 0;
}
.ap-prop-list .fw-card-list__search-input::placeholder {
    color: #9DAAC0;
}
.ap-prop-list .fw-card-list__card-container {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
}
.ap-prop-list .fw-card-list__card-container::-webkit-scrollbar {
    display: none;
}
/* Property card */
.ap-property-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(27, 56, 120, 0.08);
    padding: 16px 20px;
    cursor: pointer;
    transition: box-shadow 0.15s, background 0.15s;
}
.ap-property-card:hover {
    background: #F0F4FF;
    box-shadow: 0 4px 12px rgba(27, 56, 120, 0.14);
}
.ap-property-card__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 56px;
    flex-shrink: 0;
}
.ap-property-card__badge-icon {
    font-size: 28px;
    color: #2E7D32;
    font-variation-settings: 'FILL' 1;
}
.ap-property-card__badge-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #2E7D32;
    text-transform: uppercase;
}
.ap-property-card__badge--upcoming .ap-property-card__badge-icon,
.ap-property-card__badge--upcoming .ap-property-card__badge-label {
    color: var(--md-sys-color-primary);
}
.ap-property-card__badge:has(.ap-property-card__badge-pending-flag:not(:empty)) {
    background: var(--md-sys-color-error-container);
    border-radius: 6px;
    padding: 6px 4px;
}
.ap-property-card__badge:has(.ap-property-card__badge-pending-flag:not(:empty)) .ap-property-card__badge-icon,
.ap-property-card__badge:has(.ap-property-card__badge-pending-flag:not(:empty)) .ap-property-card__badge-label {
    color: var(--md-sys-color-on-error-container);
}
.ap-property-card__badge:has(.ap-property-card__badge-upcoming-flag:not(:empty)) .ap-property-card__badge-icon,
.ap-property-card__badge:has(.ap-property-card__badge-upcoming-flag:not(:empty)) .ap-property-card__badge-label {
    color: var(--md-sys-color-primary);
}
.ap-property-card__address-block {
    flex: 0 0 180px;
    min-width: 0;
}
.ap-property-card__street {
    font-size: 15px;
    font-weight: 600;
    color: #1B3878;
    line-height: 1.3;
}
.ap-property-card__suburb {
    font-size: 12px;
    color: #6B7A99;
    margin-top: 2px;
}
.ap-property-card__last-visited {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
}
.ap-property-card__last-visited-icon {
    font-size: 13px;
    color: var(--md-sys-color-on-surface-variant);
}
.ap-property-card__last-visited-label {
    font-size: 11px;
    color: var(--md-sys-color-on-surface-variant);
}
.ap-property-card__last-visited-date {
    font-size: 11px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
}
.ap-property-card__last-visited-date:empty::after {
    content: "—";
}
.ap-job-meta {
    margin-top: 8px;
    display: none;
    flex-direction: column;
    gap: 5px;
}
/* pendingJobs.html/upcoming.html's cards are always job-backed so this is always true there; the
   dashboard's Portfolio tile mixes in properties with no current job, which would otherwise leave an
   empty margin-top gap under the address. */
.ap-job-meta:has(.ap-job-type:not(:empty)) {
    display: flex;
}
.ap-job-type-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ap-job-type {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #E65100;
    text-transform: uppercase;
}
.ap-job-due-date {
    font-size: 11px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
}
.ap-job-due-date:not(:empty)::before {
    content: "\00b7 Due ";
}
.ap-job-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.ap-job-pill {
    display: none;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 7px 2px 4px;
    border-radius: 20px;
}
.ap-job-pill .material-symbols-outlined {
    font-size: 13px;
    font-variation-settings: 'FILL' 1;
}
.ap-job-pill--approved {
    background: rgba(46, 125, 50, 0.12);
    color: #2E7D32;
}
.ap-job-pill--booked {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}
.ap-job-pills:has(.ap-job-pills__approved-flag:not(:empty)) .ap-job-pill--approved { display: inline-flex; }
.ap-job-pills:has(.ap-job-pills__booked-flag:not(:empty))   .ap-job-pill--booked   { display: inline-flex; }
.ap-job-pills__booked-date {
    display: none;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: #1B3878;
}
.ap-job-pills:has(.ap-job-pills__booked-flag:not(:empty)) .ap-job-pills__booked-date { display: inline-flex; }
.ap-job-meta--strip {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: 0;
    padding: 10px 0 6px;
    border-bottom: 1px solid var(--rs-container-primary-border);
    margin-bottom: 4px;
}
/* Tile-mode Property Portfolio list (roleAgency dashboard). A dedicated class rather than reusing
   .ap-prop-list - pendingJobs.html/upcoming.html still use that class for their own plain
   (non-tile) FWCardList, whose search box relies on .ap-prop-list's own grid rules. */
.ap-portfolio-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    min-height: 0;
}
/* Search box + tile row share one line, banners (filter/saved-search chips) stay on their own
   row directly underneath - same position as before, just no longer sharing the row with tiles. */
.ap-search-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.ap-portfolio-list .fw-card-list__search {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1.5px solid #E4E8F0;
    border-radius: 24px;
    padding: 10px 18px;
}
.ap-portfolio-list .fw-card-list__search .material-symbols-outlined {
    font-size: 20px;
    color: #6B7A99;
    flex-shrink: 0;
}
.ap-portfolio-list .fw-card-list__search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: #1B3878;
    min-width: 0;
}
.ap-portfolio-list .fw-card-list__search-input::placeholder {
    color: #9DAAC0;
}
.ap-portfolio-list .ap-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    background: none;
    padding: 0;
    color: #9DAAC0;
    cursor: pointer;
}
.ap-portfolio-list .ap-search-clear .material-symbols-outlined { font-size: 18px; }
.ap-portfolio-list .ap-search-clear:hover { color: #6B7A99; }
/* Empty input still shows its placeholder, so this is a reliable "has the user typed anything" hook
   without any JS needed to toggle the clear button's visibility. */
.ap-portfolio-list .fw-card-list__search-input:placeholder-shown ~ .ap-search-clear {
    display: none;
}
.ap-portfolio-list .fw-card-list__card-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
}
.ap-portfolio-list .fw-card-list__card-container::-webkit-scrollbar {
    display: none;
}

/* Tile row: Property Portfolio / Pending / Upcoming tiles (driven by FWCardList's tile mode) plus
   the static Outstanding Invoices button - same .ap-stat pill look the dashboard already used for
   its old header stats, just made clickable/counted via the fw-card-list__tile contract. */
.ap-tile-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.ap-tile-row .fw-card-list__tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.ap-portfolio-list .ap-stat {
    border: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}
.ap-portfolio-list .fw-card-list__tile:hover { background: var(--md-sys-color-surface-container); }
.ap-portfolio-list .fw-card-list__tile.active {
    background: var(--ap-stat-icon-bg);
    box-shadow: 0 0 0 1.5px var(--md-sys-color-primary) inset;
}
.ap-invoices-btn:hover { background: var(--md-sys-color-surface-container); }

/* Filter/search banners - same label/save/edit contract as the framework's other tile-mode lists
   (outbox.html/scheduling.html), skinned to match this row's pill style. */
.ap-portfolio-list .fw-card-list__banners:empty { display: none; }
.ap-portfolio-list .fw-card-list__banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 20px;
    background: var(--ap-stat-bg);
    color: var(--ap-stat-text);
    font-size: 13px;
    width: fit-content;
}
.ap-portfolio-list .fw-card-list__banner-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ap-portfolio-list .fw-card-list__banner-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    background: none;
    padding: 2px;
    color: inherit;
    cursor: pointer;
}
.ap-portfolio-list .fw-card-list__banner-btn .material-symbols-outlined { font-size: 18px; }
.ap-portfolio-list .fw-card-list__banner-btn--edit,
.ap-portfolio-list .fw-card-list__banner--saved .fw-card-list__banner-btn--save {
    display: none;
}
.ap-portfolio-list .fw-card-list__banner--saved .fw-card-list__banner-btn--edit {
    display: flex;
}
.ap-property-card__tags-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    align-self: stretch;
    width: 90px;
    border-left: 1px solid var(--rs-container-primary-border);
    padding-left: 20px;
}
.ap-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.ap-property-card__details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    align-self: stretch;
    width: 180px;
    border-left: 1px solid var(--rs-container-primary-border);
    padding-left: 20px;
}
.ap-detail-row {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ap-detail-row__label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--md-sys-color-on-surface-variant);
}
.ap-detail-row__value {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ap-property-card__services-col,
.ap-property-card__contacts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    align-self: stretch;
    border-left: 1px solid var(--rs-container-primary-border);
    padding-left: 20px;
}
.ap-property-card__services-col          { flex: 1; min-width: 180px; }
.ap-property-card__services-col--wide    { flex: 1; }
.ap-property-card__docs-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    align-self: stretch;
    width: 180px;
    border-left: 1px solid var(--rs-container-primary-border);
    padding-left: 20px;
}
.ap-doc-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ap-doc__icon {
    font-size: 16px;
    color: var(--md-sys-color-primary);
    flex-shrink: 0;
}
.ap-doc__code {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.ap-doc__code:hover { text-decoration: underline; }
.ap-property-card__contacts              { width: 220px; }
.ap-property-card__col-header,
.ap-property-card__contacts-header {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ap-property-card__col-label,
.ap-property-card__contacts-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--md-sys-color-on-surface-variant);
}
.ap-property-card__col-count,
.ap-property-card__contacts-count {
    font-size: 10px;
    font-weight: 600;
    color: var(--md-sys-color-on-primary);
    background: var(--md-sys-color-primary);
    border-radius: 10px;
    padding: 1px 6px;
    line-height: 1.4;
}
.ap-services-scroll {
    overflow-y: auto;
    height: 112px;
}
.ap-service-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    min-width: 0;
}
.ap-service__code {
    font-size: 10px;
    font-weight: 700;
    color: var(--md-sys-color-on-primary);
    background: var(--md-sys-color-primary);
    border-radius: 4px;
    padding: 0 5px;
    line-height: 1.6;
    flex-shrink: 0;
}
.ap-service__name {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.ap-service__due {
    font-size: 11px;
    color: var(--md-sys-color-on-surface-variant);
    white-space: nowrap;
    flex-shrink: 0;
}
.ap-contacts-scroll {
    overflow-y: auto;
    height: 112px;
}
.ap-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
}
.ap-contact__avatar {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.ap-contact__info {
    min-width: 0;
}
.ap-contact__name {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ap-contact__detail {
    font-size: 11px;
    color: var(--md-sys-color-on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ap-property-card__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: stretch;
    border-left: 1px solid var(--rs-container-primary-border);
    padding: 0 20px;
    width: 130px;
}
.ap-property-card__service-btn {
    background: #1B3878;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
}
.ap-property-card__service-btn:hover {
    opacity: 0.88;
}
.ap-property-card:has(.ap-property-card__job-flag:not(:empty)) .ap-property-card__service-btn {
    display: none;
}
.ap-property-card__approve-btn {
    display: none;
}
.ap-property-card:has(.ap-property-card__badge-pending-flag:not(:empty)) .ap-property-card__approve-btn {
    display: block;
}
.ap-property-card__approve-btn {
    background: #1B7850;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
    margin-bottom: 6px;
    width: 100%;
}
.ap-property-card__approve-btn:hover {
    opacity: 0.88;
}
.ap-property-card__approve-btn:disabled {
    opacity: 0.5;
    cursor: default;
}
.ap-property-card__cancel-btn {
    background: #7B1C1C;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
    width: 100%;
}
/* .ap-property-card__job-flag only exists on the plain dashboard's Property-based cards (drives
   COMPLIANT vs has-a-job state) - pendingJobs.html/upcoming.html don't have it since every card
   there already represents a job, so cancel-btn should just always show on those two pages. Scope
   the default-hidden + has(job-flag) show behaviour to the plain dashboard specifically (via the
   page-level modifier classes) rather than keying purely off job-flag, which - being entirely
   absent from the DOM on the other two pages - can't distinguish "no job" from "not the dashboard"
   on its own. See feedback_shared_leftdrawer_class_names for the same "grep other consumers before
   scoping shared CSS" lesson. */
.ap-dashboard:not(.ap-dashboard--pending):not(.ap-dashboard--upcoming) .ap-property-card__cancel-btn {
    display: none;
}
.ap-dashboard:not(.ap-dashboard--pending):not(.ap-dashboard--upcoming) .ap-property-card:has(.ap-property-card__job-flag:not(:empty)) .ap-property-card__cancel-btn {
    display: block;
}
.ap-property-card__cancel-btn:hover {
    opacity: 0.88;
}
.ap-property-card__cancel-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ── Request Service popup ───────────────────────────────────────────────── */
dialog:has(.rs-request-service) {
    padding: 0;
    overflow: hidden;
    min-width: 500px;
}
dialog:has(.rs-request-service) .dialog-header {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 14px 20px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
dialog:has(.rs-request-service) .dialog-header .material-symbols-outlined {
    font-size: 22px;
}
dialog:has(.rs-request-service) .dialog-header::after {
    color: var(--md-sys-color-on-primary);
    font-size: 22px;
    line-height: 1;
    margin-left: auto;
}
.rs-request-service {
    display: flex;
    flex-direction: column;
    background: var(--md-sys-color-surface);
}
.rs-request-service__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.rs-request-service__instructions {
    margin: 0;
    font-size: 13px;
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1.5;
}
.rs-request-service__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rs-request-service__field-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.rs-request-service__field-label .material-symbols-outlined {
    font-size: 16px;
}
.rs-request-service__date {
    width: 180px;
    padding: 9px 14px;
    border: 1.5px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    font-size: 14px;
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-container-lowest);
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
}
.rs-request-service__date:focus {
    border-color: var(--md-sys-color-primary);
}
.rs-request-service__options {
    display: flex;
    gap: 10px;
}
.rs-service-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1.5px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    background: var(--md-sys-color-surface-container-lowest);
    cursor: pointer;
    font-size: 13px;
    color: var(--md-sys-color-on-surface);
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
}
.rs-service-option:hover {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-surface-container-low);
}
.rs-service-option__icon {
    font-size: 18px;
    color: var(--md-sys-color-on-surface-variant);
    flex-shrink: 0;
    transition: color 0.15s;
}
.rs-service-option__label {
    flex: 1;
    line-height: 1.3;
}
.rs-service-option__check {
    font-size: 18px;
    color: var(--md-sys-color-outline-variant);
    flex-shrink: 0;
    transition: color 0.15s;
}
/* selected state */
.rs-service-option:has(input:checked) {
    background: var(--md-sys-color-primary-container);
    border-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary-container);
}
.rs-service-option:has(input:checked) .rs-service-option__icon {
    color: var(--md-sys-color-primary);
}
.rs-service-option:has(input:checked) .rs-service-option__check {
    color: var(--md-sys-color-primary);
}
.rs-request-service__notes {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1.5px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-container-lowest);
    resize: vertical;
    outline: none;
    transition: border-color 0.15s;
}
.rs-request-service__notes:focus {
    border-color: var(--md-sys-color-primary);
}
dialog:has(.rs-request-service) .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface);
}
dialog:has(.rs-request-service) .dialog-footer .fw-button {
    padding: 9px 22px;
    border-radius: 20px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.15s;
}
dialog:has(.rs-request-service) .dialog-footer .fw-button:hover {
    opacity: 0.85;
}
dialog:has(.rs-request-service) .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1.5px solid var(--md-sys-color-outline-variant);
}
dialog:has(.rs-request-service) .dialog-footer .primary {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

/* ── SETTINGS BUSINESS RULES VIEW ────────────────────────────────── */
/* Mirrors the flags settings view so the settings section stays consistent. */

.settings-business-rules-view {
    display: grid;
    grid-template-rows: 50px 1fr;
    max-height: 100vh;
    gap: 16px;
    overflow: hidden;
    box-sizing: border-box;
}

.settings-business-rules-view__header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.settings-business-rules-view__header-icon {
    font-size: 28px;
    color: var(--md-sys-color-on-primary);
}

.settings-business-rules-view__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--md-sys-color-on-primary);
    margin: 0;
}

.settings-business-rules-view__table-wrap {
    display: flex;
    flex-direction: column;
    background: #F9F9FF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(27,28,28,0.06);
    overflow: hidden;
}

.settings-business-rules-view__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.settings-business-rules-view__search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 8px 12px;
    color: #888;
    font-size: 14px;
}

.settings-business-rules-view__search .material-symbols-outlined { font-size: 18px; color: #888; }

.settings-business-rules-view__search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: inherit;
}

.settings-business-rules-view__search-input::placeholder { color: #aaa; }

.settings-business-rules-view__add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--md-sys-color-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.settings-business-rules-view__add-btn .material-symbols-outlined { font-size: 18px; }
.settings-business-rules-view__add-btn:hover { opacity: 0.9; }

.settings-business-rules-view__table {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.settings-business-rules-view__table-header {
    display: grid;
    grid-template-columns: 2fr 1.2fr 3fr 0.8fr;
    padding: 10px 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
}

.settings-business-rules-view__table [data-widget="FWCardList"] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.settings-business-rules-view__row {
    display: grid;
    grid-template-columns: 2fr 1.2fr 3fr 0.8fr;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #eef0f4;
    font-size: 13px;
    color: #1B1C1C;
    cursor: pointer;
}

.settings-business-rules-view__row:last-child { border-bottom: none; }
.settings-business-rules-view__row:hover { background: var(--rs-container-hover); }

.settings-business-rules-view__row-name { font-weight: 500; }

/* The action summary can get long; keep rows single-height rather than reflowing the grid. */
.settings-business-rules-view__row-actions {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--md-sys-color-on-surface-variant);
}

.settings-business-rules-view__row-status { font-size: 12px; }

/* ── BUSINESS RULE EDITOR ────────────────────────────────────────── */

/* Dialog chrome. The framework gives the <dialog> an id matching the route's viewId, and each
   dialog-hosted view styles its own header/footer through that id - without this block the header
   renders as a bare transparent strip with a floating close icon and the footer falls back to
   display:block, putting unstyled buttons bottom-left. Mirrors #flagEditor / #partEditor.
   Wider than those two because the action rows lay out horizontally. */
#businessRuleEditor {
    width: 720px;
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
}

#businessRuleEditor .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 16px;
    margin: 0;
    cursor: pointer;
}

#businessRuleEditor .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

#businessRuleEditor .dialog-footer .fw-button {
    padding: 8px 24px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#businessRuleEditor .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

#businessRuleEditor .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant);
}

/* Matches .flag-editor, the other dialog-hosted editor: the dialog itself has no padding, so the
   view supplies it, and flex:1 + min-height:0 + overflow-y let a long rule scroll inside the
   dialog rather than pushing the framework's save/cancel footer off the bottom. */
.business-rule-editor {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    overflow-y: auto;
}

/* The rows this view toggles (question-set scoping, the Clear button) set the `hidden` attribute,
   but the UA stylesheet's [hidden]{display:none} is a single type selector - any class rule below
   that sets display would silently beat it and leave the element on screen. Re-assert it with
   enough specificity to win over them. */
.business-rule-editor [hidden] {
    display: none;
}

.business-rule-editor__section-title {
    margin: 12px 0 0;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--md-sys-color-on-surface-variant);
}

.business-rule-editor__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.business-rule-editor__field--inline {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.business-rule-editor__label {
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
}

.business-rule-editor__input,
.business-rule-editor__event-sel,
.business-rule-editor__question-set-sel {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 14px;
    background: #fff;
}

.business-rule-editor__hint {
    font-size: 11px;
    color: #888;
}

.business-rule-editor__condition {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #F9F9FF;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 6px;
    padding: 10px 12px;
}

.business-rule-editor__condition-name {
    flex: 1;
    font-size: 13px;
}

.business-rule-editor__condition-edit,
.business-rule-editor__condition-clear,
.business-rule-editor__action-add {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--md-sys-color-primary);
    cursor: pointer;
}

.business-rule-editor__condition-edit:hover,
.business-rule-editor__condition-clear:hover,
.business-rule-editor__action-add:hover { background: var(--rs-container-hover); }

.business-rule-editor__action-add { align-self: flex-start; }
.business-rule-editor__action-add .material-symbols-outlined { font-size: 18px; }

.business-rule-editor__actions-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.business-rule-editor__action-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: #F9F9FF;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 6px;
    padding: 8px 10px;
}

.business-rule-editor__action-label {
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
    white-space: nowrap;
}

.business-rule-editor__action-when,
.business-rule-editor__action-param,
.business-rule-editor__action-type {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 13px;
    background: #fff;
}

.business-rule-editor__action-when { width: 110px; }

/* Action parameters. Pickers (role/target/tag) sit inline on the action's first line; free-text
   parameters take a line of their own, because a subject or a message needs room to read and edit.
   Driven by the parameter's declared type, so this holds for action types added later too. */
/* display:contents dissolves this wrapper so the parameters become flex items of the action row
   itself. Without it a wrapped line would align under the wrapper's left edge - i.e. indented past
   the when/type controls - rather than at the start of the row. */
.business-rule-editor__action-params {
    display: contents;
}

/* Zero-height full-width spacer that forces the wrap before the free-text parameters. */
.business-rule-editor__action-param-break {
    flex: 0 0 100%;
    height: 0;
}

.business-rule-editor__action-param-group {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.business-rule-editor__action-param-group[data-param-type="TAG"] { flex: 1; min-width: 120px; }
.business-rule-editor__action-param-group[data-param-type="TAG"] .business-rule-editor__action-param { flex: 1; min-width: 0; }

/* Free-text parameters share the line the break created, stacking their label above the field so
   two of them fit side by side; they wrap to separate lines only if the dialog gets narrow. */
.business-rule-editor__action-param-group[data-param-type="STRING"],
.business-rule-editor__action-param-group[data-param-type="TEXT"] {
    flex: 1 1 240px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    /* Top-aligned so the Subject and Message labels line up, rather than the shorter field being
       centred against the taller textarea. */
    align-self: flex-start;
}

.business-rule-editor__action-param-group[data-param-type="TEXT"] .business-rule-editor__action-param {
    min-height: 90px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.4;
}

.business-rule-editor__action-remove {
    background: none;
    border: none;
    color: var(--md-sys-color-error, #b3261e);
    cursor: pointer;
    padding: 2px;
    margin-left: auto;
}

.business-rule-editor__action-remove .material-symbols-outlined { font-size: 18px; }

/* Property tags render read-only, so pills sit inline in the breadcrumb with no remove button. */
.prop-view__tags {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
}

/* ── NOTIFICATIONS PANEL CONTENT ─────────────────────────────────── */
/* The panel shell (.notifications-panel, .notifications-panel__header/__body) already existed for
   the placeholder; these are the card + badge styles added when it was bound to real data. */

.notifications-sidebar-btn {
    position: relative;
}

.notifications-sidebar-btn__badge {
    position: absolute;
    top: 2px;
    left: 22px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--md-sys-color-error, #b3261e);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-sizing: border-box;
}

/* The widget keeps its own count element up to date; it is mirrored onto the button badge and
   hidden here rather than removed, so the MutationObserver still sees it change. */
.notifications-panel__count {
    display: none;
}

.notifications-panel__card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.notifications-panel__card {
    background: #fff;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    padding: 10px 12px;
}

.notifications-panel__card-top {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.notifications-panel__card-subject {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #1B1C1C;
}

.notifications-panel__card-dismiss {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1;
}

.notifications-panel__card-dismiss .material-symbols-outlined { font-size: 16px; }
.notifications-panel__card-dismiss:hover { color: var(--md-sys-color-error, #b3261e); }

.notifications-panel__card-body {
    margin-top: 4px;
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
    white-space: pre-wrap;
}

.notifications-panel__card-meta {
    margin-top: 6px;
    font-size: 11px;
    color: #888;
}

/* ── NOTIFICATION PRIORITIES ─────────────────────────────────────── */

/* Drag a notification card onto a bell to move it to that level. */
.notifications-panel__card {
    cursor: grab;
}

.notifications-panel__card--dragging {
    opacity: 0.5;
}

/* Drop target under a dragged notification. Deliberately loud - during a drag the panel is hidden
   and the bells are the only thing on screen that matters. */
.notifications-sidebar-btn--drop-target {
    background: rgba(255,255,255,0.22);
    outline: 2px solid rgba(255,255,255,0.85);
    outline-offset: -2px;
    border-radius: 4px;
}

.notifications-sidebar-btn--drop-target .material-symbols-outlined {
    transform: scale(1.25);
    transition: transform 0.1s ease;
}

/* Bold the level's name too - the icon growing alone reads as a hover state rather than a target.
   Only visible with the sidebar expanded, since the collapsed rules hide the label entirely. */
.notifications-sidebar-btn--drop-target .notifications-sidebar-btn__label {
    font-weight: 700;
}

/* Priority rows in the Global Settings list. */
.settings-global-view__priority-row {
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid #eef0f4;
    font-size: 13px;
    cursor: pointer;
}

.settings-global-view__priority-row:last-child { border-bottom: none; }
.settings-global-view__priority-row:hover { background: var(--rs-container-hover); }

.settings-global-view__priority-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-global-view__priority-title { font-weight: 500; }


/* ── NOTIFICATION PRIORITY EDITOR ────────────────────────────────── */

.notification-priority-editor {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    overflow-y: auto;
}

.notification-priority-editor__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.notification-priority-editor__label {
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
}

.notification-priority-editor__input {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 14px;
}

.notification-priority-editor__hint {
    margin: 0;
    font-size: 11px;
    color: #888;
}

/* Dialog chrome, matching #flagEditor / #businessRuleEditor. */
#notificationPriorityEditor {
    width: 460px;
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
}

#notificationPriorityEditor .dialog-header {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 16px;
    margin: 0;
    cursor: pointer;
}

#notificationPriorityEditor .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

#notificationPriorityEditor .dialog-footer .fw-button {
    padding: 8px 24px;
    border-radius: 20px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#notificationPriorityEditor .dialog-footer .save {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

#notificationPriorityEditor .dialog-footer .cancel {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant);
}

/* margin-right:auto pushes Delete to the far left, away from Save - matching #jobTypeEditor, and
   keeping a destructive action out of easy reach of the confirm button. */
#notificationPriorityEditor .dialog-footer .delete {
    background: transparent;
    color: var(--md-sys-color-error);
    border: 1px solid var(--md-sys-color-error);
    margin-right: auto;
}

/* ── Asset reconciliation dialog ──────────────────────────────────────────────────────────────
   The comparison rendered into FWController.choice()'s message body when completing a job that
   left recorded assets uninspected (assetReconcile.js). Wider than the stock choice dialog
   because the whole point is reading two lists side by side. */
dialog.choice-dialog:has(.asset-reconcile__columns) { max-width: 640px; }

.asset-reconcile__intro { margin: 0 0 12px; }

.asset-reconcile__set + .asset-reconcile__set {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

.asset-reconcile__set-name {
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    margin-bottom: 6px;
}

.asset-reconcile__set-subline {
    font-size: 0.85em;
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: 6px;
}

.asset-reconcile__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.asset-reconcile__col {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    padding: 8px 10px;
    min-width: 0;
}

.asset-reconcile__col--missing { border-color: var(--md-sys-color-error); }

.asset-reconcile__col-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    opacity: 0.7;
    margin-bottom: 6px;
}

.asset-reconcile__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
}

.asset-reconcile__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
    font-size: 13px;
}

.asset-reconcile__key {
    color: var(--md-sys-color-on-surface);
    overflow-wrap: anywhere;
}

.asset-reconcile__when {
    font-size: 11px;
    opacity: 0.6;
    white-space: nowrap;
}

.asset-reconcile__item--none { opacity: 0.5; font-style: italic; }

.asset-reconcile__help {
    margin: 12px 0 0;
    font-size: 12px;
    opacity: 0.8;
}

@media (max-width: 560px) {
    .asset-reconcile__columns { grid-template-columns: 1fr; }
}