/* ==========================================================================
   OSTOS GLOBAL / LEGACY STYLESHEET
   File ini mengatur style global lama: font, navbar Bootstrap,
   sidebar legacy, tombol default, pagination, dropdown, login legacy,
   dan loading overlay.

   Catatan:
   - Theme modern utama ada di src/css/smart-pos.css.
   - Untuk ubah warna global lama, cari komentar "TEXT COLOR - Global ...".
   ========================================================================== */

/* GLOBAL FONT - font Titilium lama */
@font-face {
    font-family: 'Titilium';
    src: url('../../lib/fonts/titilliumweb-regular-webfont.eot');
    src: url('../../lib/fonts/titilliumweb-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../lib/fonts/titilliumweb-regular-webfont.woff2') format('woff2'),
         url('../../lib/fonts/titilliumweb-regular-webfont.woff') format('woff'),
         url('../../lib/fonts/titilliumweb-regular-webfont.ttf') format('truetype'),
         url('../../lib/fonts/titilliumweb-regular-webfont.svg#titillium_webregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* GLOBAL BODY - background dan font default legacy */
body {
	font-family: "Titilium", "Raleway", "Segoe UI", "Helvetica", "Arial", sans-serif;
    background-color: #efefef;
}

/* TEXT COLOR - Global link */
a {
    color: #0f9647;
}
/* TEXT COLOR - Global link hover */
a:hover {
    color: #09602d;
}

/* GLOBAL SIDEBAR TOGGLE - icon toggle sidebar legacy */
.toggle.front#sidenav-toggle {
    position: absolute;
    top: 14px;
    left: 14px;
    color: #333333;
    cursor: pointer;
}
.toggle.back#sidenav-toggle {
    position: absolute;
    top: 25px;
    left: 15px;
    color: #333333;
    cursor: pointer;
}
/* TEXT COLOR - Global sidebar toggle hover */
.toggle#sidenav-toggle:hover {
    color: #0f9647;
}
/* GLOBAL SIDEBAR LOGO - logo di sidebar legacy */
img.logo-sidebar {
    width:auto;
    max-width: 180px;
    max-height: 48px;
    object-fit: contain;
    margin-left: 10px;
    margin-right: 5px;
}
i.fa.fa-angle-left, i.fa.fa-bars {
    font-size: 1.5em;
}

/* GLOBAL NAVBAR - Bootstrap navbar legacy */
.navbar-default {
    background-color: #fff;
    border-bottom: 1px solid rgba(0,0,0,.125);
    margin-bottom: 15px;
}
.navbar-brand {
    padding-left: 30px;
}
.navbar {
    border-radius: 0;
}
/* TEXT COLOR - Global navbar brand hover/focus */
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
    color: #0f9647;
}
/* TEXT COLOR - Global navbar brand */
.navbar-default .navbar-brand {
    color: #333;
}
/* TEXT COLOR - Global navbar item hover/focus */
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #0f9647;
}
/* TEXT COLOR - Global navbar item */
.navbar-default .navbar-nav > li > a {
    color: #333;
}
.dropdown-menu.right-text {
    left: -70px;
}
/* TEXT COLOR - Global dropdown item hover */
.dropdown-item:focus, .dropdown-item:hover {
    color: #333;
    background-color: rgba(0,0,0,.05);
}
.dropdown-menu {
    border-radius:none;
}
/* TEXT COLOR - Global nav-link */
a.nav-link {
    color: #333;
}
/* TEXT COLOR - Global nav-link hover */
a.nav-link:hover {
    color: #0f9647;
}

/* GLOBAL CARD PANEL - panel/card legacy */
.card {
    border-radius: 0px;
}
.card-title {
    margin-bottom: 0px;
}
.card.is-icon-box:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 16px 0 rgba(0, 0, 0, 0.20);
}

/* TEXT COLOR - Global popup edit box */
.popup_box {
    position:absolute;
    z-index:10;   
    width:100px;
    height:auto;
    color:#333333;
    background:#ffffff;
    display: none;
}
#edit_btn.btn-block, #delete_btn.btn-block, #reset_btn.btn-block, #view_btn.btn-block {
    margin-top: 0;
}
button.btn-block.btn-popup {
    margin-top: 0;
}

/* TEXT COLOR - Global default button */
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
/* TEXT COLOR - Global form focus border */
.form-control:focus {
    border-color:#0f9647;
    box-shadow:0 0 0 .2rem rgba(15,150,71,0.05);
}
/* TEXT COLOR - Global default button focus */
.btn-default.focus, .btn-default:focus {
    color: #fff;
    background-color:#0f9647;
    border-color:#0f9647;
}
/* TEXT COLOR - Global default button hover */
.btn-default:hover {
    color: #fff;
    background-color:#0f9647;
    border-color:#0f9647;
}
/* TEXT COLOR - Global default button active hover/focus */
.btn-default:active:hover, .btn-default.active:hover, .open > .dropdown-toggle.btn-default:hover, .btn-default:active:focus, .btn-default.active:focus, .open > .dropdown-toggle.btn-default:focus, .btn-default:active.focus, .btn-default.active.focus, .open > .dropdown-toggle.btn-default.focus {
    color: #fff;
    background-color:#09602d;
    border-color:#09602d;
}
/* TEXT COLOR - Global default button active */
.btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
    color: #fff;
    background-color:#09602d;
    border-color:#09602d;
}

/* TEXT COLOR - Global pagination active */
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: #0f9647;
    border-color: #0f9647;
}
/* TEXT COLOR - Global pagination link */
.pagination > li > a, .pagination > li > span {
    color: #0f9647;
}
/* TEXT COLOR - Global pagination hover/focus */
.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
    color: #09602d;
}

/* TEXT COLOR - Global dropdown menu hover/focus */
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    color: #fff;
    background-color: #0f9647;
}

/* GLOBAL JUMBOTRON - section block legacy */
.jumbotron {
    padding: 25px;
    margin-bottom: 15px;
}
.jumbotron p {
    font-size: 16px;
}

/* TEXT COLOR - Global side nav hover/focus */
.nav > li > a:hover, .nav > li > a:focus {
    background-color: transparent;
    color: #0f9647;
}
/* TEXT COLOR - Global side nav link */
.nav > li > a {
    color: #333;
    border-radius: 0;
}

/* GLOBAL OPTIONS / UTILITY CLASSES */
.is-no-padding {
    padding: 0;
}
.is-shadow-bottom {
    box-shadow: 0px 15px 5px -15px #111;
}
.is-shadow-panel {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.is-icon-box {
    margin-bottom: 10px;
}
.is-icon-box-fa {
    min-height: 120px;
}
/* TEXT COLOR - Global utility link */
.is-link {
    color: #333;
}
/* TEXT COLOR - Global utility link hover */
.is-link:hover {
    color: #0f9647;
    text-decoration: none;
}

/* GLOBAL BREADCRUMB - breadcrumb border */
.breadcrumb {
    border: 1px solid #c6c6c6c6;
}

/* GLOBAL TABLE - table cell alignment */
.table > thead > tr > th {
    text-align: center;
    vertical-align: middle;
}
.table > tbody > tr > td {
    vertical-align: middle;
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    padding: 5px;
}

/* GLOBAL SEARCH ICON - clickable modal check icon */
i.fa.button-modal-ceklis {
    cursor: pointer;
}

/* TEXT COLOR - Global DataTables active page */
.page-item.active .page-link {
    color: #ffffff;
    background-color: #0f9647;
    border-color: #dee2e6;
}
/* TEXT COLOR - Global DataTables active page hover */
.page-item.active .page-link:hover {
    color: #fff;
}

/* GLOBAL LOGIN LEGACY - old login card max width */
div.card.login-box{
    max-width: 360px;
}

/* GLOBAL LOGIN PAGE - page background and centering */
.ostos-login-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 78% 12%, rgba(255, 216, 78, .38), transparent 28%),
        linear-gradient(135deg, #eef1f4 0%, #d9dee5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 24px;
    overflow: hidden;
}
/* TEXT COLOR - Global Login card */
.ostos-login-card {
    width: 390px;
    min-height: 430px;
    border-radius: 32px;
    background:
        radial-gradient(circle at 86% 12%, rgba(255, 216, 78, .36), transparent 30%),
        rgba(255, 255, 255, .84);
    border: 1px solid rgba(31,37,41,.08);
    box-shadow: 0 28px 60px rgba(29, 37, 47, .18);
    padding: 38px 32px 28px;
    text-align: center;
    color: #1f2529;
    backdrop-filter: blur(10px);
}
/* GLOBAL LOGIN - alert inside login card */
.ostos-login-card .alert {
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
}
/* TEXT COLOR - Global Login title */
.ostos-login-card h1 {
    margin: 18px 0 2px;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 0;
    color: #1f2529;
}
/* TEXT COLOR - Global Login subtitle */
.ostos-login-card p {
    margin: 0 0 32px;
    font-weight: 700;
    color: #697078;
}
/* TEXT COLOR - Global Login top pill */
.login-top-pill {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(31,37,41,.08);
    color: #1f2529;
    font-weight: 800;
    padding: 10px 18px;
    box-shadow: 0 12px 30px rgba(29,37,47,.08);
}
/* TEXT COLOR - Global Login logo fallback */
.ostos-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    background: #1f2529;
    color: #fff;
    font-size: 22px;
    font-weight: 900;
    font-style: normal;
    letter-spacing: 0;
}
/* TEXT COLOR - Global Login input wrapper */
.login-input {
    height: 48px;
    border-radius: 999px;
    background: #fff;
    display: grid;
    grid-template-columns: 26px 1fr;
    align-items: center;
    gap: 8px;
    padding: 0 17px;
    margin-bottom: 14px;
    color: #8a9299;
    border: 1px solid rgba(31,37,41,.08);
    box-shadow: 0 10px 24px rgba(29,37,47,.04);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
/* TEXT COLOR - Global Login input focus */
.login-input:focus-within {
    border-color: rgba(255,216,78,.9);
    box-shadow: 0 0 0 4px rgba(255,216,78,.18), 0 12px 26px rgba(29,37,47,.06);
    transform: translateY(-1px);
}
/* TEXT COLOR - Global Login input text */
.login-input input {
    border: 0;
    outline: 0;
    font-size: 12px;
    color: #1f2529;
    background: transparent;
}
/* TEXT COLOR - Global Login submit button */
.login-submit {
    width: 100%;
    height: 48px;
    margin-top: 20px;
    border: 0;
    border-radius: 999px;
    background: #ffd84e;
    color: #1f2529;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    box-shadow: 0 16px 34px rgba(255, 216, 78, .28);
    transition: transform .18s ease, box-shadow .18s ease;
}
/* GLOBAL LOGIN - submit hover effect */
.login-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 42px rgba(255, 216, 78, .36);
}
/* TEXT COLOR - Global Login footer text */
.login-web {
    margin-top: 28px;
    font-weight: 700;
    color: #697078;
    font-size: 12px;
}
/* TEXT COLOR - Global Install App button */
.install-button {
    position: fixed;
    right: 16px;
    bottom: 24px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.78);
    color: #1f2529;
    font-weight: 800;
    padding: 12px 18px;
    box-shadow: 0 14px 30px rgba(29,37,47,.08);
    border: 1px solid rgba(31,37,41,.08);
}

/* GLOBAL LOADING BAR - overlay background */
#loading .overlay {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(225,225,225,0.3);
  z-index: 99999;
  float: right;
}
/* GLOBAL LOADING BAR - wrapper */
#loading {
  z-index: 99999;
  display: none;
}
/* TEXT COLOR - Global loader label */
.loader label{ color:black;font-weight: bold; padding: 5px}
/* GLOBAL LOADER - loader box */
.loader {z-index: 999999; background-color: white; padding: 5px 10px 5px 5px; border-radius: 0px 0px 30px 0px; position: fixed; float: left; top: 0px}
.loader img{width: 44px}

/* GLOBAL PROGRESS - progress bar wrapper */
.progress {
    position: relative;
    height: 25px;
}
/* TEXT COLOR - Global progress type label */
.progress > .progress-type {
    position: absolute;
    left: 0px;
    font-weight: 800;
    padding: 3px 30px 2px 10px;
    color: rgb(255, 255, 255);
    background-color: rgba(25, 25, 25, 0.2);
}
/* GLOBAL PROGRESS - completed percentage label */
.progress > .progress-completed {
    position: absolute;
    right: 0px;
    font-weight: 800;
    padding: 3px 10px 2px;
}