@font-face {font-family:'NotoSans';font-style:normal;font-weight:normal;src:url('/assets/styling/NotoSans-VariableFont_wdth,wght.ttf') format('truetype');}
@font-face {font-family:'WFXLL-SC';font-style:normal;font-weight:normal;src:url('/assets/styling/WDXLLubrifontSC-Regular.ttf') format('truetype');}

:root {
    --blocks-gap:1.5rem;
    --blocks-min-width:15rem;
    --blocks-max-width:45rem;
    --option-max-width:20rem;
}

:root[data-theme="light"] {
    --color-primary: #4C6EF5;
    --color-primary-hover: #4263EB;
    --color-primary-active: #3B5BDB;

    --color-secondary: #22D3EE;
    --color-secondary-muted: #A5F3FC;

    --color-bg-main: #F8FAFF;
    --color-bg-alt: #FFFFFF;
    --color-bg-soft: #dbe6f0; /*F1F5F9;*/

    --color-text-primary: #1F2937;
    --color-text-secondary: #4B5563;
    --color-text-muted: #6B7280;
    --color-text-disabled: #9CA3AF;

    --color-success: #22C55E;
    --color-success-bg: #DCFCE7;

    --color-warning: #F59E0B;
    --color-warning-bg: #FEF3C7;

    --color-error: #EF4444;
    --color-error-bg: #FEE2E2;

    --color-border-light: #E5E7EB;
    --color-border-default: #D1D5DB; /*--color-border-default*/
    --color-border-focus: #A5B4FC; /*--color-border-focus*/

    --color-table-border: #1F2937;
    --color-table-focus: #a5b4fc84; /*--color-border-focus*/

    --color-input-background: #D1D5DB;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 24px rgba(0,0,0,0.08);
    --color-block-shadow:#ccc;

    --btn-opacity:1;

    --table-th-background: #22D3EE;
    --table-th-text: #1F2937;

    --color-option:#ddd;

}

:root[data-theme="dark"] {
    /* Brand */
    --color-primary: #8DA2FB;
    --color-primary-hover: #A5B4FC;
    --color-primary-active: #7C8EF9;

    --color-secondary: #5EEAD4;
    --color-secondary-muted: #134E4A;

    /* Backgrounds */
    --color-bg-main: #0F172A;   /* deep slate */
    --color-bg-alt: #111827;    /* panel / card */
    --color-bg-soft: #1E293B;   /* elevated areas */

    /* Text */
    --color-text-primary: #E5E7EB;
    --color-text-secondary: #CBD5E1;
    --color-text-muted: #94A3B8;
    --color-text-disabled: #64748B;

    /* Feedback */
    --color-success: #4ADE80;
    --color-success-bg: #022C22;

    --color-warning: #FACC15;
    --color-warning-bg: #422006;

    --color-error: #F87171;
    --color-error-bg: #450A0A;

    /* Borders */
    --color-border-light: #1F2937;
    --color-border-default: #334155;
    --color-border-focus: #818CF8;

    --color-table-border: #64748B;
    --color-table-focus: #818df882;

    --color-input-background: #334155;

    /* Shadows (very restrained) */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 6px 16px rgba(0,0,0,0.5);
    --shadow-lg: 0 14px 32px rgba(0,0,0,0.6);
    --color-block-shadow:#000;

    --btn-opacity:0.8;

    --table-th-background: #22D3EE;
    --table-th-text: #1F2937;

    --color-option:#999;
}


/*
:root {
    --color-primary:#fc2403;
    --color-secondary: #971602;
    --color-notice:#1f80c4;
    --color-muted:#7d8da1;
    --color-danger:#ff1a1a;
    --color-success:#00e600;
    --color-warning:#ff8e55;
    --color-bg-main:#fff;
    --color-text-primary:#0f0f0e;
    --color-option:#ddd;
    --color-bg-alt:#f8edec;
    --color-border-default:#ccc;
    --color-border-focus:#aaa;
    --color-block-shadow:#ccc;

        --color-info-dark:#7d8da1;

    --btn-active:#999;
    --btn-opacity:1;
    --option-max-width:20rem;
    --blocks-gap:1.5rem;
    --blocks-min-width:15rem;
    --blocks-max-width:45rem;
}
.dark { /* dark theme * /
    --color-warning:#ffbb55;
    --color-bg-main:#0f0f0e;
    --color-text-primary:#d9c3bf;
    --color-option:#999;
    --color-bg-alt:#130807;
    --color-border-default:#4d4d4d;
    --color-block-shadow:#000;
    --btn-active:#666;
    --btn-opacity:0.8;
}*/

.bo-font {font-family:"WFXLL-SC";}

html {font-size:16px;scroll-snap-type:y mandatory;transition:background-color 0.2s ease, color 0.2s ease;scroll-behavior:smooth;}
body {width:100%;margin:0;font-family:'NotoSans',Helvetica,Arial,Verdana,Geneva,sans-serif;color:var(--color-text-primary);background:var(--color-bg-main);padding:0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;scroll-snap-align:start;}
/*section {width:calc(100% - 2rem);min-height:400px;background-color:var(--color-bg-main);color:var(--color-text-primary);padding:2rem 1rem;}*/
div {margin:0;padding:0;}

header {position:sticky;top:0;margin:0;width:100%;height:40px;background-color:var(--color-border-default);box-shadow:0 2px 4px #333;z-index:90;-webkit-user-select:none/* Safari */;-ms-user-select:none/* IE 10 and IE 11 */;user-select:none/* Standard syntax */;}
header {display:flex;}
header .left {text-align:left;cursor:pointer;flex-basis:11rem;margin-left:1rem;}
header .left #headertxt {font-size:2.2rem;font-family:"WFXLL-SC";transition:all 300ms ease;}
header .left .logo {display:flex;gap:0.8rem;}
header .left .logo img {width:2rem;height:2rem;filter:var(--logo-filter);}
header .left .logonofilter {display:flex;gap:0.8rem;}
header .left .logonofilter img {width:2rem;height:2rem;}
header .midd {display:flex;justify-content:left;align-items:center;flex-grow:1;cursor:pointer;margin-left:1rem;font-size:1.4rem;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
header .right {display:flex;justify-content:flex-end;gap:1rem;width:auto;margin-right:1rem;}
header .right #themeToggle {display:flex;background:none;border:0;cursor:pointer;color:inherit;padding:6px;justify-content:right;align-items:center;}
header .right #themeToggle .material-icons-sharp {font-size: 24px;}
header .right .profile {display:flex;align-items:center;cursor:pointer;white-space:nowrap; /* prevent wrapping */}
header .right .profile .info {display:flex;flex-direction:column;line-height:1;}
header .right .profile .info p {margin:0;font-size:0.95rem;font-weight:600;}
header .right .profile .info small {margin:0;font-size:0.7rem;opacity:0.75;text-align:right;}

/*header img {height:24px;margin:8px 0 0 8px;}
header img:hover {scale:105%;transition:all 150ms ease;}*/
section {display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;height:100%;align-items:stretch;margin:0;padding:0;}

/* icons */
.material-symbols-sharp {font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24}

nav {display:fixed;top:40px;left:0;margin:0;height:calc(100vh - 56px);width:12rem;background-color:var(--color-option);/*box-shadow:2px 0 8px #333;*/z-index:80;display:flex;flex-direction:column;padding-top:1rem;}
nav h3 {font-weight:500;font-size:1rem;}
nav h4 {font-weight:400;}
nav ul {list-style:none;margin:0;padding:0;margin-top:1rem;}
nav ul li {display:flex;color:var(--color-info-dark);margin-left:2rem;gap:1rem;align-items:center;position:relative;height:2.5rem;transition:all 300ms ease;}
nav ul li span{font-size:1.6rem;transition:all 250ms ease}
nav ul li.logOut{/*position:absolute;bottom:2rem;width:100%;*/margin-top:2rem;}
nav ul li.active{background:var(--color-border-light);color:var(--color-primary);margin-left:0;}
nav ul li.active:before{content:"";width:6px;height:100%;background:var(--color-primary);}
nav ul li.active span{color:var(--color-primary);margin-left:calc(1rem - 3px);}
nav ul li.active.l1{background:var(--color-nav-l1);}
nav ul li.active.l2{background:var(--color-nav-l2);}
nav ul li:hover {color:var(--color-primary);cursor:pointer;}
nav ul li:hover span{margin-left:1rem;}
nav ul li:hover .hovermenu {display:block;transition:all 300ms ease;}
nav .message-count{background:var(--color-danger);color:var(--color-white);padding:2px 10px;font-size:11px;border-radius:var(--border-radius-1);}

article {flex-grow:1;margin:1rem;}

h1 {font-size:2rem;letter-spacing:-1px;line-height:1;scroll-snap-align:start;scroll-margin-top:1rem;}
h2 {font-size:1.5rem;line-height:1.1;scroll-snap-align:start;scroll-margin-top:1rem;}
h3 {font-size:1.25rem;line-height:1.2;scroll-snap-align:start;scroll-margin-top:1rem;}
h4 {font-size:1rem;line-height:1.3;}
h5 {font-size:0.8rem;line-height:1.4;}
h6 {font-size:0.65rem;line-height:1.5;}
p {max-width:calc(100% - 2rem);width:100%;line-height:1.5;}
a {text-decoration:none;}


table.bordered {border-collapse:collapse;width:100%;table-layout:auto;}
table.bordered td:first-child,
table.bordered th:first-child {width:1%;white-space:nowrap;}
table.bordered th {font-weight:600;background-color:var(--table-th-background);color:var(--table-th-text);border:1px solid var(--color-border-default);}
table.bordered th, td {text-align:left;padding:2px 4px;}
table.bordered thead td {border:0;}
table.bordered tbody td {border:1px solid var(--color-border-default);}
table.bordered td.zoomable {position: relative;}
/*table.bordered tr:nth-child(even):not([class*="bg-"]) {background-color:var(--color-bg-soft);}*/
table.bordered tbody tr:hover {background-color:var(--color-table-focus) !important;}

table.ljrpblack {border-collapse:collapse;width:100%;table-layout:auto;}
table.ljrpblack thead {background-color:var(--color-bg-main);}
table.ljrpblack thead th {border:1px solid #000;background-color:var(--table-th-background);}
table.ljrpblack thead td {border:1px solid var(--color-bg-main);background-color:var(--color-bg-main);}
table.ljrpblack tbody th,
table.ljrpblack tbody td {text-align:left;padding:2px 4px;border:1px solid #000;white-space:nowrap;}
table.ljrpblack tbody th {font-weight:600;background-color:var(--table-th-background);color:var(--table-th-text);}
table.ljrpblack td:first-child,
table.ljrpblack th:first-child {width:1%;white-space:nowrap;}
/*table.ljrpblack tbody tr:hover {background-color:var(--color-table-focus) !important;}*/

table.basic {border-collapse:collapse;width:auto;table-layout:auto;}
table.basic td:first-child,
table.basic th:first-child {width:1%;white-space:nowrap;}
table.basic th {font-weight:600;color:var(--table-th-text);}
table.basic th, td {border:0 /*1px solid var(--color-table-border)*/;padding:2px 4px;}
table.basic td input, select {font-size:1rem;}

table.form {border-collapse:collapse;}
table.form th:first-child {width:1%;white-space:nowrap;}
table.form td,th {border:1px solid var(--color-border-default);}
table.form td button {width:100px;}

/*table {width:98%;}*/
table th, td {text-align:left;padding:2px 4px;}


.cellzoom {display:inline-block;position:relative;transition:all 0.2s ease;cursor:pointer;padding:2px 4px;border-radius:2px;}
.cellzoom:hover {position:absolute;left:50%;top:50%;transform:translate(-50%, -50%) scale(1.3);padding:2px 4px;border:2px solid #333;border-radius:4px;box-shadow:0 4px 8px rgba(0,0,0,0.3);z-index:1000;white-space:nowrap;background:var(--color-bg-main);}

.blocks {display:flex;flex-wrap:wrap;gap:var(--blocks-gap);max-width:100%;text-align:center;}
.blocks > * {flex:1;min-width:var(--blocks-min-width);}

.block {max-width:var(--blocks-max-width);width:100%;padding:0.5rem 0.5rem 1rem;background-color:var(--color-bg-alt);border:2px solid var(--color-border-default);border-radius:0.5rem;display:inline-block;box-shadow:0 2px 0.5rem var(--color-block-shadow);scroll-snap-align:start;scroll-margin-top:1rem;margin:0 auto;}
.block:hover {box-shadow:1px 4px 0.5rem var(--color-block-shadow);border:2px solid var(--color-border-focus);}
.block h2 {font-size:1.25rem;margin-top:0;}

input, select, textarea {padding:2px 4px;max-width:50rem;width:calc(100% - 8px);background-color:var(--color-input-background);color:var(--color-text-primary);border:var(--color-border-default) 1px solid;border-radius:2px;}
textarea {resize:none;}

button {cursor:pointer;font-size:1rem;margin-top:0.5rem;padding:0.75rem 1.5rem;border:1px solid #4d4d4d;border-radius:0.25rem;box-shadow:0 1px 3px #000;transition:all 150ms ease;}
button:hover {opacity:var(--btn-opacity);box-shadow:0 2px 3px #000;}
button:active, button.active {box-shadow:0 1px 3px #000 inset;}

/* buttons */
.btnPri {font-weight:700;background-color:var(--color-primary);}
.btnPri:active, .btnPri.active {font-weight:700;background-color:var(--color-secondary);}
.btnSec {font-weight:700;background-color:var(--color-option);border-color:var(--color-primary);color:var(--color-primary);}
.btnSec:active, .btnSec.active {font-weight:700;border-color:var(--color-secondary);color:var(--color-secondary);}
.btnTri {font-weight:700;background-color:var(--color-option);border-color:var(--color-active);color:var(--color-active);}
.btnTri:active, .btnTri.active {font-weight:700;border-color:var(--color-active);color:var(--color-active);}
.btnDel {font-weight:700;background-color:var(--color-primary);border-color:var(--color-secondary);}
.btnOpt {max-width:var(--option-max-width);width:100%;background-color:var(--color-option);color:var(--color-text-primary);display:inline-block;margin:2px 4px;}
.btnOpt:active, .btnOpt.active {background-color:var(--btn-active);}

.btnTable {padding:2px 4px;font-size:1rem;margin-top:0;}

.txt-ctr {text-align:center;}
.txt-lhs {text-align:left;}
.txt-rhs {text-align:right;}
.txt-upr {text-transform:uppercase;}
.txt-lwr {text-transform:lowercase;}
.txt-success {color:var(--color-success);}
.txt-failure {color:var(--color-error);}

.bg-success {background-color:var(--color-success);}
.bg-yellow  {background-color:yellow;color:black;}
.bg-blue    {background-color:blue;color:white;}
.bg-soft    {background-color:var(--color-bg-soft);}

#resultBox {display:none;position:fixed;top:5rem;left:50%;transform:translate(-50%,0);padding:0.5rem;border-radius:0.5rem;box-shadow:0 2px 0.5rem var(--color-block-shadow);}
.box-success {color:var(--color-success);background-color:var(--color-success-bg);border:2px solid var(--color-border-default);}
.box-warning {color:var(--color-warning);background-color:var(--color-warning-bg);border:2px solid var(--color-border-default);}
.box-failure {color:var(--color-error);background-color:var(--color-error-bg);border:2px solid var(--color-border-default);}

.mhauto {margin:0 auto;}

.h-1 {height:1rem;}
.h-1-5 {height:1.5rem;}

.w-100p {width:100%;}


.ljrpumps-fixtoprhs {position:fixed;top:56px;right:24px;}


/* loader */
.loader {
    margin: auto;
    border: 8px solid var(--color-primary); /* Light grey */
    border-top: 8px solid var(--color-secondary);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    animation: spins 1.5s linear infinite;
    z-index:99999;
}
@keyframes spins {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*#login {width:100%;text-align:center;margin-top:128}

/*
header

left nav

top nav

mobile nav
*/