/*
 *= 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:#f1f5f9;
  overflow-x:hidden;
}


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

.portal-layout{
  display:block;
}

/* Main content */

.portal-main{
  margin-left:240px;
  width:calc(100% - 240px);
  min-height:100vh;

  padding:30px 40px;
  box-sizing:border-box;
}


/* ===============================
   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;
}