/* DeDeFleet Mobile — dedenet-mobile.css
   Replaces iWebKit 5.04 (style.css) + dedenet.css */

:root {
    --brand:      #0371b1;
    --brand-text: #324f85;
    --border:     #878787;
    --bg:         #efeff4;
    --card-bg:    #fff;
    --text:       #000;
    --muted:      #7f7f7f;
    --gray-title: #4c4c4c;
    --row-h:      44px;
    --radius:     8px;
}

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: var(--text);
    -webkit-text-size-adjust: 100%;
    min-height: 100vh;
}

body.list { background: #fff; }

img { border: 0; }

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

input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }

/* ── Topbar ── */
#topbar {
    position: sticky;
    top: 0;
    width: 100%;
    height: var(--row-h);
    background: var(--brand);
    display: flex;
    align-items: center;
    z-index: 100;
    margin-bottom: 13px;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

#title {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: var(--row-h);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    padding: 0 90px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
}

#leftnav {
    position: absolute;
    left: 9px;
    top: 0;
    height: var(--row-h);
    display: flex;
    align-items: center;
    z-index: 5;
}

#leftnav a {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    padding: 4px 6px;
}

#leftnav img { height: 28px; width: 28px; }

#rightbutton {
    position: absolute;
    right: 9px;
    top: 0;
    height: var(--row-h);
    display: flex;
    align-items: center;
    z-index: 5;
}

#rightbutton a {
    display: flex;
    align-items: center;
    color: #fff;
    padding: 4px 6px;
}

#rightbutton img { height: 28px; width: 28px; }

/* ── Content ── */
#content {
    width: 100%;
    position: relative;
    min-height: 250px;
    margin-top: 10px;
    overflow: hidden;
}

body.list #content { margin-top: -13px; }

/* ── Section heading ── */
.graytitle {
    position: relative;
    display: block;
    font-weight: bold;
    font-size: 17px;
    color: var(--gray-title);
    left: 9px;
    right: 20px;
    padding: 1px 0 3px 8px;
}

/* ── Card list (pageitem) ── */
ul.pageitem {
    list-style: none;
    margin: 3px 9px 17px;
    padding: 0;
    background: var(--card-bg);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    position: relative;
    display: block;
}

/* ── Row base (shared by menu / checkbox / select / button / smallfield) ── */
.menu, .checkbox, .select, li.button, li.smallfield {
    position: relative;
    list-style-type: none;
    display: block;
    height: 43px;
    overflow: hidden;
    border-top: 1px solid var(--border);
}

ul.pageitem li:first-child,
.menu:first-child,
.checkbox:first-child,
.select:first-child,
li.button:first-child,
li.smallfield:first-child { border-top: 0; }

/* ── Menu row ── */
.menu a {
    display: block;
    height: 43px;
    width: 100%;
    text-decoration: none;
    color: var(--text);
}

.menu a img { width: auto; height: 32px; margin: 5px 0 0 5px; float: left; }

.menu .name {
    margin: 11px 0 0 7px;
    font-size: 17px;
    font-weight: bold;
    color: var(--text);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    float: left;
}

.menu .description {
    margin: 11px 30px 0 7px;
    width: 20%;
    font-size: 17px;
    color: var(--brand-text);
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 75%;
    white-space: nowrap;
    float: left;
}

.menu .comment {
    margin: 11px 30px 0 0;
    font-size: 17px;
    color: var(--brand-text);
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 75%;
    white-space: nowrap;
    float: right;
}

.buttonname {
    margin: 10px 7px 0 7px;
    width: 100%;
    font-size: 15px;
    color: var(--brand-text);
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    float: left;
    display: block;
    line-height: 23px;
}

/* ── Arrow indicator ── */
.arrow,
.menu .arrow,
.list .arrow {
    position: absolute !important;
    width: 8px !important;
    height: 13px !important;
    right: 10px;
    top: 15px;
    margin: 0 !important;
    background: url("../images/arrow.png") 0 0 no-repeat;
    pointer-events: none;
}

a:hover .arrow { background-position: 0 -13px !important; }

/* ── Textbox row ── */
.textbox {
    padding: 5px 9px;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--border);
}

.textbox:first-child { border-top: 0; }

.textbox textarea {
    padding: 0;
    margin-top: 5px;
    font-size: medium;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

.header {
    display: block;
    font-weight: bold;
    color: rgb(73,102,145);
    font-size: 12pt;
    margin-bottom: 6px;
    line-height: 14pt;
}

/* ── Button row ── */
li.button input[type="button"],
li.button input[type="submit"] {
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    border-radius: 0;
    font-weight: bold;
    font-size: 17px;
    background: none;
    color: var(--brand);
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* ── Select row ── */
select {
    -webkit-appearance: none;
    appearance: none;
    height: 100%;
    width: 100%;
    border: 0;
}

.select select {
    border-radius: 0;
    color: var(--text);
    font-weight: bold;
    font-size: 17px;
    padding: 0 36px 0 9px;
    cursor: pointer;
}

.select .arrow {
    top: 18px;
    background: url('../images/arrow.png') no-repeat;
    transform: rotate(90deg);
}

/* ── Small field (inline label + input) ── */
.smallfield .name {
    width: 48%;
    position: absolute;
    left: 0;
    font-size: 17px;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 43px;
    padding-left: 5px;
    overflow: hidden;
}

.smallfield input[type="text"],
.smallfield input[type="password"],
.smallfield input[type="number"] {
    width: 50%;
    position: absolute;
    right: 0;
    height: 43px;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    padding: 0 8px;
    background: transparent;
    border-radius: 0;
    font-weight: bold;
    font-size: 17px;
}

/* ── Checkbox row ── */
li.checkbox {
    padding: 0 7px;
}

.checkbox .name {
    margin: 11px 0 0 7px;
    font-size: 17px;
    font-weight: bold;
    color: var(--text);
    float: left;
}

input[type="checkbox"] {
    width: 94px;
    height: 27px;
    background: url('../images/checkbox.png') no-repeat;
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    float: right;
    margin: 8px 4px 0 0;
    cursor: pointer;
}

input[type="checkbox"]:checked { background-position: 0 27px; }

/* ── List body (body.list + withimage items) ── */
.list ul {
    background-color: #fff;
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.list #content li {
    height: 40px;
    border-bottom: 1px solid #e1e1e1;
    list-style: none;
}

.list .withimage { height: 90px !important; }

.list .withimage a,
.list .withimage:hover a { height: 81px !important; display: block; text-decoration: none; color: var(--text); position: relative; }

.list ul img {
    width: 90px;
    height: 90px;
    position: absolute;
    left: 0;
    top: 0;
}

.list .withimage .name {
    margin: 13px 0 0 90px;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 63% !important;
    white-space: nowrap;
    display: block;
}

.list .withimage .comment {
    margin: 10px auto auto 90px !important;
    font-size: 12px;
    color: var(--muted);
    display: block;
    max-width: 63% !important;
}

.list .withimage .arrow { top: 39px !important; }

/* dedenet small-image overrides */
.list .imgsmall { margin: 0 0 0 -15px; }

.list .txtsmall { margin: 13px 0 0 45px !important; }

.list .withimage .cmtsmall { margin: 10px auto auto 45px !important; }

/* standalone comment/name spans */
.comment { font-size: 12px; color: var(--muted); display: block; }

.name a { display: inline; }

/* ── Login table ── */
table.list { margin-left: auto; margin-right: auto; }

table.list input { width: 300px; }

/* ── noeffect: marker class only, no styles needed ── */