/* ==========================================================================
   OPENSIMKA portal-modern.css
   ==========================================================================
   Version: 1.0.0
   Purpose:  Low-risk visual modernization overlay
   Load:     AFTER portal.css (to override its rules)
   Compat:   Bootstrap 3.4.1 + portal.css (Inspinia-based)
   ==========================================================================
   Strategy:
   - Pure CSS only (no HTML changes needed)
   - Higher specificity where needed (body prefix or !important sparingly)
   - Preserves all Bootstrap 3 layout/structure
   - Preserves all portal.css functionality (metisMenu, ibox collapse, etc.)
   - Only changes: typography, spacing, radius, shadows, hover, tables, forms, buttons
   ========================================================================== */

/* ==========================================================================
   1. TYPOGRAPHY IMPROVEMENTS
   ========================================================================== */

/* Smoother font rendering system-wide */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Slightly larger base for readability */
body,
.form-control,
.dropdown-menu {
    font-size: 13.5px;
}

/* Preserve original OPENSIMKA heading weights (font-weight: 300 by default, 600 for h3-h5).
   Only adjust font sizes and line-height for improved readability. */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
}

h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 15px; }
h5 { font-size: 13px; }
h6 { font-size: 11px; }

/* Better line-height for body text */
p, li, td, th, label, .form-control {
    line-height: 1.55;
}

/* Sidebar labels - slightly less condensed for readability */
.font-osc,
.nav.metismenu {
    letter-spacing: 0.01em;
}


/* ==========================================================================
   2. SPACING IMPROVEMENTS
   ========================================================================== */

/* Content wrapper - more breathing room */
.wrapper-content {
    padding: 20px 5px 50px;
}

/* Add vertical rhythm to ibox content */
.ibox-content {
    padding: 20px 25px;
}

/* ibox titles - more padding for visual weight */
.ibox-title {
    padding: 14px 20px 12px;
    border-bottom: 1px solid #e7eaec;
}

.ibox-title h1,
.ibox-title h2,
.ibox-title h3,
.ibox-title h4,
.ibox-title h5 {
    margin: 0;
}

/* Panel body spacing */
.panel-body {
    padding: 18px 22px;
}

/* Form group spacing */
.form-group {
    margin-bottom: 18px;
}

/* Modal body breathing room */
.modal-body {
    padding: 24px 30px;
}

.inmodal .modal-body {
    padding: 24px 30px;
}

/* Footer spacing */
.footer {
    padding: 14px 25px;
}

/* Navbar top links - touch-friendly padding */
.navbar-top-links li a {
    padding: 14px 12px 13px 14px;
}


/* ==========================================================================
   3. BORDER RADIUS IMPROVEMENTS
   ========================================================================== */

/* Softer, more modern radius values */
.ibox,
.ibox-title,
.ibox-content,
.panel,
.panel-heading,
.panel-body {
    border-radius: 6px;
}

/* ibox content inherits from container */
.ibox-content {
    border-radius: 0 0 6px 6px;
}

.ibox-title {
    border-radius: 6px 6px 0 0;
}

/* Buttons - slightly pill-shaped */
.btn {
    border-radius: 5px;
    padding: 6px 16px;
}

.btn-sm {
    border-radius: 4px;
    padding: 4px 12px;
}

.btn-lg {
    border-radius: 6px;
    padding: 10px 24px;
}

.btn-xs {
    border-radius: 3px;
}

/* Form inputs */
.form-control {
    border-radius: 5px;
}

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

.input-group .form-control:last-child,
.input-group-addon:last-child {
    border-radius: 0 5px 5px 0;
}

.input-group-addon {
    border-radius: 0;
}

input.form-control[readonly] {
    cursor: pointer !important;
    background-color: #fafbfc !important;
    color: #374151 !important;
}

/* Modals */
.modal-content {
    border-radius: 8px;
}

.modal-header {
    border-radius: 8px 8px 0 0;
}

/* Dropdowns */
.dropdown-menu {
    border-radius: 6px;
}

/* Labels and badges */
.label,
.badge {
    border-radius: 4px;
}

/* Alerts */
.alert {
    border-radius: 6px;
}

/* Progress bars */
.progress {
    border-radius: 10px;
}

.progress-bar {
    border-radius: 10px;
}

/* Table override from portal.css inline */
.table-bordered {
    border-radius: 6px;
}


/* ==========================================================================
   4. SHADOW IMPROVEMENTS
   ========================================================================== */

/* ibox panels - subtle layered shadow */
.ibox {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Hover lift effect - optional subtle elevation */
.ibox:hover {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.25s ease;
}

/* Panels - matching shadow */
.panel {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Modal shadow - deeper for overlay feel */
.modal-content {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
}

/* Dropdown shadow */
.dropdown-menu {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

/* Navbar dropdown */
.navbar-top-links .dropdown-menu {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

/* Button hover shadow */
.btn:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
    transition: box-shadow 0.15s ease;
}

.btn:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}


/* ==========================================================================
   5. HOVER & TRANSITION IMPROVEMENTS
   ========================================================================== */

/* Smooth transitions on interactive elements */
a,
.btn,
.nav > li > a,
.form-control,
.dropdown-menu > li > a,
.ibox-tools a,
.pagination > li > a,
.pagination > li > span,
.navbar-top-links li a i {
    transition: all 0.18s ease;
}

/* Sidebar nav items - smoother hover */
.nav > li > a:hover,
.nav > li > a:focus {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Sidebar - soften hover background transition */
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Dropdown items */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: #f5f7fa;
    transition: background-color 0.15s ease;
}

/* Navbar notification items */
.navbar-top-links .dropdown-menu li:hover {
    background-color: #f9fafb;
}

/* ibox collapse transition */
.ibox-content {
    transition: padding 0.2s ease;
}

/* Form control focus - smooth border transition */
.form-control {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Table row hover */
.table-hover > tbody > tr:hover {
    background-color: #f8fafc;
    transition: background-color 0.15s ease;
}


/* ==========================================================================
   6. TABLE APPEARANCE
   ========================================================================== */

/* Cleaner table borders - preserve original header typography and alignment */
.table > thead > tr > th {
    border-bottom: 2px solid #e7eaec;
    padding: 10px 10px;
}

.table > tbody > tr > td {
    padding: 10px 10px;
    border-top: 1px solid #f0f2f5;
    vertical-align: top;
}

/* Bordered tables - softer borders */
.table-bordered {
    border: 1px solid #e7eaec;
}

.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
    background-color: #fafbfc;
    border-bottom: 2px solid #e0e3e8;
}

.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td {
    border: 1px solid #eef0f3;
}

/* Zebra striping - softer */
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fafbfd;
}

/* Responsive table wrapper */
.table-responsive {
    border: none;
}


/* ==========================================================================
   7. FORM APPEARANCE
   ========================================================================== */

/* Softer form control borders, don't change padding */
.form-control {
    border-color: #d1d5db;
    border-width: 1px;
    border-style: solid;
    background-color: #fafbfc;
    /* padding: 7px 13px; */
    color: #374151;
}

.form-control:focus {
    border-color: #1c84c6;
    box-shadow: 0 0 6px rgba(28,132,198,.20);
    background-color: #ffffff;
    outline: 0;
}

/* Disabled state */
.form-control[disabled],
.form-control[readonly] {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
}

/* Placeholder text */
.form-control::-webkit-input-placeholder { color: #9ca3af; opacity: 1; }
.form-control::-moz-placeholder          { color: #9ca3af; opacity: 1; }
.form-control:-ms-input-placeholder      { color: #9ca3af; opacity: 1; }
.form-control::placeholder               { color: #9ca3af; opacity: 1; }

/* Labels */
label,
.control-label {
    font-weight: 600;
    font-size: 13px;
    color: #4b5563;
    margin-bottom: 5px;
}

/* Input group addons */
.input-group-addon {
    background-color: #f9fafb;
    border-color: #d1d5db;
    color: #6b7280;
}

/* textarea */
textarea.form-control {
    line-height: 1.6;
}

/* Select elements */
select.form-control {
    padding: 6px 10px;
}

/* Help text */
.help-block {
    color: #9ca3af;
    font-size: 12px;
    margin-top: 4px;
}


/* ==========================================================================
   8. BUTTON APPEARANCE
   ========================================================================== */

/* Base button refinements - preserve original portal.css button typography */
.btn {
    letter-spacing: 0.01em;
    border-width: 1px;
    border-style: solid;
}

.btn:hover {
    filter: brightness(1.06);
}

.btn:active {
    filter: brightness(0.96);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Primary button - stay with portal.css colors */
.btn-primary {
    box-shadow: 0 1px 3px rgba(26, 179, 148, 0.25);
}

.btn-primary:hover {
    box-shadow: 0 2px 8px rgba(26, 179, 148, 0.30);
}

/* Success button - portal.css maps success to #1c84c6 */
.btn-success {
    box-shadow: 0 1px 3px rgba(28, 132, 198, 0.25);
}

.btn-success:hover {
    box-shadow: 0 2px 8px rgba(28, 132, 198, 0.30);
}

/* Info button */
.btn-info {
    box-shadow: 0 1px 3px rgba(35, 198, 200, 0.25);
}

.btn-info:hover {
    box-shadow: 0 2px 8px rgba(35, 198, 200, 0.30);
}

/* Warning button */
.btn-warning {
    box-shadow: 0 1px 3px rgba(248, 172, 89, 0.25);
}

.btn-warning:hover {
    box-shadow: 0 2px 8px rgba(248, 172, 89, 0.30);
}

/* Danger button */
.btn-danger {
    box-shadow: 0 1px 3px rgba(237, 85, 101, 0.25);
}

.btn-danger:hover {
    box-shadow: 0 2px 8px rgba(237, 85, 101, 0.30);
}

/* Default button */
.btn-default {
    background-color: #ffffff;
    border-color: #d1d5db;
    color: #374151;
}

.btn-default:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
    color: #374151;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Outline buttons */
.btn-outline {
    background: transparent;
    border-width: 1.5px;
}

.btn-primary.btn-outline {
    border-color: #1ab394;
}

.btn-success.btn-outline {
    border-color: #1c84c6;
}

.btn-info.btn-outline {
    border-color: #23c6c8;
}

.btn-warning.btn-outline {
    border-color: #f8ac59;
}

.btn-danger.btn-outline {
    border-color: #ed5565;
}

/* White / light buttons */
.btn-white {
    background-color: #ffffff;
    border-color: #d1d5db;
    color: #374151;
}

.btn-white:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
}

/* Link buttons */
.btn-link {
    color: #1c84c6;
}

/* Disabled state */
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
    opacity: 0.5;
    box-shadow: none;
}


/* ==========================================================================
   10. ALERT REFINEMENTS
   ========================================================================== */

.alert {
    border: none;
    border-left: 4px solid;
    padding: 14px 18px;
}

.alert-success {
    background-color: #f0fdf9;
    border-left-color: #1ab394;
    color: #065f46;
}

.alert-info {
    background-color: #f0f9ff;
    border-left-color: #1db5cd;
    color: #0c4a6e;
}

.alert-warning {
    background-color: #fffbeb;
    border-left-color: #f8ac59;
    color: #78350f;
}

.alert-danger {
    background-color: #fef2f2;
    border-left-color: #ed5565;
    color: #7f1d1d;
}


/* ==========================================================================
   11. NAVIGATION REFINEMENTS
   ========================================================================== */

/* Sidebar profile header - subtle gradient */
.nav-header {
    padding: 22px 25px 22px 7px;
}

/* Second-level nav items - more spacing */
.nav-second-level li a {
    padding: 8px 10px 8px 52px;
}

.nav-third-level li a {
    padding: 7px 10px 7px 62px;
}

/* Active nav item - subtle inner shadow */
.nav > li.active {
    box-shadow: inset 0 0 0 0 transparent;
}

/* Navbar top - softer divider */
.navbar-top-links .dropdown-menu li {
    border-bottom: 1px solid #f0f2f5;
}

.logout {
    background: none;
}

.nav.navbar-right > li > a {
    color: #FFFFFF;
    padding: 14px;
}

.navbar-minimalize {
    padding: 4px 12px;
    background: rgba(255, 255, 255, .15);
    border: none;
    color: #fff;
}

.navbar-minimalize:hover{
    background:rgba(255,255,255,.25);
}

/* ==========================================================================
   12. MODAL REFINEMENTS
   ========================================================================== */

.modal-header {
    padding: 16px 24px 12px;
    border-bottom: 1px solid #f0f2f5;
}

.modal-header .close {
    font-size: 22px;
    opacity: 0.45;
    transition: opacity 0.15s ease;
}

.modal-header .close:hover {
    opacity: 0.7;
}

.modal-footer {
    padding: 14px 24px;
    border-top: 1px solid #f0f2f5;
}

.modal-title {
    font-weight: 600;
    font-size: 17px;
}


/* ==========================================================================
   14. PROGRESS BAR REFINEMENTS
   ========================================================================== */

.progress {
    /* height: 8px; */
    background-color: #f3f4f6;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}


/* ==========================================================================
   15. LIST GROUP REFINEMENTS
   ========================================================================== */

.list-group-item {
    padding: 12px 16px;
    border-color: #f0f2f5;
}

.list-group-item:hover {
    background-color: #f9fafb;
}

a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
    background-color: #1c84c6;
    border-color: #1c84c6;
}


/* ==========================================================================
   16. DROPDOWN REFINEMENTS
   ========================================================================== */

.dropdown-menu > li > a {
    padding: 8px 18px;
    font-size: 13px;
    color: #374151;
}


/* ==========================================================================
   17. SIDEBAR REFINEMENTS
   ========================================================================== */

/* Slightly softer sidebar background */
.navbar-default {
    /* Keep portal.css background, just enhance */
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);
}

/* Mini-navbar second-level menu shadow */
.mini-navbar .nav-second-level {
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.12);
    border-radius: 0 4px 4px 0;
}


/* ==========================================================================
   18. STAT/CARD WIDGETS
   ========================================================================== */

/* Dashboard stat widgets - subtle lift */
.widget {
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.widget:hover {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.25s ease;
}


/* ==========================================================================
   19. RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    .wrapper-content {
        padding: 15px 5px 30px;
    }

    .ibox-content {
        padding: 15px 15px;
    }

    .ibox-title {
        padding: 10px 15px 8px;
    }

    .modal-body {
        padding: 18px 20px;
    }

    .nav-header {
        padding: 16px 15px 16px 7px;
    }
}


/* ==========================================================================
   20. FOCUS VISIBLE (Accessibility)
   ========================================================================== */

/* Better focus indicators for keyboard navigation */
a:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
select:focus-visible {
    outline: 2px solid #1c84c6;
    outline-offset: 2px;
}

/* Remove focus outline for mouse users (keep for keyboard) */
a:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
    outline: none;
}


/* ==========================================================================
   21. DIVIDER/SEPARATOR
   ========================================================================== */

hr {
    border-top-color: #e5e7eb;
    margin: 20px 0;
}

/* Horizontal rule in ibox titles */
.ibox-title hr {
    border-top-color: #d1d5db;
}


/* ==========================================================================
   22. TOOLTIP & POPOVER
   ========================================================================== */

.tooltip-inner {
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 12px;
}

.popover {
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

.popover-title {
    border-radius: 6px 6px 0 0;
    font-weight: 600;
    background-color: #fafbfc;
}


/* ==========================================================================
   23. PRINT STYLES (do not affect screen)
   ========================================================================== */

@media print {
    body {
        background: #ffffff !important;
        color: #000000 !important;
    }

    #wrapper,
    #page-wrapper {
        background: #ffffff !important;
        box-shadow: none !important;
    }
}

/* =====================================================
   DASHBOARD PENGUMUMAN
   ===================================================== */

.ibox-content.blog h2.font-osc{
    line-height:1.35;
    margin-bottom:12px;
}

.ibox-content.blog .small.text-muted{
    color:#7b8794 !important;
    font-size:12px;
    line-height:1.7;
}

.ibox-content.blog p a.font-boldest{
    display:inline-block;
    color:#1c84c6;
    font-weight:600;
    text-decoration:none;
    transition:.18s ease;
}

.ibox-content.blog p a.font-boldest:hover{
    color:#1669a8;
    text-decoration:none;
    transform:translateX(2px);
}

.ibox-content.blog hr.divider{
    border-top:1px solid #edf0f3;
    margin:22px 0;
}

.ibox-title .label{
    border-radius:20px;
    padding:6px 9px;
    box-shadow:0 1px 3px rgba(0,0,0,.08);
    transition:.18s ease;
}

.ibox-title .label:hover{
    transform:translateY(-1px);
}

.view-other-topic{
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:8px;
    padding:12px 15px;
    text-align:center;
    transition:.18s ease;
}

.view-other-topic:hover{
    background:#f1f5f9;
    border-color:#d6dbe1;
}

/* =====================================================
   DASHBOARD EVENT
   ===================================================== */

#dashboard-event ul{
    margin:0;
    padding:0;
}

#dashboard-event .list_event{
    background:#fff8dc;
    border:1px solid #f1e3a2;
    border-radius:8px;
    padding:8px 12px;
    margin-bottom:8px;
    line-height:1.4;
    transition:all .18s ease;
}

#dashboard-event .list_event:hover{
    background:#fffdf2;
    border-color:#e4c66f;
}

#dashboard-event .list_event h3{
    color:#9a5b16 !important;
    margin-bottom:4px !important;
    line-height:1.35 !important;
}

#dashboard-event .post-meta{
    margin-top:4px !important;
}

#dashboard-event .tie-date{
    color:#6b7280 !important;
    font-size:11px !important;
    line-height:1.6;
}

#dashboard-event .list_event .fa-calendar-alt,
#dashboard-event .list_event .fa-clock,
#dashboard-event .list_event .fa-map-marker-alt,
#dashboard-event .list_event .fa-id-card-alt{
    opacity:.75;
}

#dashboard-event > div:first-child{
    border-radius:8px 8px 0 0;
    overflow:hidden;
}

#dashboard-event .list_event:first-child{
    border-radius:0 0 8px 8px;
    overflow:hidden;
}

/* =====================================================
   SELECT2
   ===================================================== */

.select2-container {
    box-sizing: border-box; display: inline-block; margin: 0; position: relative; vertical-align: middle; border-color: #d1d5db; border-width: 1px; border-style: solid;  border-radius: 5px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    background-color: #fafbfc; color: #374151;
}