/* =========================================================
ALBUKHR TRANSPARENCY V4
Premium Transparency Hub
========================================================= */

/* =========================================================
GLOBAL
========================================================= */

*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

margin:0;

font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

background:#f4f7f6;

color:#111;

padding-bottom:120px;

-webkit-tap-highlight-color:transparent;

}

/* =========================================================
PAGE SHELL
========================================================= */

.page-shell{

width:100%;

max-width:920px;

margin:0 auto;

min-height:100vh;

}

/* =========================================================
HEADER
========================================================= */

.header{

background:
    linear-gradient(
        135deg,
        #0b6833,
        #0f7a3d,
        #15944b
    );

height:60px;

padding:0 16px;

display:flex;

align-items:center;

justify-content:space-between;

box-shadow:
    0 4px 16px rgba(0,0,0,.08);

position:relative;

z-index:20;

}

.header-left,
.header-right{

display:flex;

align-items:center;

gap:10px;

}

.brand{

color:#fff;

font-weight:800;

font-size:18px;

letter-spacing:.6px;

}

.header-btn{

width:40px;

height:40px;

border-radius:12px;

display:flex;

align-items:center;

justify-content:center;

position:relative;

cursor:pointer;

color:#fff;

background:
    rgba(255,255,255,.12);

transition:.25s ease;

}

.header-btn:hover{

background:
    rgba(255,255,255,.20);

transform:translateY(-1px);

}

/* =========================================================
NOTIFICATION BADGE
========================================================= */

.notification-badge{

position:absolute;

top:6px;

right:6px;

min-width:7px;

height:7px;

border-radius:50%;

background:#ff3b30;

display:none;

}

.notification-badge.show{

display:block;

}

/* =========================================================
TOP NAV
========================================================= */

.top-nav{

display:flex;

gap:10px;

padding:14px 16px;

background:#f4f7f6;

}

.nav-btn{

flex:1;

min-height:44px;

padding:11px 12px;

border-radius:12px;

font-size:13px;

font-weight:700;

cursor:pointer;

border:none;

transition:

    transform .2s ease,

    background .2s ease,

    box-shadow .2s ease;

display:flex;

align-items:center;

justify-content:center;

gap:8px;

-webkit-tap-highlight-color:transparent;

}

.nav-btn:active{

transform:scale(.97);

}

.nav-btn.active{

background:
    linear-gradient(
        135deg,
        #0f7a3d,
        #18a558
    );

color:#fff;

box-shadow:
    0 6px 16px rgba(15,122,61,.22);

}

.nav-btn.ghost{

background:#fff;

color:#0f7a3d;

border:1px solid #dfeee7;

}

/* =========================================================
CONTENT
========================================================= */

.content{

padding:0 16px 20px;

}

/* =========================================================
HERO
========================================================= */

.hero-card{

position:relative;

overflow:hidden;

background:#fff;

border-radius:22px;

padding:20px;

margin-bottom:18px;

box-shadow:
    0 10px 28px rgba(0,0,0,.06);

border:1px solid rgba(15,122,61,.06);

}

.hero-card::after{

content:"";

position:absolute;

width:150px;

height:150px;

right:-70px;

top:-70px;

border-radius:50%;

background:
    rgba(15,122,61,.06);

pointer-events:none;

}

.hero-title{

position:relative;

z-index:1;

font-size:19px;

font-weight:800;

color:#0f7a3d;

margin-bottom:9px;

}

.hero-sub{

position:relative;

z-index:1;

font-size:13px;

line-height:1.65;

color:#5f6c65;

}

/* =========================================================
FILTER BAR
========================================================= */

.filter-bar{

display:grid;

grid-template-columns:
    1fr
    1fr
    1fr
    auto;

gap:10px;

margin:16px 0 20px;

}

.filter-input,
.filter-select{

width:100%;

min-height:44px;

box-sizing:border-box;

padding:11px 12px;

border-radius:13px;

border:1px solid #dde5e1;

background:#fff;

font-size:13px;

outline:none;

color:#222;

transition:

    border-color .2s ease,

    box-shadow .2s ease;

}

.filter-input::placeholder{

color:#929b96;

}

.filter-input:focus,
.filter-select:focus{

border-color:#0f7a3d;

box-shadow:
    0 0 0 3px rgba(15,122,61,.10);

}

.filter-btn{

min-height:44px;

padding:11px 16px;

border:none;

border-radius:13px;

background:
    linear-gradient(
        135deg,
        #0f7a3d,
        #18a558
    );

color:#fff;

font-weight:700;

cursor:pointer;

white-space:nowrap;

transition:.2s ease;

box-shadow:
    0 5px 14px rgba(15,122,61,.18);

}

.filter-btn:hover{

transform:translateY(-1px);

box-shadow:
    0 8px 18px rgba(15,122,61,.24);

}

.filter-btn:active{

transform:scale(.97);

}

/* =========================================================
SECTION TITLE
========================================================= */

.section-title{

font-size:16px;

font-weight:800;

color:#0f7a3d;

margin:18px 0 12px;

}

/* =========================================================
TIMELINE FEED
========================================================= */

.timeline-feed{

display:flex;

flex-direction:column;

gap:14px;

}

/* =========================================================
TIMELINE CARD
========================================================= */

.timeline-card{

background:#fff;

border-radius:20px;

padding:15px;

box-shadow:
    0 8px 24px rgba(0,0,0,.055);

border:1px solid #edf1ef;

overflow:hidden;

transition:

    transform .25s ease,

    box-shadow .25s ease;

}

.timeline-card:hover{

transform:translateY(-2px);

box-shadow:
    0 14px 30px rgba(0,0,0,.08);

}

/* =========================================================
TIMELINE HEADER
========================================================= */

.timeline-header{

display:flex;

justify-content:space-between;

gap:12px;

align-items:flex-start;

margin-bottom:10px;

}

.timeline-left{

min-width:0;

flex:1;

}

.timeline-project{

font-weight:800;

font-size:15px;

color:#111;

line-height:1.4;

word-break:break-word;

}

.timeline-meta{

margin-top:5px;

display:flex;

flex-wrap:wrap;

gap:7px;

align-items:center;

font-size:12px;

color:#6a7771;

}

/* =========================================================
PROJECT TYPE BADGES
========================================================= */

.timeline-type{

display:inline-flex;

align-items:center;

justify-content:center;

padding:5px 10px;

border-radius:999px;

font-size:10px;

font-weight:800;

white-space:nowrap;

letter-spacing:.25px;

}

.core-badge{

background:#e8f5ee;

color:#0f7a3d;

}

.internal-badge{

background:#eef4ff;

color:#1f5bd8;

}

.external-badge{

background:#fff4e9;

color:#b25a00;

}

/* =========================================================
UPDATE TITLE
========================================================= */

.timeline-title{

margin-top:11px;

font-size:15px;

font-weight:800;

color:#111;

line-height:1.5;

}

/* =========================================================
IMAGE
========================================================= */

.image-wrapper{

height:220px;

overflow:hidden;

border-radius:16px;

margin-top:13px;

background:#f3f5f4;

position:relative;

}

.timeline-image{

width:100%;

height:100%;

object-fit:cover;

cursor:pointer;

transition:
    transform .35s ease;

display:block;

}

.timeline-image:hover{

transform:scale(1.025);

}

/* =========================================================
DESCRIPTION
========================================================= */

.timeline-desc{

font-size:13px;

margin-top:12px;

color:#444;

line-height:1.65;

word-break:break-word;

white-space:pre-wrap;

}

.timeline-desc.collapsed{

display:-webkit-box;

-webkit-line-clamp:3;

-webkit-box-orient:vertical;

overflow:hidden;

}

.timeline-desc.expanded{

display:block;

overflow:visible;

}

/* =========================================================
READ MORE
========================================================= */

.read-more{

color:#0f7a3d;

font-size:12px;

font-weight:700;

margin-top:7px;

cursor:pointer;

display:inline-block;

}

.read-more:hover{

text-decoration:underline;

}

/* =========================================================
TIMELINE ACTIONS
========================================================= */

.timeline-actions{

display:flex;

flex-wrap:wrap;

gap:8px;

margin-top:14px;

}

.timeline-actions button{

border:none;

background:#f4f7f6;

padding:9px 12px;

border-radius:11px;

cursor:pointer;

font-size:12px;

font-weight:700;

display:flex;

align-items:center;

gap:6px;

transition:.2s ease;

color:#26312c;

}

.timeline-actions button:hover{

background:#e9f7ef;

}

.timeline-actions button:active{

transform:scale(.96);

}

.timeline-actions button.active{

background:#0f7a3d;

color:#fff;

}

/* =========================================================
COMMENTS
========================================================= */

.comment-box{

display:flex;

gap:8px;

margin-top:12px;

}

.comment-box input{

flex:1;

min-width:0;

min-height:42px;

padding:10px 12px;

border-radius:11px;

border:1px solid #dfe5e2;

font-size:13px;

background:#fff;

outline:none;

}

.comment-box input:focus{

border-color:#0f7a3d;

box-shadow:
    0 0 0 3px rgba(15,122,61,.08);

}

.comment-box button{

background:#0f7a3d;

color:#fff;

border:none;

padding:0 14px;

min-height:42px;

border-radius:11px;

font-size:12px;

font-weight:700;

cursor:pointer;

white-space:nowrap;

}

/* =========================================================
COMMENT LIST
========================================================= */

.comment-list{

margin-top:12px;

display:flex;

flex-direction:column;

gap:8px;

}

.comment-item{

background:#f4f7f6;

padding:10px;

border-radius:11px;

font-size:12px;

line-height:1.5;

color:#38443f;

}

.comment-author{

font-weight:800;

color:#1c2722;

margin-bottom:4px;

}

.comment-time{

font-size:11px;

color:#78847e;

margin-top:4px;

}

/* =========================================================
TIMESTAMP
========================================================= */

.timeline-time{

font-size:11px;

color:#888;

margin-top:11px;

}

/* =========================================================
LOADING / EMPTY / ERROR
========================================================= */

.loading,
.empty-feed,
.error-box{

background:#fff;

padding:20px;

border-radius:16px;

box-shadow:
    0 7px 20px rgba(0,0,0,.05);

font-size:14px;

}

.loading,
.empty-feed{

color:#66746d;

text-align:center;

}

.error-box{

color:#b02a37;

border-left:4px solid #b02a37;

background:#fffafa;

}

/* =========================================================
FEED FOOTER
========================================================= */

.feed-footer{

padding:14px 16px 18px;

font-size:12px;

color:#777;

text-align:center;

line-height:1.65;

}

/* =========================================================
IMAGE MODAL
========================================================= */

.image-modal{

position:fixed;

inset:0;

background:rgba(0,0,0,.86);

display:none;

align-items:center;

justify-content:center;

z-index:9999;

padding:20px;

box-sizing:border-box;

backdrop-filter:blur(5px);

}

.image-modal.show{

display:flex;

}

.image-modal img{

max-width:95%;

max-height:90%;

border-radius:14px;

box-shadow:
    0 12px 40px rgba(0,0,0,.40);

object-fit:contain;

}

/* =========================================================
MUTED
========================================================= */

.muted{

color:#6d7973;

font-size:12px;

}

/* =========================================================
DOCK NAV
STRUCTURE PRESERVED
========================================================= */

.dock-nav{

position:fixed;

left:0;

right:0;

bottom:0;

z-index:300;

transition:
    transform .28s ease,

    opacity .28s ease;

}

.dock-nav.hide{

transform:translateY(110%);

opacity:.2;

}

/* =========================================================
MOBILE
========================================================= */

@media(max-width:820px){

.page-shell{

    max-width:100%;

}

.filter-bar{

    grid-template-columns:1fr;

}

.filter-btn{

    width:100%;

}

.comment-box{

    flex-direction:column;

}

.comment-box button{

    width:100%;

    height:42px;

}

.image-wrapper{

    height:190px;

}

.timeline-card{

    border-radius:18px;

    padding:14px;

}

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media(max-width:480px){

.header{

    height:58px;

    padding:0 14px;

}

.brand{

    font-size:17px;

}

.top-nav{

    padding:12px 14px;

    gap:8px;

}

.nav-btn{

    font-size:12px;

    min-height:42px;

    padding:9px 8px;

}

.content{

    padding:0 14px 18px;

}

.hero-card{

    padding:17px;

    border-radius:19px;

}

.hero-title{

    font-size:17px;

}

.hero-sub{

    font-size:12px;

}

.section-title{

    font-size:15px;

}

.timeline-project{

    font-size:14px;

}

.timeline-title{

    font-size:14px;

}

.timeline-desc{

    font-size:12.5px;

}

.timeline-actions{

    gap:7px;

}

.timeline-actions button{

    padding:8px 10px;

    font-size:11px;

}

.image-wrapper{

    height:180px;

}

}

/* =========================================================
REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

*{

    scroll-behavior:auto !important;

    transition:none !important;

    animation:none !important;

}

      }
/* ======================================
   ALBUKHR GLOBAL BOTTOM NAV
====================================== */
:root{
  --albukhr-gold:#d4af37;
  --albukhr-gold-light:#f6d776;
  --albukhr-gold-dark:#b8962e;
}

.dock-nav{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  width:92%;
  max-width:520px;
  height:70px;

  display:flex;
  justify-content:space-around;
  align-items:center;

  border-radius:40px;

  background:linear-gradient(
    135deg,
    rgba(15,122,61,0.85),
    rgba(20,157,82,0.85)
  );

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    0 14px 40px rgba(0,0,0,0.28),
    inset 0 2px 6px rgba(255,255,255,0.15);

  z-index:1000;
}

/* nav item */

.dock-item{
  flex:1;
  text-align:center;
  text-decoration:none;

  font-size:10px;
  color:#e6f5ec;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  position:relative;

  transition:.25s ease;
}

/* icon */

.dock-icon{
  width:26px;
  height:26px;
  stroke:#e6f5ec;
  stroke-width:2;
  margin-bottom:4px;
  transition:.25s ease;
}

/* active */

.dock-item.active{
  color:#fff;
  font-weight:600;
}

.dock-item.active .dock-icon{
  stroke:var(--albukhr-gold);

  transform:
    translateY(-4px)
    scale(1.15);

  filter:
    drop-shadow(0 0 6px rgba(212,175,55,.8))
    drop-shadow(0 0 12px rgba(212,175,55,.5));

  transition:all .25s ease;
}

.dock-item{
  transition:all .25s ease;
}

.dock-item:active{
  transform:scale(.92);
}

.dock-item:hover .dock-icon{
  transform:translateY(-2px) scale(1.08);
   }

/* active bubble */

.dock-item.active::before{
  content:"";
  position:absolute;

  top:-6px;
  bottom:-6px;
  left:50%;
  transform:translateX(-50%);

  width:70%;

  background:linear-gradient(
    180deg,
    rgba(212,175,55,0.25),
    rgba(212,175,55,0.08)
  );

  border-radius:20px;
  z-index:-1;
                }

/* active indicator */

.dock-item.active::after{
  content:"";
  position:absolute;

  bottom:-6px;
  left:50%;
  transform:translateX(-50%);

  width:6px;
  height:6px;

  background:var(--albukhr-gold);

  border-radius:50%;

  box-shadow:
    0 0 6px rgba(212,175,55,0.9),
    0 0 12px rgba(212,175,55,0.6);
}

/* tap animation */

.dock-item:active .dock-icon{
  transform:scale(.9);
}

@keyframes goldGlow{
  0%{filter:drop-shadow(0 0 3px rgba(212,175,55,.6))}
  50%{filter:drop-shadow(0 0 8px rgba(212,175,55,.9))}
  100%{filter:drop-shadow(0 0 3px rgba(212,175,55,.6))}
}

.dock-item.active .dock-icon{
  animation:goldGlow 2s ease-in-out infinite;
  }