/* Shared presentation layer over the existing Bootstrap 4 components. */
:root {
    --softesc-ink: #223347;
    --softesc-muted: #5a5f6b;
    --softesc-canvas: #f8f9fa;
    --softesc-border: #e0e0e0;
    --softesc-paper: #fff;
    --softesc-heading: "Palatino Linotype", "Book Antiqua", Georgia, serif;
    --softesc-body: "Trebuchet MS", "Gill Sans", sans-serif;
}

.softesc-app, .softesc-login {
    color: var(--softesc-ink);
    font-family: var(--softesc-body);
    background: var(--softesc-canvas);
    -webkit-font-smoothing: antialiased;
}

.softesc-app :focus-visible, .softesc-login :focus-visible {
    outline: 3px solid #007bff;
    outline-offset: 3px;
}

.skip-link {
    position: fixed;
    top: -100px;
    left: 1rem;
    z-index: 1100;
    padding: .75rem 1rem;
    background: white;
    color: var(--softesc-ink);
    border-radius: .35rem;
}

.skip-link:focus { top: .5rem; }

/* Navigation: keep the original navy and pale grey sidebar. */
.softesc-app .sb-topnav {
    height: 64px;
    padding: 0 1.25rem;
    box-shadow: 0 2px 12px rgba(34, 51, 71, .12);
}

.softesc-app .sb-topnav .navbar-brand { padding: 0; gap: .85rem; }
.softesc-app #logo-svg { width: 54px; height: 42px; }
.brand-caption { font-size: .78rem; padding-left: .85rem; border-left: 1px solid rgba(255, 255, 255, .25); }
.softesc-app #sidebarToggle { margin-left: 1.25rem; width: 40px; height: 40px; border-radius: .4rem; }
.softesc-app #sidebarToggle:hover { background: rgba(255, 255, 255, .1); }
.softesc-app #userDropdown { gap: .25rem; font-size: .85rem; }

.softesc-app.sb-nav-fixed #layoutSidenav #layoutSidenav_nav {
    position: fixed;
    top: 0;
    left: 0;
    padding-top: 64px;
    border-right: 1px solid var(--softesc-border);
    background: var(--sidebar-bg);
}

.softesc-app.sb-nav-fixed #layoutSidenav #layoutSidenav_content {
    top: 64px;
    min-height: calc(100vh - 64px);
}

.softesc-app .sb-sidenav-menu { overflow-y: auto; }
.softesc-app #sidebar-menu { padding: 1rem .7rem !important; gap: .3rem; }
.sidebar-heading, .eyebrow {
    color: var(--softesc-muted);
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.sidebar-heading { padding: 1.2rem .7rem .4rem; }
.softesc-app .sb-sidenav-menu .nav-link { padding: .8rem .7rem; border-radius: .4rem; font-size: .86rem; }
.softesc-app .sb-sidenav-menu .nav-link.active {
    color: var(--softesc-ink) !important;
    background: #e0e0e0;
    box-shadow: inset 3px 0 0 var(--softesc-ink);
    font-weight: 700;
}

.softesc-app .sb-sidenav-menu .nav-link.active .sb-nav-link-icon { color: var(--softesc-ink) !important; }
.sidebar-footer { display: grid; gap: .4rem; padding: 1.1rem 1.4rem; border-top: 1px solid var(--softesc-border); font-size: .72rem; color: var(--softesc-muted); }
.sidebar-footer .sidebar-heading { padding: 0; }
.softesc-app .dropdown-menu { padding: .4rem; border: 1px solid var(--softesc-border); border-radius: .6rem; box-shadow: 0 12px 28px rgba(34, 51, 71, .12); }
.softesc-app .dropdown-item { padding: .7rem; border-radius: .25rem; font-size: .85rem; }

/* Workspace and module directory. */
.softesc-app .workspace-content { padding: 1.65rem 2rem 2.5rem; margin-top: 0 !important; }
.workspace-header { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--softesc-border); }
.eyebrow { margin: 0 0 .65rem; }
.workspace-header h1, .softesc-app main h1 { color: var(--softesc-ink); font-family: var(--softesc-heading); font-size: clamp(1.8rem, 3vw, 2.65rem); letter-spacing: -.035em; margin-bottom: .5rem; }
.workspace-description { color: var(--softesc-muted); font-size: .9rem; margin: 0; line-height: 1.7; }
.workspace-date { display: flex; align-items: center; gap: .65rem; padding: .65rem .85rem; background: white; border: 1px solid var(--softesc-border); border-radius: .4rem; font-size: .75rem; white-space: nowrap; }
.workspace-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-heading h2 { margin: 0; font-size: 1rem; font-weight: 700; }
.section-heading > span { font-size: .75rem; color: var(--softesc-muted); }
.dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.dashboard-module {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.35rem;
    border: 1px solid var(--softesc-border);
    border-top: 3px solid var(--module-color);
    border-radius: .6rem;
    background: var(--softesc-paper);
    color: var(--softesc-ink);
    box-shadow: 0 3px 8px rgba(34, 51, 71, .025);
    transition: transform .18s ease, box-shadow .18s ease;
    animation: workspace-reveal .35s ease both;
}

.dashboard-module:hover { color: var(--softesc-ink); text-decoration: none; transform: translateY(-3px); box-shadow: 0 10px 24px rgba(34, 51, 71, .09); }
.module-topline, .module-bottomline { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.module-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: .6rem; background: #f5f5f5; background: color-mix(in srgb, var(--module-color) 14%, white); font-size: 1.1rem; }
.module-arrow { color: var(--softesc-muted); font-size: .7rem; transition: transform .18s ease; }
.dashboard-module:hover .module-arrow { transform: translateX(3px); }
.dashboard-module h3 { font-size: .95rem; font-weight: 700; margin: 1.15rem 0 .9rem; }
.module-bottomline { margin-top: auto; }
.module-value { font-family: var(--softesc-heading); font-size: clamp(1.35rem, 2vw, 1.9rem); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.module-caption { font-size: .77rem; color: var(--softesc-muted); }
.module-color-mark { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--module-color); }
.dashboard-module:nth-child(3n + 2) { animation-delay: .05s; }
.dashboard-module:nth-child(3n) { animation-delay: .1s; }

/* Existing forms, tables and modals share spacing, without changing semantic colors. */
.softesc-app .card { border: 1px solid var(--softesc-border); border-radius: .6rem; box-shadow: 0 3px 12px rgba(34, 51, 71, .035); }
.softesc-app .card-header { padding: 1rem 1.25rem; border-radius: .55rem .55rem 0 0; }
.softesc-app .card-header h5 { font-size: 1rem; }
.softesc-app .card-body { padding: 1.35rem; }
.softesc-app label { font-size: .82rem; font-weight: 700; }
.softesc-app .form-control { border-radius: .35rem; border-color: #ced4da; font-size: .88rem; }
.softesc-app .form-control:not(textarea):not([size]):not([multiple]) { min-height: 40px; }
.softesc-app .form-control:focus { box-shadow: 0 0 0 3px rgba(0, 123, 255, .12); }
.softesc-app .btn { border-radius: .35rem; font-size: .86rem; font-weight: 700; padding: .55rem .9rem; }
.softesc-app .btn-sm, .softesc-app .btn-group-sm > .btn { padding: .35rem .6rem; font-size: .75rem; }
.softesc-app .btn-link { font-weight: 400; }
.softesc-app .alert { border-radius: .45rem; font-size: .88rem; }
.softesc-app .modal-content { border: 0; border-radius: .7rem; box-shadow: 0 20px 70px rgba(34, 51, 71, .2); }
.softesc-app .modal-header { border-radius: .7rem .7rem 0 0; padding: 1.1rem 1.4rem; }
.softesc-app .modal-body { padding: 1.4rem; }
.softesc-app .modal-header .close { color: inherit; opacity: .9; }
.softesc-table-panel { background: white; border: 1px solid var(--softesc-border); border-radius: .6rem; padding: 1rem; }
.softesc-app .table { font-size: .82rem; color: var(--softesc-ink); }
.softesc-app .table td, .softesc-app .table th { padding: .85rem .75rem; vertical-align: middle; }
.softesc-app .table .thead-dark th { background: var(--softesc-ink); border-color: #5a5f6b; font-size: .75rem; font-weight: 700; }
.softesc-app .table-striped tbody tr:nth-of-type(odd) { background: #f8f9fa; }
.softesc-app .table-hover tbody tr:hover { background: #f5f5f5; }
.softesc-app .table-bordered td, .softesc-app .table-bordered th { border-color: var(--softesc-border); }
.softesc-app .dataTables_wrapper .dataTables_filter input { margin-left: .5rem; }
.softesc-app .dataTables_wrapper .dataTables_info { font-size: .75rem; color: var(--softesc-muted); }
.softesc-app .page-link { color: var(--softesc-ink); font-size: .8rem; }
.softesc-app footer { border-top: 1px solid var(--softesc-border); padding: 1rem 0 !important; }
.footer-product { color: var(--softesc-muted); font-size: .72rem; }

/* Login: an editorial introduction alongside the existing authentication form. */
.softesc-login { min-height: 100vh; display: flex; flex-direction: column; padding: 3rem; }
.login-shell { display: grid; grid-template-columns: 1.05fr 1fr; max-width: 1080px; width: 100%; margin: auto; border: 1px solid var(--softesc-border); border-radius: .85rem; overflow: hidden; background: white; box-shadow: 0 20px 60px rgba(34, 51, 71, .07); }
.login-intro { position: relative; display: flex; flex-direction: column; min-height: 580px; padding: 2.7rem; background: var(--softesc-ink); color: white; overflow: hidden; }
.login-intro::after { content: ""; position: absolute; width: 340px; height: 340px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; bottom: -240px; right: -80px; box-shadow: 0 0 0 48px rgba(255, 255, 255, .035), 0 0 0 96px rgba(255, 255, 255, .025); pointer-events: none; }
.login-wordmark { font-size: 1.15rem; letter-spacing: .2em; font-weight: 700; }
.login-wordmark span { display: block; font-size: .7rem; font-weight: 400; letter-spacing: .05em; margin-top: .4rem; color: #e0e0e0; }
.login-intro-copy { margin: auto 0; padding: 2rem 0; }
.login-intro .eyebrow { color: #e0e0e0; }
.login-intro h1 { font-family: var(--softesc-heading); font-weight: 400; font-size: clamp(2rem, 3.5vw, 3.1rem); line-height: 1.15; letter-spacing: -.035em; margin-bottom: 1.5rem; }
.login-intro-copy > p:last-child { font-size: .86rem; line-height: 1.8; color: #e0e0e0; }
.login-intro-footer { display: flex; align-items: center; gap: .65rem; font-size: .75rem; color: #e0e0e0; }
.login-form-panel { display: flex; align-items: center; padding: 2.7rem; }
.softesc-login .modern-login-card { width: 100%; max-width: 360px; margin: auto; border-radius: 0; overflow: visible; }
.softesc-login .modern-card-header { background: none; border: 0; padding: 0 0 1.2rem; }
.softesc-login .modern-logo { object-fit: contain; margin-bottom: 1.6rem; }
.softesc-login .modern-heading { font-family: var(--softesc-heading); font-size: 2.25rem; font-weight: 400; letter-spacing: -.03em; color: var(--softesc-ink); margin: 0 0 .5rem; }
.login-form-description { font-size: .85rem; color: var(--softesc-muted); }
.softesc-login .card-body { padding: 0; }
.softesc-login .modern-label { font-size: .8rem; color: var(--softesc-ink); font-weight: 700; margin-bottom: .5rem; }
.softesc-login .modern-label svg { margin-right: .35rem; color: var(--softesc-muted); }
.softesc-login .modern-input { height: 48px; padding: .7rem .85rem; border-radius: .4rem; box-shadow: none; font-size: .88rem; }
.softesc-login .modern-button { margin-top: .5rem; min-height: 48px; font-size: .9rem; }
.softesc-login .custom-footer { margin: 1.5rem 0 0 !important; background: none; }

@keyframes workspace-reveal {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 1400px) {
    .dashboard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .softesc-app .workspace-content { padding: 1.5rem; }
    .softesc-login { padding: 1.5rem; }
    .login-intro, .login-form-panel { padding: 2rem; }
}

@media (max-width: 767.98px) {
    .login-shell { grid-template-columns: 1fr; max-width: 460px; }
    .login-intro { min-height: 0; padding: 1.5rem 2rem; }
    .login-intro-copy, .login-intro-footer, .login-intro::after { display: none; }
    .login-form-panel { padding: 2rem; }
    .workspace-header { align-items: flex-start; flex-direction: column; gap: 1rem; }
}

@media (max-width: 575.98px) {
    .softesc-app .sb-topnav { padding: 0 .75rem; }
    .brand-caption { display: none; }
    .softesc-app .workspace-content { padding: 1.1rem .9rem 2rem; }
    .dashboard-grid { grid-template-columns: 1fr; gap: .75rem; }
    .dashboard-module { padding: 1.1rem; }
    .softesc-app .card-body, .softesc-app .modal-body { padding: 1rem; }
    .softesc-table-panel { padding: .65rem; }
    .softesc-app footer .container-fluid { flex-wrap: wrap; gap: .5rem; }
    .softesc-login { padding: .9rem; }
    .login-form-panel { padding: 1.75rem 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
    .softesc-app *, .softesc-login * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}