/* ============================================================
   KORA S.A - Custom CSS Styles
   Peruvian Sandals Business Management System
   Based on Gentelella Admin Template (Bootstrap 3)
   ============================================================ */

/* ==================== CSS CUSTOM PROPERTIES ==================== */
:root {
    --kora-primary: #1ABB9C;
    --kora-primary-dark: #17a589;
    --kora-primary-light: rgba(26, 187, 156, 0.1);
    --kora-danger: #E74C3C;
    --kora-danger-dark: #c0392b;
    --kora-warning: #F39C12;
    --kora-warning-dark: #d4960e;
    --kora-success: #26B99A;
    --kora-success-dark: #1e9d82;
    --kora-info: #3498DB;
    --kora-info-dark: #2980b9;
    --kora-sidebar-bg: #2A3F54;
    --kora-sidebar-hover: #34495E;
    --kora-sidebar-text: #A0B0C0;
    --kora-topbar-bg: #EDEDED;
    --kora-body-bg: #F7F7F7;
    --kora-badge-active: #27AE60;
    --kora-badge-inactive: #E74C3C;
    --kora-border-color: #E6E9ED;
    --kora-text-primary: #333333;
    --kora-text-secondary: #555555;
    --kora-text-muted: #999999;
    --kora-panel-bg: #FFFFFF;
    --kora-input-border: #D5D5D5;
}

/* ==================== BODY & GENERAL ==================== */
body {
    font-family: 'Nunito', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--kora-body-bg);
    color: var(--kora-text-primary);
    font-size: 13px;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a {
    color: var(--kora-primary);
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: var(--kora-primary-dark);
}

/* ==================== SIDEBAR ==================== */
.nav-md .container.body .col-md-3.left_col {
    background: var(--kora-sidebar-bg);
    min-height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 1000;
    overflow-y: auto;
    width: 230px;
    transition: width 0.3s ease;
}

/* Custom sidebar scrollbar */
.nav-md .container.body .col-md-3.left_col {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
}

.nav-md .container.body .col-md-3.left_col::-webkit-scrollbar {
    width: 6px;
}

.nav-md .container.body .col-md-3.left_col::-webkit-scrollbar-track {
    background: transparent;
}

.nav-md .container.body .col-md-3.left_col::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.12);
    border-radius: 10px;
}

.nav-md .container.body .col-md-3.left_col::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255,255,255,0.2);
}

/* Sidebar logo / site title — keep only the KORA color accent.
   Gentelella's defaults (.site_title { display:block; font-size:22px;
   line-height:59px; height:55px; padding-left:10px } + .site_title i
   { border:1px solid #EAEAEA; padding:5px 6px; border-radius:50% })
   produce the same look as the FLDI reference: a circular-bordered
   icon next to the brand text. KORA previously used display:flex
   which broke this layout. */
.site_title {
    text-decoration: none;
    transition: all 0.3s ease;
}

.site_title i {
    color: var(--kora-primary);
}

.site_title span {
    color: #ECF0F1;
}

/* Sidebar section headers */
.menu_section h3 {
    color: #7f929e;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding-left: 20px;
    margin-top: 15px;
    margin-bottom: 5px;
    font-weight: 700;
}

/* ============================================================
   SIDEBAR MENU ITEMS — matches FLDI / gentelella reference
   ============================================================
   The FLDI reference project does NOT override the sidebar menu
   item styles — it uses the gentelella defaults from
   build/css/custom.css:
     .nav.side-menu>li>a  { color:#E7E7E7; font-weight:500; margin-bottom:6px }
     .main_menu .fa       { width:26px; font-size:18px; display:inline-block }
   KORA previously added display:flex + justify-content:space-between
   which pushed the icon to the far left and the chevron to the far
   right, creating a huge gap between icon and text. We now keep ONLY
   the KORA accent (left border on hover/active) and let every other
   property fall back to the gentelella default so the sidebar looks
   identical to the FLDI screenshot.
   ============================================================ */

/* Expanded-state menu link — accent border + larger text/icons.
   Fixes #1-3: text +2pt (15px vs body 13px), icons a bit bigger
   (20px vs gentelella 18px), chevron kept tight after the text
   (not pushed to the far right). */
.nav-md .nav.side-menu > li > a {
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
    font-size: 15px;          /* Fix #1: +2pt over 13px body default */
    font-weight: 500;
    color: #E7E7E7;
}

.nav-md .nav.side-menu > li > a:hover {
    background: var(--kora-sidebar-hover);
    color: #fff !important;
    border-left-color: var(--kora-primary);
}

.nav-md .nav.side-menu > li.active > a {
    background: var(--kora-sidebar-hover);
    color: #fff;
    border-left-color: var(--kora-primary);
}

/* Fix #2: sidebar module icons a bit bigger (20px vs gentelella 18px). */
.nav-md .main_menu .fa {
    font-size: 20px !important;
}

/* Fix #3: keep the chevron arrow tight right after the module text —
   gentelella's default display:inline-block on .fa already does this,
   but we reinforce it so no flex/space-between can push it away. */
.nav-md .nav.side-menu > li > a .fa-chevron-down {
    font-size: 14px;
    margin-left: 4px;
    opacity: 0.7;
}

/* Fix #1 (cont.): child-menu (submodule) text also +2pt. */
.nav-md .nav.child_menu > li > a {
    font-size: 14px;
}

.nav-md .nav.child_menu > li > a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    border-left-color: var(--kora-primary);
}

.nav-md .nav.child_menu > li.current-page > a {
    color: var(--kora-primary);
    font-weight: 600;
    background: rgba(26, 187, 156, 0.08);
    border-left-color: var(--kora-primary);
}

/* Sidebar profile section */
.profile.clearfix {
    display: flex !important;
    align-items: center;
    padding: 10px 15px;
    gap: 12px;
}

.profile_pic {
    width: auto !important;
    float: none !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
}

.profile_pic .img-circle.profile_img {
    width: 45px !important;
    height: 45px;
    margin: 0 !important;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 0 !important;
    background: #fff;
}

.profile_info {
    width: auto !important;
    float: none !important;
    padding: 0;
    text-align: left;
    flex: 1;
    min-width: 0;
}

.profile_info h2 {
    color: #ECF0F1;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile_info span {
    font-size: 12px;
    color: #7f929e;
}

/* ============================================================
   FIX: Sidebar icons + collapsed (nav-sm) state
   ============================================================
   Two problems are fixed here:

   1. ICON FONT-FAMILY CONFLICT
      Gentelella's build/css/custom.css (~line 1850) forces
      `font-family: FontAwesome` (the FA4 family name) on every
      `.main_menu .fa` element. But the project loads Font
      Awesome 5 from CDN, whose @font-face family is
      'Font Awesome 5 Free' — NOT 'FontAwesome'. The result:
      every sidebar menu icon renders as an empty tofu box.
      We override the family back to the FA5 name so the
      webfont glyphs resolve correctly.

   2. COLLAPSED SIDEBAR LAYOUT
      KORA's flex layout on `.nav.side-menu > li > a` (scoped
      to .nav-md above) must NOT apply in the collapsed state.
      Gentelella's nav-sm rules center the icon and shrink the
      text — we reinforce those here and hide the profile block
      (which KORA forces to display:flex !important in both
      states, overriding gentelella's display:none).
   ============================================================ */

/* --- Fix 1: sidebar icon font-family --- */
.main_menu .fa,
.nav.side-menu > li > a i,
.nav.child_menu li a i,
.nav_menu .fa,
.nav_title .fa {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900;
}

/* --- Fix 2: collapsed sidebar width + full height ---
   The sidebar must reach the TOP of the page and extend to the END
   when the user navigates (full viewport height). Gentelella's
   default sets position:absolute on .nav-sm which breaks this —
   we override with position:fixed + height:100% + top:0 + left:0
   so the collapsed sidebar behaves like the expanded one.
   Fix V8: increased width from 70px to 85px so the icons + tiny
   labels fit more comfortably. */
.nav-sm .container.body .col-md-3.left_col {
    width: 85px;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    min-height: 100vh !important;
    z-index: 1000 !important;
    overflow-y: auto;
    overflow-x: visible;
}
.nav-sm .right_col {
    margin-left: 85px;
}

/* Fix: top navbar must move LEFT when the sidebar collapses, so it
   fills the space next to the 85px collapsed sidebar. The base .top_nav
   rule sets left:230px (expanded width) — we override to left:85px. */
.nav-sm .top_nav,
.nav-sm .main_container .top_nav {
    left: 85px !important;
    margin-left: 0 !important;
}

/* Collapsed menu items: center the icon, shrink text.
   Fix #4: match FLDI collapsed look — icon-only with tiny label.
   Use !important to override the nav-md font-size:15px rule above. */
.nav-sm .nav.side-menu li a {
    display: block !important;
    text-align: center !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    padding: 10px 5px !important;
}
.nav-sm .nav.side-menu li a i:first-child {
    width: 100% !important;
    margin-right: 0 !important;
    font-size: 25px !important;
    text-align: center;
    display: block;
    margin-bottom: 5px;
}
.nav-sm .nav.side-menu li a .fa-chevron-down {
    display: none !important;
}

/* Hide section headers, site-title text and profile in collapsed state.
   KORA's .profile.clearfix { display:flex !important } would override
   gentelella's .nav-sm .profile { display:none }, so we re-hide with
   !important here. */
.nav-sm .menu_section h3,
.nav-sm .navbar.nav_title a span,
.nav-sm .profile {
    display: none !important;
}
.nav-sm .navbar.nav_title a i {
    font-size: 27px;
    margin: 13px 0 0 3px;
}

/* Collapsed child-menu: flyout on hover (gentelella pattern).
   Fix: increase submodule (child-menu flyout) text by +2pt → 12px
   (was inheriting the 10px module-label size). */
.nav-sm ul.nav.child_menu {
    position: absolute;
    left: 100%;
    top: 0;
    width: 210px;
    z-index: 4000;
    background: #3E5367;
    display: none;
}
.nav-sm ul.nav.child_menu li a {
    font-size: 12px;          /* +2pt over the 10px module label */
    padding: 8px 15px;
    color: #E7E7E7;
    text-align: left !important;
}
.nav-sm ul.nav.child_menu li a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
.nav-sm .nav.side-menu li:hover > ul.nav.child_menu {
    display: block;
}

/* Fix V8: keep the flyout visible when the user CLICKS a module icon
   (toggles the .active class via base.html inline JS). Without this
   rule, the flyout only shows on hover and disappears when the mouse
   moves away — making it impossible to click the submodule links. */
.nav-sm .nav.side-menu li.active > ul.nav.child_menu {
    display: block !important;
}

/* ==================== TOP NAVIGATION ==================== */
.top_nav,
.main_container .top_nav {
    background: var(--kora-topbar-bg);
    border-bottom: 1px solid #D5D5D5;
    height: 57px;
    margin-left: 0;
    position: fixed;
    top: 0;
    right: 0;
    left: 230px;
    z-index: 999;
    transition: left 0.3s ease;
}

.nav_menu nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 15px;
    height: 57px;
}

.nav.toggle {
    padding: 10px 15px;
}

.nav.toggle a {
    color: #5a6a7a;
    font-size: 20px;
    cursor: pointer;
}

.nav.toggle a:hover {
    color: var(--kora-primary);
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    font-size: 13px;
    background: transparent;
    list-style: none;
}

.breadcrumb > li + li:before {
    content: "/\00a0";
    padding: 0 5px;
    color: #ccc;
}

.breadcrumb > li a {
    color: #5a6a7a;
    text-decoration: none;
}

.breadcrumb > li a:hover {
    color: var(--kora-primary);
}

.breadcrumb > li.active {
    color: var(--kora-text-primary);
    font-weight: 600;
}

/* Right side profile dropdown */
.navbar-right .user-profile {
    display: flex;
    align-items: center;
    color: #5a6a7a;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 12px;
    transition: color 0.2s ease;
}

.navbar-right .user-profile:hover {
    color: var(--kora-primary);
}

.navbar-right .user-profile img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 8px;
    border: 1px solid #ddd;
}

.dropdown-usermenu li a {
    font-size: 13px;
    padding: 8px 20px;
}

.dropdown-usermenu li a i {
    margin-left: 8px;
}

/* Notification bell */
.info-number {
    position: relative;
    padding: 10px 15px;
    color: #5a6a7a;
    font-size: 16px;
}

.info-number:hover {
    color: var(--kora-primary);
}

.info-number .badge {
    position: absolute;
    top: 5px;
    right: 8px;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 10px;
}

/* ==================== CONTENT AREA ==================== */
.right_col {
    background: var(--kora-body-bg);
    padding: 10px 20px;
    min-height: calc(100vh - 57px);
    margin-left: 230px;
    margin-top: 57px;
    transition: margin-left 0.3s ease;
}

.page-title {
    margin-bottom: 20px;
}

.page-title h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--kora-text-primary);
    margin: 0 0 5px 0;
}

.page-title .title_right {
    margin-top: 5px;
}

/* ==================== PANEL SYSTEM (Gentelella x_panel) ==================== */
.x_panel {
    border: 1px solid var(--kora-border-color);
    border-radius: 4px;
    margin-bottom: 20px;
    background: var(--kora-panel-bg);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.x_title {
    border-bottom: 2px solid var(--kora-border-color);
    padding: 10px 15px;
    margin: 0;
    background: var(--kora-panel-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.x_title h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--kora-text-primary);
    display: inline-block;
}

.x_title .nav.navbar-right {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.x_content {
    padding: 15px;
}

.x_content .row {
    margin-left: -10px;
    margin-right: -10px;
}

/* ==================== DATA TABLES ==================== */
.table.dataTable {
    border-collapse: collapse !important;
}

table.dataTable thead th {
    background: #f5f6fa;
    color: var(--kora-text-primary);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--kora-border-color) !important;
    padding: 10px 12px !important;
}

table.dataTable tbody td {
    padding: 8px 12px !important;
    font-size: 13px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

table.dataTable tbody tr:hover {
    background-color: #f9f9fc;
}

table.dataTable tbody tr.odd {
    background-color: #fff;
}

table.dataTable tbody tr.even {
    background-color: #fafbfd;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    font-size: 12px;
    padding: 10px 0;
    color: #777;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--kora-input-border);
    border-radius: 3px;
    padding: 5px 10px;
    font-size: 12px;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--kora-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(26, 187, 156, 0.15);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #555 !important;
    border-radius: 3px;
    margin: 0 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--kora-primary) !important;
    color: #fff !important;
    border: 1px solid var(--kora-primary-dark) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--kora-primary-dark) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #eee !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
}

/* DataTable action column */
table.dataTable td .btn-group {
    white-space: nowrap;
}

/* DT Buttons */
.dt-buttons .btn {
    margin-right: 5px;
    margin-bottom: 5px;
    font-size: 12px;
}

/* ==================== FORM STYLING ==================== */
.form-group label {
    font-weight: 600;
    color: var(--kora-text-secondary);
    margin-bottom: 5px;
    font-size: 13px;
}

.form-control {
    border: 1px solid var(--kora-input-border);
    border-radius: 4px;
    font-size: 13px;
    padding: 8px 12px;
    color: var(--kora-text-primary);
    height: 36px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus {
    border-color: var(--kora-primary);
    box-shadow: 0 0 0 2px rgba(26, 187, 156, 0.15);
    outline: none;
}

.form-control[readonly] {
    background-color: #f5f5f5;
    cursor: default;
}

textarea.form-control {
    height: auto;
    min-height: 80px;
}

select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 35px;
}

.input-group .input-group-addon {
    background: #f5f5f5;
    border: 1px solid var(--kora-input-border);
    color: #777;
    min-width: 40px;
}

.input-group .form-control:first-child {
    border-radius: 4px 0 0 4px;
}

.input-group .input-group-addon:last-child {
    border-radius: 0 4px 4px 0;
}

/* Horizontal forms */
.form-horizontal .control-label {
    padding-top: 8px;
    font-weight: 600;
}

.form-horizontal .form-group {
    margin-bottom: 15px;
}

/* Validation states */
.has-error .form-control {
    border-color: var(--kora-danger);
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.15);
}

.has-error .control-label,
.has-error .help-block {
    color: var(--kora-danger);
}

.has-success .form-control {
    border-color: var(--kora-success);
    box-shadow: 0 0 0 2px rgba(38, 185, 154, 0.15);
}

.has-warning .form-control {
    border-color: var(--kora-warning);
    box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.15);
}

/* Required field indicator */
.form-group.required label::after {
    content: " *";
    color: var(--kora-danger);
}

/* ==================== BUTTONS ==================== */
.btn {
    border-radius: 4px;
    font-size: 13px;
    padding: 7px 16px;
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

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

.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}

.btn-xs {
    padding: 2px 8px;
    font-size: 11px;
}

.btn-lg {
    padding: 10px 24px;
    font-size: 15px;
}

/* KORA Primary button */
.btn-primary,
.btn-kora {
    background-color: var(--kora-primary);
    border-color: var(--kora-primary-dark);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-kora:hover,
.btn-kora:focus,
.btn-kora:active {
    background-color: var(--kora-primary-dark);
    border-color: var(--kora-primary-dark);
    color: #fff;
}

.btn-danger {
    background-color: var(--kora-danger);
    border-color: var(--kora-danger-dark);
    color: #fff;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: var(--kora-danger-dark);
    border-color: var(--kora-danger-dark);
    color: #fff;
}

.btn-warning {
    background-color: var(--kora-warning);
    border-color: var(--kora-warning-dark);
    color: #fff;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: var(--kora-warning-dark);
    border-color: var(--kora-warning-dark);
    color: #fff;
}

.btn-success {
    background-color: var(--kora-success);
    border-color: var(--kora-success-dark);
    color: #fff;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--kora-success-dark);
    border-color: var(--kora-success-dark);
    color: #fff;
}

.btn-info {
    background-color: var(--kora-info);
    border-color: var(--kora-info-dark);
    color: #fff;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: var(--kora-info-dark);
    border-color: var(--kora-info-dark);
    color: #fff;
}

/* Operation buttons (view, edit, delete) */
.btn-operation {
    margin: 0 3px !important;
    border-radius: 3px;
    float: none !important;
    display: inline-block;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-group .btn-operation {
    margin: 0 3px !important;
    float: none !important;
}

.btn-operation.view {
    color: var(--kora-info);
    background: transparent;
    border: 1px solid var(--kora-info);
}

.btn-operation.view:hover {
    background: var(--kora-info);
    color: #fff;
}

.btn-operation.edit {
    color: var(--kora-warning-dark);
    background: transparent;
    border: 1px solid var(--kora-warning);
}

.btn-operation.edit:hover {
    background: var(--kora-warning);
    color: #fff;
}

.btn-operation.delete {
    color: var(--kora-danger);
    background: transparent;
    border: 1px solid var(--kora-danger);
}

.btn-operation.delete:hover {
    background: var(--kora-danger);
    color: #fff;
}

/* ==================== TABS ==================== */
.nav.nav-tabs {
    border-bottom: 2px solid var(--kora-border-color);
    margin-bottom: 15px;
}

.nav.nav-tabs > li > a {
    color: var(--kora-text-secondary);
    font-weight: 600;
    font-size: 13px;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    padding: 10px 18px;
    transition: all 0.2s ease;
}

.nav.nav-tabs > li > a:hover {
    color: var(--kora-primary);
    background: var(--kora-primary-light);
    border-color: transparent;
}

.nav.nav-tabs > li.active > a,
.nav.nav-tabs > li.active > a:hover,
.nav.nav-tabs > li.active > a:focus {
    color: var(--kora-primary);
    background: #fff;
    border: 1px solid var(--kora-border-color);
    border-bottom-color: transparent;
    font-weight: 700;
}

/* ==================== MODALS ==================== */
.modal-header {
    background: var(--kora-sidebar-bg);
    color: #ECF0F1;
    border-radius: 4px 4px 0 0;
    padding: 15px 20px;
}

.modal-header .close {
    color: #ECF0F1;
    opacity: 0.7;
    text-shadow: none;
    font-size: 22px;
}

.modal-header .close:hover {
    opacity: 1;
    color: #fff;
}

.modal-header .modal-title {
    font-size: 16px;
    font-weight: 700;
}

.modal-header .modal-title i {
    margin-right: 8px;
}

.modal-body {
    padding: 20px;
}

.modal-body .form-group {
    margin-bottom: 12px;
}

.modal-body label {
    font-weight: 600;
    color: var(--kora-text-secondary);
}

.modal-footer {
    border-top: 1px solid var(--kora-border-color);
    padding: 12px 20px;
}

.modal-content {
    border-radius: 4px;
    border: none;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
}

.modal-backdrop.in {
    opacity: 0.5;
}

/* Custom modal sizes */
.modal-lg .modal-dialog {
    width: 900px;
}

.modal-xl .modal-dialog {
    width: 1100px;
}

@media (max-width: 991px) {
    .modal-lg .modal-dialog,
    .modal-xl .modal-dialog {
        width: auto;
        margin: 10px;
    }
}

/* Modal header color variants */
.modal-header.header-success {
    background: var(--kora-success);
}

.modal-header.header-warning {
    background: var(--kora-warning);
}

.modal-header.header-danger {
    background: var(--kora-danger);
}

.modal-header.header-info {
    background: var(--kora-info);
}

.modal-header.header-primary {
    background: var(--kora-primary);
}

/* Modal table hover / selection */
.modal .table.table-striped.table-bordered tbody tr:hover {
    background-color: #e8f5e9;
}

.modal .table.table-striped.table-bordered tbody tr.selected-row {
    background-color: #c8e6c9 !important;
}

/* ==================== STATUS BADGES ==================== */
.badge-activo,
.badge-success {
    background-color: var(--kora-badge-active);
    color: #fff;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
    display: inline-block;
}

.badge-inactivo,
.badge-danger {
    background-color: var(--kora-badge-inactive);
    color: #fff;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
    display: inline-block;
}

.badge-warning {
    background-color: var(--kora-warning);
    color: #fff;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
    display: inline-block;
}

.badge-info {
    background-color: var(--kora-info);
    color: #fff;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
    display: inline-block;
}

/* ==================== STOCK STATUS INDICATORS ==================== */
.stock-ok {
    color: var(--kora-success);
    font-weight: 700;
}

.stock-low {
    color: var(--kora-warning);
    font-weight: 700;
}

.stock-critical {
    color: var(--kora-danger);
    font-weight: 700;
}

.stock-out {
    color: var(--kora-danger);
    font-weight: 700;
    text-decoration: line-through;
}

.stock-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
}

.stock-indicator.ok { background-color: var(--kora-success); }
.stock-indicator.low { background-color: var(--kora-warning); }
.stock-indicator.critical { background-color: var(--kora-danger); }
.stock-indicator.out { background-color: #999; }

/* ==================== TOAST NOTIFICATIONS ==================== */
.toast-container {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 9999;
}

.toast-notification {
    min-width: 320px;
    max-width: 450px;
    padding: 15px 20px;
    border-radius: 4px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    animation: toastSlideIn 0.3s ease;
}

.toast-notification.success { background-color: var(--kora-success); }
.toast-notification.error { background-color: var(--kora-danger); }
.toast-notification.warning { background-color: var(--kora-warning); }
.toast-notification.info { background-color: var(--kora-info); }

.toast-notification i {
    margin-right: 12px;
    font-size: 18px;
    flex-shrink: 0;
}

.toast-notification span {
    flex: 1;
}

.toast-notification .toast-close {
    margin-left: 12px;
    cursor: pointer;
    opacity: 0.7;
    font-size: 14px;
    flex-shrink: 0;
}

.toast-notification .toast-close:hover {
    opacity: 1;
}

@keyframes toastSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toastSlideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ==================== DASHBOARD TILES / METRIC CARDS ==================== */
.tile_stats_count {
    margin-bottom: 20px;
    padding: 0;
}

.tile-stats {
    background: #fff;
    border-radius: 4px;
    padding: 20px 15px;
    border: 1px solid var(--kora-border-color);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tile-stats:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.tile-stats .count {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--kora-text-primary);
}

.tile-stats .count_top {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--kora-text-muted);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.tile-stats i {
    font-size: 36px;
    opacity: 0.6;
}

.tile-stats.green i,
.tile-stats.kora-primary i { color: var(--kora-primary); }
.tile-stats.blue i { color: var(--kora-info); }
.tile-stats.red i { color: var(--kora-danger); }
.tile-stats.yellow i,
.tile-stats.orange i { color: var(--kora-warning); }

.tile-stats .percent {
    font-size: 12px;
    color: var(--kora-text-muted);
}

.tile-stats .percent span {
    font-weight: 700;
}

.tile-stats .percent span.green { color: var(--kora-primary); }
.tile-stats .percent span.red { color: var(--kora-danger); }

/* Dashboard tile icon position */
.tile-stats .icon-right {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.15;
    font-size: 50px;
}

/* ==================== ALERTS ==================== */
.alert {
    border-radius: 4px;
    border: none;
    padding: 12px 18px;
    font-size: 13px;
}

.alert-success {
    background-color: rgba(38, 185, 154, 0.1);
    color: var(--kora-success-dark);
    border-left: 3px solid var(--kora-success);
}

.alert-danger {
    background-color: rgba(231, 76, 60, 0.1);
    color: var(--kora-danger-dark);
    border-left: 3px solid var(--kora-danger);
}

.alert-warning {
    background-color: rgba(243, 156, 18, 0.1);
    color: var(--kora-warning-dark);
    border-left: 3px solid var(--kora-warning);
}

.alert-info {
    background-color: rgba(52, 152, 219, 0.1);
    color: var(--kora-info-dark);
    border-left: 3px solid var(--kora-info);
}

/* ==================== NAVIGATION TILES (index page) ==================== */
.nav-tile {
    display: block;
    padding: 15px 20px;
    margin-bottom: 3px;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.2s ease;
    text-decoration: none;
    border-radius: 4px;
}

.nav-tile:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #fff;
    text-decoration: none;
    transform: translateX(3px);
}

.nav-tile i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

/* ==================== DUAL LISTBOX ==================== */
.dual-listbox .list-group {
    min-height: 300px;
    max-height: 400px;
    overflow-y: auto;
}

.dual-listbox .list-group-item {
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
}

.dual-listbox .list-group-item:hover {
    background-color: #f5f6fa;
}

.dual-listbox .btn-group-vertical {
    margin: 0 15px;
}

/* ==================== WELL / DESCRIPTION BOXES ==================== */
.well.kora-well {
    background: #f9f9fc;
    border: 1px solid var(--kora-border-color);
    border-radius: 4px;
    padding: 15px 20px;
    font-size: 13px;
    color: #666;
}

/* NOTE: Login page styles are defined inline in templates/login.html
   (the standalone login page). The old .login_page / .login_box rules
   were removed to avoid conflicts with the current login template structure
   (.login-page-bg / .login-card). */

/* ==================== CUSTOM SCROLLBAR ==================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}

/* ==================== TOOLTIP ==================== */
.tooltip-inner {
    background: var(--kora-sidebar-bg);
    border-radius: 4px;
    font-size: 12px;
    padding: 6px 12px;
}

.tooltip.top .tooltip-arrow {
    border-top-color: var(--kora-sidebar-bg);
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: var(--kora-sidebar-bg);
}

.tooltip.left .tooltip-arrow {
    border-left-color: var(--kora-sidebar-bg);
}

.tooltip.right .tooltip-arrow {
    border-right-color: var(--kora-sidebar-bg);
}

/* ==================== LOADING OVERLAY ==================== */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-overlay .spinner {
    font-size: 30px;
    color: var(--kora-primary);
}

/* ==================== FIELD CARGAR BUTTON PATTERN ==================== */
.field-cargar-group .form-control[readonly] {
    background-color: #f9f9f9;
    cursor: default;
}

.field-cargar-group .btn-cargar {
    margin-top: 0;
    vertical-align: middle;
}

/* ==================== FOOTER ==================== */
footer {
    background: #fff;
    padding: 10px 20px;
    border-top: 1px solid var(--kora-border-color);
    font-size: 12px;
    color: var(--kora-text-muted);
}

/* ==================== UTILITY CLASSES ==================== */
.text-kora { color: var(--kora-primary); }
.text-kora-dark { color: var(--kora-primary-dark); }
.bg-kora { background-color: var(--kora-primary) !important; }
.border-kora { border-color: var(--kora-primary); }

.text-danger-kora { color: var(--kora-danger); }
.bg-danger-kora { background-color: var(--kora-danger); }

.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.pt-10 { padding-top: 10px; }
.pb-10 { padding-bottom: 10px; }
.p-15 { padding: 15px; }

.text-bold { font-weight: 700; }
.text-semi-bold { font-weight: 600; }
.text-muted-kora { color: var(--kora-text-muted); }

.no-wrap { white-space: nowrap; }
.text-mono { font-family: 'Courier New', monospace; }

/* Currency formatting */
.currency { font-weight: 700; color: var(--kora-text-primary); }
.currency-positive { color: var(--kora-success); }
.currency-negative { color: var(--kora-danger); }

/* ==================== RESPONSIVE ADJUSTMENTS ==================== */
@media (max-width: 991px) {
    .nav-md .container.body .col-md-3.left_col {
        min-height: 100%;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1050;
    }

    .nav-md .container.body .col-md-3.left_col.show {
        transform: translateX(0);
    }

    .right_col {
        padding: 10px;
        margin-left: 0 !important;
    }

    .top_nav {
        left: 0;
        margin-left: 0;
    }

    .tile_stats_count .tile-stats .count {
        font-size: 22px;
    }

    .page-title h1 {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .right_col {
        padding: 8px;
    }

    .x_content {
        padding: 10px;
    }

    .x_title {
        padding: 8px 10px;
        flex-wrap: wrap;
    }

    .x_title h2 {
        font-size: 14px;
    }

    .toast-container {
        right: 10px;
        left: 10px;
    }

    .toast-notification {
        min-width: auto;
    }

    .modal-body {
        padding: 15px;
    }
}

/* ==================== PRINT STYLES ==================== */
@media print {
    .nav-md .container.body .col-md-3.left_col,
    .top_nav,
    .breadcrumb,
    .btn,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_paginate,
    .DTTT_container,
    .dt-buttons,
    .toast-container,
    .nav.toggle,
    footer {
        display: none !important;
    }

    .right_col {
        padding: 0 !important;
        margin: 0 !important;
        margin-left: 0 !important;
    }

    .x_panel {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
        margin-bottom: 10px !important;
    }

    .x_title {
        border-bottom: 1px solid #ddd !important;
        background: #fff !important;
    }

    table.dataTable {
        font-size: 11px !important;
    }

    table.dataTable thead th {
        background: #f5f5f5 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body {
        background: #fff !important;
    }

    a[href]:after {
        content: none !important;
    }

    .badge-activo,
    .badge-inactivo,
    .badge-success,
    .badge-danger,
    .badge-warning,
    .badge-info {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ==================== CHART CONTAINERS ==================== */
.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

.chart-container-sm {
    position: relative;
    height: 200px;
    width: 100%;
}

.chart-container-lg {
    position: relative;
    height: 400px;
    width: 100%;
}

/* ==================== PRODUCT CARD (for inventory views) ==================== */
.product-card {
    border: 1px solid var(--kora-border-color);
    border-radius: 4px;
    padding: 15px;
    background: #fff;
    transition: all 0.2s ease;
}

.product-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.product-card .product-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 10px;
    background: #f5f5f5;
}

.product-card .product-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--kora-text-primary);
    margin-bottom: 5px;
}

.product-card .product-sku {
    font-size: 12px;
    color: var(--kora-text-muted);
    font-family: monospace;
}

.product-card .product-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--kora-primary);
    margin-top: 8px;
}

/* ==================== ITEMPRO / SUNAT INTEGRATION STYLES ==================== */
.sunat-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
}

.sunat-badge.boleta { background: #3498DB; color: #fff; }
.sunat-badge.factura { background: #1ABB9C; color: #fff; }
.sunat-badge.guia { background: #F39C12; color: #fff; }
.sunat-badge.nota-credito { background: #E74C3C; color: #fff; }
.sunat-badge.nota-debito { background: #9B59B6; color: #fff; }

/* ==================== SWITCHERY OVERRIDE ==================== */
.switchery {
    border: 2px solid var(--kora-primary);
    box-shadow: none;
}

.switchery > small {
    background: #fff;
}

/* ==================== BOOTSTRAP DATEPICKER OVERRIDE ==================== */
.datepicker {
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
    background-color: var(--kora-primary) !important;
    border-color: var(--kora-primary-dark) !important;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover {
    background-color: var(--kora-warning) !important;
}

/* ==================== BOOTSTRAP SELECT OVERRIDE ==================== */
.bootstrap-select .dropdown-menu > li > a {
    font-size: 13px;
    padding: 6px 20px;
}

.bootstrap-select .dropdown-menu > li.selected > a {
    background-color: var(--kora-primary);
    color: #fff;
}

.bootstrap-select .btn {
    border: 1px solid var(--kora-input-border);
    border-radius: 4px;
}

/* ==================== ICHECK OVERRIDE ==================== */
.icheckbox_flat-green,
.iradio_flat-green {
    background-image: none;
}

.icheckbox_flat-green.checked {
    background-color: var(--kora-primary);
    border-color: var(--kora-primary);
}

/* ==================== NPROGRESS OVERRIDE ==================== */
#nprogress .bar {
    background: var(--kora-primary);
}

#nprogress .peg {
    box-shadow: 0 0 10px var(--kora-primary), 0 0 5px var(--kora-primary);
}

#nprogress .spinner-icon {
    border-top-color: var(--kora-primary);
    border-left-color: var(--kora-primary);
}