/* ===========================================================================
   Swift Weborders — Swift Mega Logistics huisstijl
   Font: PT Sans (Google Fonts, geladen in default.master)
   Palette:
     #e40749  brand red          #cb0641  brand red hover
     #545452  body text          #ffffff  card bg
     #ececec  page bg            #f5f5f5  zebra rows / hover bg
     #dcdcdc  borders            #3e3e3e  donker accent
   =========================================================================== */

body
{
    background-color: #ececec;
    color: #545452;
    font: 14px "PT Sans", Calibri, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a, a:visited
{
    color: #e40749;
    text-decoration: none;
}

a:hover
{
    color: #cb0641;
    text-decoration: underline;
}

/* Table border rond th-rij */
.maindiv table .thr
{
    border: 1px solid #dcdcdc;
}

/* Table header */
.mainDiv table th
{
    padding: 8px 10px;
    font-weight: 400;
    font-size: 13px;
    color: #ffffff;
    background: #e40749;
    letter-spacing: 0.3px;
}

.mainDiv table th a
{
    color: #ffffff;
}

.mainDiv table th a:hover
{
    color: #ffffff;
    text-decoration: underline;
}

/* Table cellen */
.mainDiv table td
{
    background: #ffffff;
    border-top: 1px solid #ececec;
    padding: 6px 10px;
}

/* Zebra-striping op tables met class tbl */
.mainDiv .tbl tbody tr:nth-child(even) td
{
    background: #f5f5f5;
}

.mainDiv .tbl tbody tr:hover td
{
    background: #fde7ee;
}

/* Content card */
.mainDiv
{
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
}

/* Header */
.header
{
    color: #545452;
    border-bottom: 2px solid #e40749;
}

.header #logo
{
    background: #ffffff url('../../images/logo.png') no-repeat left top;
    background-size: contain;
    width: 289px;
    height: 112px;
}

.header .rest
{
    padding-top: 45px;
}

/* Menu */
#menu ul li a, #menu ul li a.current:visited, #menu li a.current
{
    text-decoration: none;
    color: #3e3e3e;
    font-weight: 700;
    font-size: 13px;
}

#menu ul li span
{
    color: #3e3e3e;
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

#menu ul li span .menu-icon
{
    vertical-align: middle;
    margin-right: 4px;
    color: #3e3e3e;
    transition: color 0.15s ease;
}

#menu li span.current:hover, #menu li span:hover
{
    background-image: none;
    background-color: #fde7ee;
}

#menu li span.current:hover .menu-icon, #menu li span:hover .menu-icon,
#menu li span.current:hover a, #menu li span:hover a
{
    color: #e40749;
}

/* Buttons */
input[type="submit"], input[type="reset"], button
{
    font-family: "PT Sans", Calibri, Arial, sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #ffffff;
    background-color: #e40749;
    border: none;
    border-radius: 6px;
    padding: 8px 18px;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.05s ease;
}

input[type="submit"]:hover, input[type="reset"]:hover, button:hover
{
    background-color: #cb0641;
}

input[type="submit"]:active, input[type="reset"]:active, button:active
{
    transform: translateY(1px);
}

input[type="reset"]
{
    background-color: #838382;
}

input[type="reset"]:hover
{
    background-color: #656565;
}

/* Form inputs */
input[type="text"], input[type="password"], input[type="email"], input[type="number"], textarea, select
{
    font-family: "PT Sans", Calibri, Arial, sans-serif;
    font-size: 13px;
    color: #545452;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    padding: 6px 8px;
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, textarea:focus, select:focus
{
    border-color: #e40749;
    outline: none;
    box-shadow: 0 0 0 3px rgba(228, 7, 73, 0.15);
}

input[type="text"]:disabled, input[type="password"]:disabled, textarea:disabled, select:disabled
{
    background: #f5f5f5;
    color: #838382;
}

/* Grid action icons (Detail / Kopie / PDF in orderhistorie) */
.action-icon
{
    color: #3e3e3e;
    vertical-align: middle;
    transition: color 0.15s ease, transform 0.05s ease;
}

a:hover .action-icon
{
    color: #e40749;
}

a:active .action-icon
{
    transform: translateY(1px);
}

/* Login pagina */
.loginBox
{
    background-color: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.loginBox table
{
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
}

.loginBox table tr,
.loginBox table th,
.loginBox table td
{
    border: 0 !important;
    background: #ffffff;
}

.loginBox table th
{
    background: #ffffff url('../../images/logo.png') no-repeat 10px center;
    background-size: contain;
    height: 120px;
    padding-bottom: 30px;
    color: #e40749;
}

.loginBox table td
{
    padding: 8px 5px;
}

.loginBox table tr.th + tr td
{
    padding-top: 40px;
}

/* Foto/handtekening tabel — schaal mee met containerbreedte */
.tblPhotos
{
    width: 100%;
    table-layout: fixed;
}

.tblPhotos td
{
    vertical-align: top;
}

.tblPhotos img
{
    max-width: 100%;
    height: auto;
    display: block;
}

/* Tooltip */
#tooltip
{
    position: relative;
    display: inline-block;
    cursor: help;
    vertical-align: middle;
}

#tooltip div
{
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 260px;
    padding: 10px 12px;
    margin-top: 6px;
    background-color: #ffffff;
    color: #545452;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    font-size: 12px;
    white-space: normal;
}

#tooltip:hover div, #tooltip:focus div
{
    display: block;
}

#tooltip div p
{
    margin: 4px 0 0 0;
}

/* ---- Responsive ---- */

/* Tabellen scrollen horizontaal op smalle schermen */
@media (max-width: 900px)
{
    .mainDiv table
    {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Header en menu stapelen op mobiel */
@media (max-width: 640px)
{
    #wrapper
    {
        padding: 0 6px;
    }

    .header #logo
    {
        float: none;
        width: 200px;
        height: 78px;
        margin-bottom: 8px;
    }

    .header .rest
    {
        float: none;
        padding-top: 0;
    }

    #menu ul
    {
        display: flex;
        flex-wrap: wrap;
    }

    #menu ul li
    {
        float: none;
    }

    #menu ul li span
    {
        min-width: 80px;
        height: auto;
        padding: 6px 4px;
        margin-bottom: 4px;
    }

    .loginBox table th
    {
        height: 80px;
    }

    input[type="text"], input[type="password"], input[type="email"],
    input[type="number"], textarea, select
    {
        max-width: 100%;
        box-sizing: border-box;
    }
}