/*
  Modern Components (Gói 03)
  - Styling only: buttons, badges/labels, alerts, panels->cards, tables, pagination, modals.
  - Designed for Bootstrap 3 + SB Admin (keeps existing HTML/PHP logic unchanged).
*/

:root{
  --ui-primary: #2563eb;
  --ui-primary-600: #1d4ed8;
  --ui-success: #16a34a;
  --ui-danger: #dc2626;
  --ui-warning: #d97706;
  --ui-info: #0891b2;
}

/* ---------------------
   Buttons
   --------------------- */
.btn{
  border-radius: 12px;
  padding: 8px 14px;
  font-weight: 600;
  line-height: 1.2;
  transition: transform .04s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn:active{ transform: translateY(1px); }
.btn:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.18);
}
.btn .fa{ margin-right: 6px; opacity: .92; }

.btn-default{
  background: #fff;
  border-color: var(--ui-border);
  color: var(--ui-text);
}
.btn-default:hover, .btn-default:focus{
  background: rgba(17,24,39,.02);
  border-color: var(--ui-border-strong);
  color: var(--ui-text);
}

.btn-primary{
  background: var(--ui-primary);
  border-color: var(--ui-primary);
}
.btn-primary:hover, .btn-primary:focus{
  background: var(--ui-primary-600);
  border-color: var(--ui-primary-600);
}

.btn-success{ background: var(--ui-success); border-color: var(--ui-success); }
.btn-success:hover, .btn-success:focus{ filter: brightness(.95); }

.btn-danger{ background: var(--ui-danger); border-color: var(--ui-danger); }
.btn-danger:hover, .btn-danger:focus{ filter: brightness(.95); }

.btn-warning{ background: var(--ui-warning); border-color: var(--ui-warning); }
.btn-warning:hover, .btn-warning:focus{ filter: brightness(.96); }

.btn-info{ background: var(--ui-info); border-color: var(--ui-info); }
.btn-info:hover, .btn-info:focus{ filter: brightness(.96); }

.btn-link{ border-radius: 10px; }

/* Buttons group spacing (Bootstrap 3 legacy layouts) */
.btn + .btn{ margin-left: 6px; }

/* ---------------------
   Forms
   --------------------- */
.form-control{
  border-radius: 12px; /* override theme-modern's 10px */
}
.input-group .form-control:first-child{
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.input-group .form-control:last-child{
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}
.input-group-addon{
  border-color: var(--ui-border);
  background: rgba(17,24,39,.03);
}
.help-block{ color: var(--ui-muted); }

/* ---------------------
   Panels -> Cards
   --------------------- */
.panel{
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow-sm);
  overflow: hidden;
}
.panel-heading{
  background: rgba(17,24,39,.03);
  border-bottom: 1px solid var(--ui-border);
  padding: 12px 14px;
}

/* Ensure heading text always readable (Bootstrap panels often set white text on colored headings) */
.panel-heading,
.panel-heading a,
.panel-heading .panel-title,
.panel-heading .panel-title a{
  color: var(--ui-text);
  text-shadow: 0 1px 0 rgba(255,255,255,.65), 0 0 1px rgba(0,0,0,.18);
}
.panel-heading a:hover,
.panel-heading a:focus{
  color: var(--ui-text);
  text-decoration: none;
}

.panel-title{
  font-weight: 700;
  letter-spacing: .2px;
}
.panel-body{
  padding: 16px 14px;
}
.panel-footer{
  background: rgba(17,24,39,.02);
  border-top: 1px solid var(--ui-border);
}

/* Keep colored panels readable */
.panel-primary>.panel-heading{ background: rgba(37,99,235,.12); border-bottom-color: rgba(37,99,235,.20); color: var(--ui-text); }
.panel-success>.panel-heading{ background: rgba(22,163,74,.12); border-bottom-color: rgba(22,163,74,.18); color: var(--ui-text); }
.panel-warning>.panel-heading{ background: rgba(217,119,6,.12); border-bottom-color: rgba(217,119,6,.18); color: var(--ui-text); }
.panel-danger>.panel-heading{ background: rgba(220,38,38,.12); border-bottom-color: rgba(220,38,38,.18); color: var(--ui-text); }
.panel-info>.panel-heading{ background: rgba(8,145,178,.12); border-bottom-color: rgba(8,145,178,.18); color: var(--ui-text); }

/* ---------------------
   Tables
   --------------------- */
.table{ background: #fff; }
.table>thead>tr>th{
  background: rgba(17,24,39,.03);
  font-weight: 700;
  padding: 12px 14px;
}
.table>tbody>tr>td{
  padding: 11px 14px;
}
.table-hover>tbody>tr:hover{
  background: rgba(37,99,235,.05);
}
.table-condensed>thead>tr>th,
.table-condensed>tbody>tr>td{
  padding: 7px 10px;
}

/* Wrap provides border + radius */
.table-responsive.table-responsive-modern{
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  overflow: auto;
  margin-bottom: 14px;
  background: #fff;
}
.table-responsive.table-responsive-modern .table{
  margin-bottom: 0;
}
.table-responsive.table-responsive-modern .table>thead>tr>th:first-child{ border-top-left-radius: 14px; }
.table-responsive.table-responsive-modern .table>thead>tr>th:last-child{ border-top-right-radius: 14px; }

/* If tables are already in .table-responsive, still style it */
.table-responsive:not(.table-responsive-modern){
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  overflow: auto;
}
.table-responsive:not(.table-responsive-modern) .table{ margin-bottom: 0; }

/* ---------------------
   Labels / Badges (Bootstrap 3)
   --------------------- */
.label, .badge{
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .2px;
}
.label{
  display: inline-block;
  padding: .38em .68em;
  border: 1px solid transparent;
}
.badge{
  padding: .42em .62em;
}

.label-default{ background: rgba(17,24,39,.06); color: var(--ui-text); border-color: var(--ui-border); }
.label-primary{ background: rgba(37,99,235,.12); color: #1d4ed8; border-color: rgba(37,99,235,.24); }
.label-success{ background: rgba(22,163,74,.12); color: #166534; border-color: rgba(22,163,74,.22); }
.label-info{ background: rgba(8,145,178,.12); color: #155e75; border-color: rgba(8,145,178,.22); }
.label-warning{ background: rgba(217,119,6,.12); color: #92400e; border-color: rgba(217,119,6,.22); }
.label-danger{ background: rgba(220,38,38,.12); color: #991b1b; border-color: rgba(220,38,38,.22); }

.badge{ background: rgba(17,24,39,.10); color: var(--ui-text); }

/* ---------------------
   Alerts / Wells
   --------------------- */
.alert{
  border-radius: 14px;
  border: 1px solid var(--ui-border);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.alert-success{ background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.22); }
.alert-info{ background: rgba(8,145,178,.10); border-color: rgba(8,145,178,.22); }
.alert-warning{ background: rgba(217,119,6,.10); border-color: rgba(217,119,6,.22); }
.alert-danger{ background: rgba(220,38,38,.10); border-color: rgba(220,38,38,.22); }

.well{
  background: rgba(17,24,39,.03);
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  box-shadow: none;
}

/* ---------------------
   Pagination
   --------------------- */
.pagination>li>a, .pagination>li>span{
  border-color: var(--ui-border);
  color: var(--ui-text);
}
.pagination>li>a:hover, .pagination>li>span:hover{
  background: rgba(37,99,235,.06);
  border-color: rgba(37,99,235,.20);
}
.pagination>.active>a, .pagination>.active>span,
.pagination>.active>a:hover, .pagination>.active>span:hover{
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.24);
  color: #1d4ed8;
  font-weight: 800;
}
.pagination>li:first-child>a, .pagination>li:first-child>span{
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.pagination>li:last-child>a, .pagination>li:last-child>span{
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* ---------------------
   Modals
   --------------------- */
.modal-content{
  border-radius: 18px;
  border-color: var(--ui-border);
  box-shadow: var(--ui-shadow-md);
}
.modal-header{
  border-bottom: 1px solid var(--ui-border);
}
.modal-footer{
  border-top: 1px solid var(--ui-border);
}

/* ---------------------
   Misc
   --------------------- */
hr{ border-top: 1px solid var(--ui-border); }
pre{
  border-radius: 14px;
  border-color: var(--ui-border);
  background: rgba(17,24,39,.03);
}
code{ border-radius: 10px; }

/* Better spacing for common SB-Admin rows on small screens */
@media (max-width: 768px){
  .panel-body{ padding: 14px 12px; }
  .btn{ padding: 9px 14px; }
}


/* ---------------------
   Contrast helpers for bright backgrounds
   (make text readable on light/yellow surfaces)
   --------------------- */
.bg-warning, .bg-info, .bg-success{
  color: var(--ui-text) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.70), 0 0 1px rgba(0,0,0,.18);
}
.bg-primary, .bg-danger{
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.alert, .well, .modal-header, .page-header{
  color: var(--ui-text) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.65), 0 0 1px rgba(0,0,0,.18);
}
.alert a, .well a, .modal-header a{ color: inherit !important; }
.label-warning{ color: var(--ui-text) !important; }
.label{ text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.label-warning, .label-default{ text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 0 1px rgba(0,0,0,.15); }