@charset "UTF-8";
/* Theme: Glass
   Dark blue background, silver buttons, white text
*/

:root {
	/* ============================================================
	   BODY
	   Page background
	   ============================================================ */
	--body-bg: linear-gradient(135deg, #242e4a 0%, #343e5a 50%, #141e3a 100%);

	/* ============================================================
	   BORDERS
	   Generic border colors
	   ============================================================ */
	--border-default: rgba(255, 255, 255, 0.5);
	--border-muted: rgba(255, 255, 255, 0.5);
	--border-nav: #ccc;
	--border-white: #ffffff;

	/* ============================================================
	   BRAND
	   Primary brand identity color
	   ============================================================ */
	--brand-blue: #063b88;

	/* ============================================================
	   BUTTONS - Action
	   Main action buttons (.btn)
	   ============================================================ */
	--btn-action-bg: linear-gradient(180deg, #e8e8e8 0%, #d8d8d8 50%, #c8c8c8 100%);
	--btn-action-bg-hover: linear-gradient(180deg, #2a3a5a 0%, #1e2e4a 50%, #141e3a 100%);
	--btn-action-border: none;
	--btn-action-radius: 6px;
	--btn-action-shadow: none;
	--btn-action-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.3);
	--btn-action-text: #141e3a;
	--btn-action-text-hover: white;

	/* ============================================================
	   BUTTONS - Close
	   Modal close X buttons (.btn-close)
	   ============================================================ */
	--btn-close-bg: linear-gradient(180deg, #e8e8e8 0%, #d8d8d8 50%, #c8c8c8 100%);
	--btn-close-bg-hover: linear-gradient(180deg, #2a3a5a 0%, #1e2e4a 50%, #141e3a 100%);
	--btn-close-border: #888;
	--btn-close-radius: 6px;
	--btn-close-icon: #141e3a;
	--btn-close-icon-hover: white;
	--btn-close-shadow: none;

	/* ============================================================
	   BUTTONS - Panel
	   Control panel buttons (plate controls, DH controls, grid selectors)
	   ============================================================ */
	--btn-panel-bg: linear-gradient(180deg, #e8e8e8 0%, #d8d8d8 50%, #c8c8c8 100%);
	--btn-panel-bg-hover: linear-gradient(180deg, #2a3a5a 0%, #1e2e4a 50%, #141e3a 100%);
	--btn-panel-border: #888;
	--btn-panel-radius: 6px;
	--btn-panel-shadow: none;
	--btn-panel-text: #141e3a;
	--btn-panel-text-hover: white;

	/* ============================================================
	   BUTTONS - IO
	   Nav I/O connection button (.io-button)
	   ============================================================ */
	--btn-io-bg: linear-gradient(180deg, #e8e8e8 0%, #d8d8d8 50%, #c8c8c8 100%);
	--btn-io-bg-hover: linear-gradient(180deg, #2a3a5a 0%, #1e2e4a 50%, #141e3a 100%);
	--btn-io-bg-disconnected: white;
	--btn-io-bg-disconnected-hover: linear-gradient(180deg, #ffffff 0%, #f6f8ff 50%, #c8d7ec 100%);
	--btn-io-border: #888;
	--btn-io-radius: 6px;
	--btn-io-icon: #141e3a;
	--btn-io-icon-hover: white;
	--btn-io-icon-disconnected: #333;
	--btn-io-shadow: none;
	--btn-io-shadow-disconnected: none;
	--btn-io-shadow-disconnected-hover: rgba(0, 0, 0, 0.50) 0px 12px 12px -5px;

	/* ============================================================
	   BUTTONS - Log
	   Floating log panel buttons
	   ============================================================ */
	--btn-log-bg: white;
	--btn-log-bg-hover: linear-gradient(180deg, #ffffff 0%, #f6f8ff 50%, #c8d7ec 100%);
	--btn-log-border: #888;
	--btn-log-radius: 6px;
	--btn-log-icon: #333;
	--btn-log-shadow: none;
	--btn-log-shadow-hover: rgba(0, 0, 0, 0.50) 0px 12px 12px -5px;

	/* ============================================================
	   BUTTONS - Media
	   Play/pause media control buttons
	   ============================================================ */
	--btn-media-bg: linear-gradient(180deg, #e8e8e8 0%, #d8d8d8 50%, #c8c8c8 100%);
	--btn-media-bg-hover: linear-gradient(180deg, #2a3a5a 0%, #1e2e4a 50%, #141e3a 100%);
	--btn-media-border: #888;
	--btn-media-radius: 6px;
	--btn-media-icon: #141e3a;
	--btn-media-icon-hover: white;
	--btn-media-shadow: none;


	/* ============================================================
	   BUTTONS - Stop
	   Emergency/stop action buttons (.btn-stop)
	   ============================================================ */
	--btn-stop-bg: linear-gradient(180deg, #e74c3c 0%, #c0392b 50%, #a33025 100%);
	--btn-stop-bg-hover: linear-gradient(180deg, #c0392b 0%, #a33025 50%, #8b2a1f 100%);
	--btn-stop-border: #8b2a1f;
	--btn-stop-radius: 6px;
	--btn-stop-shadow: none;
	--btn-stop-text: white;
	--btn-stop-text-hover: white;

	/* ============================================================
	   BUTTONS - Toggle
	   Toggle/tab switch buttons (.btn-toggle, .icon-btn)
	   ============================================================ */
	--btn-toggle-bg: linear-gradient(180deg, #e8e8e8 0%, #d8d8d8 50%, #c8c8c8 100%);
	--btn-toggle-bg-active: linear-gradient(180deg, #2a3a5a 0%, #1e2e4a 50%, #141e3a 100%);
	--btn-toggle-bg-hover: linear-gradient(180deg, #2a3a5a 0%, #1e2e4a 50%, #141e3a 100%);
	--btn-toggle-border: none;
	--btn-toggle-radius: 6px;
	--btn-toggle-icon: #141e3a;
	--btn-toggle-icon-active: white;
	--btn-toggle-icon-hover: white;
	--btn-toggle-shadow-active: rgba(0, 0, 0, 0.15) 0px 1px 3px;
	--btn-toggle-text: #141e3a;
	--btn-toggle-text-active: white;
	--btn-toggle-text-hover: white;

	/* ============================================================
	   BUTTONS - Topbar
	   Protocol topbar buttons
	   ============================================================ */
	--btn-topbar-bg: none;
	--btn-tobpar-bg-hover: none;
	--btn-topbar-border: rgba( 255, 255, 255, 0.8);
	--btn-topbar-radius: 6px;
	--btn-topbar-icon: #141e3a;
	--btn-topbar-icon-hover: white;
	--btn-topbar-shadow: none;

	/* ============================================================
	   CARDS
	   Content cards and containers
	   ============================================================ */
	--card-bg: white;
	--card-border: none;
	--card-radius: 6px;
	--card-scrollbar: rgba(110, 114, 118, 0.6);
	--card-scrollbar-hover: rgba(110, 114, 118, 0.8);
	--card-scrollbar-radius: 4px;
	--card-scrollbar-track: transparent;
	--card-shadow: rgba(0, 0, 0, 0.25) 0px 10px 20px -10px;
	--card-text: #333;

	/* ============================================================
	   CHARTS
	   Chart/graph color palette (ColorBrewer Paired)
	   ============================================================ */
	--chart-color-0: #a6cee3;
	--chart-color-1: #1f78b4;
	--chart-color-2: #b2df8a;
	--chart-color-3: #33a02c;
	--chart-color-4: #ff7f00;
	--chart-color-5: #e31a1c;
	--chart-color-6: #cab2d6;
	--chart-color-7: #6a3d9a;

	/* ============================================================
	   CONTROLS - DH (Dispense Head)
	   Controls panel for dispense head/tip selection
	   ============================================================ */
	--dh-controls-bg: rgba(255, 255, 255, 0.25);
	--dh-controls-border: 1px solid rgba(204, 204, 204, 0.6);
	--dh-controls-shadow: rgba(50, 50, 50, 0.15) 0px 30px 30px -20px;

	/* ============================================================
	   INPUTS
	   Form input styling
	   ============================================================ */
	--input-arrow: #fff;
    --input-bg: #4b5671;
	--input-border: rgba( 255, 255, 255, 0.5);
	--input-border-focus: rgba( 255, 255, 255, 0.8);
	--input-radius: 4px;
	--input-scrollbar: rgba(255, 255, 255, 0.3);
	--input-scrollbar-hover: rgba(255, 255, 255, 0.5);
	--input-scrollbar-radius: 4px;
	--input-scrollbar-track: transparent;
	--input-text: #3fff;


	/* ============================================================
	   LOG
	   Floating communication log panel
	   ============================================================ */
	--log-bg: rgba(38, 46, 68, 0.95);
	--log-border: #fff;
	--log-error: #ff6b6b;
	--log-inbound: white;
	--log-outbound: #66d9ef;
	--log-radius: 6px;
	--log-scrollbar: rgba(200, 212, 224, 0.3);
	--log-scrollbar-hover: rgba(200, 212, 224, 0.5);
	--log-scrollbar-radius: 6px;
	--log-scrollbar-track: transparent;
	--log-state-transition: #ffb347;
	--log-success: #66bb6a;
	--log-text: white;
	--log-text-muted: #c8d4e0;
	--log-titlebar-bg: rgba(26, 32, 48, 0.9);

	/* ============================================================
	   MODALS
	   Modal dialog styling
	   ============================================================ */
	--modal-bg: linear-gradient(135deg, rgba(36, 46, 74, 0.9) 0%, rgba(52, 62, 90, 0.85) 50%, rgba(20, 30, 58, 0.9) 100%);
	--modal-border: 1px solid rgba(255, 255, 255, 0.3);
	--modal-card-bg: linear-gradient(135deg, rgba(200,220,255,0.15) 0%, rgba(220,235,255,0.20) 50%, rgba(200,220,255,0.10) 100%);
	--modal-card-text: #fff;
	--modal-radius: 8px;
	--modal-scrollbar: rgba(0, 0, 0, 0.25);
	--modal-scrollbar-hover: rgba(0, 0, 0, 0.4);
	--modal-scrollbar-radius: 4px;
	--modal-scrollbar-track: transparent;
	--modal-shadow: rgba(0, 0, 0, 0.15) 0px 30px 30px -20px;
	--modal-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.2);
	--modal-text: white;

	/* ============================================================
	   PANELS
	   Layout panel styling
	   ============================================================ */
	--panel-bg: linear-gradient(135deg, rgba(200,220,255,0.15) 0%, rgba(220,235,255,0.20) 50%, rgba(200,220,255,0.10) 100%);
	--panel-bg: linear-gradient(135deg, rgba(200,220,255,0.10) 0%, rgba(220,235,255,0.15) 50%, rgba(200,220,255,0.06) 100%);

	--panel-border: rgba(255, 255, 255, 0.5);
	--panel-border-subtle: rgba(255, 255, 255, 0.5);
	--panel-card-bg: white;
	--panel-card-text: #333;
	--panel-radius: 6px;
	--panel-scrollbar: rgba(255, 255, 255, 0.3);
	--panel-scrollbar-hover: rgba(255, 255, 255, 0.5);
	--panel-scrollbar-radius: 4px;
	--panel-scrollbar-track: transparent;
	--panel-shadow: rgba(51, 51, 60, 0.2) 0px 60px 40px -7px;
	--panel-text: white;
	--panel-text-subtle: rgba( 255, 255, 255, 0.6);

	/* ============================================================
	   CONTROLS - PLATE
	   Controls panel for plate/well selection
	   ============================================================ */
	--plate-controls-bg: rgba(255, 255, 255, 0.25);
	--plate-controls-border: 1px solid rgba(204, 204, 204, 0.6);
	--plate-controls-shadow: rgba(50, 50, 50, 0.15) 0px 30px 30px -20px;

	/* ============================================================
	   PREVIEW
	   Protocol preview modal styling
	   ============================================================ */
	--preview-bg: linear-gradient(135deg, rgba(200,220,255,0.15) 0%, rgba(220,235,255,0.20) 50%, rgba(200,220,255,0.10) 100%);
	--preview-border: rgba(255, 255, 255, 0.5);
    --preview-card-border: #ccc;
	--preview-cell-border: #ddd;
	--preview-cell-disabled: #ddd;
	--preview-grid-border: #999;
	--preview-radius: 6px;
	--preview-shadow: rgba(51, 51, 60, 0.3) 0px 60px 40px -7px;
	--preview-text: white;

	/* ============================================================
	   PROGRESS
	   Progress bar styling
	   ============================================================ */
	--progress-bg: linear-gradient(90deg, #03297a 0%, #6280c0 50%, #1e5799 100%);

	/* ============================================================
	   PROTOCOL
	   Protocol page styling
	   ============================================================ */
	--protocol-border: rgba(255,255,255,0.7);
	--protocol-svg: white;

	/* ============================================================
	   STATUS
	   Semantic colors for errors, warnings, success, info
	   (brighter for dark background)
	   ============================================================ */
	--status-error: #ff6b6b;
	--status-fail: #D55E00;
	--status-fail-low: #0072B2;
	--status-info: #42a5f5;
	--status-marginal: #99D8C7;
	--status-pass: #009E73;
	--status-read-failed: #D55E00;
	--status-success: #66bb6a;
	--status-warning: #ffa726;

	/* ============================================================
	   TEXT
	   Typography and link colors
	   ============================================================ */
	--text-accent: #cccdcf;
	--text-body: white;
	--text-link: rgb(0, 34, 157);
	--text-link-on-dark: #5ce1e6;
	--text-muted: #aaa;
	--text-on-light: black;
	--text-subtle: #666;

	/* ============================================================
	   TOOLTIPS
	   Tooltip styling
	   ============================================================ */
	--tooltip-bg: #141e3a;
	--tooltip-radius: 6px;
	--topbar-icon-filter: brightness(0) invert(1);

	/* ============================================================
	   WELLS
	   Microplate well states and colors
	   ============================================================ */
	--well-hover: #0055af;
	--well-measured: linear-gradient(180deg, #c6e48b 0%, #7cb342 100%);
	--well-measured-border: #7bb800;
	--well-muted: #e8e8e8;
	--well-read-failed-bg: white;
	--well-read-failed-border: black;
	--well-read-failed-x: black;
	--well-selected: linear-gradient(180deg, #7cb5ec 0%, #4a90d9 100%);
	--well-selected-border: #225ea8;

}

/* Table elements inherit color properly */
table, th, td {
	color: black
}