/* ===================================================================
 *  File : assets/css/agimg-modern.css
 *  Used by: [agimg_modern]  +  [agimg_resize]
 *  Layout stays as before – colours / borders / responsiveness tuned.
 * =================================================================== */

/* -------------------------------------------------
 * 0.  Colour tokens (easy to tweak later)
 * ------------------------------------------------- */
:root{
	--agimg-primary        : #008186;   /* teal–blue */
	--agimg-primary-dark   : #006b70;
	--agimg-primary-light  : #e0f7f8;

	--agimg-border         : #94a3b8;   /* slate-400 */
	--agimg-bg-light       : #ffffff;
	--agimg-split          : #e5e7eb;

	--agimg-success        : #059669;   /* emerald-600 */
	--agimg-success-dark   : #047857;

	--agimg-ring-track     : #eceff1;
	--agimg-ring-fore      : var(--agimg-primary);
}

/* -------------------------------------------------
 * 1.  Upload / Drag-Drop Zone
 * ------------------------------------------------- */
#agimg-resize-upload{
	background     : var(--agimg-bg-light);
	border         : 3px dashed var(--agimg-primary);
	border-radius  : .625rem;
	min-height     : 340px;
	display        : flex;
	flex-direction : column;
	align-items    : center;
	justify-content: center;
	transition     : background .2s;
}
#agimg-resize-upload:hover{
	background:var(--agimg-primary-light);
}

/* “Upload” button inside the drop-zone */
#agimg-resize-browse{
	display:inline-block;
	background:var(--agimg-primary);
	color:#fff;
	padding:.55rem 1.4rem;
	border-radius:.5rem;
	font-weight:600;
	transition:background .2s;
	text-decoration:none;
}
#agimg-resize-browse:hover{background:var(--agimg-primary-dark);}

/* -------------------------------------------------
 * 2.  Thumbnails – max 10, row-wrap
 * ------------------------------------------------- */
#agimg-thumb-grid{
	margin-top:1rem;
	display:flex;          /* row layout      */
	flex-wrap:wrap;        /* wrap to new row */
	gap:.75rem;
}
#agimg-thumb-grid>div{
	flex:0 1 110px;        /* fixed-ish width */
	border:1px solid var(--agimg-border);
	border-radius:.5rem;
	box-shadow:0 1px 3px rgba(0,0,0,.06);
	background:#fff;
}

/* -------------------------------------------------
 * 3.  Right-hand tools panel
 * ------------------------------------------------- */
#agimg-resize-tools{
	background:#fff;
	padding:1.5rem;
	border-radius:.625rem;
	box-shadow:0 0 6px rgba(0,0,0,.05);
	position:relative;
}

/* Split line only on ≥ lg (≥1024 px) */
@media (min-width:1024px){
	#agimg-resize-wrapper{display:flex;gap:2rem;}
	#agimg-resize-tools::before{
		content:'';
		position:absolute;left:-1rem;top:0;bottom:0;
		width:2px;background:var(--agimg-split);
		box-shadow:0 0 4px rgba(0,0,0,.04);
	}
}

/* Inputs & selects */
#agimg-resize-tools label{
	display:block;font-weight:600;margin-bottom:.5rem;color:#334155;
}
#agimg-resize-tools input,
#agimg-resize-tools select{
	width:100%;padding:.5rem .75rem;font-size:.875rem;
	border:1px solid var(--agimg-border);border-radius:.375rem;outline:none;
}
#agimg-resize-tools input:focus,
#agimg-resize-tools select:focus{
	border-color:var(--agimg-primary);
	box-shadow:0 0 0 1px var(--agimg-primary);
}

/* -------------------------------------------------
 * 4.  jQuery-UI slider (pixels slider removed)
 * ------------------------------------------------- */
.ui-slider{
	height:.5rem;
	background:var(--agimg-border);
	border-radius:9999px;
	margin:.25rem 0 .75rem;
}
.ui-slider-range{
	background:var(--agimg-primary);
	border-radius:9999px;
}
.ui-slider .ui-slider-handle{
	width:1rem;height:1rem;top:-.4rem;border:none;
	border-radius:50%;background:var(--agimg-primary);
	cursor:grab;
}
.ui-slider .ui-slider-handle:active{cursor:grabbing;}

/* -------------------------------------------------
 * 5.  Primary & Download buttons
 * ------------------------------------------------- */
#agimg-resize-btn,
#rs-download{
	width:100%;display:block;text-align:center;
	padding:.9rem 1rem;font-size:1rem;font-weight:700;
	border-radius:.5rem;transition:background .2s,opacity .2s;
}
#agimg-resize-btn{background:var(--agimg-primary);color:#fff;}
#agimg-resize-btn:hover{background:var(--agimg-primary-dark);}
#rs-download{background:var(--agimg-success);color:#fff;margin-top:1.25rem;}
#rs-download:hover{background:var(--agimg-success-dark);}

/* Hidden utility – JS toggles */
.hidden{display:none!important;}

/* -------------------------------------------------
 * 6.  Progress ring + success message
 * ------------------------------------------------- */
#agimg-progress{
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	margin-top:1.5rem;
}
#agimg-ring{width:112px;height:112px;}
#agimg-ring circle:first-child{stroke:var(--agimg-ring-track);}
#agimg-ring-fore{
	stroke:var(--agimg-ring-fore);
	transition:stroke-dashoffset .18s linear;
}
#agimg-ring-txt{
	position:absolute;font-weight:700;color:#334155;
}

/* green “successful resize” text (JS toggles .hidden) */
#agimg-success{color:var(--agimg-success);font-weight:700;text-align:center;margin-top:.75rem;}

/* -------------------------------------------------
 * 7.  Mobile tweaks  (≤639 px)
 * ------------------------------------------------- */
@media (max-width:639px){
	#agimg-resize-upload{min-height:280px;padding:1.25rem;}
	#agimg-resize-browse{width:100%;text-align:center;margin-top:.75rem;}
}

/* -------------------------------------------------
 * 8.  Base body reset
 * ------------------------------------------------- */
body{
	background:#f8fafc;
	font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* === Progress ring cap & clipping =================================== */
#agimg-ring            { overflow: hidden; }   /* clip anything that spills */
#agimg-ring-fore       { stroke-linecap: butt; }  /* flat ends – stays inside */

/* -------------------------------------------------
 *  ▼ NEW – inline-fix for the two checkbox rows
 * ------------------------------------------------- */
#agimg-resize-tools .flex label{
	/* override earlier “display:block” */
	display:inline-block !important;
	margin-bottom:0;            /* keep line tight */
}

#agimg-resize-tools input[type="checkbox"]{
	width:auto;          /* stop the 100 % stretch   */
	height:auto;         /* browser default height   */
	padding:0;           /* no inner padding         */
	border:none;         /* no text-field border     */
	box-shadow:none;     /* no focus-outline hack    */
	margin-right:.5rem;  /* breathing space to label */
	cursor:pointer;
/* ✱ make the box ~30 % larger */
	transform: scale(1.3);          /* 1 = normal size */
}

/* === Stylish thumbnail cards ===================================== */
.agimg-card          { background:#f9fafb; }
.agimg-card img      { height:140px; width:100%; object-fit:cover; }
.agimg-meta          { background:#eef2f7; text-align:center; }
.agimg-meta.filename { background:#dbeafe; font-weight:600; }
.agimg-meta.dims     { background:#e0f2fe; }
.agimg-meta.weight   { background:#fef9c3; }
.agimg-remove        { line-height:1; }