/* Premier Moves — Storage Portal
   Modern redesign, 2025
---------------------------------------------------------- */

/* VARIABLES */
:root {
    --primary:        #1e3a5f;
    --primary-hover:  #2c5282;
    --accent:         #e07b1f;
    --bg:             #f0f4f8;
    --white:          #ffffff;
    --text:           #1a2332;
    --muted:          #5c6b7a;
    --border:         #d0dae8;
    --shadow:         0 2px 14px rgba(30,58,95,0.10);
    --radius:         8px;
}

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

body {
    padding: 0;
    margin: 0;
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--bg);
}

/* LAYOUT
---------------------------------------------------------- */
.content {
    max-width: 1440px;
    width: 98%;
    margin: 0 auto;
    padding: 12px 0 24px;
}

.box {
    width: 100%;
    background: var(--white);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* HEADER
---------------------------------------------------------- */
.header {
    background: #ffffff;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 90px;
    border-bottom: 1px solid var(--border);
}

.companylogo {
    margin: 0;
    float: none;
    display: flex;
    align-items: center;
}

.companylogo img {
    max-width: 220px;
    height: auto;
    display: block;
}

.sitelogo {
    margin: 0;
    float: none;
    display: flex;
    align-items: center;
}

.sitelogo img {
    max-height: 44px;
    width: auto;
    display: block;
}

/* NAVIGATION — override Office2010Silver to white/light theme
---------------------------------------------------------- */
.menu {
    display: block;
    clear: both;
    background: #f8f9fb;
    border-bottom: 1px solid var(--border);
}

/* Strip all skin background-images from every element in the menu */
div.RadMenu_Office2010Silver,
div.RadMenu_Office2010Silver * {
    background-image: none !important;
}

/* Root bar */
.RadMenu_Office2010Silver .rmRootGroup,
.RadMenu_Office2010Silver .rmHorizontal {
    background: #f8f9fb !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Root items */
.RadMenu_Office2010Silver .rmRootGroup > .rmItem > .rmLink {
    color: var(--primary) !important;
    font-family: 'Inter', Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 11px 16px !important;
    border: none !important;
    background: transparent !important;
    text-shadow: none !important;
}

.RadMenu_Office2010Silver .rmRootGroup > .rmItem.rmFocused > .rmLink,
.RadMenu_Office2010Silver .rmRootGroup > .rmItem > .rmLink:hover {
    background: #edf1f8 !important;
    color: var(--primary) !important;
    border: none !important;
}

/* Separator */
.RadMenu_Office2010Silver .rmSeparator {
    background: var(--border) !important;
    border: none !important;
    width: 1px !important;
    margin: 8px 0 !important;
}

/* CONTENT AREA
---------------------------------------------------------- */
.siteContent {
    min-height: 500px;
    text-align: left;
    padding: 12px 16px;
}

#header {
    position: relative;
    margin-bottom: 0;
    color: var(--text);
    padding: 0 12px;
}

#header h1 {
    font-weight: 700;
    padding: 5px 0;
    margin: 0;
    color: var(--primary);
    border: none;
    line-height: 2em;
    font-size: 28px !important;
}

.column-in {
    margin: 0;
    padding: 0.5em 1em;
}

#main {
    padding: 16px;
    background-color: var(--white);
    border-radius: var(--radius) 0 0 0;
}

/* FOOTER
---------------------------------------------------------- */
.footer,
.nav,
.section {
    width: 95%;
    padding: 0;
    margin: 0;
}

.footer {
    padding: 16px 24px;
    text-align: center;
    margin-top: 0;
}

.siteFooterText {
    color: var(--muted);
    font-size: 0.85em;
}

/* TYPOGRAPHY
---------------------------------------------------------- */
a:link    { color: var(--primary-hover); text-decoration: none; }
a:visited { color: var(--primary); }
a:hover   { color: var(--accent); text-decoration: underline; }
a:active  { color: var(--accent); }

p, ul {
    margin-bottom: 16px;
    line-height: 1.7em;
}

.heading {
    padding-top: 28px;
    font-size: 1.05em;
}

.h1, .h2, .h3, .h4, .h5, .h6 {
    font-size: 1.5em;
    color: var(--primary);
    font-weight: 600;
}

.h1 { font-size: 2em; }
.h2 { font-size: 1.5em; }
.h3 { font-size: 1.2em; padding: 14px 0 5px; font-weight: 600; }
.h4 { font-size: 1.05em; }
.h5, .h6 { font-size: 1em; }

/* FORM ELEMENTS
---------------------------------------------------------- */
fieldset {
    border: 1px solid var(--border);
    padding: 0 1.2em 1.2em;
    margin: 0 0 1.4em;
    border-radius: var(--radius);
}

legend {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--primary);
    padding: 0 6px;
}

textarea {
    min-height: 75px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 0.95em;
    color: var(--text);
    width: 100%;
    resize: vertical;
}

input[type="text"],
input[type="password"] {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 0.95em;
    font-family: inherit;
    color: var(--text);
    width: 200px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

input[type="text"]:focus,
input[type="password"]:focus {
    border-color: var(--primary-hover);
    outline: none;
    box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.15);
}

select {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.95em;
    font-family: inherit;
    color: var(--text);
    background: var(--white);
}

input[type="submit"],
input[type="button"] {
    font-size: 0.95em;
    font-family: inherit;
    font-weight: 600;
    padding: 8px 20px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

input[type="submit"]:hover,
input[type="button"]:hover {
    background: var(--primary-hover);
    color: var(--white);
}

/* Button with a FontAwesome icon — wrap the <input> in <span class="fa-btn-wrap fa-btn-*"> */
.fa-btn-wrap { position: relative; display: inline-block; }
.fa-btn-wrap input[type="button"],
.fa-btn-wrap input[type="submit"] { padding-left: 34px; }
.fa-btn-wrap::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--white);
    pointer-events: none;
    z-index: 1;
}
.fa-btn-submit::before { content: "\f058"; } /* circle-check */

/* LABEL / FIELD
---------------------------------------------------------- */
.label {
    margin: 6px 0 0;
    width: 120px;
    float: left;
    display: block;
    font-weight: 600;
    color: var(--text);
    font-size: 0.9em;
}

.field {
    margin: 6px 0 0;
    display: inline-block;
}

.clearfix { clear: both; }
.clear    { clear: both; }

/* GRID UTILITIES
---------------------------------------------------------- */
.gridmenu { margin: 0; }
.grid     { margin: 0 0 15px; }
.tabstrip { padding-top: 8px; }

.tabmultipage {
    width: 100%;
    min-height: 450px;
    border: 1px solid var(--border);
    border-top: none;
}

.tabmultipageinside { padding: 6px; }

/* LOGIN
---------------------------------------------------------- */
.logonform {
    max-width: 440px;
    margin: 32px auto;
    text-align: center;
}

.logonformcentre {
    max-width: 440px;
    margin: 0 auto;
    display: block;
}

/* HOME GRID
---------------------------------------------------------- */
.image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
}

.image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    transition: opacity 0.2s;
}

.image:hover { opacity: 0.88; }

/* SPLIT LAYOUT
---------------------------------------------------------- */
.homesplitleft {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: block;
    float: left;
    width: 480px;
}

.homesplitright {
    margin-left: 490px;
    display: block;
    float: right;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* MISC
---------------------------------------------------------- */
.bodypopup {
    background: var(--white);
    margin: 5px;
}

.popupbutton {
    text-align: center;
    padding: 5px;
}

.photoholder {
    padding: 5px;
    vertical-align: middle;
    text-align: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 350px;
    height: 350px;
}

.profile {
    float: right;
    vertical-align: middle;
}

.page {
    width: 95%;
    margin: 0 auto;
}

/* TABLE HELPERS
---------------------------------------------------------- */
#main1, #main2 { margin: 0; padding: 0; }
#left  { float: left;  width: 500px; margin: 0; padding: 0; }
#right { float: right; width: 150px; margin: 0; padding: 0; }
#middle { margin: 0 150px; }

.cleaner {
    clear: both;
    height: 1px;
    font-size: 1px;
    border: none;
    margin: 0;
    padding: 0;
    background: transparent;
}

.copy { text-align: center; font-size: 80%; }

/* VALIDATION
---------------------------------------------------------- */
.field-validation-error  { color: #c0392b; font-size: 0.875em; }
.field-validation-valid  { display: none; }
.input-validation-error  { border: 1px solid #c0392b !important; background: #fff5f5; }
.validation-summary-errors { font-weight: 700; color: #c0392b; }
.validation-summary-valid { display: none; }
.error { color: #c0392b; }

/* TEXT BOX HELPERS
---------------------------------------------------------- */
.text-box            { width: 30em; }
.text-box.multi-line { height: 6.5em; }
.tri-state           { width: 6em; }

/* LOGIN DISPLAY
---------------------------------------------------------- */
#logindisplay {
    font-size: 1em;
    display: block;
    text-align: right;
    margin: 10px;
    color: var(--text);
}

#logindisplay a:link,
#logindisplay a:visited { color: var(--primary-hover); text-decoration: underline; }
#logindisplay a:hover   { color: var(--accent); text-decoration: none; }

/* TELERIK GRID BUTTON FIX (webkit)
---------------------------------------------------------- */
.RadGrid button,
.RadGrid [type="button"] {
    -webkit-appearance: button !important;
    -webkit-border-radius: revert !important;
}

/* NAV MENU — float last group right (Log off / Log on)
---------------------------------------------------------- */
div.RadMenu .rmRootGroup .rmLast { float: right !important; }
div.RadMenu .rmGroup     .rmLast { float: none   !important; }