/* Theme, global element rules, and app UI */

:root {
	/* Colors - Warm archival palette */
	--color-bg: #1a1815;
	--color-bg-elevated: #242220;
	--color-bg-elevated-hover:#585048;
	--color-bg-hover: rgba(128,96,80,0.15);
	--color-bg-selected: rgba(128,96,80,0.4);
	--color-border: #3d3935;
	--color-border-subtle: #2d2a27;
	
	--color-text: #f5f0e8;
	--color-text-muted: #a09890;
	--color-text-subtle: #706860;
	
	--color-accent: #c9a66b;
	--color-accent-hover: #d4b47a;
	--color-accent-subtle: rgba(201, 166, 107, 0.15);
	
	--color-success: #7eb87e;
	--color-warning: #d4a656;
	--color-error: #c75d5d;


	/** for colots we need to be able to do as follows
	1) general background
	2) 2 level of text color
	3) selection hint coloring
	4) hover tint
	5) active tint
	
	/* Typography
	  really we have button-menu
	  Headings -- legible but tight. 
	  descriptive copy -- readable body copy
	  metadata & general ui -- smaller, tighter
	  ideally all fonts are embedded in css and not dependent on google

	*/
	--font-heading: 'Titillium', system-ui, sans-serif;
	--font-sans: 'Titillium', system-ui, sans-serif;
	--font-serif: Merriweather, Georgia, serif;
	
	/* Spacing */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-8: 3rem;
	
	/* Radius */
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 8px;
	
	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

	font-size: 13px;
	letter-spacing:0.02rem;
	line-height: 20px; /* keep to 1.25*/
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body {
	height: 100%;
}

body {
	font-family: var(--font-sans);
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}
section
{
	max-width: 1200px;
	padding: 2rem;
	margin: 1px auto;
	overflow-x:clip;
}

section > *
{
	/*padding-left:1rem;*/
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	font-weight: 400;
	letter-spacing: -0.05rem;
	line-height: 1.3;
	top:0;
	z-index:10;
	padding: 1rem 0 1rem 1rem;
	margin-top:0;
	
}
code
{ 	background: rgba(0,0,0,0.3);
	padding: 0 0.5rem;
	font-size:0.8rem;
	display:inline-block;

color: var(--color-text-muted)}
p {
	color: var(--color-text-muted);
	font-size: 1.25rem;
	line-height:2rem;
	font-family:var(--font-serif);
	margin-bottom:2rem;
	padding:1rem 1rem; /* this makes p indent same as table cells to keep a good line.*/
}

ol
{
	margin: 1rem 0;
}

h1 { font-size: 2.5rem; font-weight:300;}
h2 { font-size: 1.25rem;font-weight:700;position:sticky;
	border-top: 0.1rem solid var(--color-text);
	margin-bottom:0.5rem;
	background-color:var(--color-bg);}
h3 { font-size: 1.25rem; font-weight:700;color: var(--color-text-muted)}

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

a:hover {
	color: var(--color-accent-hover);
}

button {
	font-family: var(--font-sans);
	font-size: 1rem;
	cursor: pointer;
	display:inline-flex;
	
	justify-content: center;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.1);
	padding: 0.2rem 1rem;
	border-radius: var(--radius-md);
	margin:0;	
	margin-left:var(--space-4);
	margin-bottom:0.3rem;
	align-items: center;
	color: var(--color-text);
	font-weight:500;
	min-width:5rem;
	position:relative;
	top:0.3rem;
}

button[type="submit"] {
	background: var(--color-accent);
	color: var(--color-bg);
}


button[type="submit"]:hover {
	background: var(--color-accent-hover);
}



button:hover {
	background: var(--color-bg-hover);
	border-color: var(--color-border);
}


/** Form styles -- to standardize these and markup 
<form> - outer container
	<div class="form-group"> - to combine a field and label together
		<label> foo </label>
		<input> bar </input>
	</div?
</form>	


**/




.compound-input
	{
		
		display: grid;
		grid-template-columns: 10rem 1fr  1fr 2.5rem 2.5rem;
		gap: 0;
		grid-template-rows: 2rem 2rem 1fr;
		align-content: top;
		margin:0;
		margin-bottom:1.5rem;
		align-items: top;
		padding-right:1.5rem;
	}

	.compound-input label
	{
		grid-column: 1/3;
		grid-row: 1/2;
		
		
	}
	.compound-input div,
	.compound-input input
	{
		border-top-right-radius:0;
		border-bottom-right-radius: 0;
		margin:0;
		word-wrap: break-word;
		grid-row: 2/3;
		grid-column: 1/4;
	}

	.compound-input textarea,
	.compound-input tag-picker
	{
		grid-row: 2/4;
		grid-column: 1/4;
	}


	.compound-input button
	{
		margin:0;
		border-radius:0px;
		border-left:0;
		grid-row: 2/3;
		min-width:unset;
		width:2.5rem;
		top:0;
		bottom:0;
	}
	.compound-input button:last-of-type
	{
		border-radius:var(--radius-sm);
		margin-left:0;
	}

	

	.compound-input .status-update {
		grid-row: 1/2;
		grid-column: 2/4;
		text-align:right;
		color: var(--color-accent);
		line-height:2rem;
	}
	.compact .compound-input
	{
		grid-template-rows: 2rem 1fr;
		margin:0rem;
	}
	.compact .compound-input label
	{
		grid-column: 1/2;
		grid-row: 1/2;
	}

	.compact .compound-input div,
	.compact .compound-input input,
	.compact .compound-input textarea,
	.compact .compound-input tag-picker
	{
		grid-column: 2/4;
		grid-row: 1/2;
		
	}
	.compact .compound-input textarea,
	.compact .compound-input tag-picker
	{
		grid-row: 1/3;
		min-height:4rem;
	}
	.compact .compound-input button
	{
		grid-row: 1/2;
	}


input, textarea, select {
	font-family: inherit;
	font-size: inherit;
	line-height:2rem;
	transition: all 0.15s ease;
	width: 100%;
	padding: 0.1rem 1rem;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text);
}


input:hover, textarea:hover, select:hover {
	border-color: rgba(212, 180, 122, 0.5);
	 background-color:	rgba(0,0,0,0.2);
  }


  input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--color-accent);
	background:black;
}


input::placeholder {
	color: var(--color-text-subtle);
}
label
{ 
	padding: 0.5rem 1rem;
	display: inline-block;
	color:var(--color-text-muted)
}






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

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

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

::-webkit-scrollbar-thumb:hover {
	background: var(--color-text-subtle);
}

/* card layouts - collections, works*/
figure.card {
	position: relative;
	display: flex;
	overflow: hidden;
	flex-direction: column;
	padding:0rem;
	padding-bottom:0.5rem;
	background-color: var(--color-bg-elevated);
	border:1px solid var(--color-border-subtle);
	min-height: 8rem;
}
figure.card:hover {
		

	border:1px solid var(--color-bg-selected);
}
figure.card span
{
	padding: 0 1rem;
	color: var(--color-text-subtle)
}

figure.card .placeholder
{
	height:15rem;
	display:block;
	border:1px solid rgba( 255, 255, 255, 0.1);
	align-content:space-around;
	text-align: center;
	background-color:rgba(0, 0, 0, 0.4);
}

figure.card img {
	aspect-ratio: 1;		
	object-fit: contain;
	height:15rem;
	
	
}

/** for selection containers in tables and grids */
section > selection-container
{ padding:0;
border:none; } 

selection-container 
{
	padding:1rem;
	border:1px solid var(--color-bg);
}


selection-container .selectable-row,
selection-container .card
{
	cursor:pointer;
	
}

selection-container .selectable-row:hover
{
	background:var(--color-bg-hover);
}

selection-container .selectable-row:hover td
{
	color:rgba(255,255,255,1)
}

selection-container .selectable-row.selected
{
	 background:rgba(255,255,255,0.3)
}

selection-container tr td:first-child
{
	font-weight: 700 !important;
}

selection-container .card.selected
{
	border:1px solid var(--color-bg-elevated-hover);
	background-color: var(--color-bg-selected);

}

/* Processing overlay — shown during merge/unmerge mutations */
figure.card.processing {
	position: relative;
	pointer-events: none;
}
figure.card.processing::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 2;
}
figure.card.processing::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
	border: 3px solid rgba(255, 255, 255, 0.25);
	border-top-color: #fff;
	border-radius: 50%;
	z-index: 3;
	animation: card-spin 0.7s linear infinite;
}
@keyframes card-spin {
	to { transform: rotate(360deg); }
}

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: var(--space-2);
}

.search-hidden {
	display: none !important;
}

.all-hidden {
	display: none !important;
}

/* Skeleton placeholder cards */
figure.card.placeholder-card {
	pointer-events: none;
}

.placeholder-card .placeholder-img {
	height: 15rem;
	border-radius: 0;
}

.placeholder-card .placeholder-text {
	height: 0.85rem;
	margin: 0.6rem 1rem 0;
	border-radius: 4px;
	width: 75%;
}

.placeholder-card .placeholder-text.short {
	width: 40%;
	height: 0.7rem;
	margin-top: 0.4rem;
}

.shimmer {
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.03) 25%,
		rgba(255, 255, 255, 0.08) 50%,
		rgba(255, 255, 255, 0.03) 75%
	);
	background-size: 200% 100%;
	animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Pending upload cards — shown while images are uploading/processing */
figure.card.pending-card {
	position: relative;
}

figure.card.pending-card img {
	opacity: 0.5;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.pending-status {
	display: block;
	padding: 0.35rem 1rem 0.6rem;
	font-size: 0.8rem;
	color: var(--text-muted, #999);
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.03) 25%,
		rgba(255, 255, 255, 0.08) 50%,
		rgba(255, 255, 255, 0.03) 75%
	);
	background-size: 200% 100%;
	animation: shimmer 1.5s ease-in-out infinite;
}


/** 
Tables and tabling. defined styles for tabular display across the board 
tables are to be used for all data that displays in grids, save for special cases.
*/
table
{
	table-layout: fixed;
	margin-top:1rem;
}
tr {
	
}
th, td 
{
	padding: 0.7rem 1rem;
	text-align: left;
	border-bottom: 1px dotted #706860;
	vertical-align: text-top;
}

th, h4 {
	color: var(--color-text-muted);
	font-weight: 300;
	letter-spacing: inherit;
}

/*** table styles for settings and other places **/
.vertical
	{
		transform: rotate(-90deg);
		transform-origin: 0.5rem ;
	}	
th {

	vertical-align: bottom;
	padding: 0.5rem;
	text-align:left
}

/* Column widths */
.col-select { width: 2.5rem; text-align: center;position:relative;vertical-align: baseline; line-height:2rem; }
.col-primary { width: 12rem; }
.col-date  { width: 10rem; }
.col-status { width: 6rem; }
.col-link { width: 18rem;padding-left:1rem; text-overflow:ellipsis}
.col-folder { width:20rem; }

td.col-folder {
	padding: 0.1rem;position:relative;
}
.col-sep-left, .col-sep-right {width:8px;padding:0; }
.col-pstat { 
	width: 2rem; 
	text-align: right;
	padding: 0.2rem;
	position:relative;}

/* Separator border */
.col-sep-left
{
	border-right: 1px solid var(--color-border);
}
/* slightly paler font opacity*/

td.col-status, 
td.col-date,
td.col-link, 
td.col-folder
{ color:rgba(255,255,255,0.8)}

.col-primary
{
	padding-left:2.5rem;
	font-weight:600;
}

.col-primary > div 
{
	display:block;
	position:relative;
}
.col-primary > div > span 
{
	display:block;
	position:absolute;
	left: -2.2rem;
	line-height:1.6rem;
	font-size: 1.8rem;
}

/* Selection checkbox cell */
.col-select span
{
	position:absolute;
	left:0;right:0;bottom:0;height:2.3rem;
}

td.col-select span
{
	position:absolute;
	left:0;right:0;top:0.7rem;bottom: unset;height:2.3rem;
}
.select-all-check {
	cursor: pointer;
	color:white;
	vertical-align: bottom;
	padding:0.2rem 1rem;

}

td a .material-symbols-outlined {
	position:relative;
	top:0.4rem;
}


	/* Process stat cells */
	th.col-pstat
	{
		position:relative;
		text-align: left;
		height: 8rem;
	}
	th.col-pstat > span
	{
		display:block;
		position:absolute;
		transform: rotate(-90deg);
		text-align:left;
		box-model:border-box;
		left:-3.5rem;
		margin:0;
		top:1rem;
		height:2rem;
		width:10rem;
		bottom:0;
		padding-left: 0rem;

	}
	.col-pstat.zero {
		opacity: 0.5;
	}

	/* Error cell: bold white on deep red when > 0 */
	.cell-pstat.error-cell {
		background: #7f1d1d;
		color: #fff;
		font-weight: 700;
	}



/* moved menu styling to main stylesheet - this is effectively a global 
'design system' thing and should be kept in one place - if I figure out 
components or web-components in svelte, I'll include them there
*/
menu {
	cursor:pointer;
	margin:0;
	padding: var(--space-1) var(--space-3);
	list-style:none;
	position:relative;
	display:inline-block;
	box-shadow: var(--shadow-md);
}

menu:hover {
	background: var(--color-bg-hover);

}

menu > div > a {
	display:block;
	white-space: nowrap;
	color: var(--color-text-muted);
	font-weight: 500;
	border-radius: var(--radius-sm);
	padding: var(--space-2) var(--space-3);
	transition: all 0.15s ease;
	text-decoration: none;
}
menu > div > a:hover {
	color: var(--color-text);
	background: var(--color-bg-hover);
}

menu > div > a:active {
	color: var(--color-accent);
	background: var(--color-accent-subtle);
}

menu > div {
	display:none;
	padding:var(--space-1);
	min-width:10rem;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
menu:hover > div {
	display:block;
	position:absolute;
	top:100%;
	left:0;
	background-color: white
}

main > div {
		/*max-width: 1200px;
		margin: 0 auto;
		/*border:1px solid red;*/
}

/* New Watcher Dialog (non-modal) JE adjusted to genericize for all dialogs*/
dialog  {
	
	background: var(--color-bg-elevated);
	border: 3px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 1rem 1rem ;
	max-width: 400px;
	max-height: 80vh;
	z-index: 1002;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 1);
	overflow: hidden;
	flex-direction: column;
	color: var(--color-text);
	margin: auto;
	position:fixed;
	height:intrinsic;
}


dialog::backdrop {
	background: rgba(0,0,0,0.4);
}

dialog header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom:0.5rem ;
	border-bottom: 1px solid rgba(255,255,255,0.3);
}
/** middle section */
dialog >form  {
	padding-top: 1rem;
	position:relative;
	display:block;
	height:100%;
}



dialog form footer
{
	padding-top:0.5rem;
	display:flex;
	flex-direction: row-reverse;
	gap:0.5rem;
	flex: 0 0 2rem;
	border-top:1px solid var(--color-border);
	

}
dialog form .form-group 
{
	overflow-y:auto;
	display:block;
}



dialog h1
{
	font-size: 	1.5rem;
	margin:		0px;
	line-height:2rem;
	padding:	0px;
	padding-left:1rem;
}


dialog header button.dialog-close {
	background: transparent;
	font-family: 'Material Symbols Outlined', sans-serif;
	font-weight: 300;
	font-size: 1.5rem;
	line-height: 1;
	width: 2rem;
	height: 2rem;
	display: flex;
	border: 1px solid transparent;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--color-text-muted);
	transition: background-color 0.15s ease, color 0.15s ease;
	min-width: unset;
	margin: 0;
	padding:0.2rem;
}

dialog header button.dialog-close:hover {
	background:  rgba(0,0,0, .2);
	color: rgba(255,255,255,0.9);
	border-color: rgba(255,255,255,0.3);
}

/* New watcher dialog needs to be wider for two-column install tabs */
dialog.new-watcher-dialog {
	max-width: 700px;
}


.logo
	{
		color:rgba(255,255,255,0.9);
		display:block;position:relative;
		
		font-family:'Archivist';
		font-weight:400;
		height:1.2rem;
		width:2rem;
		padding:0;
		margin:0 1rem 0 0.5rem;
		line-height:2rem;
		font-size: 2.5rem;
	}
	.logo::after
	{
		content: "󰀊";
		display:block;
		position: absolute;
		z-index:5;
		color: rgba(34, 44, 173, 0.803);
		font-family:Archivist;
		top:0; left:0; bottom:0; right:0;
		
		
	}
	.logo::before
	{
		content: "󰀉";
		display:block;
		position: absolute;
		z-index:-4;
		color:rgba(64, 50, 42, 0.9);
		font-family:'Archivist';
		top:0; left:0; bottom:0; right:0;
	
		
	}

/* Drop target highlight for drag-and-drop uploads */
.drop-target {
	outline: 2px solid var(--color-accent);
	outline-offset: -2px;
	background-color: var(--color-accent-subtle) !important;
}

/* Upload progress toast (non-modal dialog, bottom-right) */
dialog.upload-progress {
	position: fixed;
	bottom: 0.5rem;
	right: 0.5rem;
	margin: 0;
	padding: var(--space-3);
	max-width: 22rem;
}

dialog.upload-progress.ghost-notice
{
	bottom: unset;
	left: 50%;
	margin-left: -11rem;
	top: -1.5rem;
	bottom:5rem;
	
}

dialog.upload-progress .progress-section {
	padding: var(--space-2) 0;
}

dialog.upload-progress .progress-section + .progress-section {
	border-top: 1px solid var(--color-border-subtle);
}

dialog.upload-progress .progress-section span {
	color: var(--color-text-muted);
}

dialog.upload-progress .progressbar {
	height: 4px;
	background: var(--color-border);
	border-radius: 2px;
	overflow: hidden;
	margin-top: var(--space-1);
}

dialog.upload-progress .progressbar > div {
	height: 100%;
	background: var(--color-accent);
	transition: width 0.3s ease;
}

dialog.upload-progress .progress-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
}

dialog.upload-progress .reset-btn {
	background: none;
	border: none;
	padding: 2px;
	cursor: pointer;
	color: var(--color-text-muted);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

dialog.upload-progress .reset-btn:hover {
	color: var(--color-text);
	background: var(--color-border-subtle);
}

dialog.upload-progress .upload-error {
	color: var(--color-danger, #e53e3e);
}

dialog.upload-progress .progressbar.restoration > div {
	background: var(--color-success, #38a169);
}