/*
 *= require base/reset
 *= require base/variables
 *= require base/typography
 *= require layout/sidebar
 *= require layout/portal_layout
 *= require components/cards
 *= require components/forms
 *= require components/buttons
 *= require components/tables
 *= require components/kpi
 *= require components/badges
*/

/* ===============================
BASE
=============================== */

@import "base/reset.css";
@import "base/variables.css";
@import "base/typography.css";


/* ===============================
LAYOUT
=============================== */

/* @import "layout/portal_layout.css"; */
/* @import "layout/sidebar.css"; */


/* ===============================
COMPONENTS
=============================== */

@import "components/buttons.css";
@import "components/cards.css";
@import "components/forms.css";
@import "components/tables.css";
@import "components/badges.css";
@import "components/kpi.css";


/* ===============================
AUTH
=============================== */

@import "auth/login.css";
@import "auth/register.css";


/* ===============================
PAGES
=============================== */

@import "pages/dashboard.css";
@import "pages/suppliers.css";
@import "pages/esg_questions.css";
@import "pages/supplier_profile.css";


/* Global */

body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,
  "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  background:var(--bg);
  overflow-x:hidden;
}


/* ===============================
   Portal Layout
================================ */

.portal-layout{
  display:block;
}

/* Main content */

.portal-main{
  margin-left:250px;
  min-height:100vh;

  padding:30px 40px;
  box-sizing:border-box;
  transition:margin-left 0.28s ease;
}

.portal-layout.sidebar-collapsed .portal-main{
  margin-left:64px;
}

/* #10 / S2: give all native <select> dropdowns a consistent platform look
   (border, radius, padding, font, teal focus). Native arrow kept so no styled
   select loses its caret; class-styled selects still override these. */
.portal-body select {
  font-family: inherit;
  font-size: 13px;
  color: var(--text, #0f172a);
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.portal-body select:focus {
  outline: none;
  border-color: var(--primary, #0f766e);
  box-shadow: 0 0 0 3px rgba(15,118,110,0.12);
}


/* ===============================
   Auth Pages (login)
================================ */

.auth-container{
  max-width:420px;
  margin:100px auto;
  padding:30px;
}


/* ===============================
   Flash Messages
================================ */

.flash-message {
  position: fixed;
  top: 20px;
  right: 20px;

  min-width: 320px;
  max-width: 420px;

  padding: 14px 16px;

  border-radius: 10px;

  font-weight: 500;

  box-shadow: 0 10px 25px rgba(0,0,0,0.15);

  z-index: 9999;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.flash-message.notice {
  background: #e0f2fe;
  color: #0369a1;
}

.flash-message.alert {
  background: #fee2e2;
  color: #991b1b;
}

.flash-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: inherit;
}


/* ===============================
   Tables
================================ */

.data-table.highlight{
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
}

.data-table thead{
  background:#f1f5f9;
}

.data-table th{
  padding:14px;
  font-size:13px;
  text-transform:uppercase;
  color:#475569;
}

.data-table td{
  padding:14px;
}

.esg-card{
  border:1px solid #e5e7eb;
  transition:all .2s ease;
}

.error-text{
  margin-top:6px;
  font-size:13px;
  color:#dc2626;
}

.esg-card.has-error{
  border:2px solid #ef4444 !important;
  background:#fef2f2;
}


/* ===============================
   Page Header
================================ */

.page-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:24px;
  flex-wrap:wrap;
  gap:12px;
}

.page-header-left h1,
.page-header-left h2,
.page-header > div > h1,
.page-header > div > h2{
  margin:0;
  font-size:26px;
  font-weight:700;
  color:var(--text);
}

.page-header-left .page-subtitle,
.page-header .page-subtitle,
.page-header .subtitle{
  margin-top:6px;
  font-size:14px;
  color:var(--text-muted);
}

.page-header-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}


/* ===============================
   Inline-style Utilities
================================ */

.text-primary{ color:var(--primary); }

a.btn-link-primary{
  background:var(--primary-gradient);
  color:white;
  padding:9px 16px;
  border-radius:8px;
  text-decoration:none;
  font-size:13px;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:opacity .2s, box-shadow .2s;
}

a.btn-link-primary:hover{
  opacity:.9;
  box-shadow:0 4px 12px rgba(15,118,110,.30);
  color:white;
}

a.btn-link-secondary{
  background:white;
  color:var(--text);
  border:1px solid var(--border);
  padding:8px 14px;
  border-radius:8px;
  text-decoration:none;
  font-size:13px;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:background .2s, border-color .2s;
}

a.btn-link-secondary:hover{
  background:var(--bg);
  border-color:var(--border-strong);
  color:var(--text);
}