/* Buttons */
.btn-success {
    background-color: rgb(1,39,62) !important;
    border-color: rgb(1,30,50) !important;
    color: #ffffff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: rgb(1,30,50) !important;
    border-color: rgb(1,20,40) !important;
}

/* Navbar main background */
.navbar, 
.navbar-default,
.navbar-header, 
.collapse.navbar-collapse,
.navbar-collapse.collapse.in,
.navbar-nav {
    background-color: rgb(1,39,62) !important;
    border-color: rgb(1,30,50) !important;
}

/* Navbar brand (logo/text) */
.navbar-brand {
    color: #ffffff !important;
}

.navbar-brand:hover,
.navbar-brand:focus {
    color: #d0e4f2 !important;
}

/* Navbar links */
.navbar-nav > li > a {
    color: #ffffff !important;
}

.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
    color: #d0e4f2 !important;
}

/* Active navbar link */
.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
    background-color: rgb(1,30,50) !important;
    color: #ffffff !important;
}

/* Dropdown menu */
.navbar-nav .dropdown-menu {
    background-color: rgb(1,39,62) !important;
    border-color: rgb(1,30,50) !important;
}

/* Default dropdown links */
.navbar-nav .dropdown-menu > li > a {
    color: #ffffff !important;
}

/* Hover & Focus: White background with black text */
.navbar-nav .dropdown-menu > li > a:hover,
.navbar-nav .dropdown-menu > li > a:focus {
    background-color: #ffffff !important;
    color: #000000 !important;
}


/* Navbar toggler (hamburger menu for mobile) */
.navbar-toggle {
    border-color: rgb(1,30,50) !important;
}

.navbar-toggle .icon-bar {
    background-color: #ffffff !important;
}

.navbar-toggle:hover,
.navbar-toggle:focus {
    background-color: rgb(1,30,50) !important;
}

/* Panel Heading Background */
.panel-heading {
    background-color: rgb(1,39,62) !important;
    color: #ffffff !important;
    border-color: rgb(1,30,50) !important;
}

/* Panel Heading Text */
.panel-heading h3, 
.panel-heading h4, 
.panel-heading h5, 
.panel-title {
    color: #ffffff !important;
}

/* Panel Hover Effect (Optional) */
.panel-heading:hover {
    background-color: rgb(1,30,50) !important;
}

/* Panel Borders */
.panel {
    border-color: rgb(1,30,50) !important;
}

/* Glyphicon Plus Icon */
.glyphicon.glyphicon-plus.text-success {
    color: rgb(1,39,62) !important;
}

.glyphicon.glyphicon-plus.text-success:hover {
    color: rgb(1,60,100) !important; /* Slightly brighter shade */
}

/* Update alert-danger background and border */
.alert.alert-danger {
    background-color: rgb(187,15,51) !important;
    color: #ffffff !important;  /* Ensure text is readable */
    border-color: rgb(150,10,40) !important; /* Slightly darker border */
}

/* Optional: Darker red on hover */
.alert.alert-danger:hover {
    background-color: rgb(160,10,45) !important;
}

/* Update all btn-danger elements */
.btn-danger {
    background-color: rgb(187,15,51) !important;
    border-color: rgb(150,10,40) !important;
    color: #ffffff !important; /* Ensure readable text */
}

/* Hover, Focus, Active States */
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
    background-color: rgb(160,10,45) !important;
    border-color: rgb(130,8,35) !important;
    color: #ffffff !important;
}

/* Disabled State */
.btn-danger[disabled], 
.btn-danger.disabled {
    background-color: rgb(187,15,51) !important;
    border-color: rgb(150,10,40) !important;
    opacity: 0.7 !important;
}

/* Outlined (btn-outline-danger if used) */
.btn-outline-danger {
    color: rgb(187,15,51) !important;
    border-color: rgb(187,15,51) !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
    background-color: rgb(187,15,51) !important;
    color: #ffffff !important;
}

/* Locked Active Success Button */
.btn.btn-success.locked_active {
    background-color: rgb(1,39,62) !important;
    border-color: rgb(1,30,50) !important;
    color: #ffffff !important; /* Ensures readable text */
}

/* Hover, Focus, and Active States */
.btn.btn-success.locked_active:hover,
.btn.btn-success.locked_active:focus,
.btn.btn-success.locked_active:active {
    background-color: rgb(1,30,50) !important;
    border-color: rgb(1,20,40) !important;
}

/* Update all btn-info buttons */
.btn-info {
    background-color: rgb(57,71,96) !important;
    border-color: rgb(57,71,96) !important;
    color: #ffffff !important; /* Ensures readable text */
}

/* Hover, Focus, and Active States */
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active {
    background-color: rgb(57,71,96) !important;
    border-color: rgb(2,20,70) !important;
    color: #ffffff !important;
}

/* Disabled State */
.btn-info[disabled], 
.btn-info.disabled {
    background-color: rgb(57,71,96) !important;
    border-color: rgb(57,71,96) !important;
    opacity: 0.7 !important;
}

/* Outlined (btn-outline-info if used) */
.btn-outline-info {
    color: rgb(57,71,96) !important;
    border-color: rgb(57,71,96) !important;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
    background-color: rgb(57,71,96) !important;
    color: #ffffff !important;
}
/* General table text color */
.table,
.table th,
.table td {
    color: #000000 !important;
}

/* Ensure links inside tables are also black */
.table a {
    color: #000000 !important;
    text-decoration: none;
}

.table a:hover,
.table a:focus {
    color: #333333 !important; /* Slightly darker on hover */
    text-decoration: underline;
}
/* Slightly darker table borders and row/column lines */
.table,
.table-bordered,
.table th,
.table td {
    border-color: #777 !important; /* Medium-dark gray border */
}

/* Optional: Subtle header border for emphasis */
.table thead th {
    border-bottom: 2px solid #666 !important;
}

/* Optional: Slightly darker hover effect */
.table-hover tbody tr:hover {
    background-color: #f5f5f5 !important;
}

/* Import Roboto Font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* Apply Roboto to the entire app */
body, 
.navbar, 
.panel, 
.btn, 
h1, h2, h3, h4, h5, h6, 
p, a, input, textarea, select {
    font-family: 'Roboto', sans-serif !important;
}
/* Make links black */
a, 
a:hover, 
a:focus {
    color: #000000 !important;
}

/* Change navbar link color */
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #000000 !important;
}

/* Change text-success color */
.text-success {
    color: #000000 !important;
}

/* Change btn-link color */
.btn-link,
.btn-link:hover,
.btn-link:focus {
    color: #000000 !important;
    text-decoration: none !important;
}

/* Change btn-success background if needed */
.btn-success {
    background-color: rgb(1,39,62) !important;
    border-color: rgb(0,30,60) !important;
}

/* Dropdown background */
.dropdown-menu {
    background-color: rgb(1,39,62) !important;
    border-color: rgb(1,30,50) !important;
}

/* Dropdown menu links */
.dropdown-menu > li > a {
    color: #ffffff !important;
}

/* Dropdown hover/focus effects */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: rgb(1,30,50) !important;
    color: #d0e4f2 !important;
}

/* Active dropdown item */
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: rgb(1,30,50) !important;
    color: #ffffff !important;
}

/* Ensure dropdown items don't have extra spacing */
.dropdown-menu > li {
    margin: 0;
    padding: 0;
}
/* Style the profile menu icon */
.dropdown-toggle.profile-menu-icon {
    background-color: rgb(1,39,62) !important;
    border-color: rgb(1,30,50) !important;
    color: #ffffff !important;
    padding: 8px;
    border-radius: 4px; /* Optional: Adds rounded corners */
}

/* Hover, Focus, and Active States */
.dropdown-toggle.profile-menu-icon:hover,
.dropdown-toggle.profile-menu-icon:focus,
.dropdown-toggle.profile-menu-icon:active {
    background-color: rgb(1,30,50) !important;
    border-color: rgb(1,20,40) !important;
}
/* Style the dropdown toggle button */
.dropdown-toggle {
    background-color: rgb(1,39,62) !important;
    border-color: rgb(1,30,50) !important;
    color: #ffffff !important;
}

/* Hover, Focus, and Active States */
.dropdown-toggle:hover,
.dropdown-toggle:focus,
.dropdown-toggle:active {
    background-color: rgb(1,30,50) !important;
    border-color: rgb(1,20,40) !important;
}

/* Update alert-info background and border */
.alert.alert-info {
    background-color: rgb(2,33,110) !important;
    color: #ffffff !important;  /* Ensure text is readable */
    border-color: rgb(2,25,90) !important; /* Slightly darker border */
}

/* Optional: Darker blue on hover */
.alert.alert-info:hover {
    background-color: rgb(2,25,90) !important;
}
.sign-in-container {
    background-color: transparent !important;
    box-shadow: none !important; /* Removes any shadow if present */
    border: none !important; /* Removes any border if needed */
}
/* Make all buttons have sharp corners */
.btn {
    border-radius: 0 !important;
}

/* Optional: Also apply to input buttons and form controls */
input[type="submit"],
input[type="button"],
button {
    border-radius: 0 !important;
}
.glyphicon.glyphicon-user {
    color: #ffffff !important;
}
/* Align the "View" button normally */
.homepage-card .btn-view {
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    text-align: center;
}

/* Style and position the "+" button */
.homepage-card .btn-add-new {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 20px;
    line-height: 36px;
    text-align: center;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure the card has relative positioning */
.homepage-card {
    position: relative;
    padding-bottom: 50px; /* Ensures space for the Add New button */
}
/* Make text in btn-primary white */
.btn-primary {
    color: #ffffff !important;
}
/* Initial state: hidden and slightly moved */
.homepage-card {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Visible state: fully opaque and in position */
.homepage-card.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Ensure text stays white on hover, focus, and active states */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: #ffffff !important;
}
/* Make text in dropdown-toggle white */
.dropdown-toggle {
    color: #ffffff !important;
}

/* Ensure text stays white on hover, focus, and active states */
.dropdown-toggle:hover,
.dropdown-toggle:focus,
.dropdown-toggle:active {
    color: #ffffff !important;
}
/* Make navbar links white */
.nav.navbar-nav > li > a {
    color: #ffffff !important;
}

/* Ensure text stays white on hover, focus, and active states */
.nav.navbar-nav > li > a:hover,
.nav.navbar-nav > li > a:focus,
.nav.navbar-nav > .active > a,
.nav.navbar-nav > .active > a:hover,
.nav.navbar-nav > .active > a:focus {
    color: #ffffff !important;
}
/* Ensure selected rows get highlighted immediately */

/* Update alert-success background and border */
.alert.alert-success {
    background-color: rgb(2,33,110) !important;
    color: #ffffff !important; /* Ensure text is readable */
    border-color: rgb(2,25,90) !important; /* Slightly darker border */
}

/* Optional: Darker blue on hover */
.alert.alert-success:hover {
    background-color: rgb(2,25,90) !important;
}
/* Buttons with OR without 'hidden-xs' but with the other specific classes */
.btn.btn-default.btn-lg.pull-right.hspacer-sm.vspacer-sm {
  color: #ffffff !important;
  background-color: #95a5a6 !important;
  border-color: #95a5a6 !important;
  padding: 4px 10px !important;   /* Smaller size */
  font-size: 12px !important;
  line-height: 1.4 !important;
  background-image: none !important;
}

/* Hover / Focus / Active States */
.btn.btn-default.btn-lg.pull-right.hspacer-sm.vspacer-sm:hover,
.btn.btn-default.btn-lg.pull-right.hspacer-sm.vspacer-sm:focus,
.btn.btn-default.btn-lg.pull-right.hspacer-sm.vspacer-sm:active {
  background-color: #798d8f !important;
  border-color: #74898a !important;
  color: #ffffff !important;
}

/* Disabled state */
.btn.btn-default.btn-lg.pull-right.hspacer-sm.vspacer-sm:disabled,
fieldset[disabled] .btn.btn-default.btn-lg.pull-right.hspacer-sm.vspacer-sm {
  background-color: #95a5a6 !important;
  border-color: #95a5a6 !important;
  opacity: 0.7;
}

/* Remove icons/images inside */
.btn.btn-default.btn-lg.pull-right.hspacer-sm.vspacer-sm .glyphicon,
.btn.btn-default.btn-lg.pull-right.hspacer-sm.vspacer-sm img {
  display: none !important;
}

/* =================================================
   FLAT CORPORATE STYLING - Add to existing custom.css
   ================================================= */

/* Form Controls - Flat Input Fields */
.form-control, 
input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="number"], 
input[type="url"], 
input[type="tel"], 
input[type="date"],
input[type="datetime-local"],
textarea, 
select {
    border-radius: 0 !important;
    border: 1px solid #bdc3c7 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    transition: border-color 0.2s ease !important;
    background-color: #ffffff !important;
    font-family: 'Roboto', sans-serif !important;
    padding: 8px 12px !important;
}

.form-control:focus, 
input:focus, 
textarea:focus, 
select:focus {
    border-color: rgb(1,39,62) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    outline: none !important;
    background-color: #ffffff !important;
}

/* Disabled form controls */
.form-control:disabled,
.form-control[readonly] {
    background-color: #ecf0f1 !important;
    opacity: 1 !important;
    color: #7f8c8d !important;
}

/* Select2 Dropdown Styling */
.select2-container--bootstrap .select2-selection--single {
    border-radius: 0 !important;
    border: 1px solid #bdc3c7 !important;
    box-shadow: none !important;
    height: 36px !important;
    background-color: #ffffff !important;
}

.select2-container--bootstrap .select2-selection--single:focus,
.select2-container--bootstrap.select2-container--focus .select2-selection--single {
    border-color: rgb(1,39,62) !important;
    box-shadow: none !important;
}

.select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
    padding-left: 12px !important;
    padding-right: 20px !important;
    line-height: 34px !important;
    color: #2c3e50 !important;
}

.select2-container--bootstrap .select2-selection--single .select2-selection__arrow {
    height: 34px !important;
    right: 8px !important;
}

/* Select2 Multi-select */
.select2-container--bootstrap .select2-selection--multiple {
    border-radius: 0 !important;
    border: 1px solid #bdc3c7 !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
    min-height: 36px !important;
}

.select2-container--bootstrap .select2-selection--multiple:focus,
.select2-container--bootstrap.select2-container--focus .select2-selection--multiple {
    border-color: rgb(1,39,62) !important;
    box-shadow: none !important;
}

/* Select2 Dropdown */
.select2-dropdown {
    border-radius: 0 !important;
    border: 1px solid #bdc3c7 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    background-color: #ffffff !important;
}

.select2-results__option {
    padding: 8px 12px !important;
    color: #2c3e50 !important;
}

.select2-results__option--highlighted[aria-selected] {
    background-color: rgb(1,39,62) !important;
    color: #ffffff !important;
}

.select2-results__option[aria-selected="true"] {
    background-color: #ecf0f1 !important;
    color: #2c3e50 !important;
}

/* Select2 Tags */
.select2-selection__choice {
    border-radius: 0 !important;
    border: 1px solid #bdc3c7 !important;
    background-color: #ecf0f1 !important;
    color: #2c3e50 !important;
    padding: 2px 8px !important;
    margin: 2px !important;
}

/* Bootstrap Buttons - Enhanced Flat Style */
.btn {
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    text-shadow: none !important;
    border-width: 1px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    padding: 8px 16px !important;
    font-family: 'Roboto', sans-serif !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.btn:focus, 
.btn:active:focus, 
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* Default button - clean gray */
.btn-default {
    background-color: #ecf0f1 !important;
    border-color: #bdc3c7 !important;
    color: #2c3e50 !important;
}

.btn-default:hover, 
.btn-default:focus, 
.btn-default:active,
.btn-default.active {
    background-color: #d5dbdb !important;
    border-color: #95a5a6 !important;
    color: #2c3e50 !important;
}

/* Panel/Card Styling - Flat Design */
.panel {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 1px solid #bdc3c7 !important;
    margin-bottom: 20px !important;
}

.panel-body {
    padding: 20px !important;
    background-color: #ffffff !important;
}

/* Well - Flat Version */
.well {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 1px solid #bdc3c7 !important;
    background-color: #f8f9fa !important;
    padding: 15px !important;
}

/* Modal Styling - Clean and Flat */
.modal-content {
    border-radius: 0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    border: 1px solid #bdc3c7 !important;
}

.modal-header {
    border-bottom: 1px solid #bdc3c7 !important;
    background-color: #f8f9fa !important;
    border-radius: 0 !important;
    padding: 15px 20px !important;
}

.modal-footer {
    border-top: 1px solid #bdc3c7 !important;
    background-color: #f8f9fa !important;
    border-radius: 0 !important;
    padding: 15px 20px !important;
}

.modal-body {
    padding: 20px !important;
}

/* Table Styling - Corporate Clean */
.table {
    background-color: #ffffff !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.table th {
    background-color: #f8f9fa !important;
    border-bottom: 2px solid #bdc3c7 !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
    padding: 12px 8px !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
}

.table td {
    border-top: 1px solid #ecf0f1 !important;
    padding: 10px 8px !important;
    vertical-align: middle !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fbfcfc !important;
}

.table-hover > tbody > tr:hover {
    background-color: #f1f3f4 !important;
}

/* Input Groups - Flat Style */
.input-group-addon {
    border-radius: 0 !important;
    border: 1px solid #bdc3c7 !important;
    background-color: #ecf0f1 !important;
    box-shadow: none !important;
    color: #2c3e50 !important;
    padding: 8px 12px !important;
}

.input-group .form-control:first-child {
    border-radius: 0 !important;
    border-right: none !important;
}

.input-group .form-control:last-child {
    border-radius: 0 !important;
    border-left: none !important;
}

.input-group .form-control:not(:first-child):not(:last-child) {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
}

/* Checkbox and Radio Styling */
.checkbox, .radio {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.checkbox label, .radio label {
    font-weight: 400 !important;
    color: #2c3e50 !important;
    padding-left: 20px !important;
    min-height: 20px !important;
}

/* Custom checkbox styling */
.checkbox input[type="checkbox"],
.radio input[type="radio"] {
    margin-left: -20px !important;
    margin-top: 2px !important;
}

/* Pagination - Flat Style */
.pagination > li > a, 
.pagination > li > span {
    border-radius: 0 !important;
    border: 1px solid #bdc3c7 !important;
    color: #2c3e50 !important;
    margin: 0 1px !important;
    padding: 8px 12px !important;
    background-color: #ffffff !important;
}

.pagination > li > a:hover, 
.pagination > li > a:focus {
    background-color: #ecf0f1 !important;
    border-color: #95a5a6 !important;
    color: #2c3e50 !important;
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus {
    background-color: rgb(1,39,62) !important;
    border-color: rgb(1,39,62) !important;
    color: #ffffff !important;
}

.pagination > .disabled > span,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
    background-color: #ecf0f1 !important;
    border-color: #bdc3c7 !important;
    color: #95a5a6 !important;
}

/* Progress Bars - Flat Style */
.progress {
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: #ecf0f1 !important;
    height: 20px !important;
    overflow: hidden !important;
}

.progress-bar {
    box-shadow: none !important;
    border-radius: 0 !important;
    background-color: rgb(1,39,62) !important;
    transition: width 0.6s ease !important;
}

.progress-bar-success {
    background-color: #27ae60 !important;
}

.progress-bar-info {
    background-color: rgb(57,71,96) !important;
}

.progress-bar-warning {
    background-color: #f39c12 !important;
}

.progress-bar-danger {
    background-color: rgb(187,15,51) !important;
}

/* Labels and Badges - Flat Style */
.label, .badge {
    border-radius: 0 !important;
    font-weight: 500 !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.label-default, .badge-default {
    background-color: #95a5a6 !important;
    color: #ffffff !important;
}

.label-primary, .badge-primary {
    background-color: rgb(1,39,62) !important;
    color: #ffffff !important;
}

.label-success, .badge-success {
    background-color: #27ae60 !important;
    color: #ffffff !important;
}

.label-info, .badge-info {
    background-color: rgb(57,71,96) !important;
    color: #ffffff !important;
}

.label-warning, .badge-warning {
    background-color: #f39c12 !important;
    color: #ffffff !important;
}

.label-danger, .badge-danger {
    background-color: rgb(187,15,51) !important;
    color: #ffffff !important;
}

/* Breadcrumb - Flat Style */
.breadcrumb {
    background-color: #ecf0f1 !important;
    border-radius: 0 !important;
    border: 1px solid #bdc3c7 !important;
    padding: 8px 15px !important;
    margin-bottom: 20px !important;
}

.breadcrumb > li + li:before {
    color: #7f8c8d !important;
    content: ">" !important;
    padding: 0 5px !important;
}

.breadcrumb > .active {
    color: #2c3e50 !important;
}

/* Tabs - Flat Style */
.nav-tabs {
    border-bottom: 2px solid #bdc3c7 !important;
}

.nav-tabs > li > a {
    border-radius: 0 !important;
    border: 1px solid transparent !important;
    background-color: transparent !important;
    color: #2c3e50 !important;
    padding: 10px 15px !important;
    margin-right: 2px !important;
    margin-bottom: -1px !important;
}

.nav-tabs > li > a:hover {
    background-color: #ecf0f1 !important;
    border-color: #bdc3c7 !important;
    color: #2c3e50 !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background-color: #ffffff !important;
    border-color: #bdc3c7 #bdc3c7 #ffffff !important;
    color: rgb(1,39,62) !important;
    font-weight: 600 !important;
}

/* Form Groups - Better Spacing */
.form-group {
    margin-bottom: 20px !important;
}

.form-group label {
    color: #2c3e50 !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* Control Label Styling */
.control-label {
    color: #2c3e50 !important;
    font-weight: 500 !important;
}

/* Help Text */
.help-block {
    color: #7f8c8d !important;
    font-size: 12px !important;
    margin-top: 5px !important;
    margin-bottom: 0 !important;
}

/* List Groups - Flat Style */
.list-group {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.list-group-item {
    border-radius: 0 !important;
    border: 1px solid #bdc3c7 !important;
    background-color: #ffffff !important;
    color: #2c3e50 !important;
    padding: 12px 15px !important;
    margin-bottom: -1px !important;
}

.list-group-item:hover {
    background-color: #f8f9fa !important;
}

.list-group-item.active {
    background-color: rgb(1,39,62) !important;
    border-color: rgb(1,39,62) !important;
    color: #ffffff !important;
}

/* Tooltips - Clean Style */
.tooltip-inner {
    background-color: #2c3e50 !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
}

.tooltip.top .tooltip-arrow {
    border-top-color: #2c3e50 !important;
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: #2c3e50 !important;
}

.tooltip.left .tooltip-arrow {
    border-left-color: #2c3e50 !important;
}

.tooltip.right .tooltip-arrow {
    border-right-color: #2c3e50 !important;
}

/* Popovers - Clean Style */
.popover {
    border-radius: 0 !important;
    border: 1px solid #bdc3c7 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

.popover-title {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #bdc3c7 !important;
    border-radius: 0 !important;
    color: #2c3e50 !important;
    font-weight: 600 !important;
}

.popover-content {
    color: #2c3e50 !important;
}

/* AppGini Specific - Flat Detail View Cards */
.panel-default > .panel-heading {
    background-color: rgb(1,39,62) !important;
    color: #ffffff !important;
    border-color: rgb(1,30,50) !important;
    border-radius: 0 !important;
}

.panel-default {
    border-color: #bdc3c7 !important;
    border-radius: 0 !important;
}

/* Date Picker - Flat Style */
.datepicker {
    border-radius: 0 !important;
    border: 1px solid #bdc3c7 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover {
    background-color: rgb(1,39,62) !important;
    color: #ffffff !important;
}

.datepicker table tr td.today {
    background-color: #f39c12 !important;
    color: #ffffff !important;
}

/* Remove any remaining rounded corners from AppGini elements */
.btn-group > .btn:first-child {
    border-radius: 0 !important;
}

.btn-group > .btn:last-child {
    border-radius: 0 !important;
}

.btn-group > .btn:not(:first-child):not(:last-child) {
    border-radius: 0 !important;
}

/* Dropdown Button Groups */
.btn-group .dropdown-toggle {
    border-radius: 0 !important;
}

.dropdown-menu {
    border-radius: 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}
/* =================================================
   ADDITIONAL FLAT FIXES - Add to custom.css
   ================================================= */

/* Select2 Specific Fixes - Remove ALL 3D Effects */
.select2-container .select2-choice {
    border-radius: 0 !important;
    border: 1px solid #bdc3c7 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background: #ffffff !important;
    background-image: none !important;
    filter: none !important;
    height: 36px !important;
    line-height: 34px !important;
    padding: 0 12px !important;
}

.select2-container .select2-choice:focus,
.select2-container-active .select2-choice {
    border-color: rgb(1,39,62) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    outline: none !important;
}

/* Select2 Arrow - Completely Flat */
.select2-container .select2-choice .select2-arrow {
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    filter: none !important;
    width: 20px !important;
    height: 34px !important;
    right: 8px !important;
    top: 0 !important;
}

.select2-container .select2-choice .select2-arrow b {
    background: none !important;
    background-image: none !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 5px solid #7f8c8d !important;
    margin-left: -4px !important;
    margin-top: -2px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
}

/* Select2 Chosen Text */
.select2-container .select2-choice .select2-chosen {
    margin-right: 30px !important;
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    color: #2c3e50 !important;
    line-height: 34px !important;
}

/* Select2 Multi-select Choice Items - Flat Tags */
.select2-container-multi .select2-choices .select2-search-choice {
    border-radius: 0 !important;
    border: 1px solid #bdc3c7 !important;
    background: #ecf0f1 !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    color: #2c3e50 !important;
    padding: 3px 8px 3px 18px !important;
    margin: 3px 0 3px 5px !important;
}

.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close {
    left: 3px !important;
    top: 4px !important;
    width: 12px !important;
    height: 12px !important;
    background: none !important;
    background-image: none !important;
    color: #7f8c8d !important;
    font-size: 14px !important;
    line-height: 12px !important;
}

.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:before {
    content: "×" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* Select2 Multi Container */
.select2-container-multi .select2-choices {
    border-radius: 0 !important;
    border: 1px solid #bdc3c7 !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    min-height: 36px !important;
    padding: 4px !important;
}

.select2-container-multi.select2-container-active .select2-choices {
    border-color: rgb(1,39,62) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* Select2 Dropdown Results */
.select2-drop {
    border-radius: 0 !important;
    border: 1px solid #bdc3c7 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    background: #ffffff !important;
    margin-top: -1px !important;
}

.select2-drop.select2-drop-above {
    border-radius: 0 !important;
    margin-bottom: -1px !important;
    margin-top: 0 !important;
}

/* Select2 Results Options */
.select2-results .select2-result {
    padding: 8px 12px !important;
    margin: 0 !important;
    border-bottom: 1px solid #ecf0f1 !important;
}

.select2-results .select2-highlighted {
    background: rgb(1,39,62) !important;
    color: #ffffff !important;
    border-radius: 0 !important;
}

.select2-results .select2-result-label {
    color: #2c3e50 !important;
    font-size: 14px !important;
}

.select2-results .select2-highlighted .select2-result-label {
    color: #ffffff !important;
}

/* ============================================
   IMPROVED FORM SPACING AND LAYOUT
   ============================================ */

/* Better vertical spacing for form groups - Higher specificity */
.panel-body .form-group,
.form-horizontal .form-group,
.container .form-group,
div .form-group,
.form-group {
    margin-bottom: 12px !important;
    clear: both !important;
}

/* Form row spacing */
.row .form-group,
.panel-body .row .form-group {
    margin-bottom: 10px !important;
}

/* AppGini specific form spacing overrides */
.panel .panel-body .form-group {
    margin-bottom: 12px !important;
}

/* Detail view specific spacing */
.dv .form-group,
.detail-view .form-group {
    margin-bottom: 12px !important;
}

/* Bootstrap form group overrides */
.col-md-6 .form-group,
.col-sm-6 .form-group,
.col-lg-6 .form-group {
    margin-bottom: 12px !important;
}

/* Table row form groups */
tr .form-group,
td .form-group {
    margin-bottom: 8px !important;
}

/* Label spacing */
.form-group label,
.control-label {
    margin-bottom: 8px !important;
    display: block !important;
    font-weight: 500 !important;
    color: #2c3e50 !important;
    font-size: 14px !important;
}

/* Form control consistent height and spacing */
.form-control {
    height: 36px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* Textarea specific height */
textarea.form-control {
    height: auto !important;
    min-height: 72px !important;
    padding: 12px !important;
    resize: vertical !important;
}

/* ============================================
   BUTTON ICON CENTERING FIXES - REMOVED
   (Caused unintended layout issues)
   ============================================ */

/* ============================================
   INPUT GROUP IMPROVEMENTS
   ============================================ */

/* Input group consistent heights */
.input-group {
    display: flex !important;
    width: 100% !important;
}

.input-group .form-control {
    flex: 1 !important;
    position: relative !important;
    z-index: 2 !important;
}

.input-group-addon {
    padding: 8px 12px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #2c3e50 !important;
    background-color: #ecf0f1 !important;
    border: 1px solid #bdc3c7 !important;
    border-radius: 0 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
}

.input-group-btn {
    position: relative !important;
    font-size: 0 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    display: flex !important;
    align-items: stretch !important;
}

.input-group-btn > .btn {
    position: relative !important;
    border-radius: 0 !important;
    margin: 0 !important;
    min-height: 36px !important;
}

/* ============================================
   HORIZONTAL FORM IMPROVEMENTS
   ============================================ */

/* Better alignment for horizontal forms */
.form-horizontal .control-label {
    padding-top: 8px !important;
    margin-bottom: 0 !important;
    text-align: right !important;
}

.form-horizontal .form-group {
    margin-left: -15px !important;
    margin-right: -15px !important;
}

.form-horizontal .form-control-static {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    margin-bottom: 0 !important;
    min-height: 20px !important;
}

/* ============================================
   APPGINI SPECIFIC FIXES
   ============================================ */

/* Detail view form spacing */
.panel-body .form-group {
    margin-bottom: 20px !important;
}

/* Table view filter spacing */
.table-view-filter .form-group {
    margin-bottom: 15px !important;
}

/* Lookup button alignment */
.btn-group-vertical > .btn,
.btn-group > .btn {
    border-radius: 0 !important;
    margin: 0 !important;
}

/* AppGini's input-group-addon specific fixes */
.btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    border-right: none !important;
}

.btn-group > .btn:not(:first-child) {
    margin-left: 0 !important;
    border-left: none !important;
}

/* Ensure consistent heights across input groups */
.input-group > .form-control,
.input-group-addon,
.input-group-btn > .btn {
    height: 36px !important;
    box-sizing: border-box !important;
}
/* =================================================
   ADDITIONAL FLAT FIXES - Add to custom.css
   ================================================= */

/* Select2 Specific Fixes - Remove ALL 3D Effects */
.select2-container .select2-choice {
    border-radius: 0 !important;
    border: 1px solid #bdc3c7 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background: #ffffff !important;
    background-image: none !important;
    filter: none !important;
    height: 36px !important;
    line-height: 34px !important;
    padding: 0 12px !important;
}

.select2-container .select2-choice:focus,
.select2-container-active .select2-choice {
    border-color: rgb(1,39,62) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    outline: none !important;
}

/* Select2 Arrow - Completely Flat */
.select2-container .select2-choice .select2-arrow {
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    filter: none !important;
    width: 20px !important;
    height: 34px !important;
    right: 8px !important;
    top: 0 !important;
}

.select2-container .select2-choice .select2-arrow b {
    background: none !important;
    background-image: none !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 5px solid #7f8c8d !important;
    margin-left: -4px !important;
    margin-top: -2px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
}

/* Select2 Chosen Text */
.select2-container .select2-choice .select2-chosen {
    margin-right: 30px !important;
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    color: #2c3e50 !important;
    line-height: 34px !important;
}

/* Select2 Multi-select Choice Items - Flat Tags */
.select2-container-multi .select2-choices .select2-search-choice {
    border-radius: 0 !important;
    border: 1px solid #bdc3c7 !important;
    background: #ecf0f1 !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    color: #2c3e50 !important;
    padding: 3px 8px 3px 18px !important;
    margin: 3px 0 3px 5px !important;
}

.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close {
    left: 3px !important;
    top: 4px !important;
    width: 12px !important;
    height: 12px !important;
    background: none !important;
    background-image: none !important;
    color: #7f8c8d !important;
    font-size: 14px !important;
    line-height: 12px !important;
}

.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:before {
    content: "×" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* Select2 Multi Container */
.select2-container-multi .select2-choices {
    border-radius: 0 !important;
    border: 1px solid #bdc3c7 !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    min-height: 36px !important;
    padding: 4px !important;
}

.select2-container-multi.select2-container-active .select2-choices {
    border-color: rgb(1,39,62) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* Fix Select2 Search Field Width */
.select2-container-multi .select2-choices .select2-search-field {
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    line-height: 28px !important;
    color: #2c3e50 !important;
    height: 28px !important;
    min-width: 100px !important;
    flex-grow: 1 !important;
}

.select2-container-multi .select2-choices .select2-search-field input {
    padding: 4px 6px !important;
    margin: 1px 0 !important;
    outline: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #2c3e50 !important;
    width: 100% !important;
    min-width: 100px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* Ensure the choices container uses flexbox for proper layout */
.select2-container-multi .select2-choices {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

/* Make sure search field expands properly */
.select2-container-multi .select2-choices li.select2-search-field {
    flex-grow: 1 !important;
    min-width: 100px !important;
    margin: 2px !important;
}

/* Select2 Dropdown Results */
.select2-drop {
    border-radius: 0 !important;
    border: 1px solid #bdc3c7 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    background: #ffffff !important;
    margin-top: -1px !important;
}

.select2-drop.select2-drop-above {
    border-radius: 0 !important;
    margin-bottom: -1px !important;
    margin-top: 0 !important;
}

/* Select2 Results Options */
.select2-results .select2-result {
    padding: 8px 12px !important;
    margin: 0 !important;
    border-bottom: 1px solid #ecf0f1 !important;
}

.select2-results .select2-highlighted {
    background: rgb(1,39,62) !important;
    color: #ffffff !important;
    border-radius: 0 !important;
}

.select2-results .select2-result-label {
    color: #2c3e50 !important;
    font-size: 14px !important;
}

.select2-results .select2-highlighted .select2-result-label {
    color: #ffffff !important;
}

/* ============================================
   IMPROVED FORM SPACING AND LAYOUT
   ============================================ */

/* Better vertical spacing for form groups - Higher specificity */
.panel-body .form-group,
.form-horizontal .form-group,
.container .form-group,
div .form-group,
.form-group {
    margin-bottom: 12px !important;
    clear: both !important;
}

/* Form row spacing */
.row .form-group,
.panel-body .row .form-group {
    margin-bottom: 10px !important;
}

/* AppGini specific form spacing overrides */
.panel .panel-body .form-group {
    margin-bottom: 12px !important;
}

/* Detail view specific spacing */
.dv .form-group,
.detail-view .form-group {
    margin-bottom: 12px !important;
}

/* Bootstrap form group overrides */
.col-md-6 .form-group,
.col-sm-6 .form-group,
.col-lg-6 .form-group {
    margin-bottom: 12px !important;
}

/* Table row form groups */
tr .form-group,
td .form-group {
    margin-bottom: 8px !important;
}

/* Label spacing */
.form-group label,
.control-label {
    margin-bottom: 8px !important;
    display: block !important;
    font-weight: 500 !important;
    color: #2c3e50 !important;
    font-size: 14px !important;
}

/* Form control consistent height and spacing */
.form-control {
    height: 36px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* Textarea specific height */
textarea.form-control {
    height: auto !important;
    min-height: 72px !important;
    padding: 12px !important;
    resize: vertical !important;
}

/* ============================================
   BUTTON ICON CENTERING FIXES - REMOVED
   (Caused unintended layout issues)
   ============================================ */

/* ============================================
   INPUT GROUP IMPROVEMENTS
   ============================================ */

/* Input group consistent heights */
.input-group {
    display: flex !important;
    width: 100% !important;
}

.input-group .form-control {
    flex: 1 !important;
    position: relative !important;
    z-index: 2 !important;
}

.input-group-addon {
    padding: 8px 12px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #2c3e50 !important;
    background-color: #ecf0f1 !important;
    border: 1px solid #bdc3c7 !important;
    border-radius: 0 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
}

.input-group-btn {
    position: relative !important;
    font-size: 0 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    display: flex !important;
    align-items: stretch !important;
}

.input-group-btn > .btn {
    position: relative !important;
    border-radius: 0 !important;
    margin: 0 !important;
    min-height: 36px !important;
}

/* ============================================
   HORIZONTAL FORM IMPROVEMENTS
   ============================================ */

/* Better alignment for horizontal forms */
.form-horizontal .control-label {
    padding-top: 8px !important;
    margin-bottom: 0 !important;
    text-align: right !important;
}

.form-horizontal .form-group {
    margin-left: -15px !important;
    margin-right: -15px !important;
}

.form-horizontal .form-control-static {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    margin-bottom: 0 !important;
    min-height: 20px !important;
}

/* ============================================
   APPGINI SPECIFIC FIXES
   ============================================ */

/* Detail view form spacing */
.panel-body .form-group {
    margin-bottom: 20px !important;
}

/* Table view filter spacing */
.table-view-filter .form-group {
    margin-bottom: 15px !important;
}

/* Lookup button alignment */
.btn-group-vertical > .btn,
.btn-group > .btn {
    border-radius: 0 !important;
    margin: 0 !important;
}

/* AppGini's input-group-addon specific fixes */
.btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    border-right: none !important;
}

.btn-group > .btn:not(:first-child) {
    margin-left: 0 !important;
    border-left: none !important;
}

/* Ensure consistent heights across input groups */
.input-group > .form-control,
.input-group-addon,
.input-group-btn > .btn {
    height: 36px !important;
    box-sizing: border-box !important;
}
/* =================================================
   ADDITIONAL FLAT FIXES - Add to custom.css
   ================================================= */

/* Select2 Specific Fixes - Remove ALL 3D Effects */
.select2-container .select2-choice {
    border-radius: 0 !important;
    border: 1px solid #bdc3c7 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background: #ffffff !important;
    background-image: none !important;
    filter: none !important;
    height: 36px !important;
    line-height: 34px !important;
    padding: 0 12px !important;
}

.select2-container .select2-choice:focus,
.select2-container-active .select2-choice {
    border-color: rgb(1,39,62) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    outline: none !important;
}

/* Select2 Arrow - Completely Flat */
.select2-container .select2-choice .select2-arrow {
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    filter: none !important;
    width: 20px !important;
    height: 34px !important;
    right: 8px !important;
    top: 0 !important;
}

.select2-container .select2-choice .select2-arrow b {
    background: none !important;
    background-image: none !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 5px solid #7f8c8d !important;
    margin-left: -4px !important;
    margin-top: -2px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
}

/* Select2 Chosen Text */
.select2-container .select2-choice .select2-chosen {
    margin-right: 30px !important;
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    color: #2c3e50 !important;
    line-height: 34px !important;
}

/* Select2 Multi-select Choice Items - Flat Tags */
.select2-container-multi .select2-choices .select2-search-choice {
    border-radius: 0 !important;
    border: 1px solid #bdc3c7 !important;
    background: #ecf0f1 !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    color: #2c3e50 !important;
    padding: 3px 8px 3px 18px !important;
    margin: 3px 0 3px 5px !important;
}

.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close {
    left: 3px !important;
    top: 4px !important;
    width: 12px !important;
    height: 12px !important;
    background: none !important;
    background-image: none !important;
    color: #7f8c8d !important;
    font-size: 14px !important;
    line-height: 12px !important;
}

.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:before {
    content: "×" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* Select2 Multi Container */
.select2-container-multi .select2-choices {
    border-radius: 0 !important;
    border: 1px solid #bdc3c7 !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    min-height: 36px !important;
    padding: 4px !important;
}

.select2-container-multi.select2-container-active .select2-choices {
    border-color: rgb(1,39,62) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* Fix Select2 Search Field Width */
.select2-container-multi .select2-choices .select2-search-field {
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    line-height: 28px !important;
    color: #2c3e50 !important;
    height: 28px !important;
    min-width: 100px !important;
    flex-grow: 1 !important;
}

.select2-container-multi .select2-choices .select2-search-field input {
    padding: 4px 6px !important;
    margin: 1px 0 !important;
    outline: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #2c3e50 !important;
    width: 100% !important;
    min-width: 100px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* Ensure the choices container uses flexbox for proper layout */
.select2-container-multi .select2-choices {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

/* Make sure search field expands properly */
.select2-container-multi .select2-choices li.select2-search-field {
    flex-grow: 1 !important;
    min-width: 100px !important;
    margin: 2px !important;
}

/* Select2 Dropdown Results */
.select2-drop {
    border-radius: 0 !important;
    border: 1px solid #bdc3c7 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    background: #ffffff !important;
    margin-top: -1px !important;
}

.select2-drop.select2-drop-above {
    border-radius: 0 !important;
    margin-bottom: -1px !important;
    margin-top: 0 !important;
}

/* Select2 Results Options */
.select2-results .select2-result {
    padding: 8px 12px !important;
    margin: 0 !important;
    border-bottom: 1px solid #ecf0f1 !important;
}

.select2-results .select2-highlighted {
    background: rgb(1,39,62) !important;
    color: #ffffff !important;
    border-radius: 0 !important;
}

.select2-results .select2-result-label {
    color: #2c3e50 !important;
    font-size: 14px !important;
}

.select2-results .select2-highlighted .select2-result-label {
    color: #ffffff !important;
}

/* ============================================
   IMPROVED FORM SPACING AND LAYOUT
   ============================================ */

/* Better vertical spacing for form groups - Higher specificity */
.panel-body .form-group,
.form-horizontal .form-group,
.container .form-group,
div .form-group,
.form-group {
    margin-bottom: 12px !important;
    clear: both !important;
}

/* Form row spacing */
.row .form-group,
.panel-body .row .form-group {
    margin-bottom: 10px !important;
}

/* AppGini specific form spacing overrides */
.panel .panel-body .form-group {
    margin-bottom: 12px !important;
}

/* Detail view specific spacing */
.dv .form-group,
.detail-view .form-group {
    margin-bottom: 12px !important;
}

/* Bootstrap form group overrides */
.col-md-6 .form-group,
.col-sm-6 .form-group,
.col-lg-6 .form-group {
    margin-bottom: 12px !important;
}

/* Table row form groups */
tr .form-group,
td .form-group {
    margin-bottom: 8px !important;
}

/* Label spacing */
.form-group label,
.control-label {
    margin-bottom: 8px !important;
    display: block !important;
    font-weight: 500 !important;
    color: #2c3e50 !important;
    font-size: 14px !important;
}

/* Form control consistent height and spacing */
.form-control {
    height: 36px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* Textarea specific height */
textarea.form-control {
    height: auto !important;
    min-height: 72px !important;
    padding: 12px !important;
    resize: vertical !important;
}

/* ============================================
   BUTTON ICON CENTERING FIXES - REMOVED
   (Caused unintended layout issues)
   ============================================ */

/* ============================================
   INPUT GROUP IMPROVEMENTS
   ============================================ */

/* Input group consistent heights */
.input-group {
    display: flex !important;
    width: 100% !important;
}

.input-group .form-control {
    flex: 1 !important;
    position: relative !important;
    z-index: 2 !important;
}

.input-group-addon {
    padding: 8px 12px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #2c3e50 !important;
    background-color: #ecf0f1 !important;
    border: 1px solid #bdc3c7 !important;
    border-radius: 0 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
}

.input-group-btn {
    position: relative !important;
    font-size: 0 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    display: flex !important;
    align-items: stretch !important;
}

.input-group-btn > .btn {
    position: relative !important;
    border-radius: 0 !important;
    margin: 0 !important;
    min-height: 36px !important;
}

/* ============================================
   HORIZONTAL FORM IMPROVEMENTS
   ============================================ */

/* Better alignment for horizontal forms */
.form-horizontal .control-label {
    padding-top: 8px !important;
    margin-bottom: 0 !important;
    text-align: right !important;
}

.form-horizontal .form-group {
    margin-left: -15px !important;
    margin-right: -15px !important;
}

.form-horizontal .form-control-static {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    margin-bottom: 0 !important;
    min-height: 20px !important;
}

/* ============================================
   TABLE VIEW BORDER IMPROVEMENTS
   ============================================ */

/* Make table borders much thinner */
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border: 1px solid #e1e5e9 !important;
}

/* Even thinner inner borders */
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th {
    border-bottom-width: 1px !important;
}

/* Specific AppGini table styling */
.table.table-striped.table-bordered.table-hover {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #e1e5e9 !important;
}

.table.table-striped.table-bordered.table-hover th,
.table.table-striped.table-bordered.table-hover td {
    border-width: 0 1px 1px 0 !important;
    border-style: solid !important;
    border-color: #e1e5e9 !important;
}

/* First column no left border */
.table.table-striped.table-bordered.table-hover th:first-child,
.table.table-striped.table-bordered.table-hover td:first-child {
    border-left-width: 0 !important;
}

/* Last row no bottom border on cells */
.table.table-striped.table-bordered.table-hover tbody tr:last-child td {
    border-bottom-width: 0 !important;
}

/* Header styling with minimal borders */
.table.table-striped.table-bordered.table-hover thead th {
    border-bottom: 2px solid #d0d7de !important;
    border-top: 0 !important;
    background-color: #f6f8fa !important;
    font-weight: 600 !important;
    color: #000000 !important;
    padding: 8px 12px !important;
}

/* Clean cell padding and borders */
.table.table-striped.table-bordered.table-hover tbody td {
    padding: 8px 12px !important;
    border-top: 1px solid #e1e5e9 !important;
    vertical-align: middle !important;
    color: #000000 !important;
}

/* Remove double borders between cells */
.table-bordered > thead > tr > th + th,
.table-bordered > tbody > tr > th + th,
.table-bordered > tfoot > tr > th + th,
.table-bordered > thead > tr > td + td,
.table-bordered > tbody > tr > td + td,
.table-bordered > tfoot > tr > td + td {
    border-left: none !important;
}

/* Clean hover effect */
.table-hover > tbody > tr:hover {
    background-color: #f6f8fa !important;
}

/* Striped rows with subtle background */
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fbfcfd !important;
}

/* Table responsive container */
.table-responsive {
    border: none !important;
    box-shadow: none !important;
}

/* Clean checkbox column */
.table th:first-child,
.table td:first-child {
    width: 18px !important;
    text-align: center !important;
    padding: 8px 4px !important;
}

/* Link styling in table cells */
.table td a {
    color: #000000 !important;
    text-decoration: none !important;
    display: block !important;
    padding: 4px 8px !important;
    margin: -4px -8px !important;
}

.table td a:hover {
    color: #333333 !important;
    background-color: #f5f5f5 !important;
    text-decoration: none !important;
}

/* Detail view form spacing */
.panel-body .form-group {
    margin-bottom: 20px !important;
}

/* Table view filter spacing */
.table-view-filter .form-group {
    margin-bottom: 15px !important;
}

/* Lookup button alignment */
.btn-group-vertical > .btn,
.btn-group > .btn {
    border-radius: 0 !important;
    margin: 0 !important;
}

/* AppGini's input-group-addon specific fixes */
.btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    border-right: none !important;
}

.btn-group > .btn:not(:first-child) {
    margin-left: 0 !important;
    border-left: none !important;
}

/* Ensure consistent heights across input groups */
.input-group > .form-control,
.input-group-addon,
.input-group-btn > .btn {
    height: 36px !important;
    box-sizing: border-box !important;
}
.table > tbody > tr.highlighted-record,
.table tbody tr.highlighted-record,
tr.highlighted-record {
    background-color: #f6f8fa !important; /* Light gray instead of orange */
    background: #f6f8fa !important;
    color: #000000 !important;
}

/* Maintain hover effect on highlighted rows */
.table > tbody > tr.highlighted-record:hover,
.table tbody tr.highlighted-record:hover,
tr.highlighted-record:hover {
    background-color: #e9ecef !important;
    background: #e9ecef !important;
}
/* ============================================
   RADIO BUTTON SPACING IMPROVEMENTS
   ============================================ */

/* Override the existing radio button margin settings */
.radio {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

/* Specific styling for inline radio buttons (like your calltype example) */
input[type="radio"] {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    margin-right: 6px !important;
}

/* Labels next to radio buttons */
input[type="radio"] + label {
    margin-bottom: 4px !important;
    display: inline-block !important;
    vertical-align: top !important;
    line-height: 1.4 !important;
}

/* For radio buttons in divs (like your example) */
div input[type="radio"] {
    margin-top: 3px !important;
    margin-bottom: 3px !important;
}

/* Reduce spacing between radio button groups */
.radio + .radio {
    margin-top: 2px !important;
}

/* For AppGini specific radio button containers */
.form-group .radio {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

/* Compact radio button groups */
.radio-group,
.radio-list {
    line-height: 1.3 !important;
}

.radio-group .radio,
.radio-list .radio {
    margin-top: 3px !important;
    margin-bottom: 3px !important;
}

/* Override any BR spacing after radio buttons */
input[type="radio"] + label + br {
    line-height: 0.8 !important;
}

/* Checkbox spacing improvements too (for consistency) */
.checkbox {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

.checkbox + .checkbox {
    margin-top: 2px !important;
}

input[type="checkbox"] {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    margin-right: 6px !important;
}

input[type="checkbox"] + label {
    margin-bottom: 4px !important;
    display: inline-block !important;
    vertical-align: top !important;
    line-height: 1.4 !important;
}
/* ============================================
   INPUT GROUP OVERFLOW FIXES
   ============================================ */

/* Prevent input groups from creating horizontal scroll */
.input-group {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Ensure the input field flexes properly and doesn't overflow */
.input-group .form-control {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 150px) !important; /* Reserve space for 4 buttons */
    position: relative !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
}

/* Button group should not expand beyond container */
.input-group-btn {
    position: relative !important;
    font-size: 0 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    display: flex !important;
    align-items: stretch !important;
    flex-shrink: 0 !important;
    /* Remove max-width restriction to allow all buttons to show */
}

/* Individual buttons in input groups */
.input-group-btn > .btn {
    position: relative !important;
    border-radius: 0 !important;
    margin: 0 !important;
    min-height: 36px !important;
    flex-shrink: 0 !important;
    width: 36px !important; /* Fixed width for consistency */
    min-width: 36px !important; /* Ensure minimum width */
    padding: 6px 4px !important; /* Tighter padding */
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Multiple buttons in input group */
.input-group-btn .btn + .btn {
    margin-left: -1px !important;
}

/* Container columns should not overflow */
.col-lg-9,
.col-md-9,
.col-sm-9,
.col-xs-9,
.col-lg-8,
.col-md-8,
.col-sm-8,
.col-xs-8,
.col-lg-7,
.col-md-7,
.col-sm-7,
.col-xs-7,
.col-lg-6,
.col-md-6,
.col-sm-6,
.col-xs-6 {
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Ensure input group addons don't cause overflow */
.input-group-addon {
    padding: 8px 10px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #2c3e50 !important;
    background-color: #ecf0f1 !important;
    border: 1px solid #bdc3c7 !important;
    border-radius: 0 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    /* Remove max-width restriction */
}

/* Special handling for time picker inputs with multiple buttons */
.input-group .form-control[name="time"],
.input-group .form-control[id*="time"],
.input-group .form-control[class*="time"] {
    flex: 1 1 auto !important; /* Let it take available space */
    min-width: 80px !important; /* Smaller minimum to allow more button space */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .input-group-btn > .btn {
        width: 32px !important;
        padding: 4px 6px !important;
    }
    
    .input-group .form-control {
        flex: 1 1 auto !important;
        min-width: 60px !important; /* Even smaller on mobile */
    }
}

/* Fix for buttons with icons only */
.input-group-btn .btn .glyphicon {
    font-size: 12px !important;
}

/* Ensure the parent container doesn't overflow */
.form-group .input-group {
    max-width: 100% !important;
}

/* Additional fix for potential AppGini specific containers */
.panel-body .input-group,
.modal-body .input-group {
    max-width: 100% !important;
    overflow: hidden !important;
}
/* ============================================
   INPUT GROUP OVERFLOW FIXES
   ============================================ */

/* Prevent input groups from creating horizontal scroll */
.input-group {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Ensure the input field flexes properly and doesn't overflow */
.input-group .form-control {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 150px) !important; /* Reserve space for 4 buttons */
    position: relative !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
}

/* Button group should not expand beyond container */
.input-group-btn {
    position: relative !important;
    font-size: 0 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    display: flex !important;
    align-items: stretch !important;
    flex-shrink: 0 !important;
    /* Remove max-width restriction to allow all buttons to show */
}

/* Individual buttons in input groups */
.input-group-btn > .btn {
    position: relative !important;
    border-radius: 0 !important;
    margin: 0 !important;
    min-height: 36px !important;
    flex-shrink: 0 !important;
    width: 36px !important; /* Fixed width for consistency */
    min-width: 36px !important; /* Ensure minimum width */
    padding: 6px 4px !important; /* Tighter padding */
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Multiple buttons in input group */
.input-group-btn .btn + .btn {
    margin-left: -1px !important;
}

/* Container columns should not overflow */
.col-lg-9,
.col-md-9,
.col-sm-9,
.col-xs-9,
.col-lg-8,
.col-md-8,
.col-sm-8,
.col-xs-8,
.col-lg-7,
.col-md-7,
.col-sm-7,
.col-xs-7,
.col-lg-6,
.col-md-6,
.col-sm-6,
.col-xs-6 {
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Ensure input group addons don't cause overflow */
.input-group-addon {
    padding: 8px 10px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #2c3e50 !important;
    background-color: #ecf0f1 !important;
    border: 1px solid #bdc3c7 !important;
    border-radius: 0 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    /* Remove max-width restriction */
}

/* Special handling for time picker inputs with multiple buttons */
.input-group .form-control[name="time"],
.input-group .form-control[id*="time"],
.input-group .form-control[class*="time"] {
    flex: 1 1 auto !important; /* Let it take available space */
    min-width: 80px !important; /* Smaller minimum to allow more button space */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .input-group-btn > .btn {
        width: 32px !important;
        padding: 4px 6px !important;
    }
    
    .input-group .form-control {
        flex: 1 1 auto !important;
        min-width: 60px !important; /* Even smaller on mobile */
    }
    
    /* Fix label alignment on mobile */
    .form-horizontal .control-label,
    .control-label,
    .form-group label,
    label {
        text-align: left !important;
        padding-top: 0 !important;
    }
    
    /* Ensure form groups stack properly on mobile */
    .form-horizontal .form-group {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Mobile specific column adjustments */
    .col-sm-3,
    .col-md-3,
    .col-lg-3,
    .col-sm-4,
    .col-md-4,
    .col-lg-4 {
        text-align: left !important;
    }
}

/* Fix for buttons with icons only */
.input-group-btn .btn .glyphicon {
    font-size: 12px !important;
}

/* Ensure the parent container doesn't overflow */
.form-group .input-group {
    max-width: 100% !important;
}

/* Additional fix for potential AppGini specific containers */
.panel-body .input-group,
.modal-body .input-group {
    max-width: 100% !important;
    overflow: hidden !important;
}
/* AppGini Child Tabs Styling */

/* Container styling */
#children-tabs {
    margin: 20px 0;
    background: #f8f9fa;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border: 1px solid #dee2e6;
}

/* Tab list container */
#children-tabs .nav-tabs {
    border-bottom: 2px solid #e9ecef;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0 10px;
}

/* Individual tab styling */
.child-tab-label {
    margin-bottom: -2px !important;
    transition: all 0.3s ease;
}

.child-tab-label a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px 8px 0 0 !important;
    background: #ffffff;
    color: #495057;
    text-decoration: none !important;
    transition: all 0.3s ease;
    font-weight: 500;
    position: relative;
    min-height: 48px;
}

/* Hover effect */
.child-tab-label:hover a {
    background: #f1f3f5;
    color: #212529;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Hover effect for tabs with no records */
.child-tab-label.no-records:hover a {
    background: #e9ecef;
    color: #6c757d;
}

/* Active tab */
.child-tab-label.active a {
    background: #007bff !important;
    color: #ffffff !important;
    border-color: #007bff !important;
    box-shadow: 0 4px 12px rgba(0,123,255,0.3);
}

/* Tab text styling */
.child-tab-text {
    font-size: 14px;
    letter-spacing: 0.3px;
}

/* Badge styling */
.badge.child-count {
    background: #6c757d;
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    min-width: 24px;
    text-align: center;
    transition: all 0.3s ease;
}

/* Badge in active tab */
.child-tab-label.active .badge.child-count {
    background: #ffffff !important;
    color: #007bff !important;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 4px 8px;
    min-width: 24px;
}

/* Badge hover effect */
.child-tab-label:hover .badge.child-count {
    transform: scale(1.1);
}

/* Loading indicator - hidden by default */
#pc-loading {
    display: none;
    margin-left: 10px;
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Show loading indicator when active */
#pc-loading.loading {
    display: inline-block;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive design */
@media (max-width: 768px) {
    /* Hide child tabs section completely on mobile */
    #site-children,
    #children-tabs,
    .children-tabs {
        display: none !important;
    }
}

/* Optional: Smooth transitions for tab panel content */
.tab-content > .tab-pane {
    display: none;
}

.tab-content > .active {
    display: block;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
tr.success.sum,
tr.success.sum th,
tr.success.sum td {
	background-color: #003366 !important; /* Dark blue */
	color: #ffffff !important;            /* White text */
}
tr.success.sum td.engservice-estcost.text-right.sum.locale-int {
	color: #ffffff !important;
}