@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 .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: 50px 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__name {
    font-size: 24px;
    font-weight: 400;
    color: #F5F8FD;
    margin: 0;
    line-height: 32px;
}

/* ── Body padding ────────────────────────────────────────────────────── */
.agency-view__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── Urgent Banner ───────────────────────────────────────────────────── */
.agency-view__urgent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: hsla(6, 100%, 92%, 0.61);
    border-left: 4px solid #BA1A1A;
    border-radius: 8px;
    padding: 16px 20px;
    gap: 20px;
}
.agency-view__urgent-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.agency-view__urgent-icon {
    width: 38px;
    height: 35px;
    background: #BA1A1A;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.agency-view__urgent-icon .material-symbols-outlined { color: #fff; font-size: 20px; }
.agency-view__urgent-text h3 {
    margin: 0 0 2px 0;
    font-size: 16px;
    font-weight: 700;
    color: #93000A;
    line-height: 1.5;
}
.agency-view__urgent-text p {
    margin: 0;
    font-size: 14px;
    color: hsla(356, 100%, 29%, 0.80);
    line-height: 1.43;
}
.agency-view__urgent-btn {
    flex-shrink: 0;
    background: #BA1A1A;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.agency-view__urgent-btn:hover { opacity: 0.88; }

/* ── 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-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
}
.agency-view__card-badge--red  { background: #FFDAD6; color: #BA1A1A; }
.agency-view__card-badge--blue { background: #D4E3FF; color: #003062; }
.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-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; }

/* ── Agency Fields ───────────────────────────────────────────────────── */
.agency-view__fields {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}
.agency-view__fields .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-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);
    width: 100%;
    align-self: auto;
}

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

/* ── Fields row ──────────────────────────────────────────────────────── */
.prop-view__fields {
    display: flex;
    gap: 12px;
    padding: 12px 0;
}
.prop-view__fields .job-field {
    flex: 1;
}

/* ── 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: flex;
    align-items: center;
    gap: 10px;
    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 {
    flex: 1;
    font-size: 14px;
    color: #345F9B;
}
.prop-view__tenant-phone,
.prop-view__tenant-email {
    font-size: 14px;
    color: #345F9B;
}
.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;
}
.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);
}

/************************************************** || 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 ── */
.right-drawer__tab {
    display: flex;
    flex-direction: column;
    border-radius: 10px 0 0 10px;
}
.right-drawer.open .right-drawer__tab{
	flex-direction: row;
}
.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;
}

.right-drawer__tab-btn .material-symbols-outlined {
    font-size: 22px;
}

.right-drawer__tab-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* ── Open: full panel ── */
.right-drawer__panel {
    display: flex;
    position: absolute;
    right: 0;
    top: 86px;
    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);
}

/* ── 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;
}
.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: inherit;
    flex-shrink: 0;
    cursor: pointer;
}
.right-drawer__job-summary__book-btn:hover:not(.is-disabled) {
    filter: brightness(1.1);
}
.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: inherit;
    flex-shrink: 0;
    cursor: pointer;
}
.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: 0;
    color: inherit;
    flex-shrink: 0;
    cursor: pointer;
}
.right-drawer__job-summary__snooze-btn:hover {
    filter: brightness(1.1);
}
.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: 0;
    color: inherit;
    flex-shrink: 0;
    cursor: pointer;
}
.right-drawer__job-summary__uncontactable-btn:hover {
    filter: brightness(1.1);
}
.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;
}
.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: 2px 10px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    flex-shrink: 0;
    gap: 4px;
}

.right-drawer__panel-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--rs-wsdefault-text);
    flex: 1;
}

.right-drawer__panel-icons {
    display: flex;
    align-items: center;
    gap: 2px;
}

.right-drawer__panel-close {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    color: var(--rs-wsdefault-text);
    cursor: pointer;
    padding: 6px;
    margin-left: 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;
    border-bottom: 1px solid var(--md-sys-color-surface-variant);
}
.comms-tenant-row:last-child {
    border-bottom: none;
}
.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;
}

/* ── 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: grid;
    grid-template-columns: minmax(50px, max-content) max-content minmax(100px, max-content) max-content max-content auto;
    align-items: center;
    column-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;
}

/* ── Header Info Strip ─────────────────────────────────── */
.job-header__info {
    grid-column: 1 / span 4;
    display: flex;
}

.job-header__info-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.job-header__info-label {
    color: #9CCAFF;
    font-size: 10px;
    line-height: 16px;
}

.job-header__info-value {
    color: #9CCAFF;
    font-size: 12px;
    line-height: 16px;
}

.job-header__status {
    grid-column: 5;
    color: var(--md-sys-color-on-primary);
    font-size: 16px;
    line-height: 16px;
    text-align: center;
}

/* ── 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-actions {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 0;
    justify-content: space-between;
}
.job-actions__group {
	display: inline-block;
}
.job-btn {
    min-width: 130px;
    height: 38px;
    border-radius: 100px;
    border: 1px solid var(--rs-wsdefault-text);
    background: var(--md-sys-color-background);
    color: var(--rs-wsdefault-text);
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 24px;
    padding: 0 20px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
}

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

.job-btn--urgent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 130px;
    box-sizing: border-box;
    cursor: pointer;
    background: var(--md-sys-color-outline-variant);
    border-color: var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
}

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

.job-btn--urgent.isUrgent-1 {
    background: var(--md-sys-color-error);
    border-color: var(--md-sys-color-error);
    color: var(--md-sys-color-on-primary);
}

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

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

/* ACTIVE */
.job-actions.status-2 .job-btn[data-method=toApproved],
.job-actions.status-2 .job-btn[data-method=book],
.job-actions.status-2 .job-btn[data-click=start],
.job-actions.status-2 .job-btn[data-method=uncomplete] {
    display: none;
}
.job-actions.status-2 .job-btn[data-method=toPending],
.job-actions.status-2 .job-btn[data-method=unbook] {
    opacity: .5;
}

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

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

/* PENDING */
.job-actions.status-5 .job-btn[data-method=toPending],
.job-actions.status-5 .job-btn[data-method=unbook],
.job-actions.status-5 .job-btn[data-method=complete],
.job-actions.status-5 .job-btn[data-method=uncomplete] {
    display: none;
}
.job-actions.status-5 .job-btn[data-method=book],
.job-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="Templates"] .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__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;
    padding: 4px 0 8px;
}

.service-view__question-sets-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 {
    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-card {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--md-sys-color-surface);
    transition: background 0.15s;
}

.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 */
.qt-page-canvas {
    background: #e8e8e8;
    padding: 32px 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.qt-page {
    width: 794px;
    min-height: 1123px;
    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;
}


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

.qt-btn:hover { background: var(--md-sys-color-surface-container); }
.qt-btn--primary { border-color: var(--md-sys-color-primary); color: var(--md-sys-color-primary); }
.qt-btn--primary:hover { background: var(--md-sys-color-primary-container); }
.qt-btn--accept { border-color: #2e7d32; color: #2e7d32; }
.qt-btn--accept:hover { background: #e8f5e9; }
.qt-btn--cancel { border-color: var(--md-sys-color-outline); color: var(--md-sys-color-outline); }
.qt-btn--danger { border-color: var(--md-sys-color-error); color: var(--md-sys-color-error); }
.qt-btn--danger:hover { background: var(--md-sys-color-error-container); }
.qt-btn .material-symbols-outlined { font-size: 16px; }

/* ── Template editor ─────────────────────────────────────────────────────── */

.qt-editor {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

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

.qt-editor__back-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--md-sys-color-on-surface);
    display: flex;
    align-items: center;
}

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

.qt-editor__toolbar-actions {
    display: flex;
    gap: 8px;
}

.qt-editor__workspace {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Element palette sidebar */
.qt-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-y: auto;
    padding: 12px 0;
}

.qt-editor__palette-section { padding: 0 12px 16px; }

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

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

.qt-palette-item:hover { background: var(--md-sys-color-surface-container); }
.qt-palette-item .material-symbols-outlined { font-size: 18px; color: var(--md-sys-color-primary); }

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

/* Drag handles and editable rows */
.qt-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;
}

.qt-row--editable:hover .qt-drag-handle { opacity: 1; }
.qt-row--editable:hover { outline: 1px dashed var(--md-sys-color-outline-variant); outline-offset: 2px; }
.qt-row--dragging { opacity: 0.4; }
.qt-row--drag-over { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }

.qt-field-pair--editable,
.qt-static-text--editable {
    cursor: pointer;
}
.qt-field-pair--editable:hover { background: var(--md-sys-color-primary-container); border-radius: 4px; padding: 1px 4px; }


/* Element config panel */
.qt-element-config {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.qt-element-config[hidden] { display: none; }

.qt-element-config__panel {
    background: var(--md-sys-color-surface);
    border-radius: 12px;
    padding: 24px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}

.qt-element-config__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.qt-element-config__panel label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--md-sys-color-on-surface-variant);
}

.qt-element-config__panel input,
.qt-element-config__panel select {
    padding: 6px 10px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 6px;
    font-size: 0.9rem;
}

.qt-element-config__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Print styles */
@media print {
    .qt-page-canvas {
        background: none;
        padding: 0;
    }

    .qt-page {
        width: 210mm;
        min-height: 297mm;
        margin: 0;
        padding: 15mm 18mm;
        box-shadow: none;
    }

    .quote-action-bar,
    .qt-drag-handle,
    .qt-editor__toolbar,
    .qt-editor__palette,
    .qt-element-config {
        display: none !important;
    }

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

/* 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: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px 24px;
    box-sizing: border-box;
    overflow-y: auto;
}
.outgoing-detail--loading {
    align-items: center;
    justify-content: center;
    color: var(--rs-primary-gray-text);
    font-size: 2em;
}
.outgoing-detail__header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(245, 248, 253, 0.2);
}
.outgoing-detail__address {
    flex: 1;
    font-size: 24px;
    font-weight: 400;
    color: #F5F8FD;
    line-height: 32px;
    margin: 0;
}
.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__body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.qt-template-card__arrow { color: var(--md-sys-color-outline); }