/*
 * Klinikku UI theme — lapisan gaya di atas AdminLTE 2 / Bootstrap 3.
 * CSS saja: tidak mengubah markup, JavaScript, atau logika. Dimuat paling akhir di layout main dan login.
 * Hapus satu baris <link> di layouts/main.php dan layouts/login.php untuk kembali ke tampilan lama.
 *
 * Warna merek bisa diganti per klien lewat setting.php:  define('CNF_BRAND_COLOR', '#0f766e');
 */
:root {
	--kk-brand: #0f766e;
	--kk-brand-dark: #0b5a54;
	--kk-brand-soft: rgba(15, 118, 110, .12);
	--kk-sidebar: #0f172a;
	--kk-sidebar-2: #0b1220;
	--kk-sidebar-hover: #1e293b;
	--kk-bg: #f1f5f9;
	--kk-card: #ffffff;
	--kk-border: #e2e8f0;
	--kk-border-soft: #eef2f7;
	--kk-text: #1e293b;
	--kk-muted: #64748b;
	--kk-radius: 10px;
	--kk-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .06);
}

@media screen {

	/* ---------- Dasar ---------- */
	body, h1, h2, h3, h4, h5, h6, .main-header, .sidebar-menu, .box-title {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Source Sans Pro", Roboto, "Helvetica Neue", Arial, sans-serif;
	}
	body { font-size: 14px; color: var(--kk-text); -webkit-font-smoothing: antialiased; }
	a { color: var(--kk-brand); }
	a:hover, a:focus { color: var(--kk-brand-dark); }
	.content-wrapper, .right-side, .main-footer { background-color: var(--kk-bg); }
	.main-footer { border-top: 1px solid var(--kk-border); color: var(--kk-muted); }

	/* ---------- Bilah atas ---------- */
	.skin-blue .main-header .navbar {
		background-color: #fff;
		box-shadow: 0 1px 0 var(--kk-border);
	}
	.skin-blue .main-header .logo,
	.skin-blue .main-header .logo:hover {
		background-color: var(--kk-sidebar);
		color: #fff;
		font-weight: 600;
		letter-spacing: .2px;
		border-bottom: 0;
	}
	.skin-blue .main-header .navbar .sidebar-toggle { color: var(--kk-muted); }
	.skin-blue .main-header .navbar .sidebar-toggle:hover { background: var(--kk-bg); color: var(--kk-text); }
	.skin-blue .main-header .navbar .nav > li > a { color: #334155; }
	.skin-blue .main-header .navbar .nav > li > a:hover,
	.skin-blue .main-header .navbar .nav > li > a:focus,
	.skin-blue .main-header .navbar .nav .open > a,
	.skin-blue .main-header .navbar .nav .open > a:hover,
	.skin-blue .main-header .navbar .nav .open > a:focus {
		background: var(--kk-bg); color: var(--kk-text);
	}
	.main-header .navbar .dropdown-menu, .dropdown-menu {
		border: 1px solid var(--kk-border); border-radius: 8px;
		box-shadow: 0 8px 24px rgba(15, 23, 42, .12); padding: 6px;
	}
	.dropdown-menu > li > a { border-radius: 6px; padding: 8px 12px; }
	.dropdown-menu > li > a:hover { background: var(--kk-bg); color: var(--kk-text); }

	/* ---------- Sidebar ---------- */
	.skin-blue .wrapper, .skin-blue .main-sidebar, .skin-blue .left-side { background-color: var(--kk-sidebar); }
	.skin-blue .user-panel > .info, .skin-blue .user-panel > .info > a { color: #e2e8f0; }
	.skin-blue .sidebar-menu > li.header { color: #64748b; background: var(--kk-sidebar-2); font-size: 11px; letter-spacing: .8px; }
	.skin-blue .sidebar-menu > li > a {
		color: #cbd5e1; border-left: 3px solid transparent; padding: 11px 15px; font-weight: 500;
	}
	.skin-blue .sidebar-menu > li:hover > a,
	.skin-blue .sidebar-menu > li.active > a {
		color: #fff; background: var(--kk-sidebar-hover); border-left-color: #2dd4bf;
	}
	.skin-blue .sidebar-menu > li > .treeview-menu { background: var(--kk-sidebar-2); margin: 0; }
	.skin-blue .treeview-menu > li > a { color: #94a3b8; padding: 8px 5px 8px 15px; }
	.skin-blue .treeview-menu > li.active > a,
	.skin-blue .treeview-menu > li > a:hover { color: #fff; }
	.skin-blue .sidebar a { color: #cbd5e1; }
	.skin-blue .sidebar a:hover { text-decoration: none; }

	/* ---------- Judul halaman ---------- */
	.content-header { padding: 18px 20px 4px; }
	.content-header > h1 { font-size: 22px; font-weight: 600; color: var(--kk-text); }
	.content-header > .breadcrumb { background: transparent; padding: 7px 0; }
	.content-header > .breadcrumb > li > a { color: var(--kk-muted); }
	.content { padding: 16px 20px 24px; }

	/* ---------- Kotak / kartu ---------- */
	.box, .box.box-danger, .box.box-primary, .box.box-info, .box.box-success, .box.box-warning {
		border: 1px solid var(--kk-border);
		border-top: 1px solid var(--kk-border);
		border-radius: var(--kk-radius);
		box-shadow: var(--kk-shadow);
		background: var(--kk-card);
	}
	.box-header { padding: 14px 18px; }
	.box-header.with-border { border-bottom: 1px solid var(--kk-border-soft); }
	.box-header > .box-title, .box-title { font-size: 16px; font-weight: 600; color: var(--kk-text); }
	.box-header .box-tools { top: 10px; right: 14px; }
	.box-body { padding: 12px 14px; }
	.box-footer { border-top: 1px solid var(--kk-border-soft); background: transparent; border-radius: 0 0 var(--kk-radius) var(--kk-radius); }

	/* ---------- Tombol ---------- */
	.btn { border-radius: 8px; font-weight: 500; box-shadow: none; transition: background-color .15s, border-color .15s, box-shadow .15s; }
	.btn-sm, .btn-xs { border-radius: 6px; }
	.btn:focus, .btn:active:focus { outline: 0; box-shadow: 0 0 0 3px var(--kk-brand-soft); }
	.btn-primary, .btn-info, .btn-success {
		background-color: var(--kk-brand); border-color: var(--kk-brand); color: #fff;
	}
	.btn-primary:hover, .btn-primary:focus, .btn-info:hover, .btn-info:focus, .btn-success:hover, .btn-success:focus,
	.btn-primary:active, .btn-info:active, .btn-success:active {
		background-color: var(--kk-brand-dark); border-color: var(--kk-brand-dark); color: #fff;
	}
	.btn-warning { background-color: #f59e0b; border-color: #f59e0b; color: #fff; }
	.btn-warning:hover, .btn-warning:focus { background-color: #d97706; border-color: #d97706; color: #fff; }
	.btn-danger { background-color: #dc2626; border-color: #dc2626; }
	.btn-danger:hover, .btn-danger:focus { background-color: #b91c1c; border-color: #b91c1c; }
	.btn-default { background: #fff; border-color: #cbd5e1; color: #334155; }
	.btn-default:hover, .btn-default:focus { background: var(--kk-bg); border-color: #94a3b8; color: var(--kk-text); }

	/* ---------- Form ---------- */
	label { font-weight: 600; color: #334155; }
	.form-control, .input-sm.form-control, select.form-control {
		border: 1px solid #cbd5e1; border-radius: 8px; box-shadow: none; color: var(--kk-text);
		height: 38px; padding: 6px 12px;
	}
	.input-sm, .form-control.input-sm { height: 36px; padding: 5px 10px; font-size: 14px; border-radius: 8px; }
	textarea.form-control { height: auto; }
	.form-control:focus {
		border-color: var(--kk-brand); box-shadow: 0 0 0 3px var(--kk-brand-soft);
	}
	.form-control[disabled], .form-control[readonly] { background: #f8fafc; }
	.input-group-addon { border-radius: 8px; border-color: #cbd5e1; background: #f8fafc; }
	.select2-container--default .select2-selection--single,
	.select2-container--default .select2-selection--multiple {
		border: 1px solid #cbd5e1; border-radius: 8px; min-height: 38px;
	}
	.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; padding-left: 12px; }
	.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
	.select2-container--default.select2-container--focus .select2-selection--single,
	.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--kk-brand); }
	.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--kk-brand); }
	.has-error .form-control { border-color: #dc2626; }

	/* ---------- Tabel & DataTables ---------- */
	.table > thead > tr > th {
		background: #f8fafc; color: #475569; font-weight: 600; border-bottom: 1px solid var(--kk-border);
		white-space: nowrap;
	}
	.table > thead > tr > th, .table > tbody > tr > td, .table > tfoot > tr > td { vertical-align: middle; }
	/* jarak lega hanya untuk grid data; tabel isian (penjualan, pembelian, dll) tetap sepadat aslinya agar tidak melebar */
	table.dataTable > thead > tr > th, table.dataTable > tbody > tr > td, table.dataTable > tfoot > tr > td { padding: 9px 12px; }
	.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th,
	.table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td { border-color: var(--kk-border-soft); }
	.table-bordered { border-color: var(--kk-border); }
	.table-hover > tbody > tr:hover, table.dataTable tbody tr:hover { background-color: #f8fafc; }
	.table > thead > tr > th.sorting, .table > thead > tr > th.sorting_asc, .table > thead > tr > th.sorting_desc,
	table.dataTable thead > tr > th.sorting, table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc { padding-right: 30px; }
	.table-bordered > thead > tr > th, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td,
	.table-bordered > tbody > tr > th { border-left-width: 0; border-right-width: 0; }
	.table-bordered { border-left: 0; border-right: 0; }
	.dataTables_wrapper .dataTables_filter input,
	.dataTables_wrapper .dataTables_length select { border: 1px solid #cbd5e1; border-radius: 8px; padding: 5px 10px; height: 34px; }
	.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--kk-brand); outline: 0; box-shadow: 0 0 0 3px var(--kk-brand-soft); }
	.dataTables_info { color: var(--kk-muted); padding-top: 14px; }
	.pagination > li > a, .pagination > li > span {
		color: #334155; border: 1px solid var(--kk-border); margin: 0 2px; border-radius: 6px !important; padding: 6px 12px;
	}
	.pagination > li > a:hover { background: var(--kk-bg); color: var(--kk-text); border-color: #cbd5e1; }
	.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus,
	.pagination > .active > span, .pagination > .active > span:hover {
		background-color: var(--kk-brand); border-color: var(--kk-brand); color: #fff;
	}
	.pagination > .disabled > a, .pagination > .disabled > span { color: #94a3b8; background: transparent; }
	.tips i, td a i.fa { transition: transform .1s; }
	td a:hover i.fa { transform: scale(1.15); }

	/* ---------- Kotak info dashboard ---------- */
	.small-box { border-radius: var(--kk-radius); box-shadow: var(--kk-shadow); overflow: hidden; }
	.small-box > .small-box-footer { background: rgba(0, 0, 0, .12); }
	.bg-aqua, .small-box.bg-aqua { background-color: #0e7490 !important; }
	.bg-green, .small-box.bg-green { background-color: #059669 !important; }
	.bg-red, .small-box.bg-red { background-color: #e11d48 !important; }
	.bg-yellow, .small-box.bg-yellow { background-color: #d97706 !important; color: #fff !important; }
	.bg-light-blue, .small-box.bg-light-blue { background-color: #2563eb !important; }

	/* ---------- Lencana, notifikasi, modal ---------- */
	.label, .badge { border-radius: 6px; font-weight: 600; }
	.alert { border-radius: 8px; border-width: 1px; }
	.modal-content { border: 0; border-radius: 12px; box-shadow: 0 20px 50px rgba(15, 23, 42, .25); }
	.modal-header { border-bottom: 1px solid var(--kk-border-soft); }
	.modal-footer { border-top: 1px solid var(--kk-border-soft); }
	.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover { color: var(--kk-brand); border-top: 2px solid var(--kk-brand); }

	/* ---------- Halaman login ---------- */
	body.gray-bg {
		background: radial-gradient(1200px 600px at 10% -10%, rgba(45, 212, 191, .25), transparent 60%),
			linear-gradient(135deg, var(--kk-sidebar) 0%, var(--kk-brand-dark) 100%);
		min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 0;
	}
	body.gray-bg .middle-box {
		position: static; top: auto; left: auto; margin: 0; transform: none;
		width: 92%; max-width: 400px;
	}
	body.gray-bg .sbox {
		background: #fff; border: 0; border-radius: 16px; overflow: hidden;
		box-shadow: 0 20px 50px rgba(2, 6, 23, .35);
	}
	body.gray-bg .sbox-title {
		background: #fff; border: 0; border-bottom: 1px solid var(--kk-border-soft); text-align: center; padding: 20px 20px 14px;
	}
	body.gray-bg .sbox-title, body.gray-bg .sbox-title h3 { text-align: center !important; float: none !important; width: 100%; }
	/* panel "lupa password" (tersembunyi) tidak boleh menyisakan ruang kosong di bawah kartu */
	body.gray-bg .sbox > div[style*="padding:20px"] { padding: 0 !important; }
	body.gray-bg .sbox > div[style*="padding:20px"] > form { padding: 0 28px 24px; margin-top: 0 !important; }
	body.gray-bg .sbox-title h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--kk-text); letter-spacing: .3px; }
	body.gray-bg .sbox-content { background: #fff; padding: 24px 28px 28px !important; }
	body.gray-bg .sbox-content img { margin-bottom: 14px; border-radius: 12px; height: auto; max-width: 110px; }
	body.gray-bg .form-control { height: 42px; }
	body.gray-bg .btn-primary { height: 44px; font-size: 15px; font-weight: 600; border-radius: 10px; }
	body.gray-bg hr { border-top-color: var(--kk-border-soft); }
	body.gray-bg .alert { margin-bottom: 14px; }

	/* ---------- Layar kecil (HP/tablet) ---------- */
	@media (max-width: 767px) {
		.content-header { padding: 12px 12px 2px; }
		.content-header > h1 { font-size: 18px; }
		.content { padding: 10px 15px 18px; } /* 15px: .row Bootstrap bermargin -15px, kurang dari itu membuat halaman meluap */
		.box-header { padding: 12px; }
		.box-body { padding: 10px; }
		.btn { min-height: 38px; }
		.btn-sm, .btn-xs { min-height: 34px; }
		.form-control, .input-sm, .form-control.input-sm { height: 42px; font-size: 16px; } /* 16px mencegah zoom otomatis di iOS */
		.table > thead > tr > th, .table > tbody > tr > td { padding: 8px 8px; }
		.dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length { text-align: left; }
		.dataTables_wrapper .dataTables_filter input { width: 100%; margin-left: 0; display: block; }
		.pagination > li > a, .pagination > li > span { padding: 8px 11px; }
		.main-header .navbar-custom-menu .nav > li > a { padding: 15px 10px; }
		body.gray-bg .sbox-content { padding: 20px 18px 22px !important; }
	}
}

/* Versi aplikasi (footer + login) */
.kk-version { text-align: center; font-size: 11px; color: #9aa3ad; padding: 14px 0 18px; }

/* Versi di dasar menu samping */
.main-sidebar .sidebar { padding-bottom: 44px; }
.kk-version-side { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 8px; background: var(--kk-sidebar-2, #0b1220); color: #64748b; z-index: 5; }
.sidebar-collapse .kk-version-side { display: none; }
@media (max-width: 767px) { .kk-version-side { display: block; } }