@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   Toaga DevWorks — Modern Design System
   Facelift Facade Light Theme (Indigo Primary & Rust Accent)
   ============================================================ */

:root {
   /* Palette */
   --color-bg:               hsl(220, 15%, 97%);
   --color-bg-gradient-start: hsl(220, 15%, 95%);
   --color-bg-gradient-end:   hsl(220, 12%, 98%);
   --color-surface:          hsl(0, 0%, 100%);
   --color-surface-raised:   hsl(220, 15%, 96%);
   --color-surface-overlay:  hsla(220, 15%, 100%, 0.92);
   --color-border:           hsl(220, 14%, 85%);
   --color-border-subtle:    hsl(220, 14%, 90%);

   /* Brand Primary - Toaga Navy/Indigo */
   --color-primary:          hsl(232, 55%, 35%);
   --color-primary-hover:    hsl(232, 55%, 28%);
   --color-primary-muted:    hsl(232, 35%, 90%);
   --color-primary-glow:     hsla(232, 55%, 35%, 0.08);

   /* Brand Accent - Toaga Rust Orange */
   --color-accent:           hsl(24, 85%, 50%);
   --color-accent-hover:     hsl(24, 85%, 42%);
   --color-accent-glow:      hsla(24, 85%, 50%, 0.10);

   /* Typography Colors */
   --color-text:             hsl(220, 20%, 20%);
   --color-text-secondary:   hsl(220, 12%, 45%);
   --color-text-muted:       hsl(220, 10%, 62%);
   --color-text-heading:     hsl(220, 25%, 12%);

   /* Status Colors */
   --color-success:          hsl(152, 55%, 36%);
   --color-warning:          hsl(38, 90%, 45%);
   --color-error:            hsl(0, 70%, 50%);
   --color-error-bg:         hsl(0, 85%, 96%);
   --color-error-border:     hsl(0, 60%, 82%);

   /* Links */
   --color-link:             hsl(232, 55%, 35%);
   --color-link-hover:       hsl(24, 85%, 50%);

   /* Tables */
   --color-table-header:     hsl(220, 15%, 92%);
   --color-table-row-odd:    hsl(0, 0%, 100%);
   --color-table-row-even:   hsl(220, 15%, 97%);
   --color-table-row-hover:  hsl(232, 35%, 94%);
   --color-table-border:     hsl(220, 14%, 88%);

   /* Typography */
   --font-family:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
   --font-size-xs:           0.75rem;
   --font-size-sm:           0.8125rem;
   --font-size-base:         0.875rem;
   --font-size-md:           1.0rem;
   --font-size-lg:           1.125rem;
   --font-size-xl:           1.4rem;
   --font-size-2xl:          2.0rem;
   --font-weight-normal:     400;
   --font-weight-medium:     500;
   --font-weight-semibold:   600;
   --font-weight-bold:       700;
   --line-height:            1.6;

   /* Spacing */
   --space-xs:  0.25rem;
   --space-sm:  0.5rem;
   --space-md:  1.0rem;
   --space-lg:  1.5rem;
   --space-xl:  2.0rem;
   --space-2xl: 3.0rem;

   /* Radius */
   --radius-sm:  4px;
   --radius-md:  8px;
   --radius-lg:  12px;
   --radius-xl:  16px;
   --radius-pill: 9999px;

   /* Shadows */
   --shadow-sm:   0 1px 3px hsla(220, 20%, 50%, 0.1), 0 1px 2px hsla(220, 20%, 50%, 0.06);
   --shadow-md:   0 4px 12px hsla(220, 20%, 50%, 0.1), 0 2px 4px hsla(220, 20%, 50%, 0.05);
   --shadow-lg:   0 8px 30px hsla(220, 20%, 50%, 0.12), 0 4px 8px hsla(220, 20%, 50%, 0.06);
   --shadow-glow: 0 0 12px hsla(232, 55%, 35%, 0.06);

   /* Transitions */
   --transition-fast: 150ms ease;
   --transition-base: 250ms ease;
   --transition-slow: 400ms ease;
}

/* ---------- Reset & Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
   font-size: 100%;
   font-weight: normal;
   margin: 0;
   padding: 0;
   -webkit-font-smoothing: antialiased;
}

html { height: 100%; }


body {
   background: linear-gradient(160deg, var(--color-bg-gradient-start), var(--color-bg-gradient-end));
   background-attachment: fixed;
   font-family: var(--font-family);
   font-size: var(--font-size-base);
   color: var(--color-text);
   line-height: var(--line-height);
}

a {
   color: var(--color-link);
   text-decoration: none;
   transition: color var(--transition-fast);
}

a:hover {
   color: var(--color-link-hover);
   text-decoration: none;
}

ul, li { margin: 0; padding: 0; }
img { border: 0; }

textarea {
   font-family: var(--font-family);
}

input.rightalign { text-align: right; }
#top { position: absolute; }

/* ---------- Layout Containers ---------- */


.container {
   font-size: 1.0em;
   margin: auto;
   width: 100%;
   max-width: 1000px;
   padding: var(--space-md);
   overflow: auto;
}

* html container { height: 90%; }

.clearboth { clear: both; }

.content {
   background-color: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-sm);
   display: block;
   font-size: 1.0em;
   height: auto !important;
   min-height: 200px;
   overflow: auto;
   max-width: 978px;
   width: 100%;
   margin-bottom: 24px;
   padding: var(--space-lg);
   animation: fadeIn var(--transition-slow) ease-out;
}

.content span.h {
   font-weight: var(--font-weight-bold);
   font-size: var(--font-size-lg);
   color: var(--color-text-heading);
}

.content span.h a { text-decoration: none; color: var(--color-text-heading); }
.content span.h a:hover { color: var(--color-primary); }

/* ---------- Cards / Content Blocks ---------- */

.contentblock {
   background-color: var(--color-surface);
   border: 1px solid var(--color-border-subtle);
   border-radius: var(--radius-md);
   padding: var(--space-md);
   margin: var(--space-md) 0;
   box-shadow: var(--shadow-sm);
   transition: box-shadow var(--transition-base);
}

.contentblock:hover {
   box-shadow: var(--shadow-md);
}

.contentblock p { padding-bottom: 10px; margin-top: 10px; }
.contentblock a { color: var(--color-link); }
.contentblock a:hover { color: var(--color-link-hover); }
.contentblock li { margin-left: 1.2em; padding-left: 0; }
.contentblock::after { content: ''; display: block; clear: both; }

.contentblock h1 {
   font-size: var(--font-size-xl);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-heading);
   margin-top: 15px;
   padding-bottom: var(--space-xs);
   border-bottom: 1px solid var(--color-border-subtle);
}

.contentblock h2 {
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-heading);
   margin-top: 15px;
}

.contentblock h3 {
   margin-top: 5px;
   margin-left: 15px;
   font-weight: var(--font-weight-medium);
}
.contentblock h3:before {
   content: url('/i/bullet.png');
   margin-right: 6px;
   vertical-align: middle;
}

.contentblock h4 {
   margin-left: 45px;
   font-weight: var(--font-weight-normal);
}

.halfcontent {
   font-size: 1.1em;
   width: 400px;
   float: left;
   margin: 40px;
}

.halfcontent h1 {
   font-size: 1.4em;
   font-weight: var(--font-weight-bold);
}

.halfcontent h2 {
   font-size: 1.3em;
   margin-top: 15px;
}

.loginstatus { display: inline; float: right; padding-right: 15px; }
.loginstatus img { position: relative; top: 2px; margin: 0 3px 0 3px; }

.social { }
.social a {
   background: transparent url('../i/social.png') -376px -378px no-repeat;
   margin: 5px 5px 0 0;
   width: 32px;
   height: 33px;
   text-indent: -999em;
   display: block;
   float: left;
   border-bottom: 0;
   opacity: .7;
}
.social a.twitter { background-position: -335px -378px; }
.social a:hover { opacity: 1; }

.fb-like { margin: 10px 0 0 5px; }
	
.limg { float: left; margin-right: 10px; }
.rimg { float: right; margin-left: 10px; }

/* ---------- Error Box ---------- */

.errorbox {
   background-color: var(--color-error-bg);
   border: 1px solid var(--color-error-border);
   border-left: 4px solid var(--color-error);
   border-radius: var(--radius-md);
   display: block;
   margin: 100px auto;
   padding: var(--space-lg);
   width: 600px;
   max-width: 90vw;
}
.errorbox img { margin-right: 10px; vertical-align: middle; }

/* ---------- Login Box Facelift ---------- */

.loginbox {
   background: var(--color-surface-overlay);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-lg), var(--shadow-glow);
   display: block;
   margin: 12vh auto 0;
   padding: var(--space-lg) var(--space-xl);
   width: 420px;
   max-width: 90vw;
   text-align: center;
   animation: fadeIn var(--transition-slow) ease-out;
}
.loginbox img {
   margin: 0 auto var(--space-md);
   display: block;
   height: auto;
   max-width: 90%;
}
.loginbox table { margin-left: auto; margin-right: auto; }
.loginbox ul { float: right; vertical-align: top; }
.loginbox span.err { color: var(--color-error); font-weight: var(--font-weight-bold); }

/* Text inputs & password boxes inside login card */
.loginbox input[type="text"],
.loginbox input[type="password"] {
   width: 220px !important;
   padding: 10px 12px;
   border-radius: var(--radius-md);
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   color: var(--color-text);
   font-size: var(--font-size-base);
   transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
   outline: none;
}

.loginbox input[type="text"]:focus,
.loginbox input[type="password"]:focus {
   border-color: var(--color-primary);
   box-shadow: 0 0 0 3px var(--color-primary-glow);
}

/* Submit button inside login card */
.loginbox input[type="submit"],
.loginbox input[type="button"] {
   background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
   color: #fff;
   border: none;
   border-radius: var(--radius-pill);
   padding: 10px 36px;
   font-weight: var(--font-weight-semibold);
   font-size: var(--font-size-base);
   cursor: pointer;
   transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
   letter-spacing: 0.02em;
}

.loginbox input[type="submit"]:hover,
.loginbox input[type="button"]:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 16px hsla(232, 55%, 35%, 0.3);
   filter: brightness(1.08);
}

.loginbox input[type="submit"]:active,
.loginbox input[type="button"]:active {
   transform: translateY(0);
}

#logindialog {
   display: none;
   position: absolute;
   margin: -20px 0 0 -130px;
   z-index: 9999 !important;
   width: 220px !important;
   height: auto !important;
   min-height: 250px !important;
   padding: 15px !important;
   background-color: var(--color-surface) !important;
   border: 1px solid var(--color-border) !important;
   border-radius: var(--radius-lg) !important;
   box-shadow: var(--shadow-lg), var(--shadow-glow) !important;
}

#logindialog ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

#logindialog li {
   display: block;
   margin-bottom: 6px;
   list-style: none;
   clear: both;
}

#logindialog li span {
   text-align: left;
   font-weight: var(--font-weight-semibold);
   font-size: var(--font-size-xs);
   color: var(--color-text-secondary);
   display: block;
}

#logindialog li input.text {
   font-size: var(--font-size-sm);
   width: 100% !important;
   padding: 6px 10px;
   margin: 2px 0;
   display: block;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   box-sizing: border-box;
   background: var(--color-surface);
   color: var(--color-text);
   transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
   outline: none;
}

#logindialog li input.text:focus {
   border-color: var(--color-primary);
   box-shadow: 0 0 0 3px var(--color-primary-glow);
}

#logindialog li input.submit {
   border: none;
   width: 100% !important;
   text-align: center;
   justify-content: center;
   color: #fff;
   background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
   margin-top: 8px;
   border-radius: var(--radius-pill);
   padding: 8px var(--space-md);
   cursor: pointer;
   box-shadow: var(--shadow-sm);
   transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}

#logindialog li input.submit:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 12px var(--color-primary-glow);
   filter: brightness(1.1);
}

/* Align Checkbox and Remember me text side-by-side */
#logindialog li:nth-child(6) {
   display: inline-flex;
   align-items: center;
   clear: none;
   width: auto;
   margin-top: 4px;
}
#logindialog li:nth-child(6) input[type="checkbox"] {
   width: 16px;
   height: 16px;
   accent-color: var(--color-primary);
   cursor: pointer;
}

#logindialog li:nth-child(7) {
   display: inline-flex;
   align-items: center;
   clear: none;
   width: auto;
   margin-left: 6px;
   margin-top: 4px;
   vertical-align: middle;
}
#logindialog li:nth-child(7) span.checklabel {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
   color: var(--color-text-secondary);
   cursor: pointer;
   display: inline;
}

/* Sign Up! Link */
#logindialog li:nth-child(8) {
   clear: both;
   text-align: center;
   margin-top: 10px;
}
#logindialog li:nth-child(8) a {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-bold);
   color: var(--color-accent);
   transition: color var(--transition-fast);
}
#logindialog li:nth-child(8) a:hover {
   color: var(--color-accent-hover);
   text-decoration: underline;
}

/* ---------- Header ---------- */

.header {
   min-height: 85px;
   position: relative;
   width: 100%;
   background-color: var(--color-surface);
   border-bottom: 1px solid var(--color-border-subtle);
   box-shadow: var(--shadow-sm);
   display: flex;
   align-items: center;
}
.header a.homelink { display: block; float: left; margin-top: 5px; }

/* ---------- Tables Facelift ---------- */

table.quicktable {
   border: 1px solid var(--color-table-border);
   border-radius: var(--radius-md);
   border-collapse: separate;
   border-spacing: 0;
   font-size: var(--font-size-sm);
   width: 100%;
   overflow: hidden;
}
table.quicktable th {
   background-color: var(--color-table-header);
   font-weight: var(--font-weight-bold);
   border-bottom: 2px solid var(--color-primary-muted);
   padding: 10px 12px;
   text-align: left;
   color: var(--color-text-heading);
}
table.quicktable td.even {
   background-color: var(--color-table-row-even);
   border-bottom: 1px solid var(--color-table-border);
   padding: 8px 12px;
   transition: background var(--transition-fast);
}
table.quicktable td.odd {
   background-color: var(--color-table-row-odd);
   border-bottom: 1px solid var(--color-table-border);
   padding: 8px 12px;
   transition: background var(--transition-fast);
}
table.quicktable tr:hover td.even,
table.quicktable tr:hover td.odd {
   background-color: var(--color-table-row-hover);
}
table.quicktable a { color: var(--color-link); text-decoration: none; font-weight: var(--font-weight-medium); }
table.quicktable a:hover { color: var(--color-link-hover); text-decoration: none; }
table.quicktable td.title { background-color: var(--color-table-header); padding: var(--space-sm) var(--space-md); }
table.quicktable td.title li { display: inline; font-size: 1.0em; font-weight: var(--font-weight-bold); list-style: none; color: var(--color-text-heading); }
table.quicktable td.title li a { float: right; font-weight: var(--font-weight-semibold); }
table.quicktable td.title li.subtitle { float: right; padding: 0 10px 0 0; color: var(--color-text-secondary); }
table.quicktable td.nodata { background-color: var(--color-error-bg); color: var(--color-error); border-top: var(--color-error-border) solid 1px; padding: var(--space-sm); text-align: center; }

/* ---------- Pagination ---------- */

.pagination span { display: block; float: left; clear: right; }
.pagination span a {
   font-family: var(--font-family);
   font-size: var(--font-size-xs);
   border: 1px solid var(--color-border);
   height: auto;
   padding: 4px 8px;
   margin-left: 2px;
   background: var(--color-surface);
   text-decoration: none;
   color: var(--color-text-secondary);
   border-radius: var(--radius-sm);
   transition: all var(--transition-fast);
}
.pagination dt.label { display: none; }
.pagination span a:hover { border-color: var(--color-primary); background: var(--color-primary-glow); color: var(--color-primary); }
.pagination span.current a {
   background: var(--color-primary);
   color: var(--color-button-text);
   border-color: var(--color-primary);
   font-weight: var(--font-weight-bold);
   padding: 4px 8px;
   margin-left: 2px;
}
.pagination .separator, .pagination .elipsis { background: none; border: 0; }
.pagination .separator:hover { border: 0; }
.pagination li.jumptopage { text-align: center; }

/* ---------- Detail View Container ---------- */

.dvcontainer {
   max-width: 978px;
   width: 100%;
   min-height: 560px;
   display: block;
   font-size: 1.0em;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 100px;
   background: var(--color-surface);
   border: 1px solid var(--color-border-subtle);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-sm);
   padding: var(--space-lg);
   box-sizing: border-box;
}

.dvcontainer span.valerr { color: var(--color-error); font-weight: var(--font-weight-semibold); }
.dvcontainer table { margin-bottom: 10px; margin-left: auto; margin-right: auto; }

.errsummary {
   background-color: var(--color-error-bg);
   border: 1px solid var(--color-error-border);
   border-left: 4px solid var(--color-error);
   border-radius: var(--radius-md);
   color: var(--color-error);
   display: block;
   font-weight: var(--font-weight-bold);
   margin: 5px;
   padding: 10px;
}
.errsummary li { list-style: none; color: var(--color-error); font-weight: var(--font-weight-bold); }

.dvoptions {
   background-color: var(--color-surface-raised);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   margin: 5px 0;
   min-height: 40px;
   overflow: visible;
   padding: var(--space-sm) var(--space-md);
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.dvoptions .title { font-weight: var(--font-weight-bold); color: var(--color-text-heading); }

/* ---------- Forms Facelift (ul.dv) ---------- */

ul.dv { list-style: none; margin: var(--space-lg) auto; padding: 0; width: 90%; }
ul.dv li {
   display: flex;
   align-items: center;
   min-height: 36px;
   list-style: none;
   clear: both;
   margin-bottom: var(--space-sm);
   gap: var(--space-md);
}

ul.dv li input {
   font-family: var(--font-family);
   font-size: var(--font-size-base);
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   color: var(--color-text);
   padding: 6px 10px;
   transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
   outline: none;
   flex: 1;
   min-width: 0;
}
ul.dv li input:focus {
   border-color: var(--color-primary);
   box-shadow: 0 0 0 3px var(--color-primary-glow);
}

ul.dv li input[type='checkbox'] {
   padding: 0;
   margin: 0;
   width: 16px;
   height: 16px;
   accent-color: var(--color-primary);
   flex: 0 0 16px;
}

ul.dv li select {
   font-family: var(--font-family);
   font-size: var(--font-size-base);
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   color: var(--color-text);
   padding: 6px 10px;
   transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
   outline: none;
   flex: 1;
   min-width: 0;
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 10px center;
   padding-right: 28px;
}
ul.dv li select:focus {
   border-color: var(--color-primary);
   box-shadow: 0 0 0 3px var(--color-primary-glow);
}

ul.dv li span {
   color: var(--color-text-secondary);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   flex: 0 0 130px;
   padding-top: 0;
}

ul.dv li table.cblist { display: block; float: left; font-size: 0.8em; list-style: none; width: 100%; }
ul.dv li table.cblist td { padding: 0; }

ul.dv li.wide { display: flex; flex-direction: column; align-items: flex-start; height: auto; min-height: 200px; }
ul.dv li.wide span { margin-bottom: var(--space-xs); }
ul.dv li.wide input { display: block; list-style: none; padding: 0; }
ul.dv li.wide textarea {
   display: block;
   font-family: var(--font-family);
   font-size: var(--font-size-base);
   height: 120px;
   padding: 8px;
   width: 100% !important;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   color: var(--color-text);
   resize: vertical;
   outline: none;
   box-sizing: border-box;
   transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
ul.dv li.wide textarea:focus {
   border-color: var(--color-primary);
   box-shadow: 0 0 0 3px var(--color-primary-glow);
}

ul.dv li.htmleditor { display: block; height: 200px; list-style: none; margin-top: 10px; }
ul.dv li.wide input.stylebutton {
   background: var(--color-surface-raised);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   color: var(--color-text);
   font: bold var(--font-size-xs) var(--font-family);
   cursor: pointer;
   padding: 6px 12px;
   transition: background var(--transition-fast);
}
ul.dv li.wide input.stylebutton:hover { background: var(--color-primary-muted); }

ul.dv li.twoline { display: block; height: auto; min-height: 100px; list-style: none; }
ul.dv li.twoline input { display: block; list-style: none; padding: 0; }
ul.dv li.twoline textarea {
   display: block;
   font-family: var(--font-family);
   font-size: var(--font-size-base);
   height: 80px;
   padding: 8px;
   width: 100%;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   color: var(--color-text);
   resize: vertical;
   outline: none;
}
ul.dv li.twoline textarea:focus {
   border-color: var(--color-primary);
   box-shadow: 0 0 0 3px var(--color-primary-glow);
}
ul.dv li.twoline input.stylebutton {
   background: var(--color-surface-raised);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   color: var(--color-text);
   font: bold var(--font-size-xs) var(--font-family);
   cursor: pointer;
}
ul.dv li.twoline span { display: block; width: 100%; padding-top: 5px; margin-bottom: var(--space-xs); }

ul.dv li img { margin-top: 3px; }

/* ---------- Dashboard Images ---------- */

ul.dashboardimg {
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-md);
}
ul.dashboardimg img { border-style: none; padding: 0; }
ul.dashboardimg a {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   text-decoration: none;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: var(--space-md);
   width: 120px;
   height: 120px;
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-xs);
   color: var(--color-link);
   transition: all var(--transition-base);
   gap: var(--space-xs);
}
ul.dashboardimg a:hover {
   background: var(--color-surface-raised);
   border-color: var(--color-primary-muted);
   box-shadow: var(--shadow-md), var(--shadow-glow);
   color: var(--color-primary-hover);
   transform: translateY(-2px);
}

#cssdd, #cssdd ul { list-style: none; margin: 0; padding: 0; }
#cssdd a { display: block; width: 8em; }
#cssdd li { float: left; width: 8em; }
#cssdd li ul { left: -999em; position: absolute; width: 8em; }
#cssdd li:hover ul, #cssdd li.sfhover ul { left: auto; }

/* ---------- Footer ---------- */

#footer {
   clear: both;
   background: var(--color-primary);
   padding: var(--space-md) 0;
   text-align: center;
   border-top: 1px solid var(--color-border-subtle);
   color: #fff;
   margin-top: 0;
   box-shadow: var(--shadow-sm);
}
    	
#footer a { font-size: 11px; color: rgba(255, 255, 255, 0.85); transition: color var(--transition-fast); }
#footer a:hover { color: #fff; text-decoration: underline; }
#footer a:active { color: #fff; }
#footer a:visited { color: rgba(255, 255, 255, 0.85); }

/* Inner footer container: flex row, 4 equal columns */
#footer .container {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   gap: 0;
   width: 100% !important;
   max-width: 1000px;
   box-sizing: border-box;
}

.footersegment {
   flex: 1;
   font-size: var(--font-size-sm);
   text-align: left;
   font-family: var(--font-family);
   padding: 0 var(--space-md);
   color: rgba(255, 255, 255, 0.95);
}

.hdr { font-weight: var(--font-weight-bold); }

/* ---------- Buttons ---------- */

.buttons a, .buttons button {
   background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
   border: none;
   border-radius: var(--radius-md);
   color: #fff;
   cursor: pointer;
   font-family: var(--font-family);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-semibold);
   line-height: 1.4;
   margin: 0 var(--space-sm) 0 0;
   padding: 8px 18px;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}

.buttons button { overflow: visible; width: auto; }
.buttons button[type] { line-height: 17px; }

.buttons button img, .buttons a img { border: none; height: 16px; margin: 0 3px -3px 0 !important; padding: 0; width: 16px; display: none; /* Hide old icons */ }

/* Standard Hover */
button:hover, .buttons a:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 12px var(--color-accent-glow);
   filter: brightness(1.08);
   color: #fff;
   text-decoration: none;
}

.buttons a:active, .buttons button:active {
   transform: translateY(0);
   filter: brightness(0.95);
}

/* mainbtn */
button.mainbtn, .buttons a.mainbtn {
   background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
   color: #fff;
}
.buttons a.mainbtn:hover, button.mainbtn:hover {
   box-shadow: 0 4px 12px var(--color-primary-glow);
   filter: brightness(1.1);
   color: #fff;
}

/* negative */
.buttons a.negative, button.negative {
   background: linear-gradient(135deg, var(--color-error), hsl(0, 60%, 42%));
   color: #fff;
}
.buttons a.negative:hover, button.negative:hover {
   background: linear-gradient(135deg, var(--color-error), hsl(0, 65%, 45%));
   box-shadow: 0 4px 12px hsla(0, 70%, 50%, 0.3);
   color: #fff;
}

/* regular */
button.regular, .buttons a.regular {
   background: var(--color-surface-raised);
   border: 1px solid var(--color-border);
   color: var(--color-text);
}

.buttons a.regular:hover, button.regular:hover {
   background: var(--color-surface-raised);
   border-color: var(--color-primary);
   color: var(--color-primary);
   box-shadow: 0 0 0 3px var(--color-primary-glow);
}

/* ---------- Forum ---------- */

.forumcontainer {
   font-size: var(--font-size-sm);
   color: var(--color-text);
   line-height: var(--line-height);
}
.forumcontainer .forumbox {
   min-height: 20px;
   background: var(--color-primary);
   border: 1px solid var(--color-primary-hover);
   font-weight: var(--font-weight-bold);
   color: white;
   clear: both;
   margin-top: 18px;
   padding: 8px var(--space-md);
   height: auto;
   border-radius: var(--radius-md) var(--radius-md) 0 0;
   box-shadow: var(--shadow-sm);
   display: flex;
   align-items: center;
   justify-content: space-between;
} 
.forumrow {
   background: var(--color-surface);
   min-height: 60px;
   display: block;
   width: 100%;
   position: relative;
   border-bottom: 1px solid var(--color-border);
   border-left: 1px solid var(--color-border);
   border-right: 1px solid var(--color-border);
   box-shadow: var(--shadow-sm);
}

ul.navcontainer { list-style: none; display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-md); }
ul.navcontainer li { list-style: none; display: block; font-weight: var(--font-weight-bold); }
ul.navcontainer li.hierarchynav {
   background: transparent url(../fimg/arrowright.png) right center no-repeat;
   padding: 4px 16px 4px 3px;
}
ul.navcontainer li.hierarchynav a img { padding: 2px 4px; float: left; }
ul.navcontainer li.hierarchynavlast { padding: 4px 6px 4px 3px; font-weight: var(--font-weight-normal); }
ul.navcontainer li.hierarchynav a {
   text-decoration: none;
   display: block;
   padding: 4px 8px;
   background-color: var(--color-surface-raised);
   border: 1px solid var(--color-border-subtle);
   border-radius: var(--radius-sm);
   transition: all var(--transition-fast);
}
ul.navcontainer li.hierarchynavlast span { display: block; float: left; padding: 4px 8px; border: 1px solid transparent; }
ul.navcontainer li.hierarchynav a:hover { border-color: var(--color-primary); background-color: var(--color-primary-glow); color: var(--color-primary); }

.forumcontainer .forumrow a { color: var(--color-link); text-decoration: none; font-weight: var(--font-weight-bold); }
.forumcontainer .forumrow a:hover { color: var(--color-link-hover); }
.forumcontainer .forumrow .forumrowinfo { width: 52%; min-width: 30%; padding: 5px 0; float: left; clear: right; min-height: 48px; }
.forumcontainer .forumrow .forumrowinfo .forumicon { position: absolute; left: 10px; width: 48px; }
.forumcontainer .forumrow .forumrowinfo .rowtitle { margin-left: 65px; }
.forumcontainer .forumrow .forumrowinfo .rowtitle p.forumdescription { color: var(--color-text-secondary); }
.forumcontainer .forumbox span { padding: 5px 0; display: block; float: left; clear: right; }
.forumcontainer .forumbox span.forumtitle { min-width: 61%; margin-left: 10px; }
.forumcontainer .forumbox span.forumlastpost { width: 20%; }

.forumcontainer .forumbox .forumbuttons { float: right; display: flex; gap: var(--space-xs); }
.forumcontainer .forumbox .forumbutton {
   background-color: white;
   border: solid var(--color-border) 1px;
   padding: 4px 10px;
   border-radius: var(--radius-sm);
}
.forumcontainer .forumbox .forumbutton:hover { background-color: var(--color-surface-raised); border-color: var(--color-primary); }
.forumcontainer .forumbox .forumbutton a { color: var(--color-primary); display: block; text-decoration: none; font-size: var(--font-size-xs); }

.forumcontainer .forumhead h2 { padding: 5px 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
.forumcontainer .forumrow ul.forumstats { list-style: none; float: left; display: block; clear: right; width: 8%; margin-right: 2%; padding: 5px 0; } 
.forumcontainer .forumrow ul.forumlastpost { list-style: none; float: left; display: block; clear: right; width: 34%; margin-right: 2%; padding: 5px 0; font-size: 80%; } 
.forumcontainer .forumrow ul.forumlastpost a { font-weight: normal; font-size: 12px; }

ol.posts { list-style: none; }
ol.posts>li { margin-bottom: 10px; display: block; width: 100%; clear: both; position: relative; float: left; color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
ol.posts li.threadtools { background: var(--color-surface-raised); width: 100%; display: block; border: 1px solid var(--color-border); float: left; clear: both; margin: 0.5em 0; border-radius: var(--radius-sm); }
ol.posts li.threadtools ul.tools { padding: 4px 0; float: right; margin-right: 2px; list-style: none; }
ol.posts li.threadtools ul.tools li { position: relative; display: block; float: left; clear: right; margin: 0px; }
ol.posts li.threadtools ul.tools li a { border: 0; color: var(--color-text-secondary); padding-right: var(--space-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }

.forumpostlist .forumposthead {
   background: var(--color-primary);
   border: 1px solid var(--color-primary-hover);
   clear: both;
   display: block;
   float: left;
   width: 100%;
   color: #ffffff;
   margin: 0;
   font-size: var(--font-size-xs);
   padding: 8px var(--space-sm);
}
.forumpostlist .forumposthead span.forumposthead_date { display: block; color: white; float: left; clear: right; width: 49%; margin-left: 10px; padding-left: 15px; }
.forumpostlist .forumposthead span.forumposthead_postnumber { position: absolute; color: white; right: 0; top: 0; width: 50%; padding: 8px 10px 0; text-align: right; vertical-align: middle; }
.forumpostlist .forumposthead span.forumposthead_right a { font-weight: bold; color: #fff; }

.forumpostlist .forumpostfooter { width: 100%; padding: 8px var(--space-md); background: var(--color-surface-raised); float: left; border-top: 1px solid var(--color-border); } 	
.forumpostlist .forumpostfooter span.forumpostfooter_reply { float: right; padding-right: 10px; text-align: right; width: 50%; }
.forumpostlist .forumpostfooter a.reply { padding-left: 20px; border: 0px solid #A8A8A8; font-size: var(--font-size-xs); font-weight: bold; }
.forumpostlist .forumpostfooter a.edit { padding-left: 20px; border: 0px solid #A8A8A8; font-size: var(--font-size-xs); font-weight: bold; }

.forumpostlist .forumpostdetails { width: 100%; background: var(--color-surface) none; float: left; } 

.forumpostlist .forumpostdetails .userbox { float: left; position: relative; width: 180px; padding: var(--space-sm) var(--space-md); font-size: var(--font-size-xs); display: block; background: var(--color-surface-raised); border-right: 1px solid var(--color-border); clear: both; min-height: 120px; }
.forumpostlist .forumpostdetails .userbox .username_container { margin: 8px 0; font-weight: bold; color: var(--color-text-heading); }
.forumpostlist .forumpostdetails .userbox span.title { font-size: var(--font-size-xs); display: block; clear: both; font-weight: normal; color: var(--color-text-secondary); }
.forumpostlist .forumpostdetails .userbox a.postuseravatar { display: block; margin-top: var(--space-xs); text-align: left; width: auto; float: left; clear: both; }
.forumpostlist .forumpostdetails .userbox dl.userbox_extra { width: 100%; float: left; font-size: 11px; margin-top: var(--space-sm); }
.forumpostlist .forumpostdetails .userbox dl.userbox_extra dt { float: left; text-align: left; margin-right: 10px; margin-left: 0; min-width: 50px; }
.forumpostlist .forumpostdetails .userbox dl.userbox_extra dd { display: block; padding-bottom: 3px; color: var(--color-text-secondary); }
                                                            
.forumpostlist .forumpostdetails .postbody { margin-left: 180px; background: var(--color-surface); padding-bottom: 1em; }
.forumpostlist .forumpostdetails .postbody .postbodycontentcontainer { padding: var(--space-sm) var(--space-md); font-size: var(--font-size-base); color: var(--color-text); }

ol.posts>li ul { list-style: outside url('../i/bullet.png'); margin: 0 0 0 1.5em; }
ol.posts > li ol { list-style: outside; margin: 0 0 2em 1.5em; list-style-type: decimal; }
ol.posts > li ol li { margin-bottom: 10px; }

div.quote_container { background: transparent url(../i/quote-left.png) no-repeat left; display: block; width: 9px; height: 13px; position: absolute; top: 35px; left: 204px; }
div.quote_outer { background-position: 5px 5px; border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); background: var(--color-surface-raised); border: 1px solid var(--color-border); margin-bottom: 10px; }
div.quote_by { background: transparent url('../i/quote.png') no-repeat left center; text-indent: 20px; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-xs); }
div.quote_inner { padding: 4px 8px; font-style: italic; color: var(--color-text-secondary); }

.javalink {
   color: var(--color-text);
   cursor: pointer;
   font-weight: var(--font-weight-bold);
   text-decoration: none;
   padding: 4px 8px;
   background-color: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   font-size: var(--font-size-xs);
   transition: all var(--transition-fast);
}
.javalink:hover { border-color: var(--color-primary); background-color: var(--color-primary-glow); color: var(--color-primary); }

.javalink_plain {
   color: var(--color-link);
   cursor: pointer;
   font-weight: var(--font-weight-bold);
   text-decoration: none;
   transition: color var(--transition-fast);
}
.javalink_plain:hover { color: var(--color-link-hover); }

.plainlink { cursor: pointer; }

/* ---------- Notifications Facelift ---------- */

.notification {
   margin: 0 0 var(--space-md) 0;
}

.notification div.showOnLoad {
   display: block;
}

.notify-success,
.notify-info,
.notify-warning,
.notify-error {
   background-repeat: no-repeat;
   background-position: 10px 50%;
   padding: var(--space-md);
   padding-left: 40px;
   margin-bottom: var(--space-sm);
   margin-top: 10px;
   border-radius: var(--radius-md);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   box-shadow: var(--shadow-sm);
}

.notification .notify-success {
   background-color: hsl(152, 55%, 96%);
   background-image: url(notification/success.png);
   border: 1px solid var(--color-success);
   color: var(--color-success);
}

.notification .notify-info {
   background-color: hsl(210, 50%, 96%);
   background-image: url(notification/info.png);
   border: 1px solid var(--color-primary);
   color: var(--color-primary);
}

.notification .notify-warning {
   background-color: hsl(38, 90%, 96%);
   background-image: url(notification/alert.png);
   border: 1px solid var(--color-warning);
   color: var(--color-warning);
}

.notification .notify-error {
   background-color: var(--color-error-bg);
   background-image: url(notification/error.png);
   border: 1px solid var(--color-error-border);
   color: var(--color-error);
}

.notification ul {
   margin-left: 25px;
   margin-top: 2px;
   margin-bottom: 2px;
   padding: 0px;
}

/* ---------- Utility / Animations ---------- */

@keyframes fadeIn {
   from { opacity: 0; transform: translateY(6px); }
   to   { opacity: 1; transform: translateY(0); }
}

.content,
.contentblock,
.dvcontainer,
.loginbox {
   animation: fadeIn var(--transition-slow) ease-out;
}