/* Apple-like System Font Stack */
body,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

body {
    font-size: 16px;
    /* Larger base size */
    background-color: #F5F5F7;
    /* Apple light gray background */
    color: #1D1D1F;
    /* Soft black */
}

/* --- AdminLTE Overrides for Flat Design --- */

/* Header */
.skin-black .main-header .logo {
    background-color: #FFFFFF;
    color: #1D1D1F;
    border-bottom: 1px solid #D2D2D7;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.skin-black .main-header .logo:hover {
    background-color: #FFFFFF;
}

.skin-black .main-header .navbar {
    background-color: #FFFFFF;
    /* Flat white, no gradient */
    border-bottom: 1px solid #D2D2D7;
}

/* Sidebar */
.skin-black .main-sidebar {
    background-color: #FFFFFF;
    /* Light sidebar for cleaner look? Or keep dark? User said "Professional". */
    /* Often "Pro" dashboards are dark sidebar. But Apple apps often have light sidebars (Finder, Mail). */
    /* Let's stick to a very deep, clean Slate or keep the light theme if 'skin-black' allows. */
    /* skin-black default is: White header, Dark sidebar. */
    /* Let's make sidebar slightly softer dark. */
    background-color: #2C2C2E;
}

.skin-black .sidebar-menu>li>a {
    border-left: none;
    color: #A1A1A6;
    font-weight: 500;
    font-size: 15px;
    padding: 12px 15px;
}

.skin-black .sidebar-menu>li.active>a,
.skin-black .sidebar-menu>li:hover>a {
    color: #FFFFFF;
    background-color: #3A3A3C;
    border-left: 4px solid #007AFF;
    /* Apple Blue */
}

.skin-black .sidebar-menu>li>.treeview-menu {
    background-color: #3A3A3C;
}

/* Content Wrapper */
.content-wrapper,
.right-side {
    background-color: #F5F5F7;
}

/* --- Box/Card Styling - "Apple Card" Look --- */
.box {
    border-radius: 12px !important;
    /* iOS rounded corners */
    background: #FFFFFF;
    border: none;
    /* Remove default borders */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    /* Very soft diffuse shadow */
    margin-bottom: 30px;
    margin-bottom: 30px;
    overflow: visible;
    /* Clip header/body to radius */
}

.box-header {
    padding: 20px 20px 10px 20px;
    border-bottom: none;
    /* Cleaner without lines */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.box-header .box-title {
    font-size: 20px;
    font-weight: 700;
    color: #1D1D1F;
    letter-spacing: -0.5px;
}

.box-body {
    padding: 20px;
}

.box-body:last-child {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.box-footer {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Primary Box Status Bar - minimalistic */
.box.box-primary {
    border-top: none;
    /* Remove the colored bar for a cleaner look */
    /* Or keep a subtle indicator? Let's remove for true "Apple" cleanliness and use the title for hierarchy. */
}

/* Value Box Custom Classes (retained for mod_homeplots) */
.vb-value {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -1px;
}

.vb-subtitle {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.8;
}

/* Buttons */
.btn-primary {
    background-color: #007AFF;
    /* Apple System Blue */
    border-color: #007AFF;
    border-radius: 8px;
    font-weight: 600;
    color: #FFFFFF !important;
    /* Force white text */
}

.btn-primary:hover {
    background-color: #0062CC;
}

/* --- Search Tab Header Fixes --- */
.skin-black .box.box-solid.box-navy>.box-header {
    background-color: #001F3F !important;
    /* Ensure Navy background */
    color: #FFFFFF !important;
}

.skin-black .box.box-solid.box-navy>.box-header .box-title {
    color: #FFFFFF !important;
}

/* DataTables modernization */
.dataTables_wrapper .dataTables_filter input {
    border-radius: 8px;
    border: 1px solid #D2D2D7;
    padding: 8px 12px;
}

table.dataTable thead th {
    background-color: #F5F5F7;
    color: #86868B;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #D2D2D7;
}

/* Global Table Rounding */
.table,
table.dataTable {
    border-radius: 12px !important;
    /* Match box radius */
    border-collapse: separate !important;
    /* Required for border-radius */
    border-spacing: 0;
    overflow: hidden;
    /* Clip inner content */
    border: 1px solid #D2D2D7;
    /* Define shape */
    margin-bottom: 0 !important;
    /* Fix spacing */
}

/* Round Top Corners */
.table thead tr:first-child th:first-child,
table.dataTable thead tr:first-child th:first-child {
    border-top-left-radius: 12px;
}

.table thead tr:first-child th:last-child,
table.dataTable thead tr:first-child th:last-child {
    border-top-right-radius: 12px;
}

/* Round Bottom Corners */
.table tbody tr:last-child td:first-child,
table.dataTable tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

.table tbody tr:last-child td:last-child,
table.dataTable tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

/* Ensure no double borders */
.table th,
.table td,
table.dataTable th,
table.dataTable td {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #E5E5EA !important;
}

.table tbody tr:last-child td,
table.dataTable tbody tr:last-child td {
    border-bottom: none !important;
}

/* Equal Height Row Utility */
.row-equal-height {
    display: flex;
    flex-wrap: wrap;
}

.row-equal-height>[class*='col-'] {
    display: flex;
    flex-direction: column;
}

.row-equal-height>[class*='col-']>.box {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.row-equal-height>[class*='col-']>.box .box-body {
    flex: 1;
    /* Ensure body fills space */
}

/* Static Species Grid */
.species-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    /* Consistent gap */
    justify-content: flex-start;
}

.species-card {
    flex: 0 0 140px;
    /* Fixed width: 140px. Don't grow, don't shrink. */
    height: 140px;
    /* Fixed height to be square-ish */
    background-color: #FFFFFF;
    /* Fallback */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    /* Subtle shadow inside the box */
    color: white;
    /* Text color usually white for colored cards */
    transition: transform 0.2s;
}

.species-card:hover {
    transform: translateY(-2px);
}

.species-card .count {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

.species-card .name {
    font-size: 14px;
    font-weight: 500;
    margin-top: 5px;
    opacity: 0.95;
    line-height: 1.2;
}

/* --- File Input Rounding to match Buttons --- */
.input-group .input-group-btn:first-child>.btn {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

.input-group .form-control:last-child {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* --- Large File Input to match btn-lg --- */
.input-group-btn:first-child>.btn {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
}

.input-group .form-control:last-child {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
}

/* --- Rounding for Picker Inputs (Select) --- */
.bootstrap-select>.dropdown-toggle {
    border-radius: 8px !important;
    border: 1px solid #D2D2D7 !important;
}

/* --- Vertical Tab Styling (ShinyWidgets Overrides) for Filter Module/Confidence --- */
/* Target the container wrapper I added */
.phelix-vertical-tabs .nav-pills,
.phelix-vertical-tabs .nav-stacked {
    /* Reset any default spacing */
    padding-right: 15px;
}

/* Style the List Items (Tabs) */
.phelix-vertical-tabs .nav-pills>li,
.phelix-vertical-tabs .nav-stacked>li {
    float: none !important;
    margin-bottom: 8px !important;
    /* Space between rows */
    background: transparent !important;
    border: none !important;
}

/* Style the Links (Anchors) inside Tabs */
.phelix-vertical-tabs .nav-pills>li>a,
.phelix-vertical-tabs .nav-stacked>li>a {
    color: #86868b !important;
    /* Apple Text Grey */
    background-color: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    /* Smooth corners */
    font-weight: 500 !important;
    padding: 10px 15px !important;
    text-align: left !important;
    font-size: 15px !important;
    transition: all 0.2s ease;
    display: flex !important;
    align-items: center;
}

/* Remove the "Arrow" / Triangle pseudo-elements that shinyWidgets might add */
.phelix-vertical-tabs .nav-pills>li>a::after,
.phelix-vertical-tabs .nav-pills>li>a::before,
.phelix-vertical-tabs .nav-stacked>li>a::after,
.phelix-vertical-tabs .nav-stacked>li>a::before {
    content: none !important;
    display: none !important;
    border: none !important;
}

/* Hover State */
.phelix-vertical-tabs .nav-pills>li>a:hover,
.phelix-vertical-tabs .nav-stacked>li>a:hover {
    background-color: rgba(0, 122, 255, 0.08) !important;
    color: #007AFF !important;
}

/* Active State - The "Selected" styling */
.phelix-vertical-tabs .nav-pills>li.active>a,
.phelix-vertical-tabs .nav-pills>li.active>a:focus,
.phelix-vertical-tabs .nav-pills>li.active>a:hover,
.phelix-vertical-tabs .nav-stacked>li.active>a,
.phelix-vertical-tabs .nav-stacked>li.active>a:focus,
.phelix-vertical-tabs .nav-stacked>li.active>a:hover {
    background-color: #E5F1FF !important;
    /* Light Blue Background */
    color: #007AFF !important;
    /* Blue Text */
    font-weight: 600 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Fix Icons position */
.phelix-vertical-tabs .glyphicon,
.phelix-vertical-tabs .fa {
    margin-right: 12px;
    font-size: 16px;
    width: 20px;
    text-align: center;
}

/* Ensure content area is clean */
.phelix-vertical-tabs .tab-content {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding-left: 20px !important;
}

/* Fix for large cards overflowing */
.tab-content {
    overflow-x: hidden;
    width: 100%;
}