/* Main stylesheet for Timesheets V2 */

/* ----------------------------------------------------------
   Base
---------------------------------------------------------- */
body {
    margin: 0;
    background-color: #f0f2f5;
}

/* ----------------------------------------------------------
   App chrome - topbar + main content card
---------------------------------------------------------- */
.app-topbar {
    background: #fff;
    border-bottom: 1px solid #dee2e6;
    padding: .5rem 1.25rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

.app-brand {
    font-size: 1.3rem;
    color: #212529;
    text-decoration: none;
    line-height: 1;
}

.app-brand:hover {
    color: #555;
    text-decoration: none;
}

.topbar-logout {
    margin: 0;
}

.topbar-username {
    display: inline;
}

.app-content {
    background: #fff;
    border-radius: .4rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    padding: 1.75rem;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

/* ----------------------------------------------------------
   Page layout primitives
---------------------------------------------------------- */
.page-narrow   { max-width: 400px; margin: 0 auto; }
.page-form     { max-width: 500px; margin: 0 auto; }
.page-centered { max-width: 420px; margin: 0 auto; text-align: center; }

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.page-heading {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

/* ----------------------------------------------------------
   Component: Large icons
---------------------------------------------------------- */
.icon-xl { font-size: 2.5rem; }

/* ----------------------------------------------------------
   Component: Role selection cards
---------------------------------------------------------- */
.role-card {
    cursor: pointer;
    flex: 1;
    border: 2px solid #dee2e6;
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    transition: border-color .15s, background .15s;
}

.role-card:hover {
    border-color: #adb5bd;
    background: #f8f9fa;
}

.role-card input[type=radio] {
    position: absolute;
    opacity: 0;
}

.role-card:has(input[type=radio]:checked),
input[type=radio]:checked + .role-card,
input[type=radio]:focus + .role-card {
    border-color: #007bff;
    background: #e8f0fe;
}

.role-card-icon { font-size: 1.4rem; }
.role-card-hint { font-size: .8rem; }

/* ----------------------------------------------------------
   Form helpers
---------------------------------------------------------- */
.toggle-pw-btn {
    line-height: 1;
}

/* ----------------------------------------------------------
   Toast notifications
---------------------------------------------------------- */
#msg-toast-wrap {
    position: fixed;
    bottom: 5.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    pointer-events: none;
}

.msg-toast {
    padding: .55rem 1.1rem;
    border-radius: 2rem;
    font-size: .875rem;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
    opacity: 1;
    transition: opacity .35s ease;
    white-space: nowrap;
    pointer-events: none;
}

.msg-toast-success { background: #198754; color: #fff; }
.msg-toast-info    { background: #0dcaf0; color: #000; }
.msg-toast-warning { background: #ffc107; color: #000; }
.msg-toast-error   { background: #dc3545; color: #fff; }

/* ----------------------------------------------------------
   Phone mode
---------------------------------------------------------- */
body.mode-phone .app-content {
    padding: 1.1rem;
    margin-top: .75rem;
    margin-bottom: 1rem;
}

body.mode-phone .container {
    padding-left: .75rem;
    padding-right: .75rem;
}

body.mode-phone .page-heading {
    font-size: 1.05rem !important;
    font-weight: 600;
}

@media (max-width: 767px) {
    .topbar-username { display: none; }
    .topbar-logout-label { display: none; }
}

@media (min-width: 1400px) {
    .container { max-width: 1320px; }
}

@media (min-width: 1700px) {
    .container { max-width: 1600px; }
}