/*******************************************************************************
 * 1. DESIGN TOKENS & SYSTEM VARIABLES
 ******************************************************************************/
:root {
    --sociat-primary: rgb(23, 181, 203);
    --sociat-primary-hover: rgb(18, 149, 168);
    --sociat-dark: rgb(40, 82, 92);
}

/*******************************************************************************
 * 2. GLOBAL OVERRIDES & BASE TYPOGRAPHY
 ******************************************************************************/
body {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    background-color: #ffffff;
    color: var(--sociat-dark);
}

h2, .h2-style {
    font-family: "Libre Baskerville", serif;
    font-weight: 400;
    color: var(--sociat-dark);
}

/*******************************************************************************
 * 3. GLOBAL CORE LAYOUT COMPONENT HOOKS
 ******************************************************************************/
header#page-header {
    height: 96px;
    z-index: 1030;
}

main#main-container.custom-canvas-bg {
    background-image: url('../media/images/background_pattern.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    margin-top: 96px;
}

    main#main-container.custom-canvas-bg a {
        color: var(--sociat-primary);
    }

/*******************************************************************************
 * 4. SYSTEM UTILITIES, BUTTONS & FORMS
 ******************************************************************************/
/* Global Custom Styled Form Fields */
.form-control, .form-select {
    border: 2px solid var(--sociat-primary);
    border-radius: 12px;
    padding: 12px;
    height: 50px;
    color: var(--sociat-dark);
    font-size: 13px;
    background-color: #ffffff;
}

    .form-control:focus, .form-select:focus {
        border-color: var(--sociat-primary);
        box-shadow: 0 0 0 0.25rem rgba(23, 181, 203, 0.25);
    }

/* Centralized Primary Action Buttons */
.btn-sociat-primary {
    background-color: var(--sociat-primary);
    border-color: var(--sociat-primary);
    color: #ffffff !important;
    height: 46px;
}

    .btn-sociat-primary:hover,
    .btn-sociat-primary:focus {
        background-color: var(--sociat-primary-hover);
        border-color: var(--sociat-primary-hover);
        color: #ffffff !important;
    }

/* Secondary Navigation Height Equalizers */
.btn-sociat-secondary-height {
    height: 46px;
}

.btn-nav-login {
    height: 38px;
    min-width: 100px;
}

/* General Layout Card Configuration Extensions */
.card-header-title {
    font-family: "Inter", sans-serif;
}

/*******************************************************************************
 * 5. DROPDOWN & MEMBERSHIP NAVIGATION COMPONENT SCHEMES
 ******************************************************************************/
.dropdown-profile-menu {
    min-width: 220px;
    z-index: 1050;
}

.dropdown-profile-header-lbl {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dropdown-profile-username {
    max-width: 190px;
    font-size: 0.9rem;
}

.profile-avatar-circle {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/*******************************************************************************
 * 6. CUSTOM RESPONSIVE FOOTER STRUCTURES
 ******************************************************************************/
footer.custom-footer-curve {
    position: relative;
    padding: 48px 12px 24px 12px;
    background-color: var(--sociat-dark);
    color: rgb(246, 241, 237);
}

    footer.custom-footer-curve::after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 18px;
        top: 0;
        left: 0;
        background: var(--sociat-primary);
        clip-path: ellipse(50% 75% at top);
    }

    footer.custom-footer-curve a {
        color: rgb(246, 241, 237);
        text-decoration: underline;
    }

        footer.custom-footer-curve a:hover {
            color: #ffffff;
        }

.max-width-footer {
    max-width: 1600px;
    margin: 0 auto;
}

.footer-logo-img {
    height: 60px;
    width: auto;
}

.footer-left-spacing {
    margin-bottom: 24px;
}

@media (min-width: 768px) {
    .footer-left-spacing {
        margin-bottom: 0;
    }
}

/*******************************************************************************
 * 7. FEATURE ROUTINES SPECIFIC PAGES (HOME & ERRORS)
 ******************************************************************************/
/* Home Page Hero Section Layout */
.home-hero-row {
    min-height: calc(100vh - 96px);
}

.home-text-container {
    max-width: 650px;
}

.home-hero-title {
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.2;
}

.home-video-col {
    min-height: 350px;
}

/* Success & Custom Confirmation Notification Envelopes */
.confirmation-success-icon {
    font-size: 4.5rem;
    color: var(--sociat-primary);
}

.icon-badge-circle {
    width: 80px;
    height: 80px;
    font-size: 2.2rem;
}

/* Error Pages Setup */
.error-main-wrapper {
    max-width: 600px;
}

.error-illustration {
    max-height: 180px;
    width: auto;
}

/*******************************************************************************
 * 8. ADMIN DASHBOARD & BACKOFFICE DATA GRIDS
 ******************************************************************************/
.admin-sidebar-wrapper {
    min-width: 240px;
    background-color: var(--sociat-dark);
}

.table-responsive-card {
    border-radius: 12px;
    overflow: hidden;
}

.table-sociat th {
    background-color: #f8f9fa;
    color: var(--sociat-dark);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px;
}

.table-sociat td {
    padding: 14px;
    vertical-align: middle;
    font-size: 0.9rem;
}

/* Badge System Utility Contexts */
.badge-sociat {
    padding: 6px 12px;
    font-weight: 500;
    border-radius: 30px;
    font-size: 0.75rem;
}

/* Roles Matrix Column Structure */
.table-roles .col-role-name {
    width: 25%;
}

.table-roles .col-role-desc {
    width: 60%;
}

.table-roles .col-role-status {
    width: 15%;
}

.email-template-editor {
    min-height: 450px !important;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Mark mandatory field label descriptors with a red asterisk indicator trailing anchor */
.field-required::after {
    content: " *";
    color: #dc3545; /* Bootstrap 5 standard structural utility red hex code */
    font-weight: bold;
    margin-left: 2px;
}

/* Styling adjustments for secondary textual elements */
.style-sub-email {
    font-size: 0.75rem;
}

/* Fine-tune scrollbar layout inside the submitted vault element block */
.list-submitted-scroll-container::-webkit-scrollbar {
    width: 4px;
}

.list-submitted-scroll-container::-webkit-scrollbar-thumb {
    background-color: #dee2e6;
    border-radius: 4px;
}

/* Controlled scrollbox view encapsulation for completed submissions log list area */
.submitted-users-scrollbox {
    max-height: 240px;
    overflow-y: auto;
}

/* Micro-layout design optimization rule forcing cleaner badge presentation heights */
.badge-verified-pill {
    font-size: 0.7rem;
}

/* Custom Webkit scrollbar visual anchor layouts for cleaner presentation metrics */
.submitted-users-scrollbox::-webkit-scrollbar {
    width: 4px;
}

.submitted-users-scrollbox::-webkit-scrollbar-thumb {
    background-color: #dee2e6;
    border-radius: 4px;
}

.style-assigned-users-col {
    min-width: 180px;
    max-width: 300px;
    white-space: normal !important;
}

/* Strictly control descriptive boundaries inside summary display cards */
.survey-card-desc-box {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 40px;
}

.style-form-key-col {
    min-width: 140px;
    white-space: nowrap;
}