* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: text;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color: #E4E4E4;
    background-image: linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image: -webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image: -ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #A7A7A7),
        color-stop(0.51, #E4E4E4)
    );
    background-attachment: fixed;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    height: 100%;
    margin: 0px;
    padding: 0px;
/*    text-transform:uppercase; */
    width: 100%;
}

.talr {
	text-align: right;
}


.ui-content a, .ui-content a:visited, .ui-content a:hover {
	color: #059;
}
a:visited {
	text-decoration: none;
}

/***************************************************
              modified version of Jquery mobil css */
.ui-content {
	padding: .1em .5em !important;
}
#ruteOversigt .ui-content {
	padding: 0 .5em !important;
}

.ui-header .ui-title, .ui-footer .ui-title {
	margin-left: 20%;
	margin-right: 20%;
	text-shadow: none;
	font-weight: bold;
}
.ui-field-contain .ui-controlgroup-controls {
	width: initial;
	display: inline-block;
}
.ui-field-contain > label {
	width: inherit;
	padding-top: 2em;
}
.ui-field-contain {
	border-bottom-width: 0px; 
}
.ui-btn {
	font-size: 1.0em;
	text-overflow: initial;
}
label.iu-btn {
	
}
label.ui-btn-inline {
	width: auto;
}
.ui-btn.small {
	padding: .1em 1em;
	margin: .2em;
}
.ui-header .ui-btn, .ui-footer .ui-btn, .ui-mini .ui-btn {
	font-size: 0.833em;
}
.ui-footer .ui-btn-icon-right {
	padding-right: 3em;
}
.ui-footer .ui-btn-icon-left {
	padding-left: 3em;
}
.ui-btn-icon-right {
	text-align: left;
}
.ui-popup-screen.in {
	background-color: black;
}
label.ui-select {
	font-size: 1.0em;
}
.ui-bar-a {
	background: #FF6633;
}
.ui-page-theme-a .ui-bar-inherit {
/*	background: #FF6633 url('../img/TI-Logo-60x35_tr.png') no-repeat 10% 50%; */
	background-color: #FF6633;
	color: #FFF;
	text-shadow: -1px -1px 0px #000;
	padding: 0 4px;
}
.ui-slider > .ui-page-theme-a, .ui-slider > .ui-bar-inherit {
	background-color: #E9E9E9;
}
.ui-btn.ui-corner-all {
	border-radius: .8em;
}
.ui-btn.ui-btn-b {
	background-image: linear-gradient(#444, #2D2D2D);
	border-top: 1px inset #C0C0C0;
}
.ui-mobile label, div.ui-controlgroup-label {
	font-size: 0.89em;
}
.ui-mobile label.capturePhoto {
	display: inline-block;
	margin: .5em .625em .5em 0em;
}
label.capturePhoto div {
	display: none;
}

.ui-btn-icon-notext:after, .ui-btn-icon-left:after, .ui-btn-icon-right:after {
	background-size: 0.7em;
	height: 1.2em;
	margin-top: -0.5em;
	width: 1.2em;
}
.ui-autocomplete-loading {
	background: white url("../img/ui-anim_basic_16x16.gif") right center no-repeat;
}
.controlgroup-textinput{
    padding-top:.22em;
    padding-bottom:.22em;
}

/***************************************************
                    hide arrows from number fields */

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/***************************************************
              on to the intraApp specific settings */

div#hamburger {
	cursor: pointer;
	display: inline-block;
	margin: 0 8px -4px 0;
	position: fixed;
	width: 2em;
	height: 2em;
	top: .3em;
	left: .3em;
	z-index: 10010;
}
div#hamburger .hamburger-line {
	position: absolute;
	height: 2px;
	width: 22px;
	left: 50%;
	top: 50%;
	margin-left: -11px;
	margin-top: -1px;
	background-color: #000;
	will-change: transform;
	transition: transform .2s ease-in-out;
	transform-origin: center center;
}
div#hamburger .hamburger-line:first-child {
	transform: translateY(-7px);
}
div#hamburger .hamburger-line:last-child {
	transform: translateY(7px);
}
div#hamburger.visible .hamburger-line {
	transform: scaleX(0);
}
div#hamburger.visible .hamburger-line:first-child {
	transform: rotate(-45deg);
}
div#hamburger.visible .hamburger-line:last-child {
	transform: rotate(45deg);
}

div#menu {
	background-color: #f9f9f9;
	border: none;
	box-shadow: none;
	max-height: calc(100% - 2.5em);
	overflow: hidden;
	position: fixed;
	top: 2.2em;
	transition: width .2s linear;
	width: 0;
	z-index: 10020;
}
div#menu.visible {
	box-shadow: 0px 2px 12px 2px rgba(0, 0, 0, 0.5);
	overflow: auto;
	text-align: left;
	width: 67%;
	padding: 0px 8px;
}
div#menu a {
	background-color: #f6f6f6;
    border: 1px solid #ddd;
    border-radius: .8em;
    cursor: pointer;
    color: #333;
    font-family: sans-serif;
    font-weight: 700;
    font-size: 1.0em;
    line-height: 1.3;
    
    margin: .5em 0;
    padding: .7em 2.5em .7em 1em;
    display: block;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    text-shadow: 0 1px 0 #f3f3f3;
    white-space: nowrap;
    user-select: none;
}
/*
.install-button {
	background-color: #f6f6f6;
	background-clip: padding-box;
	border-color: #ddd;
	border-radius: .8em;
	box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
	color: #333;
    cursor: pointer;
	font-weight: 700;
	font-size: 1.0em;
	margin: .5em 0;
    padding: .7em 1em;
	padding-right: 2.5em;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
	text-overflow: initial;
	text-align: left;
	text-decoration: none!important;
	text-shadow: 0 1px 0 #f3f3f3;
    user-select: none;
}
.install-button:after {
	background-image: url(data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23FFF%22%20points%3D%229%2C7%209%2C0%205%2C0%205%2C7%200%2C7%207%2C14%2014%2C7%20%22%2F%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3C%2Fsvg%3E);
}
*/
#list-refresh,
#rute-refresh {
	cursor: pointer;
	display: inline-block;
	position: fixed;
	top: .7em;
	right: 1.5em;
	height: 1em;
	width: 1em;
	z-index: 10010;
}
#list-refresh:after,
#rute-refresh:after {
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%20d%3D%22M13%2C2.5%20a7%2C7%200%201%2C0%200%2C11%22%3E%3C%2Fpath%3E%3Cpath%20stroke%3D%22none%22%20fill%3D%22black%22%20d%3D%22M15.5%2C0%20l0%205-5%200%20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	height: 100%;
	width: 100%;
	position: absolute;
}

.hidden {
	display: none !important;
}
.pull-left {
	float: left;
}
.clear-both {
	clear: both;
}

#intrAppMask {
	background-color: #aaa;
	bottom: 0;
	filter: Alpha(Opacity=70);
	left: 0;
	right: 0;
	opacity: .7;
	position: fixed;
	top: 0;
	z-index: 1500;
}
#modal {
	background-color: #fff;
	border: 1px solid #000;
	border-radius: 8px 8px;
	box-shadow: 1px 1px 8px 2px #000;
	margin: 5em;
	z-index: 2000;
	position: fixed;
	top: -25em;
	left: 0;
	right: 0;
	transition: top .2s ease-in-out;
}
#modal-title {
	border-bottom: 1px solid #777;
	font-weight: bold;
	padding: .5em 2em;
}
#modal-main {
	padding: 1em;
}
#modal-buttons {
	padding: 1em;
	text-align: right;
}

#imgGalleri {
	background-color: rgba(34, 34, 34, 0.7);
	bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	text-align: center;
	top: 0;
	z-index: 1999;
	visibility: hidden;
}
#imgGalleri img {
	background-color: #fff;
	margin: 5% 0 0 0;
	max-width: 90%;
	max-height: 90%;
	min-height: 32px;
	min-width: 32px;
}
#imgGalleri::after {
	content: '';
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23FFF%22%20points%3D%2214%2C3%2011%2C0%207%2C4%203%2C0%200%2C3%204%2C7%200%2C11%203%2C14%207%2C10%2011%2C14%2014%2C11%2010%2C7%20%22%2F%3E%3C%2Fsvg%3E");
	background-color: rgba(0, 0, 0, 0.5);
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 12px 12px;
	position: absolute;
	height: 24px;
	top: 36px;
	right: 36px;
	width: 24px;
	z-index: 2000;
}
img#loading, img.loading {
	left: 50%;
	margin: -50px 0 0 -50px;
	position: absolute;
	top: 50%;
}
.atchmnt, .simlink {
	color: #38c;
	font-weight: 700;
	text-decoration: underline;
}
.simlink {
	cursor: pointer;
}
#gpsMessage {
	background-color: rgba(34, 34, 34, 0.5);
	bottom: 0;
	left: 0;
	padding: 72px;
	position: fixed;
	right: 0;
	text-align: center;
	text-shadow: none;
	top: 0;
	visibility: hidden;
	z-index: 2000;
}

#commentMsgFrm textarea {
	min-height: 8em;
}
#msgFeatHeadline {
	padding: 4px;
	text-align: left;
	text-shadow: none;
}

.intrAppBtn {
	background: #eee;
	background-image: linear-gradient(#fff,#f1f1f1);
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
	border-radius: 1em;
	border: 1px solid #ccc;
	color: #222;
	cursor: pointer;
	display: inline-block;
	font-size: 1.0em;
	font-weight: 700;
	margin: .5em .3em;
	min-width: 5em;
	padding: 0.8em 1.1em;
	position: relative;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 0 #fff;
	vertical-align: middle;
}
.intrAppBtn.ui-btn-icon-left {
	padding-left: 2.5em;
}

#appLoginForm {
/*	position: absolute; */
	left: 164px;
	width: 400px;
	text-align: center;
	margin: 0 auto;
}

#status {
	text-shadow: none;
	white-space: nowrap;
}

/* for lists */
.list_hdr {
	background-color: rgba(0,0,0,0.1);
	cursor: pointer;
	margin: -4px;
	padding: 4px;
}
.ttsBtn_s, .ttsBtn_l {
	float: right;
}
.ttsBtn_s {
	height: 2em;
}
.ttsBtn_l {
	height: 3em;
	padding: 0.4em 0;
}
#today {
	clear: both;
	font-weight: bold;
	text-align: center;
}
.top_btns {
	margin: 0;
}
.cntrd_btns {
	text-align: center;
}
.right_btns {
	text-align: right;
}
.vogn_btns {
	margin-top: 1em;
	text-align: center;
}
.centered_btns, #tidsregBtns, #vognedtBtns, #tidsregAddon {
	clear: both;
	text-align: center;
}
.vognhist-doc > a {
	font-weight: normal;
	text-decoration: none;
}
.frameDiv {
	border: 1px dotted #CCC;
	margin-top: 4px;
	padding: 0 8px;
}
#vgnWrpr, #tidsregWrpr, #tidsreg_hist {
	border: 1px dotted #CCC;
	border-radius: 6px 6px;
	text-shadow: none;
	padding: 8px;
	margin: 16px 0;
}
#forvgnWrpr, #trailrWrpr {
	margin: 8px 0;
}
#forvgnWrpr, #trailrWrpr {
	background-color: rgba(255, 255, 255, 0.4);
}
#vgnWrpr {
	background-color: #9cf;
}
#tidsregWrpr {
	background-color: #9c9;
}
#tidsreg_hist {
	background-color: #ddd;
}
#tidsreg_hist > div {
	padding: 4px;
	margin: 8px 0;
}
#tidsreg_hist > .tidsregHdl, .tidsregHdl {
	background-color: inherit;
	font-weight: bold;
	margin-bottom: 8px;
}
.tidsregHdl > .navn {
	font-weight: normal;
}
#tidsregOpn, #tidsregMainBtns {
	background-color: rgba(255, 255, 255, 0.4);
	padding: 8px;
}
#tidsregMainRmrk img {
	height: 16px;
	float: right;
}
#tidsreg_hist > .tidsreg_Log {
	border: none;
	margin: 0 -8px;
}
#tidsreg_hist div img {
	cursor: pointer;
	max-height: 1.5em;
	float: right;
}
#tidsregMainBtns .intrAppBtn {
	min-width: 4.0em;
}

.list_row {
	border-radius: 6px 6px;
	margin: 8px 0;
	overflow: hidden;
	text-shadow: none;
	z-index: 2;
}
.list_col {
	cursor: pointer;
	padding: 4px;
	overflow: hidden;
}
.list_opn, .list_col {
	padding: 4px;
	overflow: hidden;
}
.cls {
	padding: 0 4px;
	height: 0px;
}
.sorter {
	float: right;
	font-weight: bold;
	color: #fff;
	margin-right: 4px;
}
.inlineBlock {
	display: inline-block;
}
.list_btns {
	display: flex;
	justify-content: space-between;
	z-index: 10;
}
.status_span {
	font-size: .85em;
	float: right;
	margin-right: 1em;
}
.list_content {
	margin: 16px 0;
}
.list_block {
	border-bottom: 1px solid rgba(128, 128, 128, 0.2);
	margin: 8px 0;
}
.impremrks {
	background-color: #f70;
	border-radius: 0.31em;
	color: #fff;
	padding: 8px 0;
	margin: 0;
}
.rute_block {
	border-top: 1px solid rgba(128, 128, 128, 0.2);
	margin: 8px 0;
	padding-top: 8px;
}

.list_block h2, .rute_block h2 {
	display: inline-block;
	font-size: 1em;
	font-weight: bold;
	margin: 0 0.5em 0 0;
	text-align: right;
	vertical-align: top;
}
.list_block h2 {
	width: 8em;
}
.rute_block h2 {
	width: 7.2em;
}
.list_block .varelinje h2 {
	width: 7.5em;
}
.rute_block input {
	width: 4.5em;
	text-align: right;
}
.list_block > div, .rute_block > div {
	display: inline-block;
	width: calc(100% - 8.5em);
}
.rute_block > div.impremrks {
	width: calc(100% - 4px);
}
.list_block > div > div, .rute_block > div > div {
	clear: both;
}
.list_block > div img, .rute_block > div img {
	cursor: pointer;
	float: right;
	margin-right: 0.5em;
	max-height: 1.5em;
}
.list_50, #tidsregStart, #tidsregSlut {
	float: left;
	padding: 0 .2em;
	text-align: left;
	width: calc(50% - 0.4em);
}
.list_50 img{
	float: left;
	margin-right: 4px;
}
.list_50 div {
	clear: both;
}
.gps-wrapper {
	border: 1px solid #aaa;
	margin-top: .5em;
	padding: 4px;
}
.gps-lbl {
	border: 1px solid transparent;
	display: inline-block;
	text-align: right;
	width: 7em;
}
.gps-val {
	border: 1px solid #aaa;
	display: inline-block;
	width: 7em;
	margin: .2em;
	padding: .3em;
}
.gps-btn {
	display: inline-block;
	width: 15.3em;
	text-align: right;
}
.toolate {
	color: #fff;
}
.list_mat {
	margin: 0 0 0 16px;
}
.edit_matnr {
	background-color: rgba(255, 255, 255, 0.4);
	margin: -2px 0.5em 4px 0.5em;
	padding: 0.25em 0;
	white-space: nowrap;
	overflow: hidden;
}
.list_block .edit_matnr > span {
	display: inline-block;
	margin: 0 0.5em 0 0;
	text-align: right;
	width: 7.5em;
}
.list_block .freightline {
	background-color: rgba(255, 255, 255, 0.4);
	display: block;
	margin: 0 0.5em 1em 0.5em;
	padding: 0.5em 0;
	width: calc(100% - 1em);
}
.list_block .editable-line {
	background-color: rgba(255, 255, 255, 0.4);
	display: block;
	margin: 0 0.5em 0.5em 0;
	padding: 0.5em 0;
	width: calc(100% - 1em);
}

.list_block .freightline > div {
	display: inline-block;
	margin-bottom: 0;
	width: calc(100% - 10.5em);
}
.list_block .freightline .colli {
	padding: 1em 0;
}
.list_block .freightline h2 {
	width: 7.5em;
}

.list_block .freightline h2.colli {
	line-height: 1.6em;
}
.varelinje {
	background-color: rgba(255, 255, 255, 0.4);
	border-top: 1px solid rgba(128, 128, 128, 0.2);
	margin: 0 0.5em 2px 0.5em;
	padding: 0.25em 0;
}
.varelinje > div,
.edit_matnr > div {
	display: inline-block;
	margin-bottom: 0;
	width: calc(100% - 10.5em);
}
.varelinje > div > span,
.varelinje > div.sumline > div > span,
.edit_matnr > div > span {
	display: inline-block;
	margin-right: 2px;
	width: calc(5em + 5px); /* + 5px to align with input fields */
	text-align: right;
}
.list_block div.sumline {
	border-top: 1px solid rgba(128, 128, 128, 0.2);
	padding-top: 0.5em;
	width: 100%;
}
.list_block .sumline-btns {
	float: right;
	display: inline-block;
	width: max-content;
}
.sumline > div {
	display: inline-block;
	margin-bottom: 0.25em;
	width: calc(100% - 9em);
}
.sumline > div > .ui-btn {
	float: right;
}
.varelinje input,
.freightline input,
.edit_matnr input {
	width: 5em;
	text-align: right;
}

#ruteMapWrpr {
	display: none;
	position: relative;
	width: 300px;
	height: 300px;
}
#ruteTools {
	display: flex;
	gap: 4px;
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
}

.map-btn {
	background: rgba(30, 30, 40, 0.9);
	color: #fff;
	border: 1px solid #4a4a4a;
	border-radius: 4px;
	font-size: 11px;
	padding: 6px 10px;
	cursor: pointer;
	transition: all 0.15s;
}

.map-btn:hover {
	background: rgba(50, 50, 60, 0.95);
}

.map-btn.active {
	background: #4db6ac;
	color: #1a1a2e;
	border-color: #4db6ac;
}

.map-checkbox {
	background: rgba(30, 30, 40, 0.9);
	color: #fff;
	border: 1px solid #4a4a4a;
	border-radius: 4px;
	font-size: 11px;
	padding: 4px 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 4px;
}

.map-checkbox input {
	width: 14px;
	height: 14px;
	margin: 0;
	accent-color: #4db6ac;
}

#gpsRecordingOption {
	border-top: 1px solid #333;
}

#mapDebug {
	display: none;
}
/* Afsluttede stops sektion */
.finished-section {
	margin-top: 12px;
	border-top: 1px solid #333;
}
.finished-header {
	padding: 10px;
	color: #34A853;
	font-weight: bold;
	font-size: 14px;
	cursor: pointer;
	text-align: center;
}
.finished-header::before {
	content: '▸ ';
}
.rute_row_finished {
	padding: 6px 8px;
	margin: 2px 0;
	background: rgba(52, 168, 83, 0.15);
	border-left: 3px solid #34A853;
	border-radius: 4px;
	font-size: 12px;
	color: #aaa;
}
.finished-sorter {
	display: inline-block;
	width: 24px;
	text-align: center;
	color: #34A853;
	font-weight: bold;
}
.finished-time {
	color: #666;
	font-size: 11px;
}

#ruteAktuel {
	margin: 1em 0;
	padding-bottom: 4px;
}
#ruteAktuelInfo {
	padding: 4px;
	position: relative;
	text-shadow: none;
}
.rute_row, .rute_rowdone {
	margin: 8px 0;
	min-height: 7.5em;
	padding: 4px;
	position: relative;
	text-shadow: none;
	z-index: 2;
}
.rute_row span, .rute_rowdone span {
	display: inline-block;
	width: calc(100% - 8em);
}
#ruteFullList > .rute_row span, #ruteFullList .rute_rowdone span {
	width: calc(100% - 7.5em);
}
.ruteBtns {
	float: left;
	margin-right: 1em;
	padding: 0;
	width: 4em;
}
.ruteRightBtns {
	display: inline-block;
	position: absolute;
	right: 3em;
	bottom: .3em;
}
.ruteRightBtns .ui-btn {
	margin: 0.1em 0;
}
.rutePriorBtn {
	margin-bottom: 4px;
	padding: .35em 0;
	width: 4em;
	text-align: center;
}
.rutePriorBtn::after {
	display: table;
	content: ' ';
}
.ruteAktuelCurrent {
	display: inline-block;
	max-width: calc(100% - 7.2em);
}
.ruteFLBtns {
	height: 3.0em;
}
.ruteFLBtns > .ui-checkbox {
	float: left;
	width: 50%;
}
.posFlag {
	display: none;
	position: absolute;
	top: 3em;
	right: .6em;
}
.gm-marker {
	font-size: 1em;
}
#manualDispTxt {
	height: 5em !important;
}
#confirmTakeoverDiv > img {
	position: relative;
	left: 50%;
	margin: 20px -50px;
}

#lCalendarBtn, #tCalendarBtn {
	background: url(../img/calendar.png) no-repeat 8px center;
	padding-left: 38px;
}

/***** for js_cal *****/
#js_cal_outer {
	margin: 1em auto;
	width: 420px;
}
.js_cal_control span {
	border: 1px solid #C1C1C1;
	cursor: pointer;
	float: left;
	padding: 8px;
	text-align: center;
	width: 42px;
}
.js_cal_control .js_cal_mnthName {
	border-bottom: none;
	border-left: none;
	border-right: none;
	width: 284px;
}
.js_cal_control .btn {
	background-color: #FFFFFF;
	box-shadow: inset -2px -2px 12px #E1E1E1;
	height: 42px;
	width: 42px;
}
.js_cal_control .btn:hover {
	box-shadow: inset -2px -2px 12px #C1C1C1;
}
.js_cal_dayNames span {
	border: 1px solid #C1C1C1;
	float: left;
	font-weight: bold;
	text-align: center;
	width: 58px;
}
.js_cal_week span {
	border: 1px solid #C1C1C1;
	float: left;
	height: 42px;
	padding: 8px;
	text-align: right;
	width: 42px;
}
.js_cal_week span.we, .js_cal_dayNames span.we {
	background: #FFD0D0;
}
.js_cal_week .btn {
	background-color: #FFFFFF;
	box-shadow: inset -2px -2px 12px #E1E1E1;
}
.js_cal_week .we {
	box-shadow: inset -2px -2px 12px #FFA1A1;
}
.js_cal_week .td, .js_cal_week .we .td {
	box-shadow: inset -2px -2px 12px #D1D100;
}
.js_cal_week span.btn:hover, .js_cal_week span.we span.btn:hover {
	box-shadow: inset -2px -2px 12px #C1C1C1;
}
.js_cal_week span.td:hover, .js_cal_week span.we span.td:hover {
	box-shadow: inset -2px -2px 12px #B1B100;
}

.selwrp {
	margin: 0 4px;
}

/**** for chat ****/
#chat {
	height: calc(100% - 6.3em);
}
#chat > .ui-content {
	height: calc(100% - 0.2em);
}
.chatDialog {
	height: calc(100% - 0.5em);
	position: relative;
	text-shadow: none;
}
#autocomplete {
	background-color: rgba(249, 249, 249, 0.9);
	position: absolute;
	left: 0;
	right: 0;
	top: 2em;
	z-index: 10;
}
.chatBtn {
	cursor: pointer;
	background: none;
	border-right: none;
	border-bottom-left-radius: 8px 8px;
	border-bottom-right-radius: 8px 8px;
	height: 0.5em;
	padding: 0.5em;
	position: fixed;
	width: 50px;
	overflow: hidden;
	right: 0.5em;
	bottom: -1em;
	transition: height 0.5s;
}
.flashing {
	animation: flash2full 1s linear infinite;
	background: rgba(255, 255, 255, 0.95) url("../img/64x64-chat-green.png") center 0 no-repeat;
	border: 1px solid #eee;
	box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 8px 1px;
	top: 0;
	height: 40px;
	opacity: 0.2;
	z-index: 2000;
}
@keyframes flash2full {  
	50% { opacity: 1; }
}

.chatDialog > div {
	margin-bottom: 4px;
}
.chatDialog > div > label {
	display: inline-block;
	margin-left: -8px;
	min-width: 48px;
	position: absolute;
	text-align: right;
}
.chatDialog > div > input, .chatDialog > div > select {
	width: 100%;
}
.chatDialog > div > textarea {
	display: inline-block;
	margin: 0;
	height: 3.4em;
	width: calc(100% - 8.5em);
}
.chatDialog > div > textarea.inclAttachment {
	background: url("../img/paperclip.png") right 1em center no-repeat;
}

.chatDialog > div > select {
	height: 1.8em;
}
.chatDialog > div.chatMsgDiv {
	margin-bottom: 0;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}
.chatDialog > .group-receivers {
	display: none;
	height: 1em;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}
.chatDialog.group > div.chatMsgDiv {
	bottom: 1.2em;
}
.chatDialog.group > .group-receivers {
	display: block;
}
#chatBck {
	display: inline-block;
	height: 1em;
	width: 1em;
	padding: 1.1em;
	top: -0.3em;
}
#chatSearch {
	display: inline-block;
	width: calc(100% - 3em);
}
#imgBtn0 {
	background: url("../img/paperclip.png") center center no-repeat;
	display: inline-block;
	width: 3.4em;
	height: 3.4em;
	padding: 3px 4px;
	position: absolute;
	right: 4.9em;
	top: 0;
}
#imgBtn0 > div {
	display: none;
}
#sendBtn0 {
	background: url("../img/sendChat.png") center center no-repeat;
	display: inline-block;
	width: 3.4em;
	height: 3.4em;
	margin: 0;
	position: absolute;
	right: 0.5em;
	top: 0;
}
.chatDialog .chatLogChat,
.chatDialog .chatLogMail {
	height: calc(100% - 7.5em);
	margin: 0 -8px 0 -4px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 4px 4px 0 0;
}
.chatLogChat.long {
	height: calc(100% - 3.6em);
}
.chatDialog.attached .chatLogChat {
	height: calc(100% - 9.5em);
}
.chatDialog.group .chatLogChat, .chatDialog .chatLogMail {
	height: calc(100% - 9.5em);
}
div.chatMsgDiv > .replyto {
    background-color: #e6b7b7;
	border: 1px solid #333;
    padding: .1em 0;
	width: calc(100% - 14px);
	position: absolute;
	top: calc(-1.9em - 19px);
}
div.chatMsgDiv > .replyto > .chatTS {
	font-size: .75em;
	padding: 2px 8px 4px 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
div.chatMsgDiv > .replyto > .msg {
	padding: 1px 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: calc(100% - 8px);
}
div.chatMsgDiv > .replyto > .close-replyto {
	float: right;
	padding: 0 .2em;
	cursor: pointer;
}

.chatDialog div.attach2chatLogDiv {
	border: 1px solid #aaa;
	display: none;
	margin-top: 0.5em;
	overflow: hidden;
	padding: 3px;
	position: relative;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.chatDialog div.attach2chatLogDiv > span {
	border: 1px solid #aaa;
	border-radius: 6px 6px;
	color: red;
	cursor: pointer;
	font-family: sans-serif;
	line-height: 1;
	position: absolute;
	width: 1em;
	right: 2px;
	top: 2px;
	height: 1em;
	text-align: center;
}
.chatLogMail {
	height: calc(100% - 133px);
}
.chatLogChat > img {
	position: relative;
	left: 50%;
	margin-left: -50px;
}
.chatLogChat img {
    max-width: 100%;
}
.chatLogChat > div, .chatLogMail > div {
	clear: both;
	padding: 0 4px;
}
.chatLogChat > .chatMore {
	cursor: pointer;
	text-align: center;
	text-decoration: underline;
}
.chatLogChat > .chatRcnt {
	border: 1px solid #eee;
	border-radius: 4px 4px;
	color: #000;
	cursor: pointer;
	margin: 4px 0;
	padding: 4px;
}
.chatLogChat > .chatRcnt > i {
    float: right;
}
.chatLogChat > .chatRcnt > i.fa-users {
    float: right;
}
.chatLogChat > .chatRcnt > i.fa-users:before {
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNTEyIj48cGF0aCBkPSJNOTYgMjI0YzM1LjMgMCA2NC0yOC43IDY0LTY0cy0yOC43LTY0LTY0LTY0LTY0IDI4LjctNjQgNjQgMjguNyA2NCA2NCA2NHptNDQ4IDBjMzUuMyAwIDY0LTI4LjcgNjQtNjRzLTI4LjctNjQtNjQtNjQtNjQgMjguNy02NCA2NCAyOC43IDY0IDY0IDY0em0zMiAzMmgtNjRjLTE3LjYgMC0zMy41IDcuMS00NS4xIDE4LjYgNDAuMyAyMi4xIDY4LjkgNjIgNzUuMSAxMDkuNGg2NmMxNy43IDAgMzItMTQuMyAzMi0zMnYtMzJjMC0zNS4zLTI4LjctNjQtNjQtNjR6bS0yNTYgMGM2MS45IDAgMTEyLTUwLjEgMTEyLTExMlMzODEuOSAzMiAzMjAgMzIgMjA4IDgyLjEgMjA4IDE0NHM1MC4xIDExMiAxMTIgMTEyem03Ni44IDMyaC04LjNjLTIwLjggMTAtNDMuOSAxNi02OC41IDE2cy00Ny42LTYtNjguNS0xNmgtOC4zQzE3OS42IDI4OCAxMjggMzM5LjYgMTI4IDQwMy4yVjQzMmMwIDI2LjUgMjEuNSA0OCA0OCA0OGgyODhjMjYuNSAwIDQ4LTIxLjUgNDgtNDh2LTI4LjhjMC02My42LTUxLjYtMTE1LjItMTE1LjItMTE1LjJ6bS0yMjMuNy0xMy40QzE2MS41IDI2My4xIDE0NS42IDI1NiAxMjggMjU2SDY0Yy0zNS4zIDAtNjQgMjguNy02NCA2NHYzMmMwIDE3LjcgMTQuMyAzMiAzMiAzMmg2NS45YzYuMy00Ny40IDM0LjktODcuMyA3NS4yLTEwOS40eiIvPjwvc3ZnPg==") center 0 no-repeat;
	background-size: contain;
	content: '';
	width: 1em;
	height: 1em;
	float: right;
}
.chat-toolbox > i.fa-reply:after {
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNzkyIDE3OTIiPjxwYXRoIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZD0iTTE3OTIgMTEyMHEwIDE2Ni0xMjcgNDUxLTMgNy0xMC41IDI0dC0xMy41IDMwLTEzIDIycS0xMiAxNy0yOCAxNy0xNSAwLTIzLjUtMTB0LTguNS0yNXEwLTkgMi41LTI2LjV0Mi41LTIzLjVxNS02OCA1LTEyMyAwLTEwMS0xNy41LTE4MXQtNDguNS0xMzguNS04MC0xMDEtMTA1LjUtNjkuNS0xMzMtNDIuNS0xNTQtMjEuNS0xNzUuNS02SDY0MHYyNTZxMCAyNi0xOSA0NXQtNDUgMTktNDUtMTlMMTkgNjg1UTAgNjY2IDAgNjQwdDE5LTQ1TDUzMSA4M3ExOS0xOSA0NS0xOXQ0NSAxOSAxOSA0NXYyNTZoMjI0cTcxMyAwIDg3NSA0MDMgNTMgMTM0IDUzIDMzM3oiLz48L3N2Zz4=") center 0 no-repeat;
	background-size: contain;
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
}
.chatLogChat > .chatRcnt.offline {
	color: #555;
}
.chatLogChat > .chatRcnt.offline:after {
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0xIDE1aDRsLTQgNmg0TTcgN2g2bC02IDkgNiAxbTItMTYgNyAxLTkgOSA3IDEiLz48L3N2Zz4=") center 0 no-repeat;
	background-size: contain;
	content: '';
	width: .8em;
	height: .8em;
	float: right;
}
.chatLogChat > .chatRcnt.green:after {
	background: url(../img/64x64-chat-green.png) center 0 no-repeat;
	background-size: contain;
	content: '';
	width: 1em;
	height: 1em;
	float: right;
}
.chatTocList > .chatRcnt.green.offline {
	color: #777;
}
.chatLogChat > .chatRcnt:hover {
	background-color: #eee;
}
.chatLogChat > .chatRcnt > .chatTS {
	display: inline-block;
	min-width: 5em;
	text-align: right;
}
input.error {
	background: url("../img/exclamation.png") right center no-repeat;
}
.chatFromYou,
.chatFromMe {
	display: inline-block;
	padding: 14px 0 8px 0;
	max-width: 100%;
	position: relative;
}
.chatFromYou {
	border-top-right-radius: 8px 8px;
	border-bottom-right-radius: 8px 8px;
	margin-right: 12px;
}
.chatFromMe {
	float: right;
	margin-left: 12px;
	text-align: right;
}
.chatFromYou > .chatTS,
.chatFromMe > .chatTS {
    border-top-left-radius: 8px 9px;
    border-top-right-radius: 8px 8px;
	display: inline-block;
	font-size: 0.8em;
	margin-bottom: -2px;
	max-width: 100%;
	min-width: 54px;
	padding: 2px 8px 4px 8px;
}
.chatFromYou > .chatTS {
	background-color: #e6b7b740;
	border-bottom-right-radius: 8px 8px;
	left: -1px;
	max-width: calc(100% - 32px);
}
.chatFromYou:before {
	border-bottom: 6px solid #e6b7b7;
	border-left: 6px solid #fff;
	bottom: 8px;
	content: '';
	position: absolute;
	left: -6px;
}
.chatFromMe > .chatTS {
	background-color: #ccc4;
	border-bottom-left-radius: 8px 8px;
	right: -1px;
}
.chatFromMe.read > .chatTS {
	background-color: #91d6c840;
}
.chatFromYou > .chatTS > b,
.chatFromMe > .chatTS > b {
	white-space: nowrap;
}
/*
.chatFromMe > .chatTS::after {
	content: ' Sendt';
}
.chatFromMe.read > .chatTS::after {
	content: ' Læst';
}
.chatFromMe.sending > .chatTS::after {
	content: ' ...';
}
.chatFromMe.offline > .chatTS::after {
	content: ' Bruger er ikke online';
}
*/
.chatFromMe::after {
	border-bottom: 6px solid #ccc;
	border-right: 6px solid #fff;
	bottom: 8px;
	content: '';
	position: absolute;
	right: -6px;
}
.chatFromMe.read::after {
	border-bottom: 6px solid #91d6c8;
}
.chatFromYou > .chat-toolbox {
	cursor: pointer;
	position: relative;
	top: 0.2em;
	left: 0.2em;
}
.chatFromMe > .question,
.chatFromYou > .question {
	font-size: 0.75em;
	padding: 4px;
	max-width: 100%;
}
.chatFromYou > .question {
	background-color: #e6b7b780;
	border-top-right-radius: 8px 8px;
	border-bottom-right-radius: 8px 8px;
}
.chatFromMe > .question {
	background-color: #91d6c880;
	border-top-left-radius: 8px 8px;
	border-bottom-left-radius: 8px 8px;
}
.chatFromYou > .msg {
	background-color: #e6b7b7;
	border: 1px solid #e6b7b7;
	border-bottom-right-radius: 8px 8px;
	border-top-right-radius: 8px 8px;
	padding: 4px;
}
.chatFromMe > .msg {
	background-color: #ccc;
	border-top-left-radius: 8px 8px;
	border-bottom-left-radius: 8px 8px;
	padding: 4px;
}
.chatFromMe.read > .msg {
	background-color: #91d6c8;
}

.flash10s {
	animation: flash2half 1s linear 10;
}
@keyframes flash2half {  
	50% { opacity: 0.7; }
}

/* a few for switch look alike checkboxes */
/*
label.switchLbl {
	position: relative;
	display: inline-block;
	margin: 4px 1em 0 0;
}

input[type="checkbox"].switch:not(:checked), 
input[type="checkbox"].switch:checked { /* :checked here acting as a filter for older browsers */
/*	position: absolute;
	opacity: 0;
}

input[type="checkbox"].switch + span {
	width: 1.8em;	height: 1em;
	border: 1px solid rgba(0,0,0,.3);
	border-radius: 999px;
	display: inline-block;
	margin: -2px 4px;
	background: #888;
	background-image: linear-gradient(rgba(0,0,0,.4), transparent);
	background-origin: border-box;
	background-clip: border-box;
	box-shadow: 0 1px 1px hsla(0,0%,100%,.8);
	overflow: hidden;
	transition-duration: .2s;
	transition-property: padding, width;
}
input[type="checkbox"].switch:checked + span {
	padding-left: .8em;
	width: 1em;
}
input[type="checkbox"].switch + span:before {
	content: '';
	display: block;
	width: 1em; height: 1em;
	margin: -1px;
	border: 1px solid rgba(0,0,0,.7);
	border-radius: inherit;
	background: #c4c4c4;
	background-image: linear-gradient(hsla(0,0%,100%,.3), hsla(0,0%,100%,0));
	box-shadow: 0 0 .5em rgba(0,0,0,.5),
	            0 .2em hsla(0,0%,100%,.3) inset,
	            0 -.1em .3em hsla(0,0%,0%,.2) inset;
}
*/
/**** tidsreg *****/
.tidsreg-dateBtn {
	opacity: 1;
/*	padding: 0 24px; */
}
.tidsRegDiv {
	border: thin dotted black;
	margin: 8px 0;
	padding: 4px;
	text-shadow: none;
	transition: height 0.8s;
	z-index: 2;
}
#tidsReg_error {
	clear: both;
	font-weight: bold;
	text-align: center;
}
#tidsReg_error span {
	font-weight: normal;
	font-size: 0.8em;
}
.status0 {
	background-color: #9C9;
	cursor: pointer;
}
.vgnStatus0 {
	background-color: #9CF;
}
.status1, .vgnStatus1 {
	background-color: #F93;
	border: none;
}
.status2 {
	background-color: #F93;
}

/* for the message dialog */
#smallImage {
	display: none;
	max-width: 90%;
	margin: 4px auto;
}
#messageList div, #recptComments div {
	border: 1px dotted #000;
/*	cursor: pointer; */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 4px;
	margin: 8px 0;
}
#messageList div img, #recptComments div img {
	cursor: pointer;
	float: right;
	max-height: 1.5em;
}
#messageList div.selected {
	border: 1px solid #000;
	white-space: normal;
}
#messageList div.selected img {
	max-height: initial;
}
#messageList div.expanded {
	white-space: initial;
}

/* The signature and "finger" -message dialog */
.signatureWrapper {
	overflow: hidden;
}
#signature, #fingerMsg {
	margin: 1em 0;
	border: 2px dotted black;
	background-color:lightgrey;
}
#fingerMsg button {
	width: initial;
}
#commentRecptFrm label {
	display: inline-block;
	margin-top: 4px;
	min-width: 15em;
}
#recptFeatHeadline {
	margin-top: 4px;
	padding: 4px;
	text-shadow: none;
}

/*** Logs ***/
#log-details {
	padding: .5em 0;
}

#settings_div {
	border-top: 1px solid rgba(128, 128, 128, 0.2);
	padding-top: .25em;
}

/* a few for switch look alike checkboxes */
label.switchLbl {
	position: relative;
	display: inline-block;
	margin-right: 1em !important;
}

input[type="checkbox"].switch:not(:checked), 
input[type="checkbox"].switch:checked { /* :checked here acting as a filter for older browsers */
	position: absolute;
	opacity: 0;
}

input[type="checkbox"].switch + span {
	width: 1.8em;	height: 1em;
	border: 1px solid rgba(0,0,0,.3);
	border-radius: 999px;
	display: inline-block;
	margin: -2px 4px;
	background: #888;
	background-image: linear-gradient(rgba(0,0,0,.4), transparent);
	background-origin: border-box;
	background-clip: border-box;
	box-shadow: 0 1px 1px hsla(0,0%,100%,.8);
	overflow: hidden;
	transition-duration: .2s;
	transition-property: padding, width;
}
input[type="checkbox"].switch:checked + span {
	padding-left: .8em;
	width: 1em;
}
input[type="checkbox"].switch + span:before {
	content: '';
	display: block;
	width: 1em; height: 1em;
	margin: -1px;
	border: 1px solid rgba(0,0,0,.7);
	border-radius: inherit;
	background: #c4c4c4;
	background-image: linear-gradient(hsla(0,0%,100%,.3), hsla(0,0%,100%,0));
	box-shadow: 0 0 .5em rgba(0,0,0,.5),
	            0 .2em hsla(0,0%,100%,.3) inset,
	            0 -.1em .3em hsla(0,0%,0%,.2) inset;
}

/***************************************************
 and finally some "responsive web design" settings */
 
@media screen and (min-width: 1025px) {
/* for js_cal */
	#js_cal_outer {
		width: 630px;
	}
	.js_cal_control span {
		padding: 4px;
	}
	.js_cal_control .js_cal_mnthName {
		width: 437px;
	}
	.js_cal_control .btn {
		height: 79px;
		width: 79px;
	}
	.js_cal_dayNames span {
		width: 87px;
	}
	.js_cal_week span {
		height: 63px;
		padding: 12px;
		width: 63px;
	}
}
/* ===========================================
   TABLET LANDSCAPE MODE
   =========================================== */
@media screen and (min-width: 900px) and (orientation: landscape) {

	/* Main content area - use full height */
	.ui-content {
		padding: 12px 20px !important;
		height: calc(100vh - 60px);
		overflow: hidden;
	}

	/* Rute page - split layout */
	#ruteOversigt .ui-content {
		display: flex !important;
		gap: 20px;
	}

	#ruteDescr {
		flex: 0 0 55%;
		height: calc(100vh - 100px);
		overflow-y: auto;
		padding-right: 16px;
	}

	#ruteMapWrpr {
		flex: 0 0 43%;
		display: block !important;
		height: calc(100vh - 100px);
		border-radius: 12px;
		overflow: hidden;
		border: 1px solid var(--border);
	}

	#ruteMap {
		width: 100%;
		height: 100%;
	}

	.posFlag {
		display: inline-block;
	}

	/* Aktuel ordre card */
	#ruteAktuel {
		background: var(--bg-card) !important;
		border-radius: 16px;
		padding: 20px !important;
		margin-bottom: 16px;
	}

	#ruteAktuelInfo {
		font-size: 1.1em;
		line-height: 1.5;
		padding: 16px !important;
		border-radius: 12px;
	}

	/* Action buttons - all same size, centered */
	#ruteAktuelBtns {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: center !important;
		gap: 10px;
		margin-top: 12px;
		padding: 0 !important;
	}

	#ruteAktuelBtns .ui-btn {
		min-height: 52px !important;
		min-width: 95px;
		font-size: 0.85em !important;
		line-height: 52px !important;
		white-space: nowrap;
	}

	/* Route list items - larger touch targets */
	.rute_row, .rute_rowdone {
		min-height: 80px;
		padding: 16px !important;
		margin: 12px 0 !important;
		border-radius: 12px;
	}

	.rute_row span, .rute_rowdone span {
		font-size: 1.1em;
	}

	/* Liste page - better spacing */
	#liste_div .list_row {
		margin: 12px 0 !important;
		padding: 16px !important;
		border-radius: 12px;
	}

	.list_col {
		padding: 12px !important;
		font-size: 1.1em;
	}
}

/* Smaller tablets / large phones landscape */
@media screen and (min-width: 600px) and (max-width: 899px) and (orientation: landscape) {
	#ruteDescr, #ruteMapWrpr {
		display: inline-block;
		height: 350px;
		width: calc((100% - 16px) / 2);
		vertical-align: top;
	}

	#ruteDescr {
		overflow-y: auto;
	}

	#ruteMapWrpr {
		border-radius: 12px;
		overflow: hidden;
	}

	.posFlag {
		display: inline-block;
	}
}
@media screen and (max-width: 580px) {
	.ui-content {
		padding: .1em .8em !important;
	}
	#appLoginForm {
/*		left: 0;
		top: 120px; */
		width: 100%;
	}
	
	.list_block > div.varelinje {
		width: 100%;
	}
/*	.varelinje .sumlines input, .freightline .sumlines input {
		width: 4em;
	} */

}
@media screen and (max-width: 420px) {
	.ui-content {
		padding: .1em .4em !important;
	}
/* for js_cal */
	#js_cal_outer {
		width: 280px;
	}
	.js_cal_control span {
		padding: 4px;
	}
	.js_cal_control .js_cal_mnthName {
		width: 190px;
	}
	.js_cal_control .btn {
		height: 31px;
		width: 31px;
	}
	.js_cal_dayNames span {
		width: 38px;
	}
	.js_cal_week span {
		height: 26px;
		padding: 6px;
		width: 26px;
	}
}

/***************************************************
              DARK ANTHRACITE THEME
              TransportIntra Mock - Kris Edition
 ***************************************************/

/*
   COLOR PHILOSOPHY:
   - Anthracite base for professional, easy-on-eyes feel
   - Orange header preserved from original TransportIntra
   - Status colors: saturated enough to distinguish, dark enough to fit theme
   - White input fields for clarity and data entry focus
*/

:root {
	/* Anthracite base - warm dark grays */
	--bg-primary: #1a1a1a;
	--bg-secondary: #222222;
	--bg-tertiary: #2a2a2a;
	--bg-card: #303030;
	--bg-elevated: #383838;

	/* Text hierarchy */
	--text-primary: #f5f5f5;
	--text-secondary: #b0b0b0;
	--text-muted: #707070;
	--text-on-color: #ffffff;

	/* Brand colors */
	--brand-orange: #FF6633;
	--brand-orange-dark: #cc5229;

	/* Accent - teal for interactive elements */
	--accent: #4db6ac;
	--accent-hover: #26a69a;
	--accent-light: rgba(77, 182, 172, 0.2);

	/* Semantic colors */
	--success: #66bb6a;
	--success-dark: #2e7d32;
	--warning: #ffa726;
	--warning-dark: #f57c00;
	--error: #ef5350;
	--error-dark: #c62828;
	--info: #42a5f5;

	/* Borders & dividers */
	--border: #404040;
	--border-light: #4a4a4a;
	--divider: rgba(255, 255, 255, 0.08);
}

/* Body and background */
body {
	background: var(--bg-primary) !important;
	background-image: none !important;
	color: var(--text-primary);
}

/* jQuery Mobile page backgrounds */
.ui-page,
.ui-page-theme-a,
.ui-page-active,
.ui-body-a,
.ui-panel-wrapper,
#listepage,
#rutepage,
#ruteOversigt,
#tidsreg,
#chat,
#login,
[data-role="page"] {
	background: var(--bg-primary) !important;
	background-color: var(--bg-primary) !important;
	color: var(--text-primary) !important;
}

/* jQuery Mobile listview */
.ui-listview,
.ui-listview > li,
.ui-li-static,
.ui-listview > li.ui-li-static,
.ui-listview > li.ui-bar-a,
.ui-listview-inset > li {
	background: var(--bg-card) !important;
	border-color: var(--border) !important;
	color: var(--text-primary) !important;
}

.ui-listview > li > a {
	background: var(--bg-card) !important;
	color: var(--text-primary) !important;
}

.ui-listview > li > a:hover {
	background: var(--bg-tertiary) !important;
}

/* jQuery Mobile body inherit */
.ui-body-inherit,
.ui-page-theme-a .ui-body-inherit,
.ui-body-a,
.ui-page-theme-a .ui-body-a,
.ui-overlay-a,
.ui-page-theme-a .ui-panel-wrapper {
	background: var(--bg-primary) !important;
	border-color: var(--border) !important;
	color: var(--text-primary) !important;
}

/* Force override jQuery Mobile default blue/gray theme */
.ui-page-theme-a,
.ui-page-theme-a .ui-btn,
.ui-bar-a,
.ui-body-a,
.ui-btn-a,
.ui-page-theme-a .ui-btn:hover,
div[data-role="content"],
div[data-role="page"] {
	background-color: var(--bg-primary) !important;
	color: var(--text-primary) !important;
	text-shadow: none !important;
}

/* Control groups */
.ui-controlgroup,
.ui-controlgroup-controls {
	background: transparent !important;
}

/* Collapsible and other dynamic content */
.ui-collapsible-content,
.ui-collapsible-heading,
.ui-corner-all,
.ui-shadow {
	background-color: var(--bg-card) !important;
	color: var(--text-primary) !important;
}

/* Header bar - original orange */
.ui-bar-a,
.ui-page-theme-a .ui-bar-inherit {
	background: #FF6633 !important;
	border-bottom: 1px solid #cc5229;
	color: #ffffff !important;
	text-shadow: -1px -1px 0px #000 !important;
}

/* Page content area */
.ui-page-theme-a,
.ui-page-theme-a .ui-panel-wrapper {
	background: var(--bg-primary) !important;
	color: var(--text-primary);
}

.ui-content {
	background: transparent !important;
}

/* Buttons - Redesigned for tablet/touch */
.ui-btn,
.intrAppBtn {
	background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%) !important;
	border: 1px solid #4a4a4a !important;
	border-radius: 8px !important;
	color: var(--text-primary) !important;
	text-shadow: none !important;
	box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05) !important;
	transition: all 0.15s ease !important;
	min-height: 44px !important;
	padding: 0 16px !important;
	font-size: 1em !important;
	font-weight: 500 !important;
	text-align: center !important;
	line-height: 44px !important;
}

.ui-btn:hover,
.ui-btn:focus,
.intrAppBtn:hover {
	background: linear-gradient(180deg, #454545 0%, #353535 100%) !important;
	border-color: var(--accent) !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

.ui-btn:active,
.intrAppBtn:active {
	background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%) !important;
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 2px 4px rgba(0,0,0,0.2) !important;
}

.ui-btn.ui-btn-active {
	background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%) !important;
	color: var(--text-on-color) !important;
	border-color: var(--accent-hover) !important;
}

/* Primary action button (Afslut) */
.btn-primary,
.ui-btn.btn-primary,
.intrAppBtn.btn-primary {
	background: linear-gradient(180deg, #2d8a4e 0%, #1e6b3a 100%) !important;
	border-color: #3da864 !important;
	min-height: 48px !important;
	font-size: 1.05em !important;
	font-weight: 600 !important;
	padding: 0 20px !important;
	line-height: 48px !important;
}

.btn-primary:hover {
	background: linear-gradient(180deg, #3da864 0%, #2d8a4e 100%) !important;
}

.btn-primary:active {
	background: linear-gradient(180deg, #1e6b3a 0%, #155a2e 100%) !important;
}

/* Danger/Error button */
.btn-danger,
.ui-btn.btn-danger,
.intrAppBtn.btn-danger {
	background: linear-gradient(180deg, #8a3a3a 0%, #6b2a2a 100%) !important;
	border-color: #a04a4a !important;
}

.btn-danger:hover {
	background: linear-gradient(180deg, #a04a4a 0%, #8a3a3a 100%) !important;
}

/* Secondary/neutral button */
.btn-secondary,
.ui-btn.btn-secondary {
	background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%) !important;
	border-color: #4a4a4a !important;
}

/* Icon buttons */
.ui-btn.ui-btn-icon-left {
	padding-left: 48px !important;
}

.ui-btn.ui-btn-icon-right {
	padding-right: 48px !important;
}

/* Rute action buttons - all same size, centered */
#ruteAktuelBtns {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center !important;
	gap: 8px;
	padding: 10px 0 !important;
}

#ruteAktuelBtns .ui-btn {
	min-height: 52px !important;
	min-width: 95px;
	padding: 0 10px !important;
	line-height: 52px !important;
	font-size: 0.85em !important;
	margin: 0 !important;
	white-space: nowrap;
}

#rute-afslut-btn {
	background: linear-gradient(180deg, #2d8a4e 0%, #1e6b3a 100%) !important;
	border-color: #3da864 !important;
}

/* Fejl/Afvis buttons - neutral styling (same as other buttons) */
#rute-fejl-btn,
#rute-afvis-btn {
	background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%) !important;
	border-color: #4a4a4a !important;
}

/* Inline buttons (data-inline=true) */
.ui-btn-inline {
	min-height: 40px !important;
	padding: 0 14px !important;
	line-height: 40px !important;
}

/* Message page (Afvis/Fejl) - scrollable content */
#message .ui-content {
	overflow-y: auto !important;
	height: auto !important;
	max-height: calc(100vh - 60px) !important;
	padding-bottom: 20px !important;
}

#message .cntrd_btns {
	padding: 10px 0;
}

#message .cntrd_btns .ui-btn,
#message .cntrd_btns .intrAppBtn,
#message .cntrd_btns label.ui-btn {
	min-height: 44px !important;
	line-height: 44px !important;
	margin: 4px !important;
	display: inline-block !important;
	vertical-align: middle;
}

/* Photo buttons */
label.photoBtn {
	min-height: 44px !important;
	line-height: 44px !important;
	padding: 0 14px !important;
}

/* Control group buttons (navigation arrows, calendar) */
.ui-controlgroup .ui-btn {
	min-height: 40px !important;
	min-width: 48px !important;
	line-height: 40px !important;
	padding: 0 12px !important;
}

/* Date navigation buttons */
#lYesterdayBtn, #lTomorrowBtn,
#tYesterdayBtn, #tTomorrowBtn {
	min-width: 64px !important;
}

#lCalendarBtn, #tCalendarBtn {
	min-width: 120px !important;
}

/* Input fields - white background */
.ui-input-text,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
textarea,
select {
	background: #ffffff !important;
	border: 1px solid var(--border) !important;
	color: #1c1c1c !important;
}

.ui-input-text:focus,
input:focus,
textarea:focus,
select:focus {
	border-color: var(--accent) !important;
	outline: none;
	box-shadow: 0 0 0 3px var(--accent-light) !important;
}

/* Links */
a, .ui-content a, .ui-content a:visited {
	color: var(--accent) !important;
	text-decoration: none;
	transition: color 0.15s ease;
}

a:hover {
	color: var(--accent-hover) !important;
	text-decoration: underline;
}

/* Simulated links */
.simlink, .atchmnt {
	color: var(--accent) !important;
	cursor: pointer;
}

/* List rows and cards */
.list_row,
.rute_row,
.rute_rowdone,
#liste_div .list_row,
#ruteliste .rute_row,
#ruteFullList .rute_row,
#ruteFullList .rute_rowdone {
	background: var(--bg-card) !important;
	border: 1px solid var(--border) !important;
	border-radius: 12px;
	color: var(--text-primary) !important;
	transition: all 0.15s ease;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.list_row:hover,
.rute_row:hover {
	border-color: var(--accent) !important;
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.list_col,
.list_opn {
	color: var(--text-primary) !important;
	cursor: pointer;
}

.list_hdr {
	background: rgba(255,255,255,0.05) !important;
	border-radius: 8px;
	padding: 8px 12px !important;
}

/* Completed rows - subtle styling */
.rute_rowdone {
	opacity: 0.7;
}

.rute_rowdone:hover {
	opacity: 1;
}

/* Rute Aktuel - current route info */
#ruteAktuel,
#ruteAktuelInfo,
#ruteDescr {
	background: var(--bg-secondary) !important;
	color: var(--text-primary) !important;
	border-radius: 8px;
}

#ruteAktuelInfo {
	background: var(--bg-card) !important;
	padding: 8px;
	border-radius: 6px;
}

/* Liste div - dispatch list */
#liste_div,
#ruteliste,
#ruteFullList {
	color: var(--text-primary) !important;
}

/* Dispatch list items on listePage */
#liste_div > .list_row,
#liste_div > div,
#liste_div .list_col,
#liste_div .list_hdr {
	color: var(--text-primary) !important;
	border-color: var(--border) !important;
}

/* Ensure text is always light on status-colored backgrounds */
#liste_div .list_col,
#liste_div .list_col div,
#ruteliste .rute_row,
#ruteliste .rute_row span,
#ruteFullList .rute_row,
#ruteFullList .rute_row span,
#ruteFullList .rute_rowdone,
#ruteFullList .rute_rowdone span,
#ruteAktuel,
#ruteAktuelInfo {
	color: #e8e8e8 !important;
}

/* Override any blue jQuery Mobile backgrounds */
[class*="ui-body"],
[class*="ui-btn"]:not(.ui-btn-active),
.ui-page-theme-a [class*="ui-body"] {
	background-color: var(--bg-card) !important;
	background-image: none !important;
	color: var(--text-primary) !important;
}

/* Specific jQuery Mobile overrides for listePage and ruteOversigt */
#listePage .ui-body-a,
#ruteOversigt .ui-body-a,
#ruteFullListPage .ui-body-a {
	background: var(--bg-card) !important;
	color: var(--text-primary) !important;
}

/* Header bar - keep original orange */
[data-role="header"] .ui-bar-inherit,
[data-role="header"].ui-bar-a,
.ui-header,
.ui-page .ui-header,
div[data-role="header"] {
	background: #FF6633 !important;
	background-color: #FF6633 !important;
	border-bottom: 1px solid #cc5229 !important;
	color: #ffffff !important;
	text-shadow: -1px -1px 0px #000 !important;
}

/* Status colors - adjusted for dark theme */
.status0 {
	background-color: var(--success) !important;
	color: #fff;
}

.status1, .status2 {
	background-color: var(--warning) !important;
	color: #000;
}

.vgnStatus0 {
	background-color: var(--accent) !important;
}

.vgnStatus1 {
	background-color: var(--warning) !important;
}

/* Wrappers - Tidsregistrering */
#vgnWrpr {
	background: linear-gradient(135deg, #1a3d5c 0%, #2a4a6b 100%) !important;
	border: 1px solid #3d5a7a !important;
	border-radius: 8px;
}

#tidsregWrpr {
	background: linear-gradient(135deg, #1a4a2a 0%, #2a5a3a 100%) !important;
	border: 1px solid #3a6a4a !important;
	border-radius: 8px;
}

#tidsreg_hist {
	background-color: var(--bg-secondary) !important;
	border: 1px solid var(--border) !important;
	border-radius: 8px;
}

#forvgnWrpr,
#trailrWrpr {
	background-color: rgba(255, 255, 255, 0.03) !important;
	border-radius: 6px;
	margin: 4px 0;
}

/* Modal and popups */
#modal {
	background: var(--bg-secondary) !important;
	border: 1px solid var(--border) !important;
	box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
	color: var(--text-primary);
	border-radius: 12px !important;
}

#modal-title {
	border-color: var(--border) !important;
	background: var(--bg-tertiary) !important;
	border-radius: 12px 12px 0 0 !important;
}

#intrAppMask {
	background-color: rgba(0,0,0,0.75) !important;
	backdrop-filter: blur(4px);
}

/* Menu */
div#menu {
	background-color: var(--bg-secondary) !important;
	border-radius: 0 0 12px 0;
}

div#menu.visible {
	box-shadow: 4px 4px 24px rgba(0,0,0,0.5) !important;
}

div#menu a {
	background: var(--bg-card) !important;
	background-image: linear-gradient(to bottom, var(--bg-elevated), var(--bg-card)) !important;
	border: 1px solid var(--border) !important;
	color: var(--text-primary) !important;
	text-shadow: none !important;
	transition: all 0.15s ease;
}

div#menu a:hover {
	background: var(--bg-elevated) !important;
	background-image: none !important;
	border-color: var(--accent) !important;
	padding-left: 1.2em;
}

/* Hamburger menu icon - make it white */
div#hamburger .hamburger-line {
	background-color: #fff !important;
}

/* Refresh icon - invert for dark bg */
#list-refresh:after,
#rute-refresh:after {
	filter: invert(1);
}

/* Important remarks - uses brand orange */
.impremrks {
	background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-dark) 100%) !important;
	color: var(--text-on-color) !important;
	border-radius: 6px;
	padding: 10px !important;
	font-weight: 500;
}

/* Sorter badge - uses brand orange for visibility */
.sorter {
	color: var(--brand-orange) !important;
	font-weight: bold;
	text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Frame divs and blocks */
.frameDiv {
	border: 1px solid var(--border) !important;
	background: var(--bg-secondary);
	border-radius: 8px;
	padding: 12px !important;
	margin: 8px 0;
}

.list_block,
.rute_block {
	border-color: var(--divider) !important;
}

/* Varelinje and edit rows */
.varelinje,
.edit_matnr,
.freightline,
.editable-line {
	background-color: rgba(255,255,255,0.03) !important;
	border-radius: 4px;
	margin: 4px 0 !important;
}

/* Tidsreg */
.tidsRegDiv {
	background: var(--bg-card) !important;
	border-color: var(--border) !important;
	color: var(--text-primary);
}

#tidsregOpn,
#tidsregMainBtns {
	background-color: rgba(255,255,255,0.05) !important;
}

/* Chat styling */
.chatDialog {
	color: var(--text-primary);
}

.chatFromYou > .msg {
	background-color: var(--bg-elevated) !important;
	border: 1px solid var(--border) !important;
	color: var(--text-primary);
	border-radius: 12px 12px 12px 4px !important;
}

.chatFromYou > .chatTS {
	background-color: rgba(255, 255, 255, 0.05) !important;
}

.chatFromYou:before {
	border-bottom-color: var(--bg-elevated) !important;
	border-left-color: var(--bg-primary) !important;
}

.chatFromMe > .msg {
	background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%) !important;
	color: var(--text-on-color);
	border-radius: 12px 12px 4px 12px !important;
}

.chatFromMe.read > .msg {
	background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%) !important;
}

.chatFromMe::after {
	border-bottom-color: var(--accent) !important;
	border-right-color: var(--bg-primary) !important;
}

.chatFromMe.read::after {
	border-bottom-color: var(--success) !important;
}

.chatLogChat > .chatRcnt {
	background: var(--bg-card);
	border: 1px solid var(--border) !important;
	border-radius: 8px;
	color: var(--text-primary) !important;
	transition: all 0.15s ease;
}

.chatLogChat > .chatRcnt:hover {
	background-color: var(--bg-elevated) !important;
	border-color: var(--accent) !important;
}

/* Calendar */
.js_cal_week span,
.js_cal_control span,
.js_cal_dayNames span {
	background-color: var(--bg-card) !important;
	border-color: var(--border) !important;
	color: var(--text-primary) !important;
	transition: all 0.15s ease;
}

.js_cal_control .btn {
	background-color: var(--bg-elevated) !important;
	cursor: pointer;
}

.js_cal_control .btn:hover {
	background-color: var(--accent) !important;
	color: var(--text-on-color) !important;
}

.js_cal_week .btn {
	background-color: var(--bg-secondary) !important;
	box-shadow: none !important;
	cursor: pointer;
}

.js_cal_week .btn:hover {
	background-color: var(--bg-elevated) !important;
	border-color: var(--accent) !important;
}

/* Weekend days - subtle red tint */
.js_cal_week span.we,
.js_cal_dayNames span.we {
	background-color: rgba(239, 68, 68, 0.15) !important;
}

/* Today - highlighted with accent */
.js_cal_week .td {
	background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%) !important;
	color: var(--text-on-color) !important;
	font-weight: bold;
}

/* GPS wrapper */
.gps-wrapper {
	border: 1px solid var(--border) !important;
	background: var(--bg-card);
	border-radius: 8px;
	padding: 12px !important;
}

.gps-val {
	background: var(--bg-primary) !important;
	border: 1px solid var(--border) !important;
	color: var(--text-primary) !important;
	border-radius: 4px;
	font-family: monospace;
}

.gps-lbl {
	color: var(--text-secondary) !important;
}

/* Image gallery */
#imgGalleri {
	background-color: rgba(0, 0, 0, 0.85) !important;
}

#imgGalleri img {
	background-color: var(--bg-card) !important;
}

/* Labels */
label,
.ui-mobile label {
	color: var(--text-secondary) !important;
}

/* Today date */
#today {
	color: var(--text-primary);
}

/* Status span */
.status_span {
	color: var(--text-secondary);
}

/* Slider */
.ui-slider > .ui-page-theme-a,
.ui-slider > .ui-bar-inherit {
	background-color: var(--bg-card) !important;
}

/* Checkbox/Radio buttons */
.ui-checkbox label,
.ui-radio label {
	background: var(--bg-card) !important;
	color: var(--text-primary) !important;
}

/* Switch */
input[type="checkbox"].switch + span {
	background: var(--bg-tertiary) !important;
}

/* Popup screen */
.ui-popup-screen.in {
	background-color: rgba(0,0,0,0.8) !important;
}

/* GPS message */
#gpsMessage {
	background-color: rgba(0, 0, 0, 0.7) !important;
	color: var(--text-primary);
}

/* Attachment link */
.atchmnt, .simlink {
	color: var(--accent) !important;
}

/* Messages */
#messageList div,
#recptComments div {
	background: var(--bg-card);
	border-color: var(--border) !important;
	color: var(--text-primary);
}

/* Signature */
#signature,
#fingerMsg {
	background-color: var(--bg-card) !important;
	border-color: var(--border) !important;
}

/* Log details */
#log-details {
	color: var(--text-primary);
}

/* Settings */
#settings_div {
	border-color: var(--border) !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
	background: var(--bg-tertiary);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--accent);
}

/* Main menu buttons (menuPage) - force white text */
#mainMenu a.ui-btn,
#mainMenu .ui-btn {
	color: #ffffff !important;
	background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%) !important;
	border: 1px solid #4a4a4a !important;
	text-shadow: none !important;
}

#mainMenu a.ui-btn:hover,
#mainMenu .ui-btn:hover {
	background: linear-gradient(180deg, #454545 0%, #353535 100%) !important;
	border-color: var(--accent) !important;
}

/* ============================================
   EXTRA ROUTE CALENDAR STYLES
   ============================================ */

.extra-cal-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	background: var(--bg-secondary);
	border-radius: 8px;
	margin-bottom: 10px;
}

.extra-cal-btn {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--accent);
	color: var(--bg-primary);
	border-radius: 50%;
	font-weight: bold;
	font-size: 18px;
	cursor: pointer;
}

.extra-cal-title {
	font-size: 18px;
	font-weight: bold;
	color: var(--text-primary);
}

.extra-cal-header {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	margin-bottom: 5px;
}

.extra-cal-header span {
	text-align: center;
	padding: 8px;
	color: var(--accent);
	font-weight: bold;
}

.extra-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.extra-cal-day {
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--bg-secondary);
	border-radius: 8px;
	cursor: pointer;
	border: 2px solid transparent;
	transition: all 0.2s;
}

.extra-cal-day.empty {
	background: transparent;
	cursor: default;
}

.extra-cal-day .day-num {
	font-size: 16px;
	color: var(--text-primary);
}

.extra-cal-day.today {
	border-color: var(--accent);
}

.extra-cal-day.today .day-num {
	color: var(--accent);
	font-weight: bold;
}

.extra-cal-day.selected {
	background: var(--accent);
}

.extra-cal-day.selected .day-num {
	color: var(--bg-primary);
}

.extra-cal-day:not(.empty):hover {
	border-color: var(--accent);
}

/* Route buttons in extra route picker */
.extra-route-btn {
	padding: 15px;
	margin: 8px 0;
	background: var(--bg-secondary);
	border-radius: 8px;
	border: 2px solid transparent;
	color: var(--text-primary);
	cursor: pointer;
	transition: all 0.2s;
}

.extra-route-btn:hover {
	border-color: #9b59b6;
}

.extra-route-btn.selected {
	background: #9b59b6;
	border-color: #9b59b6;
	color: white;
}

.extra-route-btn small {
	color: #888;
	font-size: 12px;
}

.extra-route-btn.selected small {
	color: rgba(255,255,255,0.8);
}

/* Extra route items in main route list */
.extra-route-item {
	border-left: 4px solid #9b59b6 !important;
}

.extra-route-label {
	font-size: 10px;
	color: #bb86fc;
	padding: 2px 6px;
	background: #2d2d44;
	border-radius: 3px;
	display: inline-block;
	margin-bottom: 5px;
}

.extra-route-header {
	background: #2d2d44;
	color: #bb86fc;
	padding: 10px;
	margin: 15px 0 5px 0;
	border-radius: 5px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* ============================================
   EXTRA ROUTE COMPACT POPUP
   ============================================ */

#extraRoutePopup {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #1a1a2e;
	border: 1px solid #4a4a4a;
	border-radius: 12px;
	padding: 0;
	z-index: 9999;
	width: 280px;
	max-height: 80vh;
	overflow-y: auto;
	box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}

#extraRoutePopup.visible {
	display: block;
}

.erp-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 15px;
	background: #16213e;
	border-radius: 12px 12px 0 0;
	font-weight: bold;
	color: #f5f5f5;
}

.erp-close {
	cursor: pointer;
	color: #888;
	font-size: 18px;
	padding: 0 5px;
}

.erp-close:hover {
	color: #e74c3c;
}

.erp-selectors {
	display: flex;
	gap: 8px;
	padding: 10px 15px;
	background: #16213e;
}

.erp-select {
	flex: 1;
	padding: 6px 10px;
	background: #2a2a3e;
	border: 1px solid #4a4a4a;
	border-radius: 6px;
	color: #f5f5f5;
	font-size: 14px;
}

.erp-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 3px;
	padding: 10px 15px;
}

.erp-day {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #2a2a3e;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	color: #b0b0b0;
	transition: all 0.15s;
}

.erp-day:hover {
	background: #3a3a4e;
	color: #f5f5f5;
}

.erp-day.today {
	border: 2px solid #4db6ac;
	color: #4db6ac;
	font-weight: bold;
}

.erp-day.selected {
	background: #4db6ac;
	color: #1a1a2e;
	font-weight: bold;
}

.erp-day.weekend {
	color: #e57373;
}

.erp-day.weekend:hover {
	color: #ef5350;
}

.erp-day.weekend.selected {
	background: #e74c3c;
	color: #fff;
}

#erpRoutes {
	padding: 10px 15px;
	border-top: 1px solid #3a3a4a;
}

.erp-hint {
	text-align: center;
	color: #707070;
	font-size: 13px;
	padding: 15px 0;
}

.erp-route {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	margin: 5px 0;
	background: #2a2a3e;
	border-radius: 6px;
	cursor: pointer;
	color: #f5f5f5;
	font-size: 13px;
	transition: all 0.15s;
}

.erp-route:hover {
	background: #3a3a4e;
}

.erp-route input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: #4db6ac;
}

.erp-route span {
	flex: 1;
}

.erp-route small {
	color: #888;
}

.erp-clear {
	text-align: center;
	padding: 12px;
	color: #e74c3c;
	cursor: pointer;
	border-top: 1px solid #3a3a4a;
	font-size: 13px;
}

.erp-clear:hover {
	background: rgba(231, 76, 60, 0.1);
}

/* Plus button for adding routes */
#addRouteBtn {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	background: linear-gradient(135deg, #4db6ac 0%, #26a69a 100%);
	color: #fff;
	border-radius: 50%;
	font-size: 24px;
	font-weight: bold;
	line-height: 34px;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
	transition: all 0.15s;
	z-index: 10;
}

#addRouteBtn:hover {
	transform: translateY(-50%) scale(1.1);
	box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

#addRouteBtn:active {
	transform: translateY(-50%) scale(0.95);
}

/* Weekday header row in calendar */
.erp-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 3px;
	padding: 5px 15px 0 15px;
}

.erp-weekday {
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	color: #4db6ac;
	padding: 4px 0;
}

.erp-weekday.weekend {
	color: #e74c3c;
}

/* Empty day cells for calendar alignment */
.erp-day.empty {
	background: transparent;
	cursor: default;
}

/* Route label badge for main route */
.main-route-header {
	background: #1a3d5c;
	color: #4db6ac;
	padding: 10px;
	margin: 0 0 5px 0;
	border-radius: 5px;
	border-left: 4px solid #4db6ac;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* ===================== */
/* WEIGHT TRACKER BAR    */
/* ===================== */

/* ===================== */
/* WEIGHT HEADER         */
/* ===================== */
#weightHeader {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 10010;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	height: 42px;
}
#weightHeader.hidden { display: none; }
#weightHeader #wbValue {
	width: 58px;
	padding: 3px 4px;
	border: none;
	border-radius: 6px;
	background: #fff;
	color: #111;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	-webkit-appearance: none;
	margin: 0;
}
.wh-kg {
	font-size: 12px;
	color: rgba(255,255,255,0.6);
	margin-right: 2px;
}
.wh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: #2d2d44;
	color: #e0e0e0;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	border: 1px solid #444;
}
.wh-btn:active { background: #0f3460; }
.wh-btn.wb-disabled { opacity: 0.25; }


/* ===================== */
/* WEIGHT POPUP          */
/* ===================== */

.weight-popup-overlay {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.7);
	z-index: 10100;
	display: flex;
	align-items: center;
	justify-content: center;
}
.weight-popup {
	background: #1a1a2e;
	border-radius: 12px;
	padding: 16px;
	width: 92%;
	max-width: 400px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.weight-popup-title {
	font-size: 18px;
	font-weight: bold;
	color: #4fc3f7;
	text-align: center;
	margin-bottom: 16px;
}
.weight-popup-grid {
	display: flex;
	gap: 16px;
}
.weight-popup-col {
	flex: 1;
}
.weight-popup-header {
	font-size: 12px;
	color: #888;
	text-transform: uppercase;
	margin-bottom: 8px;
	text-align: center;
}
.weight-input-row {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
	gap: 6px;
}
.weight-input-row input {
	width: 70px;
	padding: 8px;
	font-size: 16px;
	background: #0d1421;
	border: 1px solid #333;
	border-radius: 6px;
	color: #fff;
	text-align: right;
}
.weight-input-row input:focus {
	outline: none;
	border-color: #4fc3f7;
}
.weight-input-row input[readonly] {
	background: #1a2a3e;
	color: #4fc3f7;
}
.weight-label {
	font-size: 12px;
	color: #aaa;
	flex: 1;
}
.weight-total {
	border-top: 1px solid #333;
	padding-top: 8px;
	margin-top: 4px;
}
.weight-total span:first-child {
	display: inline-block;
	width: 70px;
	padding: 8px;
	font-size: 16px;
	font-weight: bold;
	color: #4fc3f7;
	text-align: right;
}
.weight-factor-info {
	margin-top: 16px;
	padding: 10px;
	background: #0d1421;
	border-radius: 6px;
	font-size: 12px;
	color: #888;
	text-align: center;
}
.weight-popup-btns {
	display: flex;
	gap: 8px;
	margin-top: 16px;
}
.weight-btn {
	flex: 1;
	padding: 12px 8px;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	cursor: pointer;
}
.weight-btn-cancel {
	background: #333;
	color: #aaa;
}
.weight-btn-reset {
	background: #5c2d00;
	color: #f39c12;
}
.weight-btn-save {
	background: #0f3460;
	color: #4fc3f7;
	font-weight: bold;
}

/* ===================== */
/* DOCS PANEL            */
/* ===================== */

#headerToolButtons {
	position: fixed;
	top: 6px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10010;
	display: flex;
	gap: 8px;
}
#debugLabelsBtn {
	font-size: 22px;
	cursor: pointer;
	width: 2em;
	height: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
	-webkit-user-select: none;
	opacity: 0.5;
}
#debugLabelsBtn.active {
	opacity: 1;
	background: rgba(79, 195, 247, 0.3);
	border-radius: 4px;
}
#docsToggle {
	font-size: 22px;
	cursor: pointer;
	width: 2em;
	height: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
	-webkit-user-select: none;
}
#docsPanel {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	width: 88%;
	max-width: 400px;
	z-index: 10020;
	background: #121a2e;
	color: #ddd;
	display: flex;
	flex-direction: column;
	box-shadow: -4px 0 16px rgba(0,0,0,0.6);
	transition: transform .2s ease;
}
#docsPanel.hidden {
	display: none;
}
#docsPanelHeader {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 14px;
	background: #1a1a2e;
	border-bottom: 1px solid #333;
	font-size: 16px;
	font-weight: bold;
	color: #4fc3f7;
}
#docsPanelClose {
	font-size: 20px;
	cursor: pointer;
	padding: 4px 8px;
}
#docsPanelBody {
	flex: 1;
	overflow-y: auto;
	padding: 12px 14px 60px;
	font-size: 13px;
	line-height: 1.5;
	-webkit-overflow-scrolling: touch;
}
#docsPanelBody h2 { color: #4fc3f7; font-size: 17px; margin: 18px 0 6px; }
#docsPanelBody h3 { color: #81d4fa; font-size: 15px; margin: 14px 0 4px; }
#docsPanelBody h4 { color: #b3e5fc; font-size: 14px; margin: 10px 0 4px; }
#docsPanelBody code {
	background: #1a2744;
	padding: 1px 5px;
	border-radius: 3px;
	font-size: 12px;
}
#docsPanelBody ul { padding-left: 18px; margin: 4px 0; }
#docsPanelBody li { margin: 2px 0; }
#docsPanelBody p { margin: 4px 0; }

/* Distance badge */
.dist-badge {
	display: inline-block;
	float: right;
	clear: right;
	background: #0f3460;
	color: #4fc3f7;
	font-size: 14px !important;
	font-weight: bold;
	padding: 4px 10px;
	border-radius: 10px;
	margin-top: 4px;
	width: auto !important;
	line-height: 1.3 !important;
}
.dist-badge:empty { display: none; }


/* ===================== */
/* WAYPOINTS             */
/* ===================== */

.wp-stop-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0;
	align-items: center;
}
.wp-stop-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 8px;
	background: #1a1a2e;
	border: 1px solid #4fc3f7;
	font-size: 20px;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}
.wp-stop-btn:active { background: #0f3460; }
.wp-add-btn {
	color: #4fc3f7;
	font-size: 22px;
	font-weight: bold;
	border-style: dashed;
}

/* Overlay + Dialog */
.wp-overlay {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.7);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wp-dialog {
	background: #16213e;
	border-radius: 12px;
	padding: 16px;
	width: 90%;
	max-width: 340px;
	color: #e0e0e0;
}
.wp-dialog-title {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 12px;
	color: #4fc3f7;
}
.wp-emoji-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}
.wp-emoji-opt {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	border-radius: 8px;
	border: 2px solid transparent;
	cursor: pointer;
	background: #1a1a2e;
}
.wp-emoji-opt.selected {
	border-color: #4fc3f7;
	background: #0f3460;
}
.wp-input {
	width: 100%;
	padding: 8px;
	margin-bottom: 8px;
	border: 1px solid #333;
	border-radius: 6px;
	background: #1a1a2e;
	color: #e0e0e0;
	font-size: 14px;
	box-sizing: border-box;
}
.wp-coord-row {
	display: flex;
	gap: 6px;
	align-items: center;
}
.wp-coord { flex: 1; }
.wp-pick-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 8px;
	background: #0f3460;
	color: #4fc3f7;
	font-size: 22px;
	cursor: pointer;
	border: 1px solid #4fc3f7;
	flex-shrink: 0;
}
.wp-coord-hint {
	font-size: 11px;
	color: #888;
	margin: 2px 0 10px;
}
.wp-dialog-btns {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}
.wp-btn {
	flex: 1;
	padding: 10px;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
}
.wp-btn-save { background: #34A853; color: #fff; }
.wp-btn-cancel { background: #444; color: #ccc; }
.wp-btn-delete { background: #e74c3c; color: #fff; }

/* Map pick bar */
.wp-pick-bar {
	position: fixed;
	top: 0; left: 0; right: 0;
	background: #16213e;
	color: #e0e0e0;
	padding: 12px;
	z-index: 10001;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.wp-pick-bar span { flex: 1; font-size: 14px; }
.wp-pick-bar .wp-btn { flex: 0; white-space: nowrap; padding: 8px 14px; }

/* Global toggle buttons */
.wp-global-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 6px;
	font-size: 16px;
	cursor: pointer;
	margin-left: 4px;
	background: #333;
	opacity: 0.4;
	border: 1px solid transparent;
}
.wp-global-toggle.active {
	opacity: 1;
	background: #1a1a2e;
	border-color: #4fc3f7;
}
#wpGlobalAddBtn {
	font-size: 11px;
	margin-left: 6px;
}

/* Group list items */
.wp-group-item {
	padding: 10px 8px;
	border-bottom: 1px solid #333;
	display: flex;
	align-items: center;
	gap: 8px;
}
.wp-group-emoji { font-size: 20px; }
.wp-group-edit {
	margin-left: auto;
	color: #4fc3f7;
	cursor: pointer;
	font-size: 18px;
}

/* ===================== */
/* SECOND BRAIN PANEL    */
/* ===================== */

#sbToggle, #gpToggle {
	font-size: 20px;
	cursor: pointer;
	width: 2em;
	height: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
	-webkit-user-select: none;
	opacity: 0.7;
}
#sbToggle:active, #gpToggle:active { opacity: 1; }

/* Main panel - full screen overlay */
#sbPanel {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 10030;
	background: #0d1117;
	color: #e0e0e0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
#sbPanel.hidden { display: none; }

#sbPanelHeader, #gpPanelHeader {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: #161b22;
	border-bottom: 1px solid #30363d;
	font-size: 16px;
	font-weight: bold;
	flex-shrink: 0;
}
#sbPanelClose, #gpPanelClose {
	font-size: 22px;
	cursor: pointer;
	padding: 4px 8px;
	opacity: 0.7;
}
#sbPanelClose:active, #gpPanelClose:active { opacity: 1; }

/* Three columns */
#sbColumns {
	display: flex;
	flex: 1;
	overflow: hidden;
	min-height: 0;
}
.sb-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	border-right: 1px solid #30363d;
	overflow: hidden;
	min-width: 0;
}
.sb-col:last-child { border-right: none; }

.sb-col-header {
	padding: 8px 12px;
	background: #161b22;
	font-size: 13px;
	font-weight: bold;
	color: #4fc3f7;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-bottom: 1px solid #30363d;
	flex-shrink: 0;
}

/* Left column - questions */
#sbQuestions {
	flex: 1;
	overflow-y: auto;
	padding: 8px;
}
.sb-q {
	padding: 10px;
	margin-bottom: 6px;
	background: #1c2333;
	border-radius: 6px;
	border-left: 3px solid #4fc3f7;
	font-size: 13px;
	line-height: 1.4;
	display: flex;
	gap: 8px;
	align-items: flex-start;
}
.sb-q.answered {
	border-left-color: #4caf50;
	opacity: 0.6;
}
.sb-q-status {
	flex-shrink: 0;
	font-size: 14px;
	margin-top: 1px;
}
.sb-q-text { flex: 1; }

/* Middle column - input */
#sbInputArea {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 8px;
}
#sbTextInput {
	flex: 1;
	min-height: 100px;
	background: #1c2333;
	border: 1px solid #30363d;
	border-radius: 6px;
	color: #e0e0e0;
	font-size: 14px;
	line-height: 1.5;
	padding: 12px;
	resize: none;
	font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
#sbTextInput:focus {
	outline: none;
	border-color: #4fc3f7;
}
#sbTextInput::placeholder {
	color: #555;
}

#sbInputControls {
	display: flex;
	gap: 8px;
	margin-top: 8px;
	flex-shrink: 0;
}
#sbSendHaiku, #sbSendSonnet, #sbSendOpus {
	/* Uses .sb-dest-btn styles */
}
#sbReHaikuBtn, #sbAnalyzeBtn, #sbBackBtn {
	padding: 10px 12px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	font-weight: bold;
}
#sbReHaikuBtn {
	background: #4fc3f7;
	color: #0d1117;
}
#sbAnalyzeBtn {
	background: #7c4dff;
	color: #fff;
}
#sbBackBtn {
	background: #30363d;
	color: #999;
}
#sbReHaikuBtn:disabled, #sbAnalyzeBtn:disabled {
	background: #30363d !important;
	color: #555 !important;
	cursor: wait;
}

.sb-input-hint {
	text-align: center;
	color: #555;
	font-size: 11px;
	padding: 4px;
}

/* Review phase */
#sbReviewArea {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 8px;
	overflow: hidden;
	min-height: 0;
}
#sbReviewArea.hidden { display: none; }

#sbCleanedText {
	flex: 1;
	overflow-y: auto;
	min-height: 80px;
	background: #1c2333;
	border: 1px solid #30363d;
	border-radius: 6px;
	padding: 12px;
	font-size: 13px;
	line-height: 1.5;
	color: #e0e0e0;
	margin-bottom: 8px;
}
#sbFeedbackInput {
	min-height: 60px;
	max-height: 100px;
	background: #1c2333;
	border: 1px solid #30363d;
	border-radius: 6px;
	color: #e0e0e0;
	font-size: 13px;
	padding: 8px;
	resize: none;
	font-family: -apple-system, BlinkMacSystemFont, sans-serif;
	margin-bottom: 8px;
}
#sbFeedbackInput:focus { outline: none; border-color: #4fc3f7; }

#sbReviewControls {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
	flex-wrap: wrap;
	padding-top: 4px;
}
#sbReHaikuBtn, #sbAnalyzeBtn, #sbBackBtn {
	padding: 8px 12px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	font-weight: bold;
}
#sbReHaikuBtn {
	background: #1c2333;
	color: #e0e0e0;
	border: 1px solid #30363d;
}
#sbAnalyzeBtn {
	background: #4fc3f7;
	color: #0d1117;
	flex: 1;
}
#sbAnalyzeBtn:active { background: #039be5; }
#sbBackBtn {
	background: #1c2333;
	color: #999;
	border: 1px solid #30363d;
}
#sbReHaikuBtn:disabled, #sbAnalyzeBtn:disabled {
	background: #30363d;
	color: #555;
	cursor: wait;
}

/* Insights */
.sb-resp-insights {
	font-size: 13px;
	line-height: 1.4;
	padding: 8px;
	background: #1a2636;
	border-left: 3px solid #f9a825;
	border-radius: 4px;
	margin-top: 6px;
	color: #ccc;
}

.sb-action-type {
	flex-shrink: 0;
	font-size: 14px;
}

/* Header buttons */
#sbHeaderBtns {
	display: flex;
	align-items: center;
	gap: 8px;
}
#sbHistoryBtn {
	background: #1c2333;
	color: #4fc3f7;
	border: 1px solid #30363d;
	border-radius: 4px;
	padding: 4px 10px;
	font-size: 12px;
	cursor: pointer;
}

/* History panel */
#sbHistoryPanel {
	flex: 1;
	overflow-y: auto;
	padding: 0;
}
#sbHistoryPanel.hidden { display: none; }

#sbHistoryHeader {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 12px;
	background: #161b22;
	border-bottom: 1px solid #30363d;
	font-weight: bold;
	font-size: 14px;
}
#sbHistoryHeader button {
	background: #1c2333;
	color: #4fc3f7;
	border: 1px solid #30363d;
	border-radius: 4px;
	padding: 4px 10px;
	font-size: 12px;
	cursor: pointer;
}

.sb-history-item {
	padding: 12px;
	border-bottom: 1px solid #30363d;
}
.sb-history-time {
	font-size: 11px;
	color: #4fc3f7;
	margin-bottom: 6px;
	font-weight: bold;
}
.sb-history-label {
	font-size: 11px;
	color: #f9a825;
	text-transform: uppercase;
	margin-top: 8px;
	margin-bottom: 2px;
}
.sb-history-text, .sb-history-cleaned, .sb-history-summary {
	font-size: 12px;
	line-height: 1.4;
	color: #ccc;
	padding: 6px 8px;
	background: #1c2333;
	border-radius: 4px;
}
.sb-history-cleaned {
	border-left: 2px solid #4fc3f7;
}
.sb-history-summary {
	border-left: 2px solid #4caf50;
}

/* Right column - goals */
#sbGoals {
	flex: 1;
	overflow-y: auto;
	padding: 8px;
}
.sb-goal-section {
	margin-bottom: 12px;
}
.sb-goal-label {
	font-size: 11px;
	text-transform: uppercase;
	color: #4fc3f7;
	letter-spacing: 0.5px;
	margin-bottom: 4px;
	font-weight: bold;
}
.sb-goal-main {
	font-size: 14px;
	font-weight: bold;
	padding: 8px;
	background: #1c2333;
	border-radius: 6px;
	border-left: 3px solid #f9a825;
	line-height: 1.4;
}
.sb-goal-item {
	font-size: 13px;
	padding: 4px 8px;
	line-height: 1.4;
	color: #ccc;
}
.sb-goal-item.sb-pending {
	color: #f9a825;
}

/* Response area */
#sbResponse {
	border-top: 2px solid #4fc3f7;
	padding: 12px;
	max-height: 40vh;
	overflow-y: auto;
	flex-shrink: 0;
	background: #161b22;
}
#sbResponse.hidden { display: none; }

.sb-resp-summary {
	font-size: 14px;
	line-height: 1.5;
	padding: 8px;
	background: #1c2333;
	border-radius: 6px;
	margin-bottom: 8px;
}
.sb-resp-actions-header {
	font-size: 12px;
	text-transform: uppercase;
	color: #4fc3f7;
	margin-bottom: 6px;
	font-weight: bold;
}
.sb-action {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 10px;
	margin-bottom: 4px;
	background: #1c2333;
	border-radius: 6px;
	font-size: 13px;
	gap: 8px;
}
.sb-action.approved { border-left: 3px solid #4caf50; opacity: 0.7; }
.sb-action.rejected { border-left: 3px solid #d32f2f; opacity: 0.4; text-decoration: line-through; }

.sb-action-text { flex: 1; }
.sb-action-btns { display: flex; gap: 4px; flex-shrink: 0; }

.sb-act-approve, .sb-act-reject {
	padding: 4px 10px;
	border: none;
	border-radius: 4px;
	font-size: 12px;
	cursor: pointer;
}
.sb-act-approve {
	background: #2e7d32;
	color: #fff;
}
.sb-act-reject {
	background: #c62828;
	color: #fff;
}

/* ===================== */
/* GUIDING PRINCIPLES    */
/* ===================== */
#gpPanel {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 10030;
	background: #0d1117;
	color: #e0e0e0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
#gpPanel.hidden { display: none; }

#gpList {
	flex: 1;
	overflow-y: auto;
	padding: 12px;
}
.gp-item {
	display: flex;
	gap: 12px;
	padding: 12px;
	margin-bottom: 8px;
	background: #1c2333;
	border-radius: 6px;
	border-left: 3px solid #f9a825;
}
.gp-num {
	font-size: 20px;
	font-weight: bold;
	color: #f9a825;
	flex-shrink: 0;
	width: 28px;
	text-align: center;
}
.gp-content { flex: 1; }
.gp-title {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 4px;
	line-height: 1.3;
}
.gp-desc {
	font-size: 12px;
	color: #999;
	line-height: 1.4;
}

/* Mobile: stack columns vertically */
@media (max-width: 600px) {
	#sbColumns {
		flex-direction: column;
	}
	.sb-col {
		border-right: none;
		border-bottom: 1px solid #30363d;
		max-height: 33vh;
	}
	.sb-col:last-child { border-bottom: none; }
}

/* ===================== */
/* FEATURE PANEL         */
/* ===================== */
#fpPanel {
	position: fixed;
	top: 42px; left: 0; right: 0; bottom: 0;
	background: #1a1a2e;
	z-index: 10005;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
#fpPanel.hidden { display: none; }
#fpPanelHeader {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: #16213e;
	border-bottom: 1px solid #0f3460;
	font-size: 16px;
	font-weight: bold;
	color: #e0e0e0;
}
#fpPanelClose {
	font-size: 20px;
	cursor: pointer;
	padding: 4px 8px;
	color: #999;
}
#fpPanelClose:hover { color: #fff; }
#fpList {
	flex: 1;
	overflow-y: auto;
	padding: 8px 12px 20px;
}
.fp-category {
	margin-bottom: 16px;
}
.fp-cat-header {
	font-size: 13px;
	font-weight: bold;
	color: #4fc3f7;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 8px 0 4px;
	border-bottom: 1px solid #30363d;
	margin-bottom: 6px;
}
.fp-item {
	background: #16213e;
	border-radius: 6px;
	margin-bottom: 4px;
	overflow: hidden;
}
.fp-item-header {
	display: flex;
	align-items: center;
	padding: 10px 12px;
	cursor: pointer;
	gap: 8px;
}
.fp-item-header:active { background: #1e2a45; }
.fp-item-arrow {
	font-size: 10px;
	color: #888;
	width: 14px;
	flex-shrink: 0;
}
.fp-item-name {
	flex: 1;
	font-size: 14px;
	color: #e0e0e0;
}
.fp-item-badge {
	font-size: 12px;
	margin-left: 4px;
}
.fp-has-note { color: #4caf50; }
.fp-item-body {
	padding: 0 12px 12px;
	border-top: 1px solid #30363d;
}
.fp-item-body.hidden { display: none; }
.fp-item-desc {
	font-size: 12px;
	color: #aaa;
	line-height: 1.5;
	padding: 8px 0;
}
.fp-item-response {
	font-size: 12px;
	color: #c8e6c9;
	background: #1b3a2a;
	padding: 8px 10px;
	border-radius: 4px;
	margin-bottom: 8px;
	line-height: 1.4;
}
.fp-item-note-area {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.fp-note-input {
	background: #0d1117;
	border: 1px solid #30363d;
	color: #e0e0e0;
	border-radius: 4px;
	padding: 8px;
	font-size: 13px;
	resize: vertical;
	min-height: 50px;
	font-family: inherit;
}
.fp-note-input:focus {
	border-color: #4fc3f7;
	outline: none;
}
.fp-item-history {
	font-size: 11px;
	color: #888;
	line-height: 1.4;
	padding: 4px 0 8px;
	font-style: italic;
	border-bottom: 1px solid #30363d;
	margin-bottom: 8px;
}
.fp-note-save {
	align-self: flex-end;
	background: #0f3460;
	color: #4fc3f7;
	border: 1px solid #4fc3f7;
	border-radius: 4px;
	padding: 8px 18px;
	font-size: 13px;
	cursor: pointer;
	font-weight: bold;
}
.fp-note-save:active {
	background: #4fc3f7;
	color: #0f3460;
}
.fp-submit-bar {
	padding: 12px 0;
	text-align: center;
	border-bottom: 1px solid #30363d;
	margin-bottom: 12px;
}
.fp-submit-btn {
	background: #238636;
	color: white;
	border: none;
	border-radius: 8px;
	padding: 14px 24px;
	font-size: 15px;
	font-weight: bold;
	cursor: pointer;
	width: 100%;
}
.fp-submit-btn:active {
	background: #1a6b2b;
}

/* ===================== */
/* CLAUDE CHAT           */
/* ===================== */
#ccPanel {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: #1a1a2e;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
#ccPanel.hidden { display: none; }
#ccHeader {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	background: #16213e;
	border-bottom: 1px solid #0f3460;
	font-size: 16px;
	font-weight: bold;
	color: #e0e0e0;
	gap: 12px;
}
#ccHeader > span:first-child { flex: 1; }
#ccClear {
	font-size: 12px;
	color: #888;
	cursor: pointer;
	padding: 4px 8px;
	border: 1px solid #444;
	border-radius: 4px;
}
#ccClear:hover { color: #e57373; border-color: #e57373; }
#ccClose {
	font-size: 20px;
	cursor: pointer;
	padding: 4px 8px;
	color: #999;
}
#ccClose:hover { color: #fff; }
#ccMessages {
	flex: 1;
	overflow-y: auto;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.cc-empty {
	color: #666;
	text-align: center;
	margin-top: 40%;
	font-size: 14px;
}
.cc-msg {
	max-width: 85%;
	padding: 8px 12px;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.4;
	word-wrap: break-word;
}
.cc-msg-user {
	align-self: flex-end;
	background: #0f3460;
	color: #e0e0e0;
	border-bottom-right-radius: 4px;
}
.cc-msg-claude {
	align-self: flex-start;
	background: #1e2d3d;
	color: #e0e0e0;
	border-bottom-left-radius: 4px;
}
.cc-msg-content { white-space: pre-wrap; }
.cc-msg-time {
	font-size: 10px;
	color: #666;
	margin-top: 4px;
}
.cc-msg-user .cc-msg-time { text-align: right; }
.cc-typing .cc-msg-content {
	animation: ccBlink 1s infinite;
	color: #888;
}
@keyframes ccBlink { 50% { opacity: 0.3; } }
#ccInputArea {
	display: flex;
	gap: 8px;
	padding: 10px 12px;
	background: #16213e;
	border-top: 1px solid #0f3460;
	align-items: flex-end;
}
#ccInput {
	flex: 1;
	background: #0d1117;
	border: 1px solid #30363d;
	color: #e0e0e0;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 14px;
	resize: none;
	font-family: inherit;
	max-height: 100px;
}
#ccInput:focus {
	border-color: #4fc3f7;
	outline: none;
}
#ccSend {
	background: #4fc3f7;
	color: #0f3460;
	border: none;
	border-radius: 8px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	white-space: nowrap;
}
#ccSend:disabled {
	background: #30363d;
	color: #666;
	cursor: default;
}
#chatClaudeBtn, #ytAnalyzerBtn {
	cursor: pointer;
	font-size: 18px;
}

/* ===================== */
/* YOUTUBE ANALYZER      */
/* ===================== */
#ytPanel {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: #1a1a2e;
	z-index: 9997;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
#ytPanel.hidden { display: none; }
#ytHeader {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: #16213e;
	border-bottom: 1px solid #0f3460;
	font-size: 16px;
	font-weight: bold;
	color: #e0e0e0;
}
#ytClose {
	font-size: 20px;
	cursor: pointer;
	padding: 4px 8px;
	color: #999;
}
#ytBody {
	flex: 1;
	overflow-y: auto;
	padding: 12px;
}
#ytInputArea {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}
#ytUrl {
	flex: 1;
	background: #0d1117;
	border: 1px solid #30363d;
	color: #e0e0e0;
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 14px;
}
#ytUrl:focus { border-color: #4fc3f7; outline: none; }
#ytAnalyzeBtn {
	background: #e53935;
	color: white;
	border: none;
	border-radius: 6px;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	white-space: nowrap;
}
#ytAnalyzeBtn:disabled { background: #30363d; color: #555; cursor: wait; }
#ytProgress {
	padding: 12px;
	font-size: 12px;
	color: #4fc3f7;
	background: #0d1117;
	border-radius: 6px;
	margin-bottom: 12px;
	line-height: 1.6;
}
#ytProgress.hidden { display: none; }
#ytResult.hidden { display: none; }
.yt-result-header {
	padding: 12px;
	background: #16213e;
	border-radius: 6px 6px 0 0;
}
.yt-result-header strong {
	display: block;
	font-size: 15px;
	color: #e0e0e0;
	margin-bottom: 4px;
}
.yt-meta {
	font-size: 11px;
	color: #888;
}
.yt-result-body {
	padding: 12px;
	background: #0d1117;
	border-radius: 0 0 6px 6px;
	font-size: 13px;
	color: #ccc;
	line-height: 1.6;
	margin-bottom: 16px;
}
.yt-result-body h2, .yt-result-body h3, .yt-result-body h4 {
	color: #4fc3f7;
	margin: 12px 0 6px;
}
.yt-result-body li {
	margin-left: 16px;
	margin-bottom: 4px;
}
.yt-error {
	padding: 12px;
	color: #e57373;
	background: #2d1111;
	border-radius: 6px;
}
.yt-section { margin-bottom: 12px; }
.yt-section h4 { color: #4fc3f7; margin: 0 0 6px 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; }
.yt-section p { margin: 0; line-height: 1.5; }
.yt-section ul { margin: 4px 0; padding-left: 18px; }
.yt-section li { margin-bottom: 4px; line-height: 1.4; }
.yt-timeline { display: flex; flex-direction: column; gap: 4px; }
.yt-timeline-item { font-size: 12px; line-height: 1.4; }
.yt-time { display: inline-block; background: #0f3460; color: #4fc3f7; padding: 1px 6px; border-radius: 3px; font-family: monospace; font-size: 11px; margin-right: 6px; }
.yt-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.yt-tag { background: #0f3460; color: #81d4fa; padding: 3px 10px; border-radius: 12px; font-size: 11px; }
/* KnowledgeTree styles */
.yt-abstract { border-left: 3px solid #4fc3f7; padding-left: 12px; margin-bottom: 16px; font-style: italic; }
.yt-chapters { margin-bottom: 12px; }
.yt-chapter { margin-bottom: 8px; }
.yt-chapter-1 { border-left: 3px solid #4fc3f7; padding-left: 12px; margin-bottom: 16px; }
.yt-chapter-2 { border-left: 2px solid #2a5a8a; padding-left: 10px; margin-left: 4px; margin-bottom: 10px; }
.yt-chapter-3 { border-left: 1px solid #1a3a5a; padding-left: 8px; margin-left: 4px; margin-bottom: 6px; }
.yt-chapter h3 { color: #4fc3f7; margin: 0 0 4px 0; font-size: 15px; }
.yt-chapter h4 { color: #81d4fa; margin: 0 0 3px 0; font-size: 13px; }
.yt-chapter h5 { color: #90caf9; margin: 0 0 2px 0; font-size: 12px; }
.yt-chapter-summary { color: #999; font-size: 12px; margin: 0 0 4px 0; }
.yt-concept { margin-bottom: 8px; }
.yt-concept-term { color: #ffb74d; font-weight: bold; }
.yt-concept-def { color: #bbb; font-size: 12px; }
.yt-priority-high { color: #ef5350; }
.yt-priority-med { color: #ffb74d; }
.yt-priority-low { color: #81c784; }
.yt-collapsible .yt-collapse-content { display: none; }
.yt-collapsible.yt-expanded .yt-collapse-content { display: block; }
.yt-collapsible h4 { cursor: pointer; user-select: none; }
.yt-collapsible.yt-expanded h4 { color: #4fc3f7; }
.yt-multi-result { border: 1px solid #1a3a5a; border-radius: 8px; padding: 12px; margin-bottom: 12px; }
#ytUrls { width: 100%; background: #16213e; color: #e0e0e0; border: 1px solid #0f3460; border-radius: 6px; padding: 8px; font-size: 13px; resize: vertical; }
.yt-history-header {
	color: #888;
	font-size: 12px;
	margin: 16px 0 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.yt-history-item {
	display: flex;
	justify-content: space-between;
	padding: 8px 10px;
	background: #16213e;
	border-radius: 4px;
	margin-bottom: 4px;
	cursor: pointer;
	font-size: 13px;
	color: #ccc;
}
.yt-history-item:active { background: #1e2a45; }

/* Audio upload button */
.sb-audio-upload {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #1a3a2a;
	color: #4caf50;
	border: 1px solid #4caf50;
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 16px;
	cursor: pointer;
	flex-shrink: 0;
}
.sb-audio-upload:active {
	background: #4caf50;
	color: #1a1a2e;
}
#sbLLMInstructions {
	background: #0d1117;
	border: 1px solid #30363d;
	color: #ff7043;
	border-radius: 4px;
	padding: 8px;
	font-size: 12px;
	resize: none;
	font-family: inherit;
	width: 100%;
	box-sizing: border-box;
}
#sbLLMInstructions:focus {
	border-color: #ff7043;
	outline: none;
}
#sbTranscribeStatus, #sbReviewTranscribeStatus {
	padding: 8px;
	font-size: 12px;
	color: #4fc3f7;
	text-align: center;
}
#sbTranscribeStatus.hidden, #sbReviewTranscribeStatus.hidden { display: none; }

/* Destination buttons */
.sb-dest-btn {
	padding: 10px 12px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	font-weight: bold;
	flex: 1;
}
.sb-dest-haiku {
	background: #4fc3f7;
	color: #0d1117;
}
.sb-dest-haiku:active { background: #039be5; }
.sb-dest-sonnet {
	background: #7c4dff;
	color: #fff;
}
.sb-dest-sonnet:active { background: #6200ea; }
.sb-dest-opus {
	background: #ff7043;
	color: #fff;
}
.sb-dest-opus:active { background: #e64a19; }
.sb-dest-btn:disabled {
	background: #30363d !important;
	color: #555 !important;
	cursor: wait;
}

/* Opus response styling */
.sb-opus-status {
	padding: 16px;
	text-align: center;
	color: #4fc3f7;
	font-size: 14px;
}
.sb-opus-response {
	padding: 12px;
}
.sb-opus-label {
	font-weight: bold;
	color: #ff7043;
	margin-bottom: 8px;
	font-size: 13px;
}
.sb-opus-text {
	color: #e0e0e0;
	line-height: 1.5;
	font-size: 14px;
	margin-bottom: 12px;
}
.sb-opus-actions {
	margin-bottom: 12px;
}
.sb-opus-action {
	padding: 6px 10px;
	background: #1e2d3d;
	border-radius: 4px;
	margin-bottom: 4px;
	font-size: 13px;
	color: #c8e6c9;
}
.sb-opus-confirm {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

/* ===================== */
/* CHAT HEADER BUTTON    */
/* ===================== */
#chatHeaderBtn {
	position: fixed;
	top: .3em;
	left: 3em;
	z-index: 10010;
	cursor: pointer;
	background: #238636;
	color: white;
	font-size: 12px;
	font-weight: bold;
	padding: 6px 12px;
	border-radius: 12px;
	line-height: 1;
}
#chatHeaderBtn:active { background: #1a6b2b; }

/* ===================== */
/* YDRASIL CHAT WIDGET   */
/* ===================== */
#ycWidget {
	position: fixed;
	z-index: 10050;
	display: flex;
	flex-direction: column;
	background: #0d1117;
	border: 1px solid #30363d;
	border-radius: 10px;
	box-shadow: 0 4px 24px rgba(0,0,0,0.5);
	overflow: hidden;
	min-width: 200px;
	min-height: 150px;
}
#ycWidget.hidden { display: none; }

#ycBar {
	display: flex;
	align-items: center;
	padding: 6px 10px;
	background: #161b22;
	cursor: grab;
	touch-action: none;
	gap: 6px;
	border-bottom: 1px solid #30363d;
	user-select: none;
}
#ycBar:active { cursor: grabbing; }
#ycTitle {
	flex: 1;
	font-size: 13px;
	font-weight: bold;
	color: #4fc3f7;
}
#ycTools { display: flex; gap: 4px; }
.yc-tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: #21262d;
	color: #8b949e;
	font-size: 16px;
	cursor: pointer;
	border: 1px solid transparent;
}
.yc-tool:active, .yc-tool-active {
	background: #0f3460;
	color: #4fc3f7;
	border-color: #4fc3f7;
}
#ycMin {
	font-size: 18px;
	color: #8b949e;
	cursor: pointer;
	padding: 0 4px;
	line-height: 1;
}

#ycBody {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
#ycMessages {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 6px;
}

.yc-terminal {
	background: #000;
	color: #4fc3f7;
	font-family: monospace;
	font-size: 10px;
	padding: 6px;
	border-radius: 4px;
	white-space: pre-wrap;
	word-break: break-all;
	max-height: 120px;
	overflow-y: auto;
	margin-bottom: 4px;
}

.yc-msg {
	padding: 6px 10px;
	margin: 3px 0;
	border-radius: 6px;
	font-size: 15px;
	line-height: 1.4;
	word-break: break-word;
}
.yc-time { font-size: 10px; color: #555; }
.yc-user {
	background: #0f3460;
	margin-left: 16px;
	text-align: right;
	color: #e0e0e0;
}
.yc-system {
	background: #1e2d3d;
	font-size: 13px;
	color: #8b949e;
}
.yc-error {
	background: #3d1a1a;
	color: #f85149;
	font-size: 13px;
}

#ycInputArea {
	display: flex;
	padding: 6px;
	gap: 4px;
	border-top: 1px solid #30363d;
	background: #161b22;
}
#ycInput {
	flex: 1;
	padding: 8px 10px;
	background: #0d1117;
	color: #e0e0e0;
	border: 1px solid #30363d;
	border-radius: 6px;
	font-size: 15px;
	resize: none;
	font-family: inherit;
}
#ycInput:focus { border-color: #4fc3f7; outline: none; }
#ycSend {
	padding: 6px 12px;
	background: #238636;
	color: white;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
}
#ycSend:active { background: #1a6b2b; }

/* Resize handles — all 4 corners */
.ycResizeHandle {
	position: absolute;
	width: 20px;
	height: 20px;
	touch-action: none;
	z-index: 10;
}
.ycResize-br { bottom: 0; right: 0; cursor: nwse-resize; }
.ycResize-bl { bottom: 0; left: 0; cursor: nesw-resize; }
.ycResize-tr { top: 0; right: 0; cursor: nesw-resize; }
.ycResize-tl { top: 0; left: 0; cursor: nwse-resize; }
.ycResize-br::after, .ycResize-tl::after,
.ycResize-bl::after, .ycResize-tr::after {
	content: '';
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: #30363d;
}
.ycResize-br::after { bottom: 3px; right: 3px; }
.ycResize-bl::after { bottom: 3px; left: 3px; }
.ycResize-tr::after { top: 3px; right: 3px; }
.ycResize-tl::after { top: 3px; left: 3px; }

/* Picker overlay */
#ycPickerOverlay {
	position: fixed;
	inset: 0;
	z-index: 10060;
	cursor: crosshair;
	touch-action: none;
}
#ycPickerOverlay.hidden { display: none; }

/* Area overlay + rect */
#ycAreaOverlay {
	position: fixed;
	inset: 0;
	z-index: 10060;
	cursor: crosshair;
	touch-action: none;
}
#ycAreaOverlay.hidden { display: none; }
#ycAreaRect {
	position: fixed;
	z-index: 10061;
	border: 2px dashed #4fc3f7;
	background: rgba(79, 195, 247, 0.1);
	pointer-events: none;
}
#ycAreaRect.hidden { display: none; }