/* ==============================================
   main.css — Global app layout and utilities
   Only layout and structure. No colors or fonts.
   Brand overrides belong in global.css.
   Page-specific styles belong in page CSS files.
   ============================================== */

/* ---------- App shell ---------- */

body {
    background: var(--brand-background);
}

.max-container {
    margin-top: 30px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

.max-container-full {
    margin: 0;
    padding: 0;
}

/* ---------- Navigation ---------- */

nav {
    background-color: #fff;
    box-shadow: none;
    border-bottom: 1px solid var(--brand-border);
}

.nav-wrapper {
    z-index: 3;
    height: 65px;
    position: fixed;
    top: 0;
    padding-right: 15px;
}

.nav-wrapper .logo-section {
    width: 220px;
    float: left;
}

.nav-wrapper .bread-crumbs {
    float: left;
}

.bread-crumbs {
    padding-left: 24px;
}

.nav-wrapper .nav-logo-wrapper {
    width: 100%;
    display: inline-block;
    position: relative;
    color: #fff;
    text-align: center;
    margin-top: -2px;
    height: 100%;
}

.nav-logo-wrapper a {
    display: inline-block;
}

.nav-logo-wrapper img {
    max-height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.settings-wrapper {
    padding-top: 10px;
    position: relative;
}

.settings-wrapper .with-image {
    background: transparent;
    box-shadow: 0 1px 6px 0 rgb(0 0 0 / 6%), 0 1px 6px 0 rgb(0 0 0 / 6%);
}

.settings-wrapper img {
    width: 100%;
}

#dropdown-content {
    top: 60px !important;
    outline: none;
}

/* ---------- App list cards ---------- */

.app-list {
    display: flex;
    flex-wrap: wrap;
    row-gap: 1rem;
    margin-top: 20px;
}

.app-list .col {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.app-list .card {
    border-radius: 10px;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--brand-border);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.app-list .card:hover {
    border: 1px solid var(--brand-primary-accent);
}

.app-list .card .icon-container {
    color: #fff;
}

.app-list .icon-container i {
    font-size: 3em;
    margin-top: 0px;
    color: #fff;
}

/* ---------- Icon container ---------- */

.icon-container {
    border-radius: 50%;
    padding: 0.5rem;
    background-color: var(--brand-primary-accent);
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.5rem auto auto auto;
}

.icon-container .icon i {
    font-size: 3em;
    margin-top: 0px;
    color: #fff;
}

.icon i {
    font-size: 6em;
    text-align: center;
    width: 100%;
    margin-top: 30px;
    opacity: 0.90;
    color: var(--brand-link-accent);
}

/* ---------- Card layout extensions ---------- */


.card .card-action {
    border-top: none;
    padding-top: 0px;
    padding-bottom: 30px;
}

.card-content .row {
    margin-bottom: 0px;
}

.card-label {
    background-color: #f4f5f6;
    border-bottom: 1px solid var(--brand-border);
    padding-left: 10px;
    display: inline-block;
    width: 100%;
    position: relative;
    z-index: 0;
}

.card-label .card-tabs {
    float: right;
}

.card-label .card-tabs li a i {
    float: left;
    height: 48px;
    line-height: 48px;
    margin: 0 15px 0 0;
    width: 24px;
    color: rgba(0, 0, 0, 0.54);
}

/* ---------- Inner content ---------- */

.inner-content {
    padding: 20px;
    position: relative;
    z-index: 0;
}

.inner-content h5 {
    margin: 0px;
    font-size: 22px;
    font-weight: 600;
    position: relative;
}

.inner-content .btn {
    z-index: 0;
}

.inner-content button i,
.inner-content a i {
    float: left;
}

.inner-content .inline-heading {
    position: absolute;
    top: 15px;
}

.inner-content .item-selection .card-title a {
    margin-bottom: 0px;
    width: 100%;
    display: inline-block;
    text-align: center;
    border-top: 1px solid var(--brand-border);
    padding: 10px;
    font-size: 14px;
}

.inner-content .item-selection .card-content {
    padding: 0px;
    border: none;
}

.inner-content .item-selection .card-title {
    margin: 0px !important;
    line-height: normal !important;
}

.inner-content .item-selection .card-image:hover {
    cursor: pointer;
    opacity: 1;
}

.inner-content h5.success-heading {
    margin-top: 60px;
    color: #333;
    opacity: 0.4;
    margin-bottom: 10px;
    font-weight: 400;
}

/* ---------- Modal layout ---------- */

.modal {
    box-shadow: none;
    border: 1px solid var(--brand-primary);
    max-height: 90%;
}

.modal:not(.datepicker-modal):not(.timepicker-modal):not(.bottom-sheet) {
    max-width: 420px;
}

.modal,
.modal .modal-content,
.modal .modal-footer {
    background: #fff;
}

.modal .modal-header {
    padding: 24px 24px 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal .modal-header h6 {
    margin: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.modal .modal-header .modal-close-icon {
    cursor: pointer;
    color: var(--brand-primary);
}

.modal .modal-header .modal-close-icon:hover {
    color: var(--brand-primary-accent);
}

.modal .modal-content p:last-child {
    margin-bottom: 0;
}

.modal .modal-footer {
    padding: 0 24px 24px 24px;
    height: auto;
}

.inner-content .modal .modal-content {
    width: 100%;
    padding-bottom: 0px;
}

.modal-overlay {
    background-color: rgb(244, 245, 246, 0.95);
}

/* ---------- Loading states ---------- */

.ajax-container .content {
    display: none;
}

.tab-content {
    display: none;
}

.spinner-v2 svg {
    height: 25em;
}

.loading-layover-v2 svg {
    margin: 0 auto;
    display: block;
}

.preloader-wrapper {
    position: absolute;
    width: 10px;
    height: 10px;
    float: right;
    margin-top: 13px;
    margin-left: 10px;
}

.no-data {
    text-align: center;
    opacity: 0.2;
    text-transform: uppercase;
    font-size: 3em;
    user-select: none;
    margin: 1em;
}

/* ---------- Auth ---------- */

.login-col {
    max-width: 450px;
    margin: 48px auto 0;
}

.login-col .btn {
    width: 100%;
    margin-top: 16px;
}

.card.login-card .card-content {
    padding: 30px;
}

#login-page .login-card .input-field.col:first-child {
    padding-right: 0;
}

#login-page .login-card .input-field.col:last-child {
    padding-left: 0;
}

.captcha-check {
    display: none !important;
}

/* ---------- Misc layout ---------- */

a {
    color: var(--brand-link-text);
}

.go-back {
    padding-top: 0px;
    margin-right: 0px;
    float: left;
    margin-top: 3px;
}

small {
    font-size: 14px;
    opacity: 0.9;
}

.collapsible {
    box-shadow: none;
}

.tab-icon {
    float: initial;
    position: absolute;
    top: 16px;
    margin-left: -17px;
    font-size: 15px;
}

.hidden {
    display: none !important;
}

.pointer:hover {
    cursor: pointer;
}

.pointer i {
    position: absolute;
    left: 15px;
}

.pointer a {
    margin-left: 25px;
}

.link {
    color: #fff;
}

.activity-wrapper a {
    color: var(--brand-link-accent);
    text-decoration: underline;
}

.menu-selection {
    max-width: 31%;
    position: absolute;
    top: 15px;
    right: 22px;
    z-index: 1000;
}

.options-button {
    margin-top: 55px;
}

.material-icons.rotate_right {
    display: inline-block;
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ---------- Spacing utilities ---------- */

.m-0 {
    margin: 0px;
}

.mt-0 {
    margin-top: 0px;
}

.mt-1 {
    margin-top: 10px;
}

.mt-2 {
    margin-top: 24px;
}

.mb-0 {
    margin-bottom: 0px;
}

.mb-1 {
    margin-bottom: 10px;
}

.mb-2 {
    margin-bottom: 20px;
}

.mr-1 {
    margin-right: 10px;
}

.mt-4 {
    margin-top: 48px;
}

.p-2 {
    padding: 24px;
}

.margin-in {
    margin-left: 50px;
}

.margin-in-2 {
    margin-left: 100px;
}

.no-padding {
    padding: 0 !important;
}

.no-padding-left {
    padding-left: 0 !important;
}

.no-padding-right {
    padding-right: 0 !important;
}

.full-width {
    width: 100%;
}

.input-right {
    text-align: right;
}

/* ---------- Sub navigation ---------- */

.sub-nav {
    border-bottom: 1px solid var(--brand-border);
    margin-top: 5px;
    margin-bottom: 20px;
    background: transparent;
    padding: 0;
}

.sub-nav .sub-nav-tabs {
    display: inline-block;
}

.sub-nav .sub-nav-tab {
    display: inline-block;
    padding: 10px 16px;
    text-decoration: none;
    color: #8a8fa3;
    font-size: 14px;
    font-weight: 400;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    cursor: pointer;
}

.sub-nav .sub-nav-tab i {
    font-size: 18px;
    vertical-align: middle;
    margin-right: 6px;
}

.sub-nav .sub-nav-tab:hover {
    color: #1a1a2e;
}

.sub-nav .sub-nav-tab.active {
    color: var(--brand-primary);
    font-weight: 500;
    border-bottom-color: var(--brand-primary);
}

.sub-nav .sub-nav-tab.sub-nav-tab-subtle {
    font-size: 13px;
}

.sub-nav .sub-nav-actions {
    float: right;
    padding: 6px 0;
}

.sub-nav .sub-nav-actions .action-link {
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    font-weight: 500;
    color: #9e9e9e;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.sub-nav .sub-nav-actions .action-link i {
    font-size: 16px;
    vertical-align: middle;
    margin-right: 4px;
}

.sub-nav .sub-nav-actions .action-link.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.sub-nav .sub-nav-actions .action-separator {
    color: #ccc;
    font-size: 13px;
    vertical-align: middle;
    margin: 0 4px;
}

/* ---------- Back link ---------- */

.back-link {
    display: inline-block;
    font-size: 14px;
    color: #757575;
    margin-top: 15px;
    margin-bottom: 15px;
}
.back-link:hover {
    color: #424242;
}
.back-link i {
    font-size: 16px;
    vertical-align: middle;
    margin-right: 4px;
}

/* ---------- Page header ---------- */

.page-header {
    margin-bottom: 20px;
}

.page-header h5 {
    margin: 0 0 4px 0;
}

.page-header p {
    font-size: 14px;
    color: #757575;
    margin: 0;
}

/* ---------- Tables ---------- */

table {
    background: #fff;
}

table:not(.datepicker-table) th:first-child,
table:not(.datepicker-table) td:first-child {
    padding-left: 16px;
}

/* ---------- Toolbar ---------- */

.toolbar {
    margin-bottom: 20px;
}

.search-box {
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    padding: 8px 14px;
    margin-bottom: 16px;
    white-space: nowrap;
}

.search-box i {
    font-size: 20px;
    color: #9e9e9e;
    vertical-align: middle;
    margin-right: 8px;
}

.search-box input.browser-default {
    border: none !important;
    outline: none !important;
    font-size: 14px !important;
    color: #424242 !important;
    width: calc(100% - 32px) !important;
    background: transparent !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: inline-block;
    vertical-align: middle;
}

.search-box input.browser-default::placeholder {
    color: #bdbdbd;
}

.filter-chip {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--brand-border);
    border-radius: 20px;
    background: #fff;
    font-size: 13px;
    font-weight: 400;
    color: #616161;
    cursor: pointer;
    transition: all 0.2s;
    margin-right: 6px;
}

.filter-chip:hover {
    border-color: #bdbdbd;
    color: #424242;
}

.filter-chip.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.view-toggle-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--brand-border);
    background: #fff;
    border-radius: 6px;
    display: inline-block;
    text-align: center;
    line-height: 34px;
    cursor: pointer;
    color: #888;
    transition: all 0.2s;
    padding: 0;
    margin-left: 4px;
}

.view-toggle-btn:hover {
    border-color: #bdbdbd;
    color: #555;
}

.view-toggle-btn.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.view-toggle-btn i {
    font-size: 20px;
    vertical-align: middle;
}