body {
    /*	background-image: url(/images/2009_background.jpg);*/
    background: #FFFFFF repeat-x;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #374151;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.datetimepicker {
    background: #f8f9fa none;
}

/* ========================================================================
   Modern Typography System
   ======================================================================== */

/* Font override for common elements - preserving FontAwesome */
p, div, span, a, td, th, li, ul, ol, label,
h1, h2, h3, h4, h5, h6 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Ensure FontAwesome icons keep their font family */
.fa, .fas, .far, .fab, .fal, .fad,
[class*="fa-"], [class^="fa-"] {
    font-family: "Font Awesome 7 Free", "Font Awesome 7 Brands", "FontAwesome" !important;
}

/* All form elements inherit font */
input, select, textarea, button, option {
    font-family: inherit;
    font-size: inherit;
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

img {
    border: none;
}

a {
    text-decoration: none;
}

/* General link styling for modern layout - matches base-btn-primary blue color */
body.modern-layout a:not([class]):not(.nav-menu a):not(.modern-topbar-user a):not(.header-logo a):not(.tab-navigation a) {
    color: #0284c7;
    text-decoration: none;
    transition: color 0.2s ease;
}

body.modern-layout a:not([class]):not(.nav-menu a):not(.modern-topbar-user a):not(.header-logo a):not(.tab-navigation a):hover {
    color: #0369a1;
    text-decoration: underline;
}

body.modern-layout a:not([class]):not(.nav-menu a):not(.modern-topbar-user a):not(.header-logo a):not(.tab-navigation a):visited {
    color: #0284c7;
}

h1, h2 {
    padding: 0;
    margin: 0 0 16px;
    font-family: inherit;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
}

h1 {
    font-size: 24px;
}

h2 {
    font-size: 20px;
}

h3 {
    line-height: 150%;
}

p {
    padding: 0;
    margin: 0 0 13px;
    line-height: 150%;
}

table, tr, td {
    line-height: 150%;
}

textarea {
    box-sizing: border-box;
}

/* ---------------------- Generelt ------------------------- */

.list_box_selected {
    background: left repeat-x #fbfbf1;
}

.listselected {
    background-color: #F3E9D1;
    cursor: pointer;
}



.deleteBtn {
    float: right;
    background: #aaaaaa url(../images/2010_btn_back_delete.jpg) top left repeat-x;
    border: 2px #cdcecf solid;
    padding: 7px 11px;
    margin: 0;
    color: #790003;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
}

.deleteBtn:hover {
    border: 2px #790003 solid;
}

/* ---------------------- Topbar ------------------------- */
div.topbar {
    /*background: url(/images/2009_topbar_center.jpg) repeat-x top;*/
    float: right;
    position: relative;
    top: 15px;
    height: 47px;
    text-align: center;
    vertical-align: middle;
    right: 20px;
}

/* ---------------------- Messages ------------------------- */
/* Info message (blue) - Type 1 */
div.info_message {
    background: #eff6ff;
    margin-bottom: 24px;
    padding: 16px 20px;
    border-left: 4px solid #3b82f6;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
}

div.info_message::before {
    content: "\f05a";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: #3b82f6;
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
}

/* Warning message (amber) - Type 2 */
div.warning_message {
    background: #fffbeb;
    margin-bottom: 24px;
    padding: 16px 20px;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
}

div.warning_message::before {
    content: "\f071";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
}

/* Error message (red) - Type 3 */
div.error_message,
div.system_message {
    background: #fef2f2;
    margin-bottom: 24px;
    padding: 16px 20px;
    border-left: 4px solid #dc2626;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
}

div.error_message::before,
div.system_message::before {
    content: "\f071";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: #dc2626;
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
}

div.demologin_message {
    background: #fffbeb;
    margin-bottom: 24px;
    padding: 16px 20px;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
}

div.demologin_message::before {
    content: "\f06a";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
}

div.user_message {
    background: #eff6ff;
    margin-bottom: 24px;
    padding: 16px 20px;
    border-left: 4px solid #3b82f6;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

div.user_message::before {
    content: "\f05a";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: #3b82f6;
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
}

div.user_message a {
    /*position: absolute;*/
    right: 20px;
    top: 16px;
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}

div.user_message a:hover {
    text-decoration: underline;
}

/* Message type select dropdown styling */
select.message-type-select option.message-option-none {
    background-color: #f3f4f6;
    color: #6b7280;
}

select.message-type-select option.message-option-info {
    background-color: #eff6ff;
    color: #1e40af;
}

select.message-type-select option.message-option-warning {
    background-color: #fffbeb;
    color: #92400e;
}

select.message-type-select option.message-option-error {
    background-color: #fef2f2;
    color: #991b1b;
}

/* ---------------------- Forside ------------------------- */
div.dashboard_box {
    background: left top repeat-x #FFF;
    border: 1px #e1e1e1 solid;
    padding: 10px;
}

div.headline2009 {
    display: inline;
    float: left;
    font-size: 24px;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-weight: normal;
    text-align: left;
    margin-right: 20px;
    margin-bottom: 3px;
}

.headline2009 h1 {
    font-size: 24px;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-weight: normal;
    margin-bottom: 0;
}
.blackborder {
    border: 1px solid black;
    padding: 3px;
}

.error {
    display: block;
    text-align: center;
    font-size: 14px;
    background: #faebe7 url(/images/2012_redx.png) no-repeat right center;
    padding: 10px;
    color: #df280a;
    font-weight: bold;
    vertical-align: middle;
    border-radius: 3px;
    margin-bottom: 10px;
}


.succes {
    display: block;
    text-align: center;
    font-size: 14px;
    background: #eff5ea url(/images/2012_check.png) no-repeat right center;
    padding: 10px 10px 10px 22px;
    color: #446423;
    font-weight: bold;
    vertical-align: middle;
    border-radius: 3px;
    margin-bottom: 10px;
}

.succes a {
    font-size: 14px;
    font-weight: bold;
    color: #446423;
    text-decoration: underline;
}

.succes a:hover {
    color: #000000;
    text-decoration: underline;
}


.markup {
    display: block;
    background-color: #fff0d0;
    border: 1px solid #b9a774;
    padding: 10px;
    color: #000000;
    vertical-align: middle;
}

.markup_header {
    background: url(/images/add2.png) no-repeat 0 center;
    font-weight: bold;
    padding: 3px 3px 3px 22px;
}


div.nyhed2009_overskrift_text {
    font-size: 12px;
    padding-left: 5px;
}

div.nyhed2009_content_inside {
    padding: 10px 5px 5px;
    text-align: left;
}

.nyhed2009_tid {
    padding-right: 5px;
    display: block;
    float: right;
    color: #999999;
}

.red {
    color: red;
    font-weight: bold;
}


.green {

    color: green;
    font-weight: bold;
}

td.menu_left {
    background-image: url(/images/2009_menu_left.jpg);
    height: 42px;
    width: 9px;

}

td.menu_center {
    text-align: left;
    background-image: url(/images/2009_menu_back.jpg);
    height: 42px;
    display: block;
}

td.menu_right {
    background-image: url(/images/2009_menu_right.jpg);
    height: 42px;
    width: 9px;
}

div.menu_center {
    display: block;
}

div.menu_center ul {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
}

div.menu_center ul li {
    float: left;
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
}

div.menu_center a.menu_sub, div.menu_center a.menu_sub:hover {
    display: block;
    float: left;
    height: 28px;
    padding-top: 14px;
    padding-left: 9px;
    padding-right: 9px;
    color: #FFFFFF;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    font-weight: normal;
}

div.menu_center a.menu_sub {
    background-image: url(/images/2009_menu_back.jpg);
    color: #FFFFFF;
}

div.menu_center a.menu_sub:hover {
    background-image: url(/images/2009_menu_back_selected.jpg);
    color: #000000;
}

div.menu_center ul li ul {
    border-left: 2px solid #d3d3d3;
    border-right: 2px solid #d3d3d3;
    border-bottom: 2px solid #d3d3d3;
    background-color: #da0000;
    position: absolute;
    float: left;
    z-index: 500;
    top: 42px;
    left: 0;
}

div.menu_center ul li ul li {
    position: relative;
    float: none;
    display: block;
    margin: 0;
    padding: 0;
}

div.menu_center ul li ul, div.menu_center ul li ul:hover, div.menu_center ul li ul li:hover {
    display: none;
}

div.menu_center ul li:hover ul, div.menu_center ul li ul:hover, div.menu_center ul li ul li:hover {
    display: block;
}

div.menu_center ul li ul li a.menu_subitem, div.menu_center ul li ul li a.menu_subitem:hover {
    display: block;
    margin: 0;
    padding: 4px 7px;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    font-weight: normal;
}

div.menu_center ul li ul li a.menu_subitem {
    color: #FFFFFF;
}

div.menu_center ul li ul li a.menu_subitem:hover {
    background-color: #f4f4f4;
    color: #000000;
}

td.pagebody {
    width: 100%;
    vertical-align: top;
    text-align: left;
}

div.pagebody {
    background: #f8fafc;
    padding: 20px 25px;
    border: 4px solid #e5e7eb;
    border-radius: 6px;
}

table.list td {
    padding-top: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid #E5E5E5;
}

tr.list_header {
    background-color: #E5E5E5;
    font-weight: bold;
    text-align: left;
}

.hideme {
    display: none;
}


/* ---------------------------- Footer --------------------------- */
div.footer {
    width: 100%;
    text-align: center;
    color: #777777;
    margin: 6px 0 0;
    padding: 0;
}

/* ---------------------------- Modern Pagination --------------------------- */
a.pagenum_active, a.pagenum_active:hover {
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    transition: all 0.2s ease;
    min-width: 28px;
    height: 28px;
}

a.pagenum_active:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #111827;
}

div.pagenum_inactive {
    background: #f9fafb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #9ca3af;
    min-width: 28px;
    height: 28px;
}

/* Modern pagination arrows */
.pagenum_arrow {
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 13px;
    margin-bottom: 0 !important;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.pagenum_arrow i {
    color: #374151;
    transition: color 0.2s ease;
}

.pagenum_active:hover i {
    color: #111827;
}

.pagenum_arrow i.disabled {
    color: #9ca3af !important;
}

.pagenum_current {
    background: #0284c7 !important;
    color: #ffffff !important;
    font-weight: 600;
    padding: 4px 8px !important;
    border: 1px solid #0284c7;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0 !important;
    min-width: 28px;
    height: 28px;
    font-size: 13px;
}

/* ---------------------------- REFERENCES ------------------ */
div.ref_overskrift {
    background: url(/images/2009_box_top_center.jpg) repeat-x top;
    color: #000000;
    font-weight: bold;
    height: 38px;
    vertical-align: middle;
    text-align: left;
    padding: 0;
    margin: 0;
}

div.ref_overskrift div.left {
    background: url(/images/2009_box_top_left.jpg) no-repeat top left;
    height: 38px;
}

div.ref_overskrift div.right {
    background: url(/images/2009_box_top_right.jpg) no-repeat top right;
    height: 38px;
}

div.ref_overskrift_text {
    padding-top: 16px;
    padding-left: 20px;
}

div.ref_content {
    background: #f5f9fa url(/images/2009_box_middle_center.jpg) repeat-x top;
}

div.ref_content div.left {
    background: url(/images/2009_box_middle_left.jpg) repeat-y bottom left;
}

div.ref_content div.left div.right {
    background: url(/images/2009_box_middle_right.jpg) repeat-y bottom right;
}

div.ref_content_inside {
    position: relative;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    padding: 10px 20px 5px;
    height: 120px;
    text-align: left;
}

div.ref_content_inside_trust {
    position: relative;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    padding: 10px 16px 5px;
    height: 120px;
}

div.ref_content_inside img {
    margin-left: 10px;
    float: right;
    border: #DDDDDD 1px solid;
}

.ref_bottom {
    background: #f5f9fa url(/images/2009_box_bottom_center.jpg) repeat-x bottom;
    height: 11px;
}

.ref_bottom div.left {
    background: url(/images/2009_box_bottom_left.jpg) repeat-y bottom left;
    height: 11px;
}

.ref_bottom div.right {
    background: url(/images/2009_box_bottom_right.jpg) repeat-y bottom right;
    height: 11px;
}

/* ---------------------------- WHITEBOX ------------------ */
div.whitebox_top {
    background: url(/images/2010_whitebox_top_center.jpg) repeat-x top;
    color: #000000;
    font-weight: bold;
    height: 49px;
    vertical-align: middle;
    text-align: left;
    padding: 0;
    margin: 0;
}

div.whitebox_top div.left {
    background: url(/images/2010_whitebox_top_left.jpg) no-repeat top left;
    height: 49px;
}

div.whitebox_top div.right {
    display: block;
    background: url(/images/2010_whitebox_top_right.jpg) no-repeat top right;
    height: 49px;
    padding-left: 30px;
    padding-top: 20px;
    text-align: left;
    vertical-align: middle;
}

div.whitebox_middle {
    background-color: #fdfdfd;
    /*	height: 230px;
        width: 100%;*/
}

div.whitebox_middle div.left {
    background: url(/images/2010_whitebox_middle_left.jpg) repeat-y top left;
}

div.whitebox_middle div.right {
    background: url(/images/2010_whitebox_middle_right.jpg) repeat-y top right;
    padding-left: 30px;
    padding-top: 15px;
    padding-bottom: 10px;
    text-align: left;
}

div.whitebox_bottom {
    background: #fdfdfd url(/images/2010_whitebox_bottom_center.jpg) repeat-x bottom;
    height: 17px;
}

div.whitebox_bottom div.left {
    background: url(/images/2010_whitebox_bottom_left.jpg) repeat-y bottom left;
    height: 17px;
}

div.whitebox_bottom div.right {
    background: url(/images/2010_whitebox_bottom_right.jpg) repeat-y bottom right;
    height: 17px;
}

/* ---------------------------- Subpages ------------------ */
a.subpage img {
    padding: 3px;
    background-color: #EEE;
    margin-right: 20px;
    border: 1px solid #CCC;
}

a.subpage_selected img {
    padding: 3px;
    background-color: #F5EAC5;
    margin-right: 20px;
    border: 1px solid #FC0;
}

/* ---------------------------- FORM setup ------------------ */

.item_holder {
    margin-bottom: 10px;
    background-color: #E8E8E8;
    border-radius: 5px 5px 5px 5px;
    padding: 6px;
}

.item_header, .item_ypper_header {
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}

.item_body {
    border-radius: 0 5px 5px 5px;
    padding-top: 6px;
}

.halfform {
    float: left;
    display: inline;
    padding: 0;
    margin: 0;
}

.halfpage {
    width: 49%;
}


.halfspace {
    margin-right: 2%;
}

.popup {
    position: absolute;
    display: none;
}

/* ---------------------------- Dokumentation ------------------ */
div.dokumentation_small {
    display: inline;
    float: left;
    background: url(/images/2009_dokumentation_small.jpg) no-repeat top right;
    height: 174px;
    width: 224px;
    margin-right: 10px;
    margin-bottom: 10px;
}
div.dokumentation_small_new {
    display: inline;
    float: left;
    background: url(/images/dokumentation_small_bg.png) no-repeat top right;
    height: 174px;
    width: 224px;
    margin-right: 10px;
    margin-bottom: 10px;
}

div.dokumentation_small a, div.dokumentation_small_new a {
    display: block;
    margin-top: 16px;
    padding-top: 8px;
    margin-left: 19px;
    margin-bottom: 0;
    width: 195px;
    height: 30px;
}

div.dokumentation_small p, div.dokumentation_small_new p {
    display: block;
    padding-top: 5px;
    margin-left: 19px;
    margin-top: 0;
    margin-bottom: 0;
    width: 185px;
}

/* ---------------------------- FAQ ------------------ */
.faq {
    background-color: #E1E1E1;
    border-radius: 5px;
    padding: 5px;
}

.faq_q {
    font-weight: bold;
    cursor: pointer;
    /*	cursor:hand; */
}

.faq_a {
    margin-top: 8px;
}

.faq-tooltip {
    display: inline-block;
    position: relative;
    cursor: help;
    flex-shrink: 0;
    line-height: 1;
}

.faq-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #e0f2fe;
    color: #0284c7;
    font-size: 14px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.faq-icon:hover {
    background: #0284c7;
    color: white;
    transform: scale(1.1);
}

.faq-tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    bottom: auto;
    left: 50%;
    top: auto;
    transform: translateX(-50%) translateY(-4px);
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    max-width: 320px;
    min-width: 220px;
    z-index: 10000;
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.25), 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    white-space: normal;
    text-align: left;
}

.faq-tooltip-text::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #0369a1;
}

.faq-tooltip:hover .faq-tooltip-text,
.faq-tooltip:focus .faq-tooltip-text,
.faq-tooltip:active .faq-tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Mobile: Make tooltip work on tap */
@media (max-width: 768px) {
    .faq-tooltip-text {
        position: fixed;
        left: 50% !important;
        right: auto;
        bottom: auto;
        top: 50%;
        transform: translate(-50%, -50%) scale(0.95);
        max-width: calc(100vw - 40px);
        min-width: auto;
        width: max-content;
    }

    .faq-tooltip:hover .faq-tooltip-text,
    .faq-tooltip:focus .faq-tooltip-text,
    .faq-tooltip:active .faq-tooltip-text {
        transform: translate(-50%, -50%) scale(1);
    }

    .faq-tooltip-text::after {
        display: none;
    }
}

/* ---------------------------- Tools ------------------ */
div.tools {
    float: right;
    width: 120px;
    padding: 3px;

}

div.clear {
    clear: both;
    height: 20px;
}

div.clear_small {
    clear: both;
    height: 10px;
}

div.clear_nospace {
    clear: both;
}

.float_left {
    float: left;
}

.float_center {
    position: relative;
    width: 100%;
    text-align: center;
    margin: 20px 0 !important;
    clear: both;
    overflow: hidden;
}

.float_center input {
    margin: 0;
}

.float_right {
    float: right;
}

.roundedcorners {
    border-radius: 5px;
}

.roundedcorners_small {
    border-radius: 3px;
}


.cp_border2 {
    border: 1px solid #999;
}


.tooltipholder {
    position: relative;
    display: inline;
    cursor: pointer;
    font-weight: bold;
}

/* ---------------------------- Boxes ------------------ */
.boxgroup {
    background: #EEE7F5 url(/images/icons16x16/users.png) no-repeat 3px center;
    display: inline-table;
    border: 1px solid #9a91a4;
    padding: 3px 3px 3px 22px;
}


.boxlist {
    display: block;
    margin-bottom: 3px;
}


.boxfaded {
    background-color: #EEEEEE;
    color: #555555;
    border: 1px solid #AAAAAA;
}


/* ---------------------------- Helpbox ------------------ */
#helpBox {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 240px;
}

/* ******************   BOXE ************************  */
.module {
    float: left;
    width: 23%;
    color: #666;
    font-style: normal !important;
}





#benefits {
    list-style: outside url(/images/icons16x16/checkbox.png);
}

/**************  Niceboxes  *************/
div.nicebox {
    padding: 0;
    background: #999999 url(/images/pattern.png);
    border: 1px #999999 solid;
}

div.nicebox-green {
    padding: 0;
    background: #3ea73e url(/images/pattern.png);
    border: 1px #3ea73e solid;
}

div.nicebox-inside {
    background-color: #f8f9fa;
    padding: 10px;
}

.message-wrap {
    width: 100%;
}

/* Standard form styling */
.form-label {
    display: block;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
}

.form-label-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.form-helper-text {
    color: #6b7280;
    font-size: 12px;
    margin: 6px 0 0 0;
}

.form-helper-text a {
    color: #0284c7;
    text-decoration: none;
}

.form-helper-text a:hover {
    text-decoration: underline;
}

.form-field {
    margin-bottom: 16px;
}

.form-field-inline {
    display: inline-flex;
    flex-direction: column;
    margin: 0;
}

.form-field-divider {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.filter-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.form-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}

.form-input-sm {
    padding: 6px 10px;
    font-size: 13px;
}

.form-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.form-search-group {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}


/* Receiver input group (country + phone number) */
.receiver-input-group {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1;
    min-width: 0;
}

/* Merge field badges (compact clickable tags) */
.merge-field-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.merge-field-badge:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
    color: #1f2937;
    transform: translateY(-1px);
}

.merge-field-badge:active {
    transform: translateY(0);
}


@media (max-width: 640px) {
    .receiver-input-group {
        flex-direction: column;
    }

    .receiver-input-group select {
        min-width: 100% !important;
    }

    .receiver-input-group input {
        width: 100% !important;
    }
}


/********* Contact import ***********/
.txt-contact-from-exel {
    position: relative;
    overflow: auto;
    height: 120px;
    width:100%;
}
.txt-contact-from-exel:focus {
    z-index: 1;
}

/* Modern group selector styling */
.contact-group-wrap {
    background-color: #FFFFFF;
    width: 100%;
    min-height: auto;
    max-height: 300px;
    overflow-y: auto;
    padding: 4px 0;
    display: grid;
    gap: 4px;
}
/* Custom scrollbar for group selector */
.contact-group-wrap::-webkit-scrollbar {
    width: 6px;
}
.contact-group-wrap::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}
.contact-group-wrap::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
.contact-group-wrap::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
.contact-group-wrap .boxgroup{ background:#fff; border:1px solid #e5e7eb; padding:10px 12px; border-radius:10px; display:flex; align-items:center; justify-content:space-between; box-shadow:0 1px 2px rgba(0,0,0,.03); transition:background .15s, border-color .15s, box-shadow .15s; cursor:pointer; }
.contact-group-wrap .boxgroup .float_right{ float:none !important; }
.contact-group-wrap .boxgroup input[type="checkbox"]{ margin-left:12px; }
.contact-group-wrap .boxgroup .group-label{ display:flex; align-items:center; gap:8px; font-weight:500; color:#111827; }
.contact-group-wrap .boxgroup .group-label .fa{ width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#eef2ff; color:#475569; font-size:12px; }
.contact-group-wrap .boxgroup .count-badge{ font-size:12px; color:#6b7280; background:#f3f4f6; border:1px solid #e5e7eb; padding:2px 6px; border-radius:999px; margin-left:auto; margin-right:8px; }

.contact-group-wrap .boxgroup:hover{ border-color:#cbd5e1; box-shadow:0 1px 3px rgba(0,0,0,.06); }
/* Variants - CSS-only selection state based on checkbox */
.contact-group-wrap.groups-list .boxgroup{ background:#f9fafb; border-color:#e5e7eb; color:#6b7280; }
.contact-group-wrap.groups-list .boxgroup .group-label .fa{ background:#e0ecff; color:#1d4ed8; }
.contact-group-wrap.groups-list .boxgroup:has(input[type="checkbox"]:checked){ background:#eff6ff; border-color:#bfdbfe; color:#111827; }
.contact-group-wrap.groups-list .boxgroup:has(input[type="checkbox"]:checked) .group-label .fa{ background:#e0ecff; color:#1d4ed8; }

.contact-group-wrap.contacts-list .boxgroup{ background:#f9fafb; border-color:#e5e7eb; color:#6b7280; }
.contact-group-wrap.contacts-list .boxgroup .group-label .fa{ background:#d1fae5; color:#047857; }
.contact-group-wrap.contacts-list .boxgroup:has(input[type="checkbox"]:checked){ background:#ecfdf5; border-color:#a7f3d0; color:#111827; }
.contact-group-wrap.contacts-list .boxgroup:has(input[type="checkbox"]:checked) .group-label .fa{ background:#d1fae5; color:#047857; }
/* Toolbar */
.contact-group-wrap .contact-group-toolbar{ display:flex; justify-content:flex-end; gap:10px; margin:0 0 6px; font-size:12px; color:#6b7280; }
.contact-group-wrap .contact-group-toolbar a{ color:#2563eb; text-decoration:none; }
.contact-group-wrap .contact-group-toolbar a:hover{ text-decoration:underline; }
/* Responsive tightening */
@media (max-width: 900px){
  .contact-group-wrap{ gap:3px; }
  .contact-group-wrap .boxgroup{ padding:8px 10px; }
  .contact-group-wrap .contact-group-toolbar{ margin-bottom:4px; }
}

.load-container {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: no-repeat rgba(60, 63, 65, 0.4);
}
.loader,
.loader:before,
.loader:after {
	border-radius: 50%;
	width: 2.5em;
	height: 2.5em;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation: loadanim 1.8s infinite ease-in-out;
	animation: loadanim 1.8s infinite ease-in-out;
}
.loader {
	color: #ffffff;
	font-size: 10px;
	top: 50%;
	margin: -80px auto;
	position: relative;
	text-indent: -9999em;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}
.loader:before,
.loader:after {
	content: '';
	position: absolute;
	top: 0;
}
.loader:before {
	left: -3.5em;
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}
.loader:after {
	left: 3.5em;
}


.status-indicators {
    display: flex;
    gap: 10px;
}

.status-badge.positive {
    border-color: #6c757d;
    background: #f8f9fa;
    color: #495057;
}

.status-badge.negative {
    border-color: #dc3545;
    background: #fff5f5;
    color: #dc3545;
}

@-webkit-keyframes loadanim {
	0%,
	80%,
	100% {
		box-shadow: 0 2.5em 0 -1.3em;
	}
	40% {
		box-shadow: 0 2.5em 0 0;
	}
}
@keyframes loadanim {
	0%,
	80%,
	100% {
		box-shadow: 0 2.5em 0 -1.3em;
	}
	40% {
		box-shadow: 0 2.5em 0 0;
	}
}

#ip_table .edit_ip_note {
    display: none;
}

#ip_table .txt_edit_ip_note {
    display: block;
}
#ip_table .txt_edit_ip_note:hover{
    background: url('/images/icons/pencil.png') right no-repeat;
    background-size: 16px;

}
.multi_cp_receivers {
	width:100%;
}
#tabs {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}

.admin_background {
	background-color: #ffd2d2;
	background-image: url("/images/icons512x512/gears-background.png");
	background-size: 50px 50px;
	background-repeat: no-repeat;
	background-position: bottom right;

}

::placeholder {
    color: #666;
    font-style: italic;
}

tr.deactivated {
    color: #9f9f9f;
}


/* ========================================================================
   Modern Content Components - Reusable across all pages
   ======================================================================== */

/* Dashboard Layout Structure */
.dashboard-layout {
    display: flex;
    gap: 20px;
}

.dashboard-left {
    flex: 0 0 320px;
}

.dashboard-right {
    flex: 1;
}

/* Dashboard Responsive Design */
@media (max-width: 900px) {
    .dashboard-layout {
        flex-direction: column;
        gap: 0;
    }

    .dashboard-left {
        flex: none;
        width: 100%;
    }

    .dashboard-right {
        flex: none;
        width: 100%;
    }
}

/* Modern Content Box Styles - Unified Design */
.content-box {
    /*background: linear-gradient(135deg, #ffffff, #fafbfc);*/
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
}

/* Make images inside content boxes responsive */
.content-box img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Content Callout (modifier for content-box) */
.content-box.content-callout.primary {
  border-top: 0; /* darker red border - matches menu */
  border-right: 1px solid #c41e3a !important; /* darker red border - matches menu */
  border-bottom: 1px solid #c41e3a !important; /* darker red border - matches menu */
  border-left: 1px solid #c41e3a !important; /* darker red border - matches menu */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  border-radius: 0 0 12px 12px;
}
.content-box.content-callout.primary .content-title { color: #991b1b; }
.content-box.content-callout.primary .content-icon { background: #fee2e2; color: #c41e3a; }

.content-box.content-callout.info {
  background: #eff6ff !important; /* light info tint */
  border: 1px solid #bfdbfe !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}
.content-box.content-callout.info .content-title { color: #1e40af; }
.content-box.content-callout.info .content-icon { background: #e0ecff; color: #1d4ed8; }

.content-box.content-callout.success {
  background: #f0fdf4 !important; /* light success tint */
  border: 1px solid #bbf7d0 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}
.content-box.content-callout.success .content-title { color: #15803d; }
.content-box.content-callout.success .content-icon { background: #dcfce7; color: #16a34a; }

.content-box.content-callout.warning {
  background: #fffbeb !important; /* light warning tint */
  border: 1px solid #fde68a !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}
.content-box.content-callout.warning .content-title { color: #b45309; }
.content-box.content-callout.warning .content-icon { background: #fef3c7; color: #d97706; }

.content-box.content-callout.danger {
  background: #fef2f2 !important; /* light danger tint */
  border: 1px solid #fecaca !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}
.content-box.content-callout.danger .content-title { color: #b91c1c; }
.content-box.content-callout.danger .content-icon { background: #fee2e2; color: #dc2626; }

/* Unified header styling for all content boxes */
.content-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 12px;
}

/* Return link in content header */
.content-link {
    margin-left: auto;
    color: #991b1b;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}

@media (max-width: 640px) {
    .content-link {
        margin-left: 0;
        width: 100%;
    }
}

.content-link:hover {
    color: #7f1d1d;
    text-decoration: underline;
}

/* Toggle label in content header - responsive behavior */
.content-header > label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: normal;
}

@media (max-width: 640px) {
    .content-header > label {
        margin-left: 0 !important;
        width: 100%;
    }
}

.content-link i {
    font-size: 12px;
}

/* Content Box Icons - Generic and Reusable */
.content-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 16px;
}

/* Content icon with primary button color (Steel Blue) */
.content-icon.icon-primary {
    background: #e0f2fe;
    color: #0284c7;
}

/* Content Box Title - Generic and Reusable */
.content-title {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin: 0;
    flex: 1;
}

/* Content box as page headline - larger title and icon */
.content-box.content-box-headline .content-title {
    font-size: 20px;
    font-weight: 400;
}

.content-box.content-box-headline .content-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
}

/* Content box headline paragraph text - normal weight */
.content-box.content-box-headline p {
    font-weight: 400;
}

/* Section heading with icon - reusable for subsections within content boxes */
.section-heading {
    color: #0284c7; /* Steel Blue - matches primary button */
    margin-bottom: 12px;
}

.section-heading i {
    margin-right: 8px;
}

.section-heading.with-margin-top {
    margin-top: 24px;
}

/* Invoice information grid - 2 columns on desktop, 1 on mobile */
.invoice-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
}

@media (max-width: 640px) {
    .invoice-info-grid {
        grid-template-columns: 1fr;
    }
}

/* Gray form labels */
.form-label-gray {
    color: #4b5563;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

/* Checkbox label styling */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 12px;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.checkbox-label span {
    flex: 1;
}

/* Order summary box */
.order-summary {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.order-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e5e7eb;
}

.order-summary-row:last-child {
    border-bottom: none;
    padding-top: 12px;
    font-weight: 600;
    font-size: 16px;
}

.order-summary-label {
    color: #6b7280;
}

.order-summary-value {
    color: #374151;
    font-weight: 500;
}

.order-summary-row:last-child .order-summary-value {
    color: #0284c7;
    font-size: 18px;
}

/* Content box with tabs - no top-left radius */
.content-box.content-box-with-tabs {
    border-radius: 0 8px 8px 8px !important;
    position: relative;
    z-index: 5;
}

/* Tab navigation styles */
.tab-navigation {
    display: flex;
    gap: 4px;
    margin-top: 20px;
    margin-bottom: -1px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db #f9fafb;
    position: relative;
}

.tab-navigation::-webkit-scrollbar {
    height: 6px;
}

.tab-navigation::-webkit-scrollbar-track {
    background: #f9fafb;
    border-radius: 3px;
}

.tab-navigation::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.tab-navigation::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

.tab-navigation a {
    padding: 12px 24px;
    border: 1px solid;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    text-decoration: none;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
}

.tab-navigation a i {
    font-size: 18px;
}

.tab-navigation a.active {
    background: #ffffff;
    color: #991b1b;
    border-color: #c41e3a;
    font-weight: 500;
    z-index: 10;
}

.tab-navigation a:not(.active) {
    background: #f9fafb;
    color: #6b7280;
    border-color: #e5e7eb;
    font-weight: 400;
    z-index: 1;
}

.tab-navigation a:not(.active):hover {
    background: #f3f4f6;
    color: #374151;
}

/* Small tab navigation variant */
.tab-navigation.tab-navigation-sm a {
    padding: 8px 16px;
    font-size: 14px;
    gap: 6px;
}

.tab-navigation.tab-navigation-sm a i {
    font-size: 14px;
}

.tab-navigation.tab-navigation-sm a.active {
    background: #ffffff;
    color: #0284c7;
    border-color: #0284c7;
    font-weight: 500;
    z-index: 10;
}

.tab-navigation.tab-navigation-sm a:not(.active) {
    z-index: 1;
}

/* Tab content wrapper with border */
.tab-content-wrapper {
    position: relative;
    z-index: 5;
    border: 1px solid #e5e7eb;
    border-radius: 0 8px 8px 8px;
    padding: 16px;
    background: white;
}

/* Tab content panel */
.tab-content-panel {
    display: none;
}

.tab-content-panel.active {
    display: block;
}

/* ========================================================================
   Inverted Tab Navigation - Tabs below headline box
   ======================================================================== */

/* Content box with inverted tabs - no bottom-left radius */
.content-box.content-box-with-tabs-below {
    border-radius: 0 0 8px 0 !important;
    position: relative;
    z-index: 5;
    margin-bottom: 0 !important;
}

/* Inverted tab navigation - tabs below the headline box */
.tab-navigation-below {
    display: flex;
    gap: 4px;
    margin-top: -1px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db #f9fafb;
    position: relative;
}

.tab-navigation-below::-webkit-scrollbar {
    height: 6px;
}

.tab-navigation-below::-webkit-scrollbar-track {
    background: #f9fafb;
    border-radius: 3px;
}

.tab-navigation-below::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.tab-navigation-below::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

.tab-navigation-below a {
    padding: 12px 24px;
    border: 1px solid;
    border-top: none;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
}

.tab-navigation-below a i {
    font-size: 18px;
}

.tab-navigation-below a.active {
    background: #ffffff;
    color: #991b1b;
    border-color: #c41e3a;
    font-weight: 500;
    z-index: 10;
}

.tab-navigation-below a:not(.active) {
    background: #f9fafb;
    color: #6b7280;
    border-color: #e5e7eb;
    font-weight: 400;
    z-index: 1;
}

.tab-navigation-below a:not(.active):hover {
    background: #f3f4f6;
    color: #374151;
}

/* Small inverted tab navigation variant - matches red border */
.tab-navigation-below.tab-navigation-sm a {
    padding: 8px 16px;
    font-size: 14px;
    gap: 6px;
}

.tab-navigation-below.tab-navigation-sm a i {
    font-size: 14px;
}

.tab-navigation-below.tab-navigation-sm a.active {
    background: #ffffff;
    color: #991b1b;
    border-color: #c41e3a;
    font-weight: 500;
    z-index: 10;
}

.tab-navigation-below.tab-navigation-sm a:not(.active) {
    z-index: 1;
}

/* Mobile responsive inverted tabs */
@media (max-width: 768px) {
    .tab-navigation-below a {
        font-size: 16px;
        padding: 10px 16px;
        gap: 8px;
    }

    .tab-navigation-below a i {
        font-size: 15px;
    }

    /* Hide text on inactive tabs, show only icons */
    .tab-navigation-below a:not(.active) {
        padding: 10px 12px;
        gap: 0;
        font-size: 0;
    }

    .tab-navigation-below a:not(.active) i {
        font-size: 18px;
    }
}

/* ============================================
   USER SUBMENU (ADMIN)
   ============================================ */

/* User submenu responsive layout */
.user-submenu-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.user-submenu-tabs {
    flex: 1;
    min-width: 0;
}

.user-submenu-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.user-submenu-stats {
    display: flex;
    gap: 15px;
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
}

.user-submenu-stats strong {
    color: #1f2937;
}

/* Mobile responsive layout */
@media (max-width: 768px) {
    .user-submenu-wrapper {
        flex-direction: column;
        align-items: stretch;
    }

    .user-submenu-tabs {
        width: 100%;
        order: 1;
    }

    .user-submenu-actions {
        width: 100%;
        order: 2;
        flex-direction: column;
        gap: 10px;
    }

    .user-submenu-stats {
        width: 100%;
        justify-content: space-around;
    }

    .user-submenu-actions .base-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Alert list items */
.alert-list-title {
    margin-top: 12px;
    font-weight: 600;
}

.alert-list-item {
    padding: 8px 0;
    border-bottom: 1px solid #fee2e2;
}

.alert-list-item-simple {
    padding: 4px 0;
}

/* Alert link styling */
.content-alert a {
    color: #991b1b;
    text-decoration: underline;
}

.content-alert.success a {
    color: #065f46;
}

/* Content box spacing utilities */
.content-box-mb {
    margin-bottom: 20px;
}

/* Form submit center */
.form-submit-center {
    text-align: center;
    margin: 0 0 20px 0;
}

/* Empty state text */
.empty-state-text {
    color: #6b7280;
    text-align: center;
    padding: 20px;
    margin: 0;
}

/* Two-column responsive grid for content boxes */
.content-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 1024px) {
    .content-grid-2col {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* Auto-fill responsive grid for content boxes - creates as many columns as fit */
.content-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

/* Remove margin-bottom from content-boxes inside auto grids to avoid double spacing */
.content-grid-auto > .content-box {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .content-grid-auto {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Restore margin-bottom on mobile for vertical spacing, except last item */
    .content-grid-auto > .content-box {
        margin-bottom: 20px;
    }

    .content-grid-auto > .content-box:last-child {
        margin-bottom: 0;
    }
}

/* Two-column grid with 2:1 ratio (2/3 and 1/3) */
.content-grid-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

/* Remove margin-bottom from content-boxes inside 2-1 grids to avoid double spacing */
.content-grid-2-1 > .content-box {
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    .content-grid-2-1 {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Restore margin-bottom on mobile for vertical spacing, except last item */
    .content-grid-2-1 > .content-box {
        margin-bottom: 20px;
    }

    .content-grid-2-1 > .content-box:last-child {
        margin-bottom: 0;
    }
}

/* Form divider (for separating sections) */
.form-divider {
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

/* Flex row with gap */
.flex-row-gap {
    display: flex;
    gap: 8px;
    align-items: center;
}

@media (max-width: 640px) {
    .flex-row-gap {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Action bar (search + buttons) */
.action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
}

@media (max-width: 768px) {
    .action-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .action-bar > form {
        max-width: 100% !important;
    }
}

/* Button group */
.button-group {
    display: flex;
    gap: 8px;
}

@media (max-width: 640px) {
    .button-group {
        flex-direction: column;
    }

    .button-group .base-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Pagination and action row */
.pagination-action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

@media (max-width: 640px) {
    .pagination-action-row {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .pagination-action-row .base-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Mobile responsive tabs */
@media (max-width: 768px) {
    .tab-navigation a {
        font-size: 16px;
        padding: 10px 16px;
        gap: 8px;
    }

    .tab-navigation a i {
        font-size: 15px;
    }

    /* Hide text on inactive tabs, show only icons */
    .tab-navigation a:not(.active) {
        padding: 10px 12px;
        gap: 0;
        font-size: 0;
    }

    .tab-navigation a:not(.active) i {
        font-size: 18px;
    }
}
/* ========================================================================
   Content Alerts - High-visibility variants (info, success, warning, danger)
   ======================================================================== */
.content-alert {
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    padding: 16px;
    margin-bottom: 16px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.content-alert .content-header { margin-bottom: 8px; }
.content-alert .content-title { font-weight: 700; }

/* Compact variant for content alerts (single-line, subtle) */
.content-alert.compact {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 10px;
    margin-bottom: 12px;
}
.content-alert.compact .content-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}
.content-alert.compact .content-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 12px;
    margin-right: 0;
    flex-shrink: 0;
}
.content-alert.compact .content-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}
.content-alert.compact p {
    margin: 0;
}

/* Info */
.content-alert.info { background: #eff6ff; border-color: #bfdbfe; }
.content-alert.info .content-title { color: #1e40af; }
.content-alert.info .content-icon { background: #e0ecff; color: #1d4ed8; }

/* Success */
.content-alert.success { background: #ecfdf5; border-color: #a7f3d0; }
.content-alert.success .content-title { color: #065f46; }
.content-alert.success .content-icon { background: #d1fae5; color: #059669; }

/* Warning */
.content-alert.warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.content-alert.warning .content-title { color: #92400e; }
.content-alert.warning .content-icon { background: #fef3c7; color: #b45309; }
.content-alert.warning a { color: #92400e; }

/* Danger */
.content-alert.danger { background: #fef2f2; border-color: #fecaca; }
.content-alert.danger .content-title { color: #991b1b; }
.content-alert.danger .content-icon { background: #fee2e2; color: #dc2626; }

/* ========================================================================
   Base Button System - Reusable across all pages
   ======================================================================== */

/* Base Button Styles */
.base-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.4;
}

.base-btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.base-btn:active {
    transform: translateY(0);
}

/* Button Variants */
.base-btn-primary {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(2, 132, 199, 0.3);
}

.base-btn-primary:hover {
    background: linear-gradient(135deg, #0369a1, #075985);
    box-shadow: 0 4px 8px rgba(2, 132, 199, 0.4);
}

.base-btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff !important;
}

.base-btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857);
}

.base-btn-danger {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #ffffff !important;
}

.base-btn-danger:hover {
    background: linear-gradient(135deg, #b91c1c, #991b1b);
}

.base-btn-secondary {
    background: linear-gradient(135deg, #4f46e5, #4338ca);
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.3);
}

.base-btn-secondary:hover {
    background: linear-gradient(135deg, #4338ca, #3730a3);
    box-shadow: 0 4px 8px rgba(79, 70, 229, 0.4);
}

.base-btn-light {
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    color: #334155 !important;
    border: 1px solid #cbd5e1;
}

.base-btn-light:hover {
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    color: #1e293b !important;
    border-color: #94a3b8;
}

/* Button Sizes */
.base-btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.base-btn-lg {
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
}

/* PDF Button Variant - Gray with red icon */
.base-btn-pdf {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    color: #374151 !important;
    border: 1px solid #d1d5db;
}

.base-btn-pdf:hover {
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
    border-color: #9ca3af;
    color: #1f2937 !important;
}

.base-btn-pdf i {
    font-size: 18px;
    color: #dc2626;
}

/* ========================================================================
   Modern Table System - Reusable across all pages
   ======================================================================== */

/* Table Container */
.content-table-container {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

/* Base Table Styles */
.content-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    font-size: 14px;
}

/* Table Header */
.content-table thead tr {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.content-table th {
    padding: 12px;
    font-weight: 600;
    color: #374151;
    font-size: 14px;
}

/* Respect align attribute on th elements */
.content-table th[align="left"] {
    text-align: left;
}

.content-table th[align="center"] {
    text-align: center;
}

.content-table th[align="right"] {
    text-align: right;
}

/* Fallback for th without align attribute */
.content-table th:not([align]) {
    text-align: left;
}

.content-table th.text-center {
    text-align: center;
}

.content-table th.text-right {
    text-align: right;
}

/* Sortable column links in table headers */
.content-table .sortby,
.content-table a.sortby {
    color: #374151;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
}

.content-table .sortby:hover,
.content-table a.sortby:hover {
    color: #0284c7;
    text-decoration: none;
}

/* Default sort icon (both directions) */
.content-table .sortby:after {
    content: '\f0dc';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 11px;
    opacity: 0.4;
    margin-left: 2px;
}

/* Active sort column - highlighted */
.content-table .sortby-active,
.content-table a.sortby-active {
    color: #0284c7;
}

/* Active sort ascending - up arrow */
.content-table .sortby-active:not(.sortby-desc):after {
    content: '\f0de';
    opacity: 1;
}

/* Active sort descending - down arrow */
.content-table .sortby-active.sortby-desc:after {
    content: '\f0dd';
    opacity: 1;
}

/* ========================================================================
   Graph/Chart Containers
   ======================================================================== */

/* Graph container styling within content boxes */
.content-box > div[id^="chartcontainer"] {
    margin-top: 20px;
    padding: 0;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
}

/* Ensure graphs are responsive */
.content-box > div[id^="chartcontainer"] > div {
    width: 100% !important;
    height: auto !important;
    min-height: 300px;
}

/* Highcharts link styling */
.highcharts-link {
    color: #6b7280;
    text-decoration: none;
    transition: color 0.2s ease;
}

.highcharts-link:hover {
    color: #0284c7;
    text-decoration: underline;
}

/* Highcharts tooltip z-index fix */
.highcharts-tooltip {
    z-index: 9999 !important;
    pointer-events: none !important;
}

.highcharts-tooltip-box {
    fill: #ffffff !important;
    fill-opacity: 1 !important;
}

/* HTML tooltip styling */
.highcharts-tooltip > span {
    background: #ffffff !important;
    border-radius: 6px;
    padding: 4px !important;
    box-shadow: none !important;
    z-index: 9999 !important;
    position: relative;
}

/* Table Body */
.content-table tbody tr {
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.2s ease;
}

.content-table tbody tr:hover {
    background-color: #f9fafb;
}

.content-table td {
    padding: 12px;
    color: #374151;
    vertical-align: middle;
}

.content-table td.text-center {
    text-align: center;
}

.content-table td.text-right {
    text-align: right;
}

/* Table Action Buttons - General Layout */
.table-actions,
.grupper-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

/* Compact Action Buttons for Tables */
.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #94a3b8;
    transition: all 0.2s ease;
}

.action-btn:hover {
    text-decoration: none;
    background: #ffffff;
    border-color: #cbd5e1;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Action Button Colors - Calm Starting State */
.action-btn-primary {
    background: #eff6ff;
    border-color: #dbeafe;
    color: #3b82f6;
}
.action-btn-success {
    background: #f0fdf4;
    border-color: #dcfce7;
    color: #10b981;
}
.action-btn-warning {
    background: #fffbeb;
    border-color: #fef3c7;
    color: #f59e0b;
}
.action-btn-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #ef4444;
}
.action-btn-purple {
    background: #faf5ff;
    border-color: #f3e8ff;
    color: #8b5cf6;
}
.action-btn-indigo {
    background: #eef2ff;
    border-color: #e0e7ff;
    color: #6366f1;
}
.action-btn-teal {
    background: #f0fdfa;
    border-color: #ccfbf1;
    color: #14b8a6;
}
.action-btn-cyan {
    background: #ecfeff;
    border-color: #cffafe;
    color: #06b6d4;
}

/* Hover States - Icon becomes the button color */
.action-btn-primary:hover {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}
.action-btn-success:hover {
    background: #10b981;
    color: #ffffff;
    border-color: #10b981;
}
.action-btn-warning:hover {
    background: #f59e0b;
    color: #ffffff;
    border-color: #f59e0b;
}
.action-btn-danger:hover {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
}
.action-btn-purple:hover {
    background: #8b5cf6;
    color: #ffffff;
    border-color: #8b5cf6;
}
.action-btn-indigo:hover {
    background: #6366f1;
    color: #ffffff;
    border-color: #6366f1;
}
.action-btn-teal:hover {
    background: #14b8a6;
    color: #ffffff;
    border-color: #14b8a6;
}
.action-btn-cyan:hover {
    background: #06b6d4;
    color: #ffffff;
    border-color: #06b6d4;
}

/* Table Badge/Status */
.table-badge {
    background: #f3f4f6;
    color: #6b7280;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
}

.table-badge.success {
    background: #dcfce7;
    color: #166534;
}

.table-badge.warning {
    background: #fef3c7;
    color: #92400e;
}

.table-badge.danger {
    background: #fee2e2;
    color: #991b1b;
}

/* Status badges for tables */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid;
}

.status-badge-success {
    background: #dcfce7;
    color: #15803d;
}

.status-badge-danger {
    background: #fee2e2;
    color: #dc2626;
}

/* Links/badges inside tables */
.content-table .table-badge { margin-right: 6px; margin-bottom: 4px; }
.content-table a.table-badge { text-decoration: none; color: inherit; }

/* Compact inline group badges for table cells */
.table-group-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    margin-right: 4px;
    margin-bottom: 2px;
    transition: background .15s, border-color .15s;
}
.table-group-badge:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    text-decoration: none;
}
.table-group-badge .fa {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e0ecff;
    color: #1d4ed8;
    font-size: 8px;
}

/* Generic chip for inline labels outside tables */
.content-chip{display:inline-block;padding:2px 8px;font-size:12px;border-radius:999px;background:#f3f4f6;color:#374151;border:1px solid #e5e7eb;margin-right:6px}

/* Content header with left/right sections */
.content-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.content-header-right {
    display: flex;
    align-items: center;
}
.content-header:has(.content-header-left) {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 640px) {
    .content-header:has(.content-header-left) {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .content-header-right {
        width: 100%;
        justify-content: flex-start;
    }
}


/* ========================================================================
   Content Icon Color Classes
   ========================================================================

   Available color classes for .content-icon:

   STANDARD COLORS (General Purpose):
   - .blue      - Blue theme (informational, general actions)
   - .green     - Green theme (success, positive actions)
   - .purple    - Purple theme (analytics, special features)
   - .yellow    - Yellow theme (warnings, guidance)
   - .amber     - Amber theme (same as yellow)
   - .danger    - Red theme (errors, critical actions)
   - .red       - Red theme (same as danger)
   - .gray      - Gray theme (neutral, disabled)
   - .teal      - Teal theme (import, upload actions)
   - .cyan      - Cyan theme (export, download actions)

   SPECIAL PURPOSE COLORS (Specific Use Cases):
   - .help          - Green help icon (for help/info sections)
   - .news          - Yellow/amber news icon (for news/announcements)
   - .chart         - Purple chart icon (for charts/graphs)
   - .sms-point     - Blue SMS point icon (for SMS balance/points)
   - .icon-primary  - Steel blue primary button color

   MODIFIERS:
   - .sms-point.low-balance - Red variant for low SMS balance warning

   ======================================================================== */

/* Standard color themes for content-box icons */
.content-icon.blue { background: #eff6ff; color: #2563eb; }
.content-icon.indigo { background: #eef2ff; color: #4f46e5; }
.content-icon.green { background: #f0fdf4; color: #15803d; }
.content-icon.purple { background: #f3e8ff; color: #9333ea; }
.content-icon.yellow { background: #fef3c7; color: #d97706; }
.content-icon.amber { background: #fef3c7; color: #d97706; }
.content-icon.danger { background: #fef2f2; color: #dc2626; }
.content-icon.red { background: #fef2f2; color: #dc2626; }
.content-icon.gray { background: #e5e7eb; color: #6b7280; }
.content-icon.teal { background: #f0fdfa; color: #0f766e; }
.content-icon.cyan { background: #ecfeff; color: #0891b2; }

/* Special purpose icon colors */
.content-icon.help {
    background: #f0fdf4;
    color: #15803d;
}

.content-icon.news {
    background: #fef9e7;
    color: #b45309;
}

.content-icon.chart {
    background: #f0f0ff;
    color: #6366f1;
}

.content-icon.sms-point {
    background: #eff6ff;
    color: #2563eb;
}

.content-icon.sms-point.low-balance {
    background: #fef2f2;
    color: #dc2626;
}

/* Form field with help icon wrapper - for when input and help icon need to be on same line */
.form-field-with-help {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}

.form-field-with-help > input,
.form-field-with-help > select,
.form-field-with-help > textarea,
.form-field-with-help > .receiver-input-group {
	flex: 1;
	min-width: 0;
}

/* Ensure inputs with size attribute don't overflow when next to help icons */
input[type="text"][size] {
	max-width: 100%;
	box-sizing: border-box;
}

/* ========================================================================
   Modern Page Wrapper Enhancements
 ========================================================================== */

/* Ensure content-container has proper spacing in the new design */
.content-container {
	max-width: 100%;
	margin: 0 auto;
}

/* Modern page titles */
h1.page-title,
h2.page-title {
	color: #1f2937;
	font-weight: 600;
	font-size: 28px;
	margin-bottom: 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid #e5e7eb;
}

/* Breadcrumb styling to match modern design */


.breadcrumb-item.active {
	color: #2563eb;
	font-weight: 500;
}


/* ========================================================================
   RESPONSIVE UTILITY CLASSES
 ========================================================================== */

/* Display utilities */
.d-none {
	display: none !important;
}


/* Responsive display utilities */
@media (min-width: 768px) {
	.d-md-none {
		display: none !important;
	}
	.d-md-inline-block {
		display: inline-block !important;
	}
	.d-md-block {
		display: block !important;
	}
}

@media (min-width: 992px) {
	.d-lg-inline-block {
		display: inline-block !important;
	}
	.d-lg-block {
		display: block !important;
	}
}

/* ========================================================================
   MODERN TEMPLATE LAYOUT (templates/cpsms.html)
 ========================================================================== */

/* Override ALL old layout styles for modern template */
body.modern-layout table.main-layout-table,
body.modern-layout .topbanner,
body.modern-layout .topbanner_left,
body.modern-layout .topbanner_center,
body.modern-layout .topbanner_right,
body.modern-layout .menu_left,
body.modern-layout .menu_center,
body.modern-layout .menu_right,
body.modern-layout td.pagebody,
body.modern-layout div.pagebody {
	display: none !important;
}

body.modern-layout div.topbar {
	background-image: none !important;
	background: none !important;
	float: none !important;
	position: static !important;
	top: auto !important;
	right: auto !important;
	height: auto !important;
	padding: 0 !important;
	display: block !important;
}

body.modern-layout div.topbar div.left,
body.modern-layout div.topbar div.right {
	background-image: none !important;
	background: none !important;
	height: auto !important;
	padding: 0 !important;
	display: inline !important;
}

/* Body and main layout */
body.modern-layout {
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	background-attachment: fixed;
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	color: #374151;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
}

/* Ensure all child elements use border-box */
body.modern-layout *,
body.modern-layout *::before,
body.modern-layout *::after {
	box-sizing: border-box;
}

/* Modern Header - High specificity to override any old styles */
body.modern-layout .modern-header {
	background: #ffffff !important;
	border-bottom: 1px solid #e5e7eb !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
	position: sticky !important;
	top: 0 !important;
	z-index: 1000 !important;
	width: 100% !important;
	display: block !important;
}

body.modern-layout .header-container {
	max-width: 1400px !important;
	margin: 0 auto !important;
	padding: 1rem 2rem !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: 2rem !important;
	flex-wrap: wrap !important;
	box-sizing: border-box !important;
	width: 100% !important;
}

body.modern-layout .header-logo {
	display: block !important;
}

body.modern-layout .header-logo a {
	display: block !important;
	transition: transform 0.3s ease;
}

body.modern-layout .header-logo a:hover {
	transform: scale(1.05);
}

body.modern-layout .header-logo img {
	height: 50px !important;
	width: auto !important;
	max-width: 100% !important;
}

body.modern-layout .header-topbar {
	display: flex !important;
	align-items: center !important;
	gap: 1rem !important;
	flex-wrap: wrap !important;
}

/* Modern topbar user info styling - High specificity */
body.modern-layout .modern-topbar-user {
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem !important;
	font-size: 14px !important;
	flex-wrap: wrap !important;
}

body.modern-layout .modern-topbar-user a {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	color: #4b5563 !important;
	text-decoration: none !important;
	font-weight: 500 !important;
	transition: all 0.2s ease !important;
	padding: 0.5rem 0.75rem !important;
	border-radius: 8px !important;
}

body.modern-layout .modern-topbar-user a:hover {
	color: #dc2626 !important;
	background-color: #fef2f2 !important;
}

body.modern-layout .modern-topbar-user a i {
	font-size: 18px !important;
}

body.modern-layout .topbar-divider {
	color: #d1d5db !important;
	font-weight: 300 !important;
}

body.modern-layout .topbar-balance {
	font-weight: 600 !important;
	color: #15803d !important;
}

body.modern-layout .topbar-balance-link:hover .topbar-balance {
	color: #15803d !important;
}

/* Logout button in header - High specificity */
body.modern-layout .header-topbar .topbar-logout-btn,
body.modern-layout .modern-topbar-user .topbar-logout-btn {
	background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	padding: 0.5rem 1rem !important;
	margin-left: 0.5rem !important;
	transition: all 0.2s ease !important;
	font-weight: 600 !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
}

body.modern-layout .header-topbar .topbar-logout-btn:hover,
body.modern-layout .modern-topbar-user .topbar-logout-btn:hover {
	background: linear-gradient(135deg, #b91c1c, #991b1b) !important;
	color: #ffffff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px rgba(185, 28, 28, 0.3) !important;
}

/* Modern Navigation */
body.modern-layout .modern-nav {
	background: linear-gradient(135deg, #c41e3a 0%, #a01729 100%);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	width: 100%;
	box-sizing: border-box;
	overflow: visible !important;
	position: relative;
}

body.modern-layout .nav-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 2rem;
	box-sizing: border-box;
	width: 100%;
	overflow: visible !important;
	position: relative;
}

/* Mobile menu toggle button - hidden on desktop */
body.modern-layout .mobile-menu-toggle {
	display: none;
	background: #c41e3a;
	border: 2px solid #e5e7eb;
	color: #ffffff;
	font-size: 24px;
	padding: 0.5rem 0.75rem;
	cursor: pointer;
	border-radius: 8px;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

body.modern-layout .mobile-menu-toggle:hover {
	background: #a01729;
	transform: scale(1.05);
}

body.modern-layout .nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	position: relative;
	overflow: visible !important;
}

body.modern-layout .nav-menu > li {
	margin: 0;
	padding: 0;
	position: relative;
}

body.modern-layout .nav-menu > li > a {
	display: block;
	padding: 0.75rem 1.5rem;
	color: #ffffff;
	text-decoration: none;
	font-weight: 500;
	font-size: 14px;
	transition: all 0.2s ease;
	border-radius: 8px 8px 0 0;
	position: relative;
	margin-top: 0.25rem;
}

body.modern-layout .nav-menu > li > a:hover {
	background: rgba(255, 255, 255, 0.15);
	transform: translateY(-2px);
}

body.modern-layout .nav-menu > li.active > a,
body.modern-layout .nav-menu > li > a.active {
	background: #ffffff;
	color: #c41e3a;
	font-weight: 600;
	margin-top: 0.25rem;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

body.modern-layout .nav-menu > li.active > a:hover,
body.modern-layout .nav-menu > li > a.active:hover {
	transform: none;
	background: #ffffff;
}

/* Dropdown Menu Styling */
body.modern-layout .nav-menu .nav-dropdown {
	position: relative !important;
}

body.modern-layout .nav-menu .nav-dropdown-toggle {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	cursor: pointer !important;
}

body.modern-layout .nav-menu .dropdown-icon {
	font-size: 12px !important;
	transition: transform 0.3s ease !important;
}

body.modern-layout .nav-menu .nav-dropdown.open .dropdown-icon {
	transform: rotate(180deg) !important;
}

body.modern-layout .nav-menu .nav-dropdown-menu {
	display: none !important;
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	min-width: 220px !important;
	background: #ffffff !important;
	border: 1px solid #e5e7eb !important;
	border-top: none !important;
	border-radius: 0 0 8px 8px !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
	list-style: none !important;
	margin: 0 !important;
	margin-top: -1px !important;
	padding: 0.5rem 0 !important;
	z-index: 9999 !important;
}

body.modern-layout .nav-menu .nav-dropdown.open .nav-dropdown-menu {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

body.modern-layout .nav-menu .nav-dropdown-menu li {
	margin: 0 !important;
	padding: 0 !important;
}

body.modern-layout .nav-menu .nav-dropdown-menu a {
	display: block !important;
	padding: 0.75rem 1.5rem !important;
	color: #374151 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	border-radius: 0 !important;
	transition: all 0.2s ease !important;
	text-decoration: none !important;
}

body.modern-layout .nav-menu .nav-dropdown-menu a:hover {
	background: #fee2e2 !important;
	color: #c41e3a !important;
	transform: none !important;
	padding-left: 2rem !important;
}

body.modern-layout .nav-menu .nav-dropdown-menu li.active a {
	background: #c41e3a !important;
	color: #ffffff !important;
	font-weight: 600 !important;
}

body.modern-layout .nav-menu .nav-dropdown-menu a::after {
	display: none !important;
}

/* Main Content Area */
body.modern-layout .modern-main {
	flex: 1;
	max-width: 1400px;
	width: 100%;
	margin: 0 auto;
	padding: 0 2rem 2rem 2rem;
	box-sizing: border-box;
}

/* Modern Footer */
.modern-footer {
	background: #ffffff;
	border-top: 1px solid #e5e7eb;
	margin-top: auto;
}

.footer-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 1.5rem 2rem;
	text-align: center;
	color: #6b7280;
	font-size: 13px;
}

.footer-content {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.footer-item {
	white-space: nowrap;
}

.footer-container p {
	margin: 0;
}

.footer-container a {
	color: #c41e3a;
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-container a:hover {
	color: #a01729;
	text-decoration: underline;
}

/* Mobile footer - stack items vertically */
@media (max-width: 768px) {
	.footer-content {
		flex-direction: column;
		gap: 0.75rem;
	}

	.footer-container {
		padding: 1.25rem 1rem;
	}
}

/* ========================================================================
   Send Timing Toggle - Button Group
   ======================================================================== */

.send-timing-toggle {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.timing-btn {
    padding: 8px 16px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.timing-btn:hover {
    border-color: #9ca3af;
    color: #374151;
}

.timing-btn.active {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}

.timing-btn.active:hover {
    background: #0369a1;
    border-color: #0369a1;
}

.timing-btn i {
    font-size: 13px;
}

/* Content header with toggle - responsive layout */
.content-header-with-toggle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.content-header-with-toggle .content-icon {
    flex-shrink: 0;
}

.content-header-with-toggle .content-title {
    flex-shrink: 0;
}

.content-header-with-toggle .send-timing-toggle {
    margin-left: auto;
}

/* Mobile: Stack toggle below title but keep icon+title together */
@media (max-width: 768px) {
    .content-header-with-toggle .send-timing-toggle {
        margin-left: 0;
        width: 100%;
        flex-basis: 100%;
    }

    .content-header-with-toggle .timing-btn {
        flex: 1;
    }
}

/* ========================================================================
   jQuery UI Datepicker & Timepicker - Modern Styling
   ======================================================================== */

/* Fix z-index for jQuery UI datepicker to appear above content boxes */
.ui-datepicker,
.ui-timepicker-div {
    z-index: 10000 !important;
}

/* Modern datepicker styling */
.ui-datepicker {
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    padding: 12px !important;
    background: #ffffff !important;
    font-family: inherit !important;
}

.ui-datepicker-header {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    border: none !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    padding: 10px !important;
    margin-bottom: 8px !important;
}

.ui-datepicker-title {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.ui-datepicker-prev,
.ui-datepicker-next {
    border-radius: 4px !important;
    cursor: pointer !important;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
    filter: brightness(0) invert(1) !important;
}

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
}

.ui-datepicker th {
    color: #6b7280 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 8px 4px !important;
}

.ui-datepicker td {
    padding: 2px !important;
}

.ui-datepicker td a,
.ui-datepicker td span {
    border-radius: 6px !important;
    padding: 6px !important;
    text-align: center !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
}

.ui-datepicker td a {
    color: #374151 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
}

.ui-datepicker td a:hover {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
}

.ui-datepicker td a.ui-state-active {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
    font-weight: 600 !important;
}

.ui-datepicker td a.ui-state-active:hover {
    background: #0369a1 !important;
    border-color: #0369a1 !important;
}

.ui-datepicker td.ui-datepicker-today a {
    background: #eff6ff !important;
    border-color: #3b82f6 !important;
    color: #1e40af !important;
}

.ui-datepicker td.ui-datepicker-today a:hover {
    background: #dbeafe !important;
}

/* Timepicker styling */
.ui-timepicker-div {
    padding: 12px !important;
    border-top: 1px solid #e5e7eb !important;
}

.ui-timepicker-div dl {
    margin-bottom: 8px !important;
}

.ui-timepicker-div dt {
    color: #6b7280 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    margin-bottom: 4px !important;
}

.ui-slider {
    background: #e5e7eb !important;
    border: none !important;
    border-radius: 4px !important;
    height: 6px !important;
}

.ui-slider .ui-slider-handle {
    background: #0284c7 !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    width: 16px !important;
    height: 16px !important;
    top: -5px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.ui-slider .ui-slider-handle:hover {
    background: #0369a1 !important;
}

.ui-slider .ui-slider-range {
    background: #0284c7 !important;
    border-radius: 4px !important;
}

.ui-datepicker-buttonpane {
    border-top: 1px solid #e5e7eb !important;
    padding-top: 8px !important;
    margin-top: 8px !important;
}

.ui-datepicker-buttonpane button {
    background: #f3f4f6 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    color: #374151 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.ui-datepicker-buttonpane button:hover {
    background: #e5e7eb !important;
    border-color: #9ca3af !important;
}

/* Country buttons - hide text on mobile */
@media (max-width: 768px) {
	.country-btn-text {
		display: none;
	}
}

/* Responsive Design */
@media (max-width: 768px) {
	body.modern-layout .header-container {
		padding: 1rem !important;
		gap: 0.75rem !important;
		display: grid !important;
		grid-template-columns: auto 1fr auto;
		align-items: center !important;
	}

	/* Show mobile menu toggle button on the left */
	body.modern-layout .mobile-menu-toggle {
		display: block !important;
		margin: 0 !important;
		flex-shrink: 0 !important;
	}

	/* Logo in the center */
	body.modern-layout .header-logo {
		flex-shrink: 0 !important;
		display: flex !important;
		justify-content: center !important;
	}

	body.modern-layout .header-logo a {
		display: block !important;
	}

	body.modern-layout .header-logo img {
		height: 35px !important;
		width: auto !important;
		display: block !important;
	}

	/* Topbar on the right - hide most items */
	body.modern-layout .header-topbar {
		flex-shrink: 0 !important;
		display: flex !important;
		justify-content: flex-end !important;
	}

	/* Hide username, balance, and buy SMS on mobile */
	body.modern-layout .modern-topbar-user .topbar-user-link,
	body.modern-layout .modern-topbar-user .topbar-balance-link,
	body.modern-layout .modern-topbar-user .topbar-buy-link,
	body.modern-layout .modern-topbar-user .topbar-divider {
		display: none !important;
	}

	/* Only show logout button on mobile */
	body.modern-layout .modern-topbar-user .topbar-logout-btn {
		display: flex !important;
		padding: 0.5rem 0.75rem !important;
		font-size: 14px !important;
	}

	/* Remove position relative on mobile to avoid stacking context issues */
	body.modern-layout .modern-nav {
		position: static !important;
	}

	body.modern-layout .nav-container {
		padding: 1rem !important;
		position: static !important;
		z-index: auto !important;
	}

	/* Hide menu by default on mobile */
	body.modern-layout .nav-menu {
		display: none;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		gap: 0;
		width: 100%;
		max-width: 100%;
		background: #a01729;
		border-radius: 0;
		padding: 0.5rem 0;
		margin: 0;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10000;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	/* Show menu when active */
	body.modern-layout .nav-menu.mobile-open {
		display: flex !important;
	}

	body.modern-layout .nav-menu > li {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 100% !important;
		flex-shrink: 0 !important;
		flex-grow: 0 !important;
		flex-basis: auto !important;
	}

	body.modern-layout .nav-menu > li > a {
		border-radius: 0 !important;
		padding: 0.75rem 1rem !important;
		width: 100% !important;
		max-width: 100% !important;
		display: block !important;
		box-sizing: border-box !important;
		white-space: normal !important;
		word-wrap: break-word !important;
	}

	body.modern-layout .nav-menu .nav-dropdown-toggle {
		display: block !important;
		width: 100% !important;
	}

	body.modern-layout .nav-menu .dropdown-icon {
		float: right !important;
		margin-top: 2px !important;
	}

	/* Dropdown menus on mobile */
	body.modern-layout .nav-menu .nav-dropdown-menu {
		position: static !important;
		box-shadow: none !important;
		border: none !important;
		border-radius: 0 !important;
		background: rgba(0, 0, 0, 0.15) !important;
		margin: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		display: none !important;
		max-height: 0 !important;
		overflow: hidden !important;
		transition: max-height 0.3s ease !important;
	}

	body.modern-layout .nav-menu .nav-dropdown.open .nav-dropdown-menu {
		display: block !important;
		max-height: 2000px !important;
	}

	body.modern-layout .nav-menu .nav-dropdown-menu li {
		width: 100% !important;
		max-width: 100% !important;
	}

	body.modern-layout .nav-menu .nav-dropdown-menu a {
		padding-left: 2rem !important;
		color: #ffffff !important;
		font-weight: 400 !important;
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		white-space: normal !important;
		word-wrap: break-word !important;
	}

	body.modern-layout .nav-menu .nav-dropdown-menu a:hover {
		background: rgba(255, 255, 255, 0.1) !important;
		color: #ffffff !important;
	}

	body.modern-layout .nav-menu .nav-dropdown-menu li.active a {
		background: rgba(255, 255, 255, 0.2) !important;
		color: #ffffff !important;
		font-weight: 600 !important;
	}

	body.modern-layout .modern-main {
		padding: 0 1rem 1rem 1rem !important;
	}

	body.modern-layout .footer-container {
		padding: 1rem;
		font-size: 12px;
	}

	/* Hide some topbar text on mobile */
	body.modern-layout .modern-topbar-user {
		gap: 0.5rem !important;
		font-size: 12px !important;
	}
}

/* Tablet adjustments */
@media (max-width: 1024px) {
	body.modern-layout .header-container {
		padding: 1rem 1.5rem !important;
	}

	body.modern-layout .nav-container {
		padding: 0 1.5rem !important;
	}

	body.modern-layout .modern-main {
		padding: 0 1.5rem 1.5rem 1.5rem !important;
	}
}

/* Content sub-box for framed sections within content-box */
.content-sub-box {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
/* Only add margin-top when content-sub-boxes are stacked vertically (not in a grid) */
.content-box > .content-sub-box + .content-sub-box {
    margin-top: 16px;
}

.content-sub-box h4 {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 600;
    color: #374151;
}

/* Field row layout - wraps on mobile, single line on desktop */
.field-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

@media (min-width: 769px) {
    .field-row {
        flex-wrap: nowrap;
    }
}

/* Form layout utilities */
.form-grid,
.form-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    /*margin-bottom: 20px;*/
}

.form-grid-4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 900px) {
    .form-grid,
    .form-grid-2col,
    .form-grid-4col {
        grid-template-columns: 1fr;
    }
}


/* Form field containers - see line 1998 for main .form-field definition */
.form-field-small {
    margin-bottom: 8px;
}

/* Form labels - see line 1801 for main .form-label definition */
.form-label-small {
    display: block;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 4px;
}

/* Form help text */
.form-help-text {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 8px;
    line-height: 1.5;
}


.form-label-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
}

/* Checkbox and Radio styles */
.form-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: normal;
    color: #374151;
    margin-bottom: 8px;
}

.form-checkbox input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.form-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: normal;
    color: #374151;
    margin-bottom: 8px;
}

.form-radio input[type="radio"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

/* Form inputs - see line 2008 for main .form-input definition */
.form-input-small {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
}
.form-select {
    padding: 8px 32px 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    max-width: 200px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-select-full {
    padding: 8px 32px 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    width: 100%;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-select:hover,
.form-select-full:hover {
    border-color: #9ca3af;
}

.form-select:focus,
.form-select-full:focus {
    outline: none;
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}

.form-select:disabled,
.form-select-full:disabled {
    background-color: #f3f4f6;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Form sections - see line 1855 for .form-section-header definition */
.form-fields-grid {
    display: grid;
    gap: 12px;
}

/* Button containers */
.button-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.button-row-single {
    margin-top: 20px;
}

/* Form action buttons container - right aligned with top border */
.form-actions {
    text-align: right;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

/* Button list - vertical stack with gap */
.button-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Button with left-aligned text (for menu-style buttons) */
.base-btn.btn-left-align {
    justify-content: flex-start;
}

/* Flex container utilities */

.flex-column {
    display: flex;
    flex-direction: column;
}


.flex-wrap {
    flex-wrap: wrap;
}



.header-action-right {
    margin-left: auto;
}

/* Text utilities */
.text-muted {
    color: #6b7280;
}

.text-small {
    font-size: 13px;
}


.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

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

/* Spacing utilities */
.mb-20 {
    margin-bottom: 20px;
}

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



/* Message/info box content styling */
.message-content {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}

.message-text {
    font-size: 13px;
    color: #374151;
    font-style: italic;
}

/* Info row with label and value */
.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.info-section {
    font-size: 13px;
    color: #6b7280;
}

.info-label {
    font-weight: 600;
}

.info-value {
    font-weight: 600;
    color: #1f2937;
}

.info-link {
    color: #2563eb;
    font-weight: 600;
}

/* Action buttons section */
.action-buttons {
    display: flex;
    gap: 8px;
}

/* Center action buttons when in centered table cells */
td[align="center"] .action-buttons {
    justify-content: center;
}

td[align="right"] .action-buttons {
    justify-content: flex-end;
}

/* Overflow container for tables */
.table-overflow {
    overflow-x: auto;
}

/* Content with flex-1 */
.flex-1 {
    flex: 1;
}

/* No margin variant for tables */
.no-margin {
    margin: 0;
}

/* Toolbar layouts */
.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 16px;
}

/* Three-section toolbar layout */
.toolbar-three-section {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}

.toolbar-section {
    display: flex;
    align-items: center;
}

.toolbar-section:first-child {
    justify-content: flex-start;
}

.toolbar-section:last-child {
    justify-content: flex-end;
}

/* Toolbar pagination styling */
.toolbar-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
}
.toolbar-form-bulk {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Mobile responsive toolbar */
@media (max-width: 768px) {
    .toolbar-three-section {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .toolbar-section {
        width: 100%;
    }

    .toolbar-section:first-child,
    .toolbar-section:last-child {
        justify-content: stretch;
    }


    .toolbar-pagination {
        justify-content: center;
    }
}

/* Utility spacing */
.mt-16 {
    margin-top: 16px;
}
.mt-24 {
    margin-top: 24px;
}

/* Group selector improvements - CSS-only clickable */
.group-selector {
    cursor: pointer;
    display: block;
    transition: all 0.2s ease;
}

.group-selector:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
}

/* Keep the normal checkbox visible and functional */
.group-selector input[type="checkbox"] {
    cursor: pointer;
}

/* Unchecked (faded) state */
.group-selector.boxfaded {
    opacity: 0.6;
}

/* Checked state removes faded appearance */
.group-selector:has(input[type="checkbox"]:checked) {
    opacity: 1;
}

/* Focus state for accessibility */
.group-selector input[type="checkbox"]:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* ============================================================================
   LOGIN PAGE STYLES
   Modern login page design with centered box layout
   ============================================================================ */

.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-box {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    padding: 40px;
    width: 100%;
    max-width: 420px;
    animation: fadeInUp 0.5s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-header {
    text-align: center;
    margin-bottom: 32px;
}

.login-logo {
    margin-bottom: 16px;
}

.login-title {
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 8px 0;
}

.login-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.login-form {
    margin-bottom: 24px;
}

.login-form .form-field {
    margin-bottom: 20px;
}

.login-form .form-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #374151;
    font-size: 14px;
}

.login-form .base-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.2s ease;
}

.login-form .base-input:focus {
    border-color: #c41e3a;
    box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1);
    outline: none;
}

.login-form .base-btn {
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
}

.login-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.login-link {
    color: #6b7280;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.login-link:hover {
    color: #c41e3a;
    text-decoration: none;
}

.login-link i {
    font-size: 12px;
}

.login-divider {
    color: #d1d5db;
    font-size: 12px;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .login-box {
        padding: 30px 24px;
    }

    .login-title {
        font-size: 24px;
    }

    .login-links {
        flex-direction: column;
        gap: 8px;
    }

    .login-divider {
        display: none;
    }
}

/* ============================================
   SMS LOG STATUS LEGEND & ICONS
   ============================================ */

/* Status legend container */
.status-legend {
    padding: 20px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    margin-top: 16px;
}

.status-legend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.status-legend-item {
    display: flex;
    gap: 12px;
    align-items: start;
}

.status-legend-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
    color: #1f2937;
}

.status-legend-desc {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
}

/* Status icons */
.status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.status-icon i {
    line-height: 1;
}

/* Success status - Green */
.status-icon.status-success {
    color: #059669;
}

/* Pending status - Yellow/Orange */
.status-icon.status-pending {
    color: #d97706;
}

/* Failed status - Red */
.status-icon.status-failed {
    color: #dc2626;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .status-legend {
        padding: 16px;
    }

    .status-legend-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .status-icon {
        font-size: 22px;
    }
}

/* ========================================
   VELKOMMEN PAGE (DASHBOARD) STYLES
   ======================================== */

/* Quick Actions */
.quick-actions-title {
    color: #374151;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: left;
}

.quick-action-item {
    display: flex;
    align-items: center;
    padding: 0;
    margin-bottom: 10px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-decoration: none;
    color: #374151;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    min-height: 64px;
}

.quick-action-item:hover {
    background: #fffbf5;
    border-color: #cbd5e1;
    text-decoration: none;
    color: #1f2937;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transform: translateX(2px);
}

.quick-action-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: #ffffff;
    position: relative;
    flex-shrink: 0;
    border-radius: 11px 0 0 11px;
}

.quick-action-text {
    font-weight: 500;
    font-size: 15px;
    color: #374151;
    transition: color 0.2s ease;
    padding: 0 16px;
    flex: 1;
}

.quick-action-item:hover .quick-action-text {
    color: #1f2937;
}

.quick-action-arrow {
    color: #cbd5e1;
    font-size: 20px;
    font-weight: bold;
    transition: all 0.2s ease;
    padding-right: 16px;
}

.quick-action-item:hover .quick-action-arrow {
    color: #94a3b8;
    transform: translateX(3px);
}

/* SMS Point Balance */
.sms-point-balance {
    font-size: 24px;
    font-weight: 700;
    color: #059669;
    text-align: right;
    margin: 0;
}

.sms-point-balance.low-balance {
    color: #dc2626;
}

/* Chart Value */
.chart-value {
    font-size: 18px;
    font-weight: 700;
    color: #374151;
}

/* News Content */
.news-content {
    color: #4b5563;
    line-height: 1.6;
    font-size: 14px;
    margin-bottom: 15px;
}

.news-footer {
    text-align: center;
}

/* Help Content */
.help-content {
    color: #4b5563;
    line-height: 1.6;
    font-size: 14px;
}

/* Responsive optimizations for velkommen page */
@media (max-width: 768px) {
    .quick-actions-title {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .quick-action-item {
        padding: 10px 12px;
        margin-bottom: 6px;
    }

    .quick-action-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
        margin-right: 10px;
    }

    .quick-action-text {
        font-size: 14px;
    }

    .quick-action-arrow {
        font-size: 16px;
    }

    .sms-point-balance {
        font-size: 20px;
    }

    .chart-value {
        font-size: 16px;
    }

    .news-content,
    .help-content {
        font-size: 13px;
    }

    .content-box {
        padding: 16px;
    }
}

/* Searchable Select Styling */
.searchable-select-wrapper {
    position: relative;
}

.searchable-select-wrapper input[type="text"] {
    width: 100%;
}

.contact-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 4px;
}

.contact-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.15s ease;
}

.contact-item:last-child {
    border-bottom: none;
}

.contact-item:hover,
.contact-item.selected {
    background-color: #f3f4f6;
}

.contact-item.no-results {
    color: #9ca3af;
    cursor: default;
    text-align: center;
    padding: 16px 12px;
}

.contact-item.no-results:hover {
    background-color: transparent;
}

.contact-item.contact-more {
    color: #6b7280;
    font-size: 13px;
    text-align: center;
    cursor: default;
    font-style: italic;
}

.contact-item.contact-more:hover {
    background-color: transparent;
}

.contact-name {
    font-weight: 500;
    color: #111827;
    margin-bottom: 2px;
}

.contact-mobile {
    font-size: 13px;
    color: #6b7280;
    font-family: monospace;
}

/* ========================================================================
   News Box - Inner styling for news items (uses .content-box as base)
   ======================================================================== */

.news-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.news-box-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.news-box-date {
    color: #6b7280;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.news-box-title {
    color: #111827;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.news-box-content {
    color: #374151;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.news-box-footer {
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

.news-box-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #c41e3a;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.news-box-link:hover {
    color: #a01729;
    gap: 8px;
    text-decoration: none;
}

.news-box-link i {
    transition: transform 0.2s ease;
}

.news-box-link:hover i {
    transform: translateX(2px);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .news-box-title {
        font-size: 18px;
    }
}