/* Reset */
body, html {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   height: 100%;
}

/* Full-height layout */
body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
}

header {
   background-color: var(--tsc-sidebar-bg);
   border-bottom: 1px solid var(--tsc-border);
}

header .navbar-brand {
   font-weight: bold;
   color: var(--tsc-primary);
}

main {
   flex: 1; /* Takes up all available space */
   width: 100%; /* Full width */
   padding: 2rem;
   background-color: var(--tsc-content-bg);
   color: var(--tsc-text);
}

footer {
   background-color: var(--tsc-sidebar-bg);
   color: var(--tsc-text-muted);
   text-align: center;
   padding: 1rem 0;
}

.navbar {
   background-color: var(--tsc-sidebar-bg);
   padding: 0.5rem 1rem;
}
.navbar-nav .nav-link {
   color: var(--tsc-text);
   border-radius: 30px;
   margin: 0 0.5rem;
   padding: 0.5rem 1rem;
}
.navbar-nav .nav-link.active {
   background-color: var(--tsc-card-bg);
   color: var(--tsc-text);
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.nav-item .nav-link .tsc-icon {
   margin-right: 5px;
}

.badge {
   font-size: 0.75rem;
   position: relative;
   background-color: #ff3e3e;
   color: #fff;
}

.dropdown-menu {
   overflow-y: auto;
   background-color: var(--tsc-menu-bg);
   border-color: var(--tsc-menu-border);
   color: var(--tsc-text);
}

.navbar-nav .tsc-shell-header-btn {
   margin: 0;
}

/* Legacy nav-user-panel removed — header uses tsc-shell-header-user in shared theme */

/* Centered box */
.center-box-container {
    display: flex;
    justify-content: center;   /* horizontal centering */
    align-items: flex-start;   /* vertical alignment at the top */
    flex: 1;                   /* optional: takes remaining space if inside a flex parent */
    width: 100%;               /* full width */
    min-height: 100vh;         /* full viewport height */
    background-color: var(--tsc-content-bg);
}

.center-box {
   width: 20rem; /* Fixed width for the card */
   background-color: var(--tsc-card-bg);
   border-radius: var(--tsc-radius-lg);
   box-shadow: var(--tsc-shadow-card);
   padding: 1.5rem;
}

/* Error box styling */
.error-box {
   padding: 1rem;
   background-color: #f8d7da; /* Light red background for error */
   color: #842029; /* Dark red text */
   border: 1px solid #f5c2c7;
   border-radius: var(--tsc-radius-lg);
   font-size: 0.875rem;
   text-align: center;
   margin-bottom: 1rem;
}

.login-card {
   width: 20rem;
}

.logo-img {
   width: 242px;
   height: 162px;
}

.box-max {
   width: 100%;
}

.account-photo-preview {
   width: 4rem;
   height: 4rem;
   flex-shrink: 0;
   border-radius: 9999px;
   overflow: hidden;
   border: 1px solid var(--tsc-border);
   background-color: var(--tsc-header-btn-hover-bg);
   display: flex;
   align-items: center;
   justify-content: center;
}

.account-photo-preview__img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.account-photo-preview__placeholder {
   color: var(--tsc-text-muted);
   display: flex;
   align-items: center;
   justify-content: center;
}