/* =========================================================
   BRACKET + ARKANARI SKIN (Overrides)
   Load AFTER bracket.css (or AFTER bracket_patched_arkanari.css)

   Brand palette:
   - Dark : #353535
   - Light: #ffffff
   - Gold : #917634

   Notes:
   - Keeps semantic colors (success/danger) but muted/premium.
   - Adds Bootstrap 4 "bridge" overrides for hardcoded colors.
   ========================================================= */

:root{
    /* Arkanari brand */
    --ark-dark: #353535;
    --ark-light: #ffffff;
    --ark-gold: #917634;
    --ark-gold-hover: #7f6530;
    --ark-gold-active:#6f582a;

    /* Neutrals */
    --ark-border: rgba(53,53,53,.12);
    --ark-muted: rgba(53,53,53,.60);
    --ark-muted2: rgba(53,53,53,.40);
    --ark-hover: rgba(53,53,53,.06);

    --ark-white-90: rgba(255,255,255,.90);
    --ark-white-70: rgba(255,255,255,.70);
    --ark-white-50: rgba(255,255,255,.50);
    --ark-border-w: rgba(255,255,255,.10);

    --ark-shadow: 0 10px 30px rgba(0,0,0,.12);

    /* Harmony semantics */
    --ark-success: #2f7d32;
    --ark-info:    #3f556d;
    --ark-warning: #b8892e;
    --ark-danger:  #b33a3a;

    /* Bootstrap vars (helpful for 3rd-party libs that use var()) */
    --primary:   var(--ark-gold);
    --secondary: #6f6f6f;
    --success:   var(--ark-success);
    --info:      var(--ark-info);
    --warning:   var(--ark-warning);
    --danger:    var(--ark-danger);
    --light:     var(--ark-light);
    --dark:      var(--ark-dark);

    /* Extra palette slots sometimes referenced */
    --blue:   var(--ark-gold);
    --cyan:   var(--ark-info);
    --teal:   #2f6f67;
    --green:  var(--ark-success);
    --yellow: var(--ark-warning);
    --orange: #b36a2e;
    --red:    var(--ark-danger);
    --indigo: #4f4b63;
    --purple: #5b4a6a;
    --pink:   #a24a6a;

    --white:  #ffffff;
    --gray:   #777777;
    --gray-dark: var(--ark-dark);
}

/* ===== Base page ===== */
body{
    background-color: #f2f2f2;
    color: rgba(53,53,53,.78);
}
h1,h2,h3,h4,h5,h6{ color: var(--ark-dark); }
hr{ border-top-color: var(--ark-border) !important; }

/* Links */
a{ color: var(--ark-gold); }
a:hover{ color: var(--ark-gold-hover); }

/* =========================================================
   BOOTSTRAP 4 BRIDGES (force colors even if hardcoded)
   ========================================================= */

/* Text */
.text-primary, .tx-primary { color: var(--ark-gold) !important; }
.text-info,    .tx-info    { color: var(--ark-info) !important; }
.text-warning, .tx-warning { color: var(--ark-warning) !important; }
.text-danger,  .tx-danger  { color: var(--ark-danger) !important; }
.text-success, .tx-success { color: var(--ark-success) !important; }
.text-dark,    .tx-dark    { color: var(--ark-dark) !important; }
.text-muted                 { color: rgba(53,53,53,.55) !important; }

/* Background */
.bg-primary { background-color: var(--ark-gold) !important; }
.bg-info    { background-color: var(--ark-info) !important; }
.bg-warning { background-color: var(--ark-warning) !important; }
.bg-danger  { background-color: var(--ark-danger) !important; }
.bg-success { background-color: var(--ark-success) !important; }
.bg-dark    { background-color: var(--ark-dark) !important; }
.bg-light   { background-color: var(--ark-light) !important; }

/* Border */
.border-primary { border-color: var(--ark-gold) !important; }
.border-info    { border-color: var(--ark-info) !important; }
.border-warning { border-color: var(--ark-warning) !important; }
.border-danger  { border-color: var(--ark-danger) !important; }
.border-success { border-color: var(--ark-success) !important; }
.border-dark    { border-color: var(--ark-dark) !important; }

/* Badges */
.badge-primary{ background: var(--ark-gold) !important; }
.badge-info{ background: var(--ark-info) !important; }
.badge-warning{ background: var(--ark-warning) !important; color: #fff !important; }
.badge-danger{ background: var(--ark-danger) !important; }
.badge-success{ background: var(--ark-success) !important; }

/* Alerts (premium tints) */
.alert-primary{
    color:#4b3b17 !important;
    background: rgba(145,118,52,.12) !important;
    border-color: rgba(145,118,52,.22) !important;
}
.alert-info{
    color:#2e3f52 !important;
    background: rgba(63,85,109,.12) !important;
    border-color: rgba(63,85,109,.22) !important;
}
.alert-warning{
    color:#5a4518 !important;
    background: rgba(184,137,46,.14) !important;
    border-color: rgba(184,137,46,.24) !important;
}
.alert-danger{
    color:#5a1f1f !important;
    background: rgba(179,58,58,.12) !important;
    border-color: rgba(179,58,58,.22) !important;
}
.alert-success{
    color:#1f4a21 !important;
    background: rgba(47,125,50,.12) !important;
    border-color: rgba(47,125,50,.22) !important;
}

/* Buttons */
.btn-primary{
    background: var(--ark-gold) !important;
    border-color: var(--ark-gold) !important;
    color: #fff !important;
}
.btn-primary:hover{ background: var(--ark-gold-hover) !important; border-color: var(--ark-gold-hover) !important; }
.btn-primary:active,
.btn-primary.active{ background: var(--ark-gold-active) !important; border-color: var(--ark-gold-active) !important; }
.btn-primary:focus{ box-shadow: 0 0 0 .2rem rgba(145,118,52,.25) !important; }

.btn-outline-primary{
    color: var(--ark-gold) !important;
    border-color: var(--ark-gold) !important;
}
.btn-outline-primary:hover{
    background: var(--ark-gold) !important;
    color: #fff !important;
}

/* Info buttons = steel (semantic) */
.btn-info{
    background: var(--ark-info) !important;
    border-color: var(--ark-info) !important;
    color:#fff !important;
}
.btn-info:hover{
    background: #33465b !important;
    border-color: #33465b !important;
}
.btn-outline-info{
    color: var(--ark-info) !important;
    border-color: var(--ark-info) !important;
}
.btn-outline-info:hover{
    background: var(--ark-info) !important;
    color:#fff !important;
}

/* Warning buttons */
.btn-warning{
    background: var(--ark-warning) !important;
    border-color: var(--ark-warning) !important;
    color:#fff !important;
}
.btn-warning:hover{
    background: #a37725 !important;
    border-color: #a37725 !important;
}
.btn-outline-warning{
    color: var(--ark-warning) !important;
    border-color: var(--ark-warning) !important;
}
.btn-outline-warning:hover{
    background: var(--ark-warning) !important;
    color:#fff !important;
}

/* Success buttons */
.btn-success{
    background: var(--ark-success) !important;
    border-color: var(--ark-success) !important;
}
.btn-success:hover{
    background: #256a28 !important;
    border-color: #256a28 !important;
}
.btn-outline-success{
    color: var(--ark-success) !important;
    border-color: var(--ark-success) !important;
}
.btn-outline-success:hover{
    background: var(--ark-success) !important;
    color:#fff !important;
}

/* Danger buttons */
.btn-danger{
    background: var(--ark-danger) !important;
    border-color: var(--ark-danger) !important;
}
.btn-danger:hover{
    background: #9d2f2f !important;
    border-color: #9d2f2f !important;
}
.btn-outline-danger{
    color: var(--ark-danger) !important;
    border-color: var(--ark-danger) !important;
}
.btn-outline-danger:hover{
    background: var(--ark-danger) !important;
    color:#fff !important;
}

/* Forms focus (replace blue glow) */
.form-control:focus,
.custom-select:focus{
    border-color: rgba(145,118,52,.55) !important;
    box-shadow: 0 0 0 .2rem rgba(145,118,52,.18) !important;
}
.custom-control-input:checked ~ .custom-control-label::before{
    border-color: var(--ark-gold) !important;
    background-color: var(--ark-gold) !important;
}

/* Navs / tabs */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link{
    background-color: var(--ark-gold) !important;
}
.nav-tabs .nav-link.active {
    color: var(--ark-gold) !important;
    border-color: var(--ark-border) var(--ark-border) var(--ark-light) !important;
}
.nav-tabs .nav-link:hover{ border-color: rgba(53,53,53,.10) rgba(53,53,53,.10) transparent !important; }

/* Pagination */
.page-item.active .page-link{
    background-color: var(--ark-gold) !important;
    border-color: var(--ark-gold) !important;
    color:#fff !important;
}
.page-link{ color: var(--ark-gold) !important; }
.page-link:hover{ color: var(--ark-gold-hover) !important; }

/* Progress */
.progress-bar{ background-color: var(--ark-gold) !important; }

/* Dropdown active */
.dropdown-item.active,
.dropdown-item:active{
    background-color: var(--ark-gold) !important;
    color:#fff !important;
}

/* =========================================================
   BRACKET LAYOUT: Header / Sidebars
   ========================================================= */

/* TOP HEADER (white bar + dark text) */
.br-header{
    background: var(--ark-light) !important;
    box-shadow: 0 1px 0 var(--ark-border) !important;
}
.br-header::before{ display:none !important; }

.navicon-left,
.navicon-right{
    border-left: 1px solid var(--ark-border) !important;
    border-right: 1px solid var(--ark-border) !important;
}
.navicon-left a,
.navicon-right a{
    color: var(--ark-muted) !important;
}
.navicon-left a:hover,
.navicon-left a:focus,
.navicon-right a:hover,
.navicon-right a:focus{
    color: var(--ark-dark) !important;
}

/* Search */
.br-header-left .input-group{ border-right: 1px solid var(--ark-border) !important; }
.br-header-left .form-control{ background: transparent !important; color: var(--ark-dark) !important; }
.br-header-left .form-control::placeholder{ color: var(--ark-muted2) !important; }
.br-header-left .input-group-btn .btn{
    background: transparent !important;
    color: var(--ark-muted) !important;
    border-color: transparent !important;
}
.br-header-left .input-group-btn .btn:hover,
.br-header-left .input-group-btn .btn:focus{ color: var(--ark-dark) !important; }

/* Header nav links */
.br-header-right .nav .nav-link{ color: var(--ark-muted) !important; }
.br-header-right .nav .nav-link:hover,
.br-header-right .nav .nav-link:focus{ color: var(--ark-dark) !important; }

/* Profile */
.nav-link-profile{ color: var(--ark-dark) !important; }
.nav-link-profile .logged-name{ color: var(--ark-dark) !important; }
.nav-link-profile .square-10{ border: 2px solid var(--ark-gold) !important; }

/* Notification bell hover gold */
#notification-center .nav-link i{ color: var(--ark-muted) !important; }
#notification-center .nav-link:hover i,
#notification-center .nav-link:focus i{ color: var(--ark-gold) !important; }

/* Dropdown menus */
.br-header-right .dropdown-menu{
    border: 1px solid var(--ark-border) !important;
    box-shadow: var(--ark-shadow) !important;
}
.dropdown-menu-header::before{ display:none !important; }
.dropdown-menu-label{
    background: var(--ark-light) !important;
    border-bottom: 1px solid var(--ark-border) !important;
}
.dropdown-menu-label label{ color: var(--ark-dark) !important; }
.dropdown-menu-label a,
#noti-mark-all{ color: var(--ark-gold) !important; }
.dropdown-menu-label a:hover,
#noti-mark-all:hover{ color: var(--ark-gold-hover) !important; text-decoration: underline; }

#noti-list .media{ border-bottom: 1px solid rgba(53,53,53,.08) !important; }
#noti-empty .noti-text{ color: var(--ark-muted) !important; }

.user-profile-nav a{ color: var(--ark-dark) !important; }
.user-profile-nav a i{ color: var(--ark-gold) !important; }
.user-profile-nav .btn.btn-light{
    background: transparent !important;
    border: 1px solid var(--ark-border) !important;
    color: var(--ark-dark) !important;
    width: 100%;
    text-align: left;
}
.user-profile-nav .btn.btn-light i{ color: var(--ark-gold) !important; }
.user-profile-nav .btn.btn-light:hover{ background: var(--ark-hover) !important; }
#noti-badge-dot{ box-shadow: 0 0 0 2px var(--ark-light); }

/* LEFT SIDEBAR (dark bar + white text/icons) */
.br-sideleft{ background: var(--ark-dark) !important; padding:0; }

/* Logo strip (your <div class="br-logo"><img ...>) */
.br-logo{
    background: var(--ark-light) !important;
    border-bottom: 1px solid var(--ark-border) !important;
}
.br-logo img{ display:block; }

/* Labels */
.br-sideleft .sidebar-label{
    color: var(--ark-white-70) !important;
    opacity: 1 !important;
}

/* Menu links */
.br-sideleft .br-menu-link{
    color: var(--ark-white-90) !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 0;
    height: 42px;
}
.br-sideleft .br-menu-link.with-sub::after{ color: var(--ark-white-50) !important; }

/* Icons as <img svg> */
.br-sideleft .br-menu-link .menu-item-icon{
    width: 18px;
    height: 18px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    filter: brightness(0) invert(1);
    opacity: .92;
}

/* Hover / active */
.br-sideleft .br-menu-link:hover,
.br-sideleft .br-menu-link:focus{
    background: rgba(255,255,255,.06) !important;
    color: var(--ark-light) !important;
}
.br-sideleft .br-menu-link.active{
    background: var(--ark-gold) !important;
    color: var(--ark-light) !important;
    border-top-color: transparent !important;
}
.br-sideleft .br-menu-link.active::after{ color: var(--ark-light) !important; }
.br-sideleft .br-menu-link.active .menu-item-icon{ opacity: 1; }

/* Submenu */
.br-sideleft .br-menu-sub{
    background: rgba(0,0,0,.18) !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 0;
}
.br-sideleft .br-menu-sub .sub-link{
    color: var(--ark-white-70) !important;
}
.br-sideleft .br-menu-sub .sub-link:hover,
.br-sideleft .br-menu-sub .sub-link:focus{
    color: var(--ark-gold) !important;
}
.br-sideleft .br-menu-sub .sub-link.active{
    color: var(--ark-gold) !important;
}
.br-sideleft .br-menu-sub .sub-link.active::before{
    background-color: var(--ark-gold) !important;
}

/* RIGHT SIDEBAR */
.br-sideright{
    background: var(--ark-dark) !important;
    border-left: 1px solid rgba(0,0,0,.15);
}
.sidebar-tabs{
    background: rgba(0,0,0,.22) !important;
    border-bottom: 1px solid var(--ark-border-w) !important;
}
.sidebar-tabs .nav-link{
    color: var(--ark-white-70) !important;
    border: 0 !important;
}
.sidebar-tabs .nav-link i{ color: var(--ark-white-70) !important; }
.sidebar-tabs .nav-link:hover,
.sidebar-tabs .nav-link:focus{
    color: var(--ark-light) !important;
    background: rgba(255,255,255,.06) !important;
}
.sidebar-tabs .nav-link:hover i,
.sidebar-tabs .nav-link:focus i{ color: var(--ark-light) !important; }
.sidebar-tabs .nav-link.active{
    background: var(--ark-dark) !important;
    color: var(--ark-gold) !important;
    box-shadow: inset 0 -2px 0 var(--ark-gold);
}
.sidebar-tabs .nav-link.active i{ color: var(--ark-gold) !important; }

.br-sideright .sidebar-label{
    color: var(--ark-white-90) !important;
    opacity: 1 !important;
}

/* Contact list */
.contact-list-link{
    background: transparent !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
}
.contact-list-link:hover,
.contact-list-link:focus{ background: rgba(255,255,255,.06) !important; }
.contact-list-link.new{ background: rgba(0,0,0,.18) !important; }
.contact-list-link:hover.new,
.contact-list-link:focus.new{ background: rgba(0,0,0,.26) !important; }

.contact-person p{ color: var(--ark-light) !important; }
.contact-person span{ color: var(--ark-white-50) !important; }

/* In right panel, treat info text as neutral (not blue) */
.br-sideright .tx-info,
.br-sideright .tx-info *{ color: var(--ark-white-70) !important; }

/* Attachments */
.media-file-list .media{ border-top: 1px solid rgba(255,255,255,.06) !important; }
.media-file-list .media-body{ color: var(--ark-white-90) !important; }
.media-file-list .media-body p{ color: var(--ark-white-70) !important; }
.media-file-list .media-body .tx-gray-800{ color: var(--ark-white-90) !important; }

/* Calendar/event */
.br-sideright .tx-inverse{ color: var(--ark-light) !important; }
.br-sideright .tx-gray-600{ color: var(--ark-white-50) !important; }

.sidebar-event-list .list-group-item{
    background: rgba(0,0,0,.18) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    color: var(--ark-white-90) !important;
}
.sidebar-event-list .list-group-item h6{ color: var(--ark-light) !important; }
.sidebar-event-list .list-group-item p{ color: var(--ark-white-50) !important; }
.sidebar-event-list .more i{ color: var(--ark-white-70) !important; }
.sidebar-event-list .more:hover i{ color: var(--ark-gold) !important; }

/* Datepicker accent */
.sidebar-datepicker .ui-datepicker-calendar thead th{ color: var(--ark-gold) !important; }
.sidebar-datepicker .ui-datepicker-calendar .ui-datepicker-today .ui-state-default{
    background: transparent !important;
    color: var(--ark-gold) !important;
    border-color: var(--ark-gold) !important;
}

/* Right panel settings */
.sidebar-settings-item{ border-top: 1px solid rgba(255,255,255,.06) !important; }
.sidebar-settings-item h6{ color: var(--ark-light) !important; }
.sidebar-settings-item p{ color: var(--ark-white-50) !important; }

/* Switch */
.br-sideright .switch-button-background{ background: rgba(0,0,0,.28) !important; }
.br-sideright .switch-button-background.checked{ background: var(--ark-gold) !important; }
.br-sideright .switch-button-label.on{ color: var(--ark-gold) !important; }

/* Right panel action button uses Gold (brand action) */
.br-sideright .btn-outline-info{
    color: var(--ark-gold) !important;
    border-color: var(--ark-gold) !important;
    background: transparent !important;
}
.br-sideright .btn-outline-info:hover,
.br-sideright .btn-outline-info:focus{
    color: var(--ark-light) !important;
    background: var(--ark-gold) !important;
    border-color: var(--ark-gold) !important;
}

/* =========================================================
   Premium neutrals (cards/sections)
   ========================================================= */
.br-pageheader{
    background: #e9ecef !important;
    border-bottom: 1px solid var(--ark-border) !important;
}
.br-section-wrapper,
.card{
    border-color: rgba(53,53,53,.10) !important;
    box-shadow: none !important;
}

/* =========================================================
   Flatpickr (optional) - Arkanari harmony
   ========================================================= */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover{
    background: var(--ark-gold) !important;
    border-color: var(--ark-gold) !important;
    color: var(--ark-light) !important;
    border-radius: 6px;
}
.flatpickr-day:hover{ background: rgba(145,118,52,.10) !important; }
.flatpickr-months .flatpickr-month{ color: var(--ark-gold) !important; font-weight: 600; }
.flatpickr-prev-month, .flatpickr-next-month{ color: var(--ark-gold) !important; }

/* =========================================================
   Wizard accents
   ========================================================= */
.wizard > .steps .current a,
.wizard > .steps .current a:hover,
.wizard > .steps .current a:active,
.wizard > .actions a,
.wizard > .actions a:hover,
.wizard > .actions a:active{
    background-color: var(--ark-gold) !important;
}
.wizard-style-1 > .steps > ul .current a .number,
.wizard-style-1 > .steps > ul .current a:hover .number,
.wizard-style-1 > .steps > ul .current a:active .number{
    background-color: var(--ark-gold-hover) !important;
}
.wizard-style-2 > .steps > ul .current a .number,
.wizard-style-2 > .steps > ul .current a:hover .number,
.wizard-style-2 > .steps > ul .current a:active .number{
    border-color: var(--ark-gold) !important;
    color: var(--ark-gold) !important;
}
.wizard-style-3 > .steps > ul .current a,
.wizard-style-3 > .steps > ul .current a:hover,
.wizard-style-3 > .steps > ul .current a:active{
    color: var(--ark-gold) !important;
}
.wizard-style-3 > .steps > ul .current a .number,
.wizard-style-3 > .steps > ul .current a:hover .number,
.wizard-style-3 > .steps > ul .current a:active .number{
    background-color: var(--ark-gold) !important;
}

/* Page title accent */
.br-pagetitle .icon,
.br-pagetitle h4{
    color: var(--ark-gold) !important;
}

/* ===============================
   ARKANARI TABS (Bootstrap 4) - GLOBAL
   Active: gold bg + white text
   Inactive: light gray bg + gold border + gold text
   IMPORTANT: Exclude .sidebar-tabs (Right Panel)
   NOTE: tab-content no fuerza fondo blanco (hereda)
================================ */

/* Contenedor tabs */
.nav-tabs:not(.sidebar-tabs){
    border-bottom: 1px solid rgba(145,118,52,.35) !important; /* gold-ish */
}

.nav-tabs:not(.sidebar-tabs) .nav-item{
    margin-bottom: -1px; /* estándar tabs */
}

/* Tab normal (inactivo) */
.nav-tabs:not(.sidebar-tabs) .nav-link{
    background: rgba(53,53,53,.06) !important;               /* gris semi claro */
    color: var(--ark-gold) !important;                       /* letra dorada */
    border: 1px solid rgba(145,118,52,.55) !important;       /* contorno dorado */
    border-bottom-color: rgba(145,118,52,.35) !important;
    border-top-left-radius: .45rem;
    border-top-right-radius: .45rem;

    padding: .55rem .9rem;
    font-weight: 600;
    transition: all .15s ease-in-out;
}

/* Hover inactivo */
.nav-tabs:not(.sidebar-tabs) .nav-link:hover,
.nav-tabs:not(.sidebar-tabs) .nav-link:focus{
    background: rgba(145,118,52,.10) !important;
    border-color: rgba(145,118,52,.80) !important;
    color: var(--ark-gold-hover) !important;
}

/* Activo */
.nav-tabs:not(.sidebar-tabs) .nav-link.active,
.nav-tabs:not(.sidebar-tabs) .nav-item.show .nav-link{
    background: var(--ark-gold) !important;
    color: var(--ark-light) !important;
    border-color: var(--ark-gold) !important;

    /* se “funde” con el contenido: no pintamos blanco aquí, solo “transparentamos” */
    border-bottom-color: transparent !important;

    box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

/* Tab disabled */
.nav-tabs:not(.sidebar-tabs) .nav-link.disabled{
    opacity: .55;
}

/* Tab content (solo cuando está justo después de los tabs)
   - NO fuerza fondo blanco, hereda del contenedor
   - mantiene borde/padding y radios */
.nav-tabs:not(.sidebar-tabs) + .tab-content{
    /*border: 1px solid rgba(145,118,52,.18) !important;*/
    border-top: 0 !important;
    background: transparent !important; /* <= cambio clave */
    /*padding: 1rem !important;*/
    border-bottom-left-radius: .45rem;
    border-bottom-right-radius: .45rem;
}