/* Custom application styles — loaded after the Flacto theme */

/* Flacto's core.css shrinks Bootstrap's default grid gutter to 10px of column
   padding each side (20px total between columns). That's fine for dense table/tile
   layouts, but reads as cramped for side-by-side form fields - restore Bootstrap's
   standard 15px/side gutter (30px total) specifically within forms, without
   touching the tighter gutter used elsewhere (tables, dashboard tiles, etc.). */
.form-horizontal .row {
    margin-left: -15px;
    margin-right: -15px;
}

.form-horizontal .row > [class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
}

/* Flacto's menu.css sets #topnav .topbar-main .nav > li > a to white text on the
   white topbar background, making the account/login link in _LoginPartial invisible.
   Override with the same dark color the rest of the top nav (.navigation-menu) uses. */
#topnav .topbar-main .menu-extras .nav > li > a {
    color: #435966 !important;
}

/* Flacto's menu.css floats .logo (or, on the auth pages, sets float:none) but never
   established a layout for an icon alongside the wordmark. inline-flex keeps .logo
   an inline-level box either way, so it still floats correctly in the topbar/sidebar
   and still centers correctly via .logo-alt-box's text-align:center on auth pages. */
.logo {
    display: inline-flex !important;
    align-items: center;
}

.logo-mark {
    width: 28px;
    height: 28px;
    margin-right: 8px;
}

.logo-alt-box .logo-mark-lg {
    width: 40px;
    height: 40px;
}

/* Left-hand sidebar navigation (desktop).
   Reuses the same _NavMenu partial as the mobile dropdown in #topnav, which
   stays untouched below the 1025px breakpoint (Flacto's own responsive menu). */
#sidebar-menu {
    display: none;
}

@media (min-width: 1025px) {

    /* Hide the old horizontal top menu; the sidebar replaces it. The slim
       top bar still carries the login/account link on the right. */
    #topnav .topbar-left,
    #topnav .navbar-custom {
        display: none;
    }

    #topnav {
        left: 240px;
    }

    #topnav .container {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    #sidebar-menu {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 240px;
        overflow-y: auto;
        background-color: #ffffff;
        box-shadow: 0 1px 2px rgba(67, 89, 102, 0.05);
        z-index: 1030;
    }

    #sidebar-menu .logo {
        display: block;
        float: none;
        margin: 0;
        padding: 20px;
        border-bottom: 1px solid rgba(67, 89, 102, 0.1);
    }

    #sidebar-menu .navigation-menu {
        list-style: none;
        margin: 0;
        padding: 10px 0;
    }

    #sidebar-menu .navigation-menu > li {
        display: block;
        float: none;
    }

    #sidebar-menu .navigation-menu > li > a {
        display: block;
        padding: 12px 20px;
        margin: 0;
        color: #435966;
        border-left: 3px solid transparent;
        transition: all .3s ease;
    }

    #sidebar-menu .navigation-menu > li > a i {
        font-size: 18px;
        margin-right: 10px;
        color: rgba(67, 89, 102, 0.8);
        vertical-align: middle;
    }

    #sidebar-menu .navigation-menu > li > a:hover,
    #sidebar-menu .navigation-menu > li > a:focus {
        color: #57c5a5;
        background-color: rgba(87, 197, 165, 0.08);
        border-left-color: #57c5a5;
    }

    #sidebar-menu .navigation-menu > li > a:hover i,
    #sidebar-menu .navigation-menu > li > a:focus i {
        color: #57c5a5;
    }

    .wrapper {
        margin-left: 240px;
    }

    .footer {
        left: 240px;
    }
}