/* ==================================================
   UI.CSS
   - Global Base
   - Components
   - No layout-specific header/footer rules
================================================== */


/* ==================================================
   1. RESET & GLOBAL BASE
================================================== */

*{box-sizing:border-box}

html, body { height: 100%; }

html { overflow-y: scroll; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
}

button, input, select, textarea {
  font-family: var(--font-sans);
}


/* ==================================================
   2. LAYOUT HELPERS (Global Structure)
================================================== */

.page-root{
  min-height:100%;
  display:flex;
  flex-direction:column;
}

.page-body{
  flex:1 0 auto;
}


/* ==================================================
   3. TYPOGRAPHY & LINKS
================================================== */

a{
  color:var(--brand);
  text-decoration:none
}

a:hover{
  text-decoration:underline
}


/* ==================================================
   4. FORM CONTROLS
================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea{
  width:100%;
  padding:var(--pad-md) 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--text);
  font-size:15px;
}

textarea{
  resize:vertical;
}

/* readonly */
input[readonly],
textarea[readonly],
select[readonly]{
  background: #f9fafb;
  color: var(--text-main);
  border-color: var(--line);
  cursor: default;
}

input[readonly]:focus,
textarea[readonly]:focus,
select[readonly]:focus{
  outline: none;
  box-shadow: none;
  border-color: var(--line);
}

/* disabled */
input:disabled,
textarea:disabled,
select:disabled{
  background: #f1f4f8;
  color: var(--text-muted);
  border-color: var(--line-soft);
  cursor: not-allowed;
}


/* ==================================================
   5. BUTTONS
================================================== */

.btn{
  font-family: var(--font-sans);
  display:inline-block;
  padding:var(--pad-md) 18px;
  border-radius:10px;
  font-weight:700;
  border:1px solid var(--line);
  background:var(--brand);
  color:#fff;
  transition:background .15s ease, transform .06s ease, box-shadow .15s ease;
}

.btn:hover{
  background:var(--brand-hover);
}

.btn:active{
  transform:translateY(1px);
}

.btn.emoji {
  font-family: var(--font-sans), 'Apple Color Emoji', 'Segoe UI Emoji';
}

.btn.ghost{
  background:#fff;
  color:var(--text);
  border:1px solid var(--line);
}

.btn.outline{
  background:transparent;
  color:var(--brand);
  border:2px solid var(--brand);
}

.btn.round{
  border-radius:999px;
}

/* state variations */

.btn.success {
  background: var(--success);
  border-color: var(--success);
}

.btn.success:hover {
  background: #045c35;
}

.btn.warning {
  background: var(--warning);
  border-color: var(--warning);
  color:#fff;
}

.btn.warning:hover {
  background: #d97706;
}

.btn.danger {
  background: var(--error);
  border-color: var(--error);
  color: #fff;
}

.btn.danger:hover {
  background: #8f1b13;
}

/* hero variants */

.btn.ghost.on-dark{
  background:transparent;
  color:#fff;
  border:2px solid #fff;
}

.btn.ghost.on-dark:hover{
  background:#fff;
  color:var(--brand);
}

.btn.primary-hero{
  background:#fff;
  color:var(--brand);
  border:2px solid #fff;
}

.btn.primary-hero:hover{
  background:var(--brand);
  color:#fff;
}

/* anchor button alignment */

a.btn {
  display: inline-block;
  text-align: center;
  padding: var(--pad-md) 18px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  vertical-align: middle;
  transition: background .15s ease, transform .06s ease, box-shadow .15s ease;
}

a.btn:hover {
  background: var(--brand-hover);
}

a.btn.ghost {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
}

a.btn.ghost:hover {
  background: var(--brand-light);
  color: var(--brand-dark);
}

button[disabled],
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background: #ccc !important;
  color: #666 !important;
  border-color: #ccc !important;
  pointer-events: none;
}


/* ==================================================
   6. SURFACES & COMPONENTS
================================================== */

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
}

.card .body{
  padding:var(--pad-lg);
}

.dashboard-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
}

.alert{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
}

.alert.success{
  border-color:rgba(6,118,71,.25);
  background:rgba(6,118,71,.06);
}

.alert.error{
  border-color:rgba(180,35,24,.25);
  background:rgba(180,35,24,.06);
}

.header-brand{
  background:var(--brand);
}

.hero-grad{
  background:linear-gradient(135deg, var(--brand-light) 0%, var(--brand-mid) 45%, var(--brand) 100%);
  color:#fff;
  border-radius:16px;
  box-shadow:var(--shadow-md);
}


/* ==================================================
   7. UTILITIES
================================================== */

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}