/* Shared UI refinements for CollegePro module pages. */

:root {
    --collegepro-ui-radius: 7px;
    --collegepro-input-radius: 3px;
    --collegepro-dark: #123F25;
    --collegepro-green: #2F6B3F;
    --collegepro-leaf-light: #DDEEDB;
    --collegepro-cream: #FBF7EE;
    --collegepro-gold: #C9952F;
    --collegepro-gold-dark: #123F25;
    --collegepro-gold-soft: #F7C85C;
    --collegepro-green-cream: #EEF7EC;
    --collegepro-green-soft: #DDEEDB;
    --collegepro-ink: #123F25;
    --collegepro-menu-bg: #123F25;
    --collegepro-menu-active: #2F6B3F;
    --collegepro-menu-text: #FBF7EE;
    --collegepro-menu-icon: #C9952F;
    --collegepro-menu-icon-center: 28px;
}

body {
    background:
        radial-gradient(circle at top left, rgba(201, 149, 47, 0.16), transparent 28%),
        linear-gradient(180deg, var(--collegepro-cream) 0%, var(--collegepro-green-cream) 100%) !important;
    color: var(--collegepro-ink);
}

.panel,
.panel.panel-default,
.panel.panel-primary,
.panel.panel-success,
.panel.panel-info,
.panel.panel-warning,
.panel.panel-danger,
.well,
.thumbnail,
.modal-content,
.widget,
.portlet,
.info-box,
.fees-summary-card,
.fees-dashboard-card,
.fees-metric-card,
.fees-welcome-hero,
.fees-dashboard-hero,
.fees-chart-shell,
.fees-class-chart-card,
.fees-empty-state,
.fees-grid,
.page-header,
.breadcrumb,
.GridView,
table.GridView,
table[id*="GridView"],
table[id*="Grid"],
table[id*="grid"] {
    border-radius: var(--collegepro-ui-radius) !important;
}

.panel,
.modal-content,
.widget,
.portlet,
.fees-summary-card,
.fees-dashboard-card,
.fees-class-chart-card,
.fees-grid,
.page-header,
.GridView,
table.GridView,
table[id*="GridView"],
table[id*="Grid"],
table[id*="grid"] {
    overflow: hidden;
}

.panel > .panel-heading:first-child,
.fees-summary-card .panel-heading,
.fees-dashboard-card .panel-heading,
.fees-class-chart-card .panel-heading,
.widget .widget-head,
.modal-header {
    border-radius: var(--collegepro-ui-radius) var(--collegepro-ui-radius) 0 0 !important;
    background: linear-gradient(90deg, var(--collegepro-menu-bg) 0%, var(--collegepro-green) 100%) !important;
    color: var(--collegepro-cream) !important;
    border-color: rgba(18, 63, 37, 0.22) !important;
}

.panel > .panel-body:last-child,
.fees-summary-card .panel-body,
.fees-dashboard-card .panel-body,
.fees-class-chart-card .panel-body,
.widget .widget-content,
.modal-body:last-child {
    border-radius: 0 0 var(--collegepro-ui-radius) var(--collegepro-ui-radius) !important;
}

.btn,
.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
select,
textarea {
    border-radius: var(--collegepro-input-radius);
}

.panel,
.well,
.modal-content,
.widget,
.portlet,
.fees-summary-card,
.fees-dashboard-card,
.fees-metric-card,
.fees-welcome-hero,
.fees-dashboard-hero,
.fees-chart-shell,
.fees-class-chart-card,
.fees-empty-state,
.fees-grid,
.breadcrumb,
.page-header {
    background-color: rgba(251, 247, 238, 0.96) !important;
    border-color: rgba(18, 63, 37, 0.18) !important;
}

.btn-primary,
.btn-success,
input[type="submit"].btn-primary,
input[type="button"].btn-primary {
    background: linear-gradient(90deg, var(--collegepro-dark) 0%, var(--collegepro-green) 100%) !important;
    border-color: var(--collegepro-gold-dark) !important;
    color: var(--collegepro-cream) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
    background: linear-gradient(90deg, var(--collegepro-green) 0%, var(--collegepro-dark) 100%) !important;
    color: #ffffff !important;
}

.portal-header-band,
header .portal-header-band,
.header,
.navbar-inverse,
.backup-portal-nav,
footer {
    background: linear-gradient(90deg, var(--collegepro-dark) 0%, var(--collegepro-green) 100%) !important;
    border-color: var(--collegepro-gold-soft) !important;
    box-shadow: 0 12px 30px rgba(18, 63, 37, 0.2) !important;
}

.portal-header-line1,
.portal-header-line2,
.portal-header-line3,
.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-text,
footer,
footer p {
    color: var(--collegepro-cream) !important;
}

.portal-header-line2,
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: var(--collegepro-gold-soft) !important;
}

.login-form h2.login-form-heading,
.backup-security-heading,
.panel-primary > .panel-heading,
.panel-success > .panel-heading,
.panel-info > .panel-heading {
    background: linear-gradient(90deg, var(--collegepro-menu-bg) 0%, var(--collegepro-green) 100%) !important;
    border-color: var(--collegepro-gold) !important;
    color: var(--collegepro-cream) !important;
}

.login-form,
.backup-login-card,
.backup-start-card,
.backup-content-shell {
    background: rgba(251, 247, 238, 0.96) !important;
    border-color: rgba(18, 63, 37, 0.18) !important;
    box-shadow: 0 18px 34px rgba(18, 63, 37, 0.12) !important;
}

#sidebar {
    background: var(--collegepro-menu-bg) !important;
    border-right: 4px solid var(--collegepro-gold-soft);
}

.backup-sidebar,
.management-sidebar {
    background: var(--collegepro-menu-bg) !important;
    border-right: 4px solid var(--collegepro-gold-soft) !important;
}

.backup-sidebar-session,
.management-sidebar-session {
    border-radius: var(--collegepro-ui-radius) !important;
}

#sidebar ul.sidebar-menu li,
ul.sidebar-menu li {
    margin-bottom: 6px;
}

#sidebar ul.sidebar-menu li a,
ul.sidebar-menu li a {
    border: 0 !important;
    border-radius: var(--collegepro-ui-radius) !important;
    color: var(--collegepro-menu-text) !important;
    font-size: 16px;
    font-weight: 700;
}

#sidebar ul.sidebar-menu li a i,
ul.sidebar-menu li a i {
    color: var(--collegepro-menu-icon) !important;
}

#sidebar ul.sidebar-menu > li.active > a,
#sidebar ul.sidebar-menu > li.open > a,
#sidebar ul.sidebar-menu li a:hover,
#sidebar ul.sidebar-menu li a:focus,
ul.sidebar-menu > li.active > a,
ul.sidebar-menu > li.open > a,
ul.sidebar-menu li a:hover,
ul.sidebar-menu li a:focus {
    background: var(--collegepro-menu-active) !important;
    color: #ffffff !important;
}

#sidebar ul.sidebar-menu > li.active > a i,
#sidebar ul.sidebar-menu > li.open > a i,
#sidebar ul.sidebar-menu li a:hover i,
#sidebar ul.sidebar-menu li a:focus i,
ul.sidebar-menu > li.active > a i,
ul.sidebar-menu > li.open > a i,
ul.sidebar-menu li a:hover i,
ul.sidebar-menu li a:focus i {
    color: #ffffff !important;
}

#sidebar ul > li > a .menu-arrow,
ul.sidebar-menu li a .menu-arrow {
    color: var(--collegepro-menu-icon) !important;
}

#sidebar ul.sidebar-menu > li > ul.sub,
ul.sidebar-menu > li > ul.sub {
    margin-left: var(--collegepro-menu-icon-center) !important;
    padding-left: 10px !important;
    border-left: 1px solid rgba(201, 149, 47, 0.52) !important;
}

#sidebar ul.sidebar-menu > li > ul.sub li,
ul.sidebar-menu > li > ul.sub li {
    background: transparent !important;
    margin-left: 0 !important;
}

#sidebar ul.sidebar-menu > li > ul.sub li a,
ul.sidebar-menu > li > ul.sub li a {
    padding-left: 12px !important;
    margin-left: 0 !important;
}

.backup-sidebar-menu a,
.management-sidebar-menu a {
    margin: 0 10px 6px;
    border-radius: var(--collegepro-ui-radius) !important;
    color: var(--collegepro-menu-text) !important;
}

.backup-sidebar-menu li.active a,
.backup-sidebar-menu a:hover,
.backup-sidebar-menu a:focus,
.management-sidebar-menu li.active a,
.management-sidebar-menu a:hover,
.management-sidebar-menu a:focus {
    background: var(--collegepro-menu-active) !important;
    color: #ffffff !important;
}

.backup-sidebar-menu a i,
.management-sidebar-menu a i {
    color: var(--collegepro-menu-icon) !important;
}

.collegepro-login-logout-button,
.collegepro-login-logout-button:hover,
.collegepro-login-logout-button:focus {
    display: block !important;
    margin-top: 10px !important;
    padding: 10px 12px !important;
    border-radius: var(--collegepro-ui-radius) !important;
    background: var(--collegepro-gold) !important;
    color: var(--collegepro-dark) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
}

.collegepro-login-logout-button:hover,
.collegepro-login-logout-button:focus {
    background: var(--collegepro-cream) !important;
    color: var(--collegepro-dark) !important;
}

.dropdown-menu .collegepro-login-logout-button {
    margin: 6px 10px !important;
}

.collegepro-login-logout-button i {
    margin-right: 6px !important;
}