@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;
}


/************************************************** |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;
		background: url(../images/workspace-bgnd.svg) no-repeat top right;
	}
/*|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.png) 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.png) 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{
	    background: transparent;
	    border: 1px solid var(--md-sys-color-outline-variant);
	    border-radius: 2em;
	    font-size: 12px;
        padding: 7px 16px 7px 32px;
        width: 95px;
    }
    #workspace .workspace-body .left-sidebar.left-sidebar__closed .top .middle .searcher input {
        width: 0;
        padding: 7px 15px;
    }
	#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_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| */
.scheduling-job-list .fw-card-list__card {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.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: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ── 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 — technician avatars + TODAY label */
.scheduling-header__tech-row {
    display: flex;
    flex: 1;
    background: #0e1e33;
}

.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;
}
.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);
}

/* 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;
}
.scheduling-map__layer-btn:hover {
    background: #f5f5f5;
}
.scheduling-map__layer-btn.is-active {
    background: var(--md-sys-color-primary);
    color: white;
    border-color: transparent;
}

/* 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;
    grid-template-rows: max-content max-content auto max-content;
    overflow: hidden;
    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;
}
.scheduling-calendar__col-header {
    flex: 1;
    text-align: center;
    padding: 14px 4px 10px;
    font-weight: 600;
    font-size: 13px;
    border-left: 1px solid #e0e4ea;
    min-width: 140px;
}

/* 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), pinned to grid row 3 */
.scheduling-calendar__allday {
    grid-row: 3;
    display: flex;
    min-height: 0;
}
.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;
}
.scheduling-calendar__allday-col {
    flex: 1;
    min-width: 140px;
    border-left: 1px solid #e0e4ea;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
    position: relative;
}

/* Time axis (left and right) */
.scheduling-calendar__time-axis {
    width: 52px;
    flex-shrink: 0;
    position: relative;
    height: 720px;
}
.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 .scheduling-calendar__time-label {
    left: 8px;
    right: auto;
}

/* Main grid — flex row of tech columns; fixed pixel height so %-positioned job blocks work */
.scheduling-calendar__grid {
    flex: 1;
    display: flex;
    position: relative;
    min-width: 0;
    height: 720px;   /* 12 hours × 60px */
    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: 140px;
    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;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary, #fff);
    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);
}
.scheduling-calendar__job:hover {
    filter: brightness(1.1);
}
.scheduling-calendar__job--completed {
    opacity: 0.45;
}
/* All-day tiles flow in the column rather than overlapping absolutely */
.scheduling-calendar__job--allday {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 24px;
    flex-shrink: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
}



/* ── 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 - 40px);
    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;
}

/* ── 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: 12px;
    box-shadow: 0 2px 8px rgba(27,28,28,0.06);
    overflow: hidden;
    flex: 1;
    min-height: 0;
}
.agency-view__prop-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}
.agency-view__prop-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__prop-search .material-symbols-outlined { font-size: 18px; color: #888; }
.agency-view__prop-search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: inherit;
}
.agency-view__prop-search-input::placeholder { color: #aaa; }
.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*/
}
.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-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 8px 0;
    flex-shrink: 0;
}
.agency-view__panel-add {
    display: flex;
    align-items: 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;
    white-space: nowrap;
}
.agency-view__panel-add .material-symbols-outlined { font-size: 18px; }
.agency-view__panel-add:hover { background: rgba(255,255,255,0.15); }
.agency-view__panel-table {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #fff;
    border-radius: 10px;
}
.agency-view__panel-header {
    display: grid;
    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__panel-header--services { grid-template-columns: 3fr 1fr 1fr 2fr 1fr 1fr; }
.agency-view__panel-header--parts { grid-template-columns: 3fr 1fr 1fr 1fr; }
.agency-view__panel-table [data-widget="FWCardList"] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.agency-view__panel-table .fw-card-list__card-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
}
.agency-view__panel-row {
    display: grid;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #eef0f4;
    font-size: 13px;
    color: #1B1C1C;
    cursor: pointer;
    transition: background 0.1s;
}
.agency-view__panel-row:last-child { border-bottom: none; }
.agency-view__panel-row:hover { background: var(--rs-container-hover); }
.agency-view__panel-row--services { grid-template-columns: 3fr 1fr 1fr 2fr 1fr 1fr; }
.agency-view__panel-row--parts { grid-template-columns: 3fr 1fr 1fr 1fr; }
.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: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ── Header ──────────────────────────────────────────────────────────── */
.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__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__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: 12px 0;
}
.prop-view__fields .job-field {
    flex: 1;
}
.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);
}
.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__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--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 {
    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 { 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-row {
    display: grid;
    grid-template-columns: 2fr 20px 1fr 20px 1fr;
    align-items: center;
    gap: 8px;
    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 {
    font-size: 14px;
    font-weight: 500;
    color: #345F9B;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prop-view__tenant-phone,
.prop-view__tenant-email {
    font-size: 14px;
    color: #345F9B;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prop-view__tenant-icon {
    font-size: 18px;
    color: var(--md-sys-color-primary);
    opacity: 0.7;
}

/* ── 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 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;
    cursor: pointer;
}
.prop-view__svc-row:hover { background: var(--md-sys-color-surface-variant); }
.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-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.job-card-footer--tech {
    display: flex;
    justify-content: flex-end;
}
.job-card-footer--tech:has(.job-note-icons:empty) {
    display: none;
}

.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;
}
.job-due-date {
    font-size: 0.8em;
    color: var(--color-text-muted, #888);
    text-align: right;
    flex-shrink: 0;
}

.scheduling-job-list .job-note-previews {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.scheduling-job-list .job-note-preview {
    font-size: 0.75em;
    color: var(--rs-subtext);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/************************************************** || 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;
}

/* Notes toggle toolbar in panel header */
.rd-notes-toolbar {
    display: flex;
    gap: 4px;
    margin-right: 4px;
}
.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;
}

#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;
    border-radius: 1em 1em 0 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;
}

#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;
    border-radius: 1em 1em 0 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 {
    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: 44px;
    width: 160px;
    background: url(../images/rs_logo.png) 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.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 || *************************************************/

/* ── 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: 56px;
    transition: background 0.15s;
}
.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;
}

/* ── 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__approved {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-end;
    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__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;
}

/* 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;
}
.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;
}
.comms-tenant-row__missing {
    color: var(--rs-subtext);
    font-style: italic;
}

/* ── 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);
}
.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;
    gap: 16px;
    overflow: hidden;
    height: 100%;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

/* ── 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__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;
}

/* 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-method=cancel] {
    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-method=cancel],
.job-header__actions.status-1 .job-btn[data-method=backDate],
.job-header__actions.status-1 .job-btn--urgent {
    opacity: .5;
}

/* ACTIVE */
.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] {
    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] {
    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;
}

/* 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] {
    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 {
    display: grid;
    grid-template-rows: 16px auto;
    flex-shrink: 0;
    padding: 16px;
    font-size: 14px;
    background: white;
    border: 1px solid var(--md-sys-color-primary-container);
    border-radius: 10px;
    /* height: 120px; */
    max-height: 104px;
}
.job-items div[data-widget="FWCardList"] {
    overflow: auto;
    scrollbar-gutter: stable;
    margin-right: -15px; /* this is to counter the scroll bar gutter - may need to be excluded from maxOS*/
}

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

.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 {
    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;
}

/* ── 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;
}
.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--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__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__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: 13px;
    font-weight: 500;
    color: var(--md-sys-color-on-primary);
    opacity: 0.8;
    white-space: nowrap;
}

.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;
    grid-template-columns: 2fr 3fr 1fr 1fr 1fr auto;
    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;
}

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

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

.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;
}

.pending-view__cell.pending-view__cell--tenants::after {
    content: " (details coming)";
    opacity: .6;
}

.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;
}

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

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

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

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

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

.settings-view__grid-wrap {
    background: #F9F9FF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(27,28,28,0.06);
    overflow-y: auto;
}

.settings-view__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    padding: 40px;
}

.settings-view__item-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 24px;
    border-radius: 12px;
    transition: background 0.15s;
}

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

.settings-view__item-btn .material-symbols-outlined {
    font-size: 72px;
    color: var(--md-sys-color-primary);
}

.settings-view__item-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--md-sys-color-primary);
    text-align: center;
}

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

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

.settings-alerts-view {
    display: grid;
    grid-template-rows: 50px 1fr;
    max-height: 100vh;
    padding: 20px;
    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;
}

#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;
    border-radius: 1em 1em 0 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__icon-row {
    display: grid;
    grid-template-columns: 2fr 80px auto 1fr 48px;
    gap: 12px;
    align-items: end;
}

.alert-editor__icon-sub {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.alert-editor__icon-sub--center {
    align-items: center;
}

.alert-editor__sub-label {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
}

.alert-editor__color {
    width: 100%;
    height: 36px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 2px 3px;
    cursor: pointer;
    box-sizing: border-box;
}

.alert-editor__icon-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    background: #f0f2f5;
    border-radius: 6px;
}

.alert-editor__icon-preview-icon {
    font-size: 24px;
    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 FLAGS VIEW ─────────────────────────────────────────── */

.settings-flags-view {
    display: grid;
    grid-template-rows: 50px 1fr;
    max-height: 100vh;
    padding: 20px;
    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;
}

#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;
    border-radius: 1em 1em 0 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__icon-row {
    display: grid;
    grid-template-columns: 2fr 80px auto 1fr 48px;
    gap: 12px;
    align-items: end;
}

.flag-editor__icon-sub {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.flag-editor__icon-sub--center {
    align-items: center;
}

.flag-editor__sub-label {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
}

.flag-editor__color {
    width: 100%;
    height: 36px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 2px 3px;
    cursor: pointer;
    box-sizing: border-box;
}

.flag-editor__icon-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    background: #f0f2f5;
    border-radius: 6px;
}

.flag-editor__icon-preview-icon {
    font-size: 24px;
    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;
}

/* ── SERVICES DRAWER NEW BUTTON ─────────────────────────────────────────── */

.fw-view .fw-view__drawer-container-left[data-field="Services"] .fw-view__drawer-container-inner,
.fw-view .fw-view__drawer-container-left[data-field="AllTemplates"] .fw-view__drawer-container-inner {
    grid-template-rows: 35px auto auto 1fr;
}

.services-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;
}

.services-drawer__new-btn:hover {
    opacity: 0.88;
}

.services-drawer__new-btn .material-symbols-outlined {
    font-size: 18px;
}

/* ── 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: auto 1fr;
    height: 100%;
    max-height: calc(100vh - 40px);
    overflow: hidden;
}

.service-view__header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    color: var(--md-sys-color-on-primary);
    flex-shrink: 0;
}

.service-view__header-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--md-sys-color-on-primary);
    overflow: hidden;
}

.service-view__header-text {
    min-width: 0;
}

.service-view__title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: var(--md-sys-color-on-primary);
}

.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;
    padding: 20px 24px;
    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-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 {
    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 {
    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 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;
}

.sqset-questions-view__add-btn,
.sqset-questions-view__publish-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    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;
}

.question-editor__field--checkbox {
    flex: 0 0 auto;
    align-items: center;
}

.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;
}

.question-editor__check {
    width: 18px;
    height: 18px;
    margin-top: 4px;
    accent-color: var(--md-sys-color-primary);
    cursor: pointer;
}

/* ── 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: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.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;
    grid-template-rows: max-content max-content auto max-content;
    overflow: hidden;
    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__header-top {
    display: block;
    padding: 16px;
}

.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;
}

/* ── Quotes ──────────────────────────────────────────────────────────────── */

/* A4 page canvas */
.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;
}

.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-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 var(--md-sys-color-outline);
    border-left: none;
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-variant);
    font-size: 13px;
    cursor: pointer;
}
.template-editor-preview-chip:hover { background: var(--md-sys-color-surface-container-highest); }

/* In preview mode: hide palette, canvas, page-format and save buttons */
.template-editor-workspace--preview .template-editor-editor__palette { display: none; }
.template-editor-workspace--preview .template-editor-page-canvas     { 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: 8px 16px;
    background: var(--md-sys-color-surface-container-low);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    flex-shrink: 0;
}

.template-editor-editor__toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.template-editor-editor__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}

.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--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--aggregate .calc-op-block__agg-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;
}

/* ── 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 {
    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 { 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 {
    width: 140px;
    padding: 6px 8px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 6px;
    font-size: 0.9rem;
}
.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; }
.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; padding: 0; }
.template-editor-table-el--no-border .template-editor-table-el .template-editor-table-el__th,
.template-editor-table-el--no-border .template-editor-table-el .template-editor-table-el__td { border: 1px solid #e0e0e0; padding: 4px 8px; }
.template-editor-table-el--no-border .template-editor-table-el .template-editor-table-el__th { background: #f5f5f5; }
.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;
}
.template-editor-table-el__td {
    overflow: hidden;
    text-overflow: ellipsis;
}
.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: 32px;
    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: 4px 8px;
    border: 1px solid #e0e0e0;
    min-width: 0;
    min-height: 28px;
    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;
    }

    @page { size: A4; margin: 0; }
}

/* Editable card list items */
.fw-card-list__card { position: relative; }

.fw-card-list__item-delete {
    position: absolute;
    right: -30px;
    top: 0;
    bottom: 0;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--md-sys-color-error);
    padding: 0;
    opacity: 0;
    transition: opacity .15s;
}
.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,
.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,
.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 { font-size: 0.75em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 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__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__pause-btn:hover { background: rgba(245, 248, 253, 0.1); }
.outgoing-detail__items .fw-card-list__card-container {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
}
.outgoing-detail__view-space {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.outgoing-detail__view-space:not(:has(.fw-active-view)) {
    display: none;
}
.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; }

/* ── Change Password popup ──────────────────────────────────────────────── */
dialog#changePassword {
    min-width: 380px;
    max-width: 460px;
}

#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;
    border-radius: 1em 1em 0 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;
}

#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;
    border-radius: 1em 1em 0 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;
}

#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;
    border-radius: 1em 1em 0 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 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);
}

.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__search-btn {
    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;
    letter-spacing: 0.04em;
}

.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); }

/* ── Tenant card row — clickable ── */
.prop-view__tenant-row {
    cursor: pointer;
}

.prop-view__tenant-row:hover {
    background: var(--md-sys-color-surface-variant);
}

/* ── Add / Edit Tenant dialog ── */
#addTenant,
#editTenant {
    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 {
    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 {
    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 {
    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 {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

#addTenant .dialog-footer .save:disabled,
#editTenant .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 {
    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);
}

/* ── 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__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__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);
    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;
}

/* 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__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);
}

/* ── 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 .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); }
.report-view { container-type: inline-size; }
@container (max-width: 980px) {
    .qt-btn { padding: 6px; font-size: 0; gap: 0; }
    .qt-btn .material-symbols-outlined { font-size: 18px; }
}
.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 .qt-editor__workspace {
    height: calc(100vh - 120px);
}
#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-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;
}